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>
);

Pros:

• More discoverable
• Works as expected
• Allows configurable datagrid without ConfigurableDatagrid
• Much more optimized without even using optimized

Cons:

• More verbose

How To Test

I've added a storybook for DataTable

Todos

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

We won't make <DataTable> the recommended datagrid component yet - we'll wait for feedback first.

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