Add <DataTable> component

[fzaninotto]

Problem

<Datagrid> is fine, but since it uses child inspection, it leads to unexpected bugs when developers wrap children with custom components. For instance, it's not possible to use <CanAccess> to wrap a field:

const PostList = () => (
  <List>
    <Datagrid>
      <TextField source="title" />
      <DateField source="published_at" />
      <CanAccess action="read" resource="posts.views">
        <NumberField source="nb_views" />
      </CanAccess>
   </Datagrid>
 </List>
);

Besides, the signature of all field components is polluted by props that only serve in datagrid columns (e.g. sortBy, label, etc). In fact, field components mix 2 purposes: datagrid columns and record field formatting.

Solution

An alternative data table component named <DataTable> that no longer uses child inspection.

The following works as expected:

const PostList = () => (
  <List>
    <DataTable>
      <DataTable.Col source="title" />
      <DataTable.Col source="published_at" field={DateField} />
      <CanAccess action="read" resource="posts.views">
        <DataTable.Col source="nb_views" field={NumberField} />
      </CanAccess>
   </DataTable>
 </List>
);

The new syntax covers 100% of the <Datagrid> features, and supports various new features.

Pros:

• IDE-friendly, more discoverable syntax
• Allows wrapped columns (no WTF)
• Easier column styling (via <DataTable.Col sx>)
• Conditional formatting (via <DataTable.Col cellSx>)
• Built-in support for FunctionField (via <DataTable.Col render>)
• Support for column selector (no need for <ConfigurableDatagrid>)
• Optimized by default (no need for optimized prop)
• More type-safety than Datagrid
• The sortBy prop is no longer necessary (it's the <DataTable.Col source>)
• Allows to build custom reusable columns (e.g., <DataTable.NumberCol>)
• Fields no longer need to support column-only props (sortable, sortByOrder, label, etc).
• Expandable rows now animate on expand
• In standalone mode, it's no longer necessary to set bulkActionButtons={false}

Cons:

• More characters to type
• In some cases, developers have to repeat the source both in the <DataTable.Col> and in the Field
• No backward compatibility, the two components will have to live side-by-side for some time

How To Test

I've added a storybook for DataTable and DataTable.Col.

Todos

• Add <DataTable> component
• Add <DataTable.Col> component
• Add <ColumnsButton> component
• Migrate demos to <DataTable>
• Add documentation for <DataTable>

Out of cope

• Make <DataTable> the recommended datagrid component yet (we'll wait for feedback first).
• Replace every <Datagrid> in documentation with <DataTable>
• Replace every <Datagrid> in stories with <DataTable>

Additional Checks

• The PR targets next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date

[djhi]

Awesome work! The DX improvement is great. I noticed that only the DataTable component can be targeted in the theme. Is it expected? Also, it would be great to support default props override through theme in all our new components (https://mui.com/material-ui/customization/creating-themed-components/#4-support-theme-default-props).

[djhi]

As the default value is true, I would instead name this disableHover

[fzaninotto]

This is actually a MUI TableRow prop, Id rather keep the same syntax.

https://mui.com/material-ui/api/table-row/

[djhi]

As there is a better way to do this, maybe change the example to add a vertical colored border depending on the status like in our demo review list?

[fzaninotto]

There is also a better way to do what you describe (cf the rowSx doc). I don't have any other example in mind.

[djhi]

This one isn't used in the list below

[fzaninotto]

fixed

[djhi]

If I'm not mistaken, all tables have the same columns except DeliveredOrdersTable that adds the returned column. Can't we have a CommonColumn const that has a Fragment containing the common cols. That's a good test and showcase of what the new DataTable allows too!

[fzaninotto]

fixed

[djhi]

This one should accept a RecordType generic parameter and cast the result accordingly

[fzaninotto]

done

[djhi]

Nice component but it does not showcase Fragments to group columns that you can still use as the DataTable children which was impossible with Datagrid if I'm not mistaken. Your call though

[djhi]

Can you:

• add a i18nProvider to all stories, they would be nicer
• add more top margin or a title in all stories so that the bulk actions toolbar is not cropped
• improve the expand stories (the expand content is ugly
• improve the fullapp story expand content (same)

Also:
In the AccessControl story, when none is selected in the storybook control, you still have the hand mouse pointer which is confusing as there is no action.

Finally, this is awesome!

[djhi]

Replying myself on some of these:

• add a i18nProvider to all stories, they would be nicer

You added it on some stories so I suspect you didn't do it on all on purpose. Ignore this one

Also: In the AccessControl story, when none is selected in the storybook control, you still have the hand mouse pointer which is confusing as there is no action.

I tried to fix it but I can't as we only check for access right on click. Ignore this one