DataGrid component

[jpveooys]

Description

As recently discussed, there is a common need for an advanced table component that is specifically designed for data.

For our project, the following would be useful (comparing with the Table component):

• Checkboxes for each row, as per #2657

  This includes a select all checkbox in the header, and shading of selected rows. It should also be possible to disable some rows/checkboxes. See also my comment on that issue.

• Review of font size and use of capitals in the header

  These both seem inconsistent with other components in the design system. On the font size, it becomes noticeable when comparing with other things on the page, and when you embed other components in a table cell.

• Review of background colour

  It currently doesn't have one, so it ends up being transparent. Perhaps it should have a default background colour, and people can override it using Styled Components if they want something different.

• Perhaps easier control over column widths

  Currently Table uses table-layout: fixed, which results in each column having an equal width by default (not so useful when the contents of some columns are wider than others).

  table-layout: auto works okay for us for now. But I can imagine scenarios where you would want table-layout: fixed with percentages for some columns (e.g. if you have pagination, you probably don't want the column widths to change when navigating between pages). This could be probably be currently done with the css prop on TableColumn, but perhaps it could be nicer.

• Right-aligned columns

  There may be cases where right-aligned columns (including the heading) are needed e.g. for numbers.

If I can think of anything else will post back here.

[arifliya]

The use of buttons in the table may also affect how they display in the table too and whether they will align properly or not.

[m7kvqbe1]

We have now started to work on a DataGrid component.

The base implementation will have feature parity with the current Table.

It will also include the enhancements suggested within this issue (amongst others).

When it ships we intend to deprecate the Table component.