-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Add <DataTable>
component
#10597
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add <DataTable>
component
#10597
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).
| `header` | Optional | Element | `<DataTable Header>` | The component rendering the table header. | | ||
| `hiddenColumns` | Optional | Array | `[]` | The list of columns to hide by default. | | ||
| `footer` | Optional | Element | | The component rendering the table footer. | | ||
| `hover` | Optional | Boolean | `true` | Whether to highlight the row under the mouse. | |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As the default value is true
, I would instead name this disableHover
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is actually a MUI TableRow
prop, Id rather keep the same syntax.
``` | ||
{% endraw %} | ||
|
||
**Tip**: `<DataTable>` already sets `RaDataTable-rowEven` and `RaDataTable-rowOdd` classes on the rows, so you don't need to use a custom DataTable body to implement zebra stripes. You can just use [the `sx` prop](#sx-css-api) to set the background color of these classes. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is also a better way to do what you describe (cf the rowSx
doc). I don't have any other example in mind.
docs/DataTable.md
Outdated
import { type Review } from '../types'; | ||
|
||
const Column = DataTable.Col<Review>; | ||
const ColumnNumber = DataTable.NumberCol<Review>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one isn't used in the list below
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
<DataTable | ||
rowClick="edit" | ||
hiddenColumns={['total_ex_taxes', 'delivery_fees', 'taxes']} | ||
storeKey={storeKeyByStatus.ordered} | ||
> | ||
<Column source="date"> | ||
<DateField source="date" showTime /> | ||
</Column> | ||
<Column source="reference" /> | ||
<Column source="customer_id" field={CustomerReferenceField} /> | ||
<Column label="resources.orders.fields.address"> | ||
<ReferenceField | ||
source="customer_id" | ||
reference="customers" | ||
link={false} | ||
> | ||
<AddressField /> | ||
</ReferenceField> | ||
</Column> | ||
<ColumnNumber | ||
source="basket.length" | ||
label="resources.orders.fields.nb_items" | ||
/> | ||
<ColumnNumber source="total_ex_taxes" options={currencyStyle} /> | ||
<ColumnNumber source="delivery_fees" options={currencyStyle} /> | ||
<ColumnNumber source="taxes" options={currencyStyle} /> | ||
<ColumnNumber | ||
source="total" | ||
options={currencyStyle} | ||
sx={{ fontWeight: 'bold' }} | ||
/> | ||
</DataTable> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
packages/ra-ui-materialui/src/list/datatable/DataTable.stories.tsx
Outdated
Show resolved
Hide resolved
|
||
export const DataTableDataContext = createContext<any[] | undefined>(undefined); | ||
|
||
export const useDataTableDataContext = () => useContext(DataTableDataContext); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This one should accept a RecordType
generic parameter and cast the result accordingly
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
Co-authored-by: Gildas Garcia <[email protected]>
const Column = DataTable.Col<Order>; | ||
const ColumnNumber = DataTable.NumberCol<Order>; | ||
|
||
const OrdersTable = React.memo( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
Replying myself on some of these:
You added it on some stories so I suspect you didn't do it on all on purpose. Ignore this one
I tried to fix it but I can't as we only check for access right on click. Ignore this one |
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: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:
The new syntax covers 100% of the
<Datagrid>
features, and supports various new features.Pros:
<DataTable.Col sx>
)<DataTable.Col cellSx>
)<DataTable.Col render>
)<ConfigurableDatagrid>
)optimized
prop)Datagrid
sortBy
prop is no longer necessary (it's the<DataTable.Col source>
)<DataTable.NumberCol>
)sortable
,sortByOrder
,label
, etc).bulkActionButtons={false}
Cons:
source
both in the<DataTable.Col>
and in theField
How To Test
I've added a storybook for
DataTable
andDataTable.Col
.Todos
<DataTable>
component<DataTable.Col>
component<ColumnsButton>
component<DataTable>
<DataTable>
Out of cope
<DataTable>
the recommended datagrid component yet (we'll wait for feedback first).<Datagrid>
in documentation with<DataTable>
<Datagrid>
in stories with<DataTable>
Additional Checks
next
for a feature