Customisable table sizing and column widths for data tables

[DBD324]

Summary

When implementing a data table, a developer needs to be able to specify column widths and row heights so that the table view can be customized.

💰 User value

Important to allow data to be displayed optimally.

📚 User Stories

If relevant, describe the high-level functionality as user stories.

As an ICDS user: I need to be able to specify column widths and row heights So that my table can be customised.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

In general the process of sizing a data table and its columns should follow this process:

1. Size the data table, either fixed, or auto width.
2. Size any fixed columns and leave others as auto width.
3. Remaining auto width columns fill remaining space equally, and if no remaining space, then auto-width columns are set to the default 128px, and then table is horizontally scrollable. (Will need to re-review this)

Table sizing Given that a data table is being implemented When setting its properties Then its full width can be defined either as a fixed value, or it can be set to auto width which is the default value.

Given that a data table has been provided a fixed width When its columns' summed widths exceed this fixed width Then the data table should allow horizontal scrolling.

Given that a data table is being implemented When setting its properties Then a minimum width and maximum width can be specified, And an auto-width data table should not exceed these limits if specified.

Given that a data table is set to auto width When its columns' summed width exceed the maxWidth or available space for the data table (either viewport or container) Then the table should allow horizontal scrolling.

Column widths Given that a data table is being implemented When setting its properties Then an option exists to specify individual column widths.

Given that a column in a data table exists When no sizing information is provided Then it should default to autoWidth.

Given that a column is set to autoWidth, When its size is calculated Then a min-width of 64px should not be exceeded And the table should horizontally scroll if all auto-width columns can't be included.

Given that a table exists When setting properties Then an option exists to change the minWidth for columns.

Given that a data table is being implmented When column width is being specified as autoWidth Then the remaining available space after fixed size columns are accounted for is equally divided between all columns with 'autoWidth'

Given that a data table is being implemented When column width properties are being specified Then a fixed value for column width can be specified either in px, rem, %.

Given that a data table is being implemented When setting its properties Then an option exists to specify individual row heights.

✏ Designs

If there's a Figma design file (or other mock-up), include it here.

 🧾 Guidance

If there's written guidance or documentation, include it here.

[GCHQ-Developer-299]

Paused development as we prioritise truncation #1003

[MI6-255]

Blocked by the above issue

[jd239]

Branch: canary/data-tables-column-width. Some initial work has started on this ticket, this includes:

• adding tableWidth prop
• setting columnWidth
• columnWidth object that accepts width, minWidth and maxWidth (Further investigation into setting min/max width on cols)

  export const COLS_WIDTH: IcDataTableColumnObject[] = [
  {
  key: "firstName",
  title: "First name",
  dataType: "string",
  columnWidth: '12.5rem'
  },
  {
  key: "lastName",
  title: "Last name",
  dataType: "string",
  columnWidth: {
      minWidth: '50px',
      maxWidth: '250px'
  },
  ...

• columnWidth accepts %, px or %.
• horizontal scroll bar appears if column width exceed initial table width
• Works alongside truncation-pattern: tooltip.

[jd239]

@GCHQ-Developer-299 has looked over the current functionality in canary/data-tables-column-width and the ACs as a sanity check. We have agreed that this current ticket is now 3 story points. The remaining work is:

• Writing Cypress tests

• Remaining auto width columns fill remaining space equally, and if no remaining space, then auto-width columns are set to the default 128px, and then table is horizontally scrollable. (Will need to re-review this)

• Given that a data table is being implemented When setting its properties Then a minimum width and maximum width can be specified, And an auto-width data table should not exceed these limits if specified.

• Given that a column is set to autoWidth, When its size is calculated Then a min-width of 64px should not be exceeded And the table should horizontally scroll if all auto-width columns can't be included.

• Given that a table exists When setting properties Then an option exists to change the minWidth for columns.

[MI6-255]

Add guidance issue

[jd239]

Based on the min/max-width spec, the behaviour on a table-cell is undefined: https://www.w3.org/TR/CSS21/visudet.html#propdef-max-width. Some additional testing has been carried out and min/max width is not taken into account as the width of the table is 100% or set to a smaller width then the min/max width. As a result of this, the min/max-width requirement is not part of this ticket.