@lminii/material-react-table-mcp 4.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +68 -0
- package/data/MIGRATION.md +136 -0
- package/data/api.json +5379 -0
- package/data/examples/advanced.js +215 -0
- package/data/examples/advanced.tsx +309 -0
- package/data/examples/aggregation-and-grouping.js +116 -0
- package/data/examples/aggregation-and-grouping.tsx +153 -0
- package/data/examples/aggregation-multi.js +89 -0
- package/data/examples/aggregation-multi.tsx +105 -0
- package/data/examples/alternate-column-filtering.js +38 -0
- package/data/examples/alternate-column-filtering.tsx +49 -0
- package/data/examples/alternate-detail-panel.js +65 -0
- package/data/examples/alternate-detail-panel.tsx +81 -0
- package/data/examples/alternate-pagination.js +17 -0
- package/data/examples/alternate-pagination.tsx +23 -0
- package/data/examples/basic.js +86 -0
- package/data/examples/basic.tsx +109 -0
- package/data/examples/chart-detail-panel.js +69 -0
- package/data/examples/chart-detail-panel.tsx +89 -0
- package/data/examples/column-actions-space.js +34 -0
- package/data/examples/column-actions-space.tsx +44 -0
- package/data/examples/column-alignment.js +58 -0
- package/data/examples/column-alignment.tsx +70 -0
- package/data/examples/custom-column-actions.js +74 -0
- package/data/examples/custom-column-actions.tsx +109 -0
- package/data/examples/custom-column-filtering-ui.js +59 -0
- package/data/examples/custom-column-filtering-ui.tsx +89 -0
- package/data/examples/custom-headless.js +85 -0
- package/data/examples/custom-headless.tsx +125 -0
- package/data/examples/custom-top-toolbar.js +60 -0
- package/data/examples/custom-top-toolbar.tsx +88 -0
- package/data/examples/customize-display-columns.js +72 -0
- package/data/examples/customize-display-columns.tsx +85 -0
- package/data/examples/customize-filter-components.js +78 -0
- package/data/examples/customize-filter-components.tsx +101 -0
- package/data/examples/customize-filter-modes.js +59 -0
- package/data/examples/customize-filter-modes.tsx +73 -0
- package/data/examples/customize-filter-variants.js +98 -0
- package/data/examples/customize-filter-variants.tsx +116 -0
- package/data/examples/customize-global-filter-component.js +37 -0
- package/data/examples/customize-global-filter-component.tsx +52 -0
- package/data/examples/customize-remove-column-grouping.js +75 -0
- package/data/examples/customize-remove-column-grouping.tsx +94 -0
- package/data/examples/customize-row-selection.js +43 -0
- package/data/examples/customize-row-selection.tsx +54 -0
- package/data/examples/customize-table-styles.js +81 -0
- package/data/examples/customize-table-styles.tsx +100 -0
- package/data/examples/disable-column-actions.js +26 -0
- package/data/examples/disable-column-actions.tsx +37 -0
- package/data/examples/disable-column-hiding.js +74 -0
- package/data/examples/disable-column-hiding.tsx +90 -0
- package/data/examples/disable-density-toggle.js +37 -0
- package/data/examples/disable-density-toggle.tsx +49 -0
- package/data/examples/dynamic-columns.js +124 -0
- package/data/examples/dynamic-columns.tsx +189 -0
- package/data/examples/editing-crud-cell.js +288 -0
- package/data/examples/editing-crud-cell.tsx +377 -0
- package/data/examples/editing-crud-modal.js +275 -0
- package/data/examples/editing-crud-modal.tsx +370 -0
- package/data/examples/editing-crud-row.js +255 -0
- package/data/examples/editing-crud-row.tsx +333 -0
- package/data/examples/editing-crud-table.js +280 -0
- package/data/examples/editing-crud-table.tsx +369 -0
- package/data/examples/editing-crud-tree.js +328 -0
- package/data/examples/editing-crud-tree.tsx +416 -0
- package/data/examples/enable-cell-actions.js +52 -0
- package/data/examples/enable-cell-actions.tsx +76 -0
- package/data/examples/enable-click-to-copy.js +33 -0
- package/data/examples/enable-click-to-copy.tsx +39 -0
- package/data/examples/enable-column-grouping.js +69 -0
- package/data/examples/enable-column-grouping.tsx +120 -0
- package/data/examples/enable-column-ordering.js +37 -0
- package/data/examples/enable-column-ordering.tsx +48 -0
- package/data/examples/enable-column-pinning.js +58 -0
- package/data/examples/enable-column-pinning.tsx +69 -0
- package/data/examples/enable-column-resizing.js +45 -0
- package/data/examples/enable-column-resizing.tsx +56 -0
- package/data/examples/enable-column-virtualization.js +19 -0
- package/data/examples/enable-column-virtualization.tsx +27 -0
- package/data/examples/enable-detail-panel-conditionally.js +61 -0
- package/data/examples/enable-detail-panel-conditionally.tsx +78 -0
- package/data/examples/enable-detail-panel-virtualized.js +64 -0
- package/data/examples/enable-detail-panel-virtualized.tsx +80 -0
- package/data/examples/enable-expanding-tree.js +87 -0
- package/data/examples/enable-expanding-tree.tsx +110 -0
- package/data/examples/enable-filter-facet-values.js +52 -0
- package/data/examples/enable-filter-facet-values.tsx +65 -0
- package/data/examples/enable-row-dragging.js +102 -0
- package/data/examples/enable-row-dragging.tsx +137 -0
- package/data/examples/enable-row-numbers-original.js +37 -0
- package/data/examples/enable-row-numbers-original.tsx +48 -0
- package/data/examples/enable-row-numbers-static.js +37 -0
- package/data/examples/enable-row-numbers-static.tsx +48 -0
- package/data/examples/enable-row-ordering.js +40 -0
- package/data/examples/enable-row-ordering.tsx +57 -0
- package/data/examples/enable-row-pinning-select.js +64 -0
- package/data/examples/enable-row-pinning-select.tsx +76 -0
- package/data/examples/enable-row-pinning-static.js +39 -0
- package/data/examples/enable-row-pinning-static.tsx +50 -0
- package/data/examples/enable-row-pinning-sticky.js +57 -0
- package/data/examples/enable-row-pinning-sticky.tsx +69 -0
- package/data/examples/enable-row-selection.js +71 -0
- package/data/examples/enable-row-selection.tsx +96 -0
- package/data/examples/enable-row-virtualization.js +85 -0
- package/data/examples/enable-row-virtualization.tsx +101 -0
- package/data/examples/enable-sticky-header.js +47 -0
- package/data/examples/enable-sticky-header.tsx +59 -0
- package/data/examples/expanding-tree-expanded.js +98 -0
- package/data/examples/expanding-tree-expanded.tsx +121 -0
- package/data/examples/expanding-tree-flat-parse.js +102 -0
- package/data/examples/expanding-tree-flat-parse.tsx +125 -0
- package/data/examples/expanding-tree-root-expanded.js +120 -0
- package/data/examples/expanding-tree-root-expanded.tsx +151 -0
- package/data/examples/export-to-csv.js +84 -0
- package/data/examples/export-to-csv.tsx +114 -0
- package/data/examples/export-to-pdf.js +76 -0
- package/data/examples/export-to-pdf.tsx +104 -0
- package/data/examples/external-toolbar.js +82 -0
- package/data/examples/external-toolbar.tsx +108 -0
- package/data/examples/font-awesome-icons.js +62 -0
- package/data/examples/font-awesome-icons.tsx +106 -0
- package/data/examples/infinite-scrolling.js +137 -0
- package/data/examples/infinite-scrolling.tsx +208 -0
- package/data/examples/lazy-detail-panel.js +164 -0
- package/data/examples/lazy-detail-panel.tsx +262 -0
- package/data/examples/lazy-sub-rows.js +118 -0
- package/data/examples/lazy-sub-rows.tsx +190 -0
- package/data/examples/linear-progress.js +48 -0
- package/data/examples/linear-progress.tsx +66 -0
- package/data/examples/loading.js +34 -0
- package/data/examples/loading.tsx +50 -0
- package/data/examples/localization-i18n-ar.js +40 -0
- package/data/examples/localization-i18n-ar.tsx +65 -0
- package/data/examples/localization-i18n-az.js +38 -0
- package/data/examples/localization-i18n-az.tsx +60 -0
- package/data/examples/localization-i18n-bg.js +38 -0
- package/data/examples/localization-i18n-bg.tsx +60 -0
- package/data/examples/localization-i18n-cs.js +38 -0
- package/data/examples/localization-i18n-cs.tsx +60 -0
- package/data/examples/localization-i18n-da.js +38 -0
- package/data/examples/localization-i18n-da.tsx +60 -0
- package/data/examples/localization-i18n-de.js +38 -0
- package/data/examples/localization-i18n-de.tsx +60 -0
- package/data/examples/localization-i18n-el.js +38 -0
- package/data/examples/localization-i18n-el.tsx +60 -0
- package/data/examples/localization-i18n-en.js +38 -0
- package/data/examples/localization-i18n-en.tsx +60 -0
- package/data/examples/localization-i18n-es.js +38 -0
- package/data/examples/localization-i18n-es.tsx +60 -0
- package/data/examples/localization-i18n-et.js +38 -0
- package/data/examples/localization-i18n-et.tsx +60 -0
- package/data/examples/localization-i18n-fa.js +40 -0
- package/data/examples/localization-i18n-fa.tsx +66 -0
- package/data/examples/localization-i18n-fi.js +38 -0
- package/data/examples/localization-i18n-fi.tsx +60 -0
- package/data/examples/localization-i18n-fr.js +38 -0
- package/data/examples/localization-i18n-fr.tsx +60 -0
- package/data/examples/localization-i18n-he.js +40 -0
- package/data/examples/localization-i18n-he.tsx +66 -0
- package/data/examples/localization-i18n-hr.js +38 -0
- package/data/examples/localization-i18n-hr.tsx +60 -0
- package/data/examples/localization-i18n-hu.js +38 -0
- package/data/examples/localization-i18n-hu.tsx +60 -0
- package/data/examples/localization-i18n-hy.js +40 -0
- package/data/examples/localization-i18n-hy.tsx +65 -0
- package/data/examples/localization-i18n-id.js +38 -0
- package/data/examples/localization-i18n-id.tsx +60 -0
- package/data/examples/localization-i18n-it.js +38 -0
- package/data/examples/localization-i18n-it.tsx +60 -0
- package/data/examples/localization-i18n-ja.js +38 -0
- package/data/examples/localization-i18n-ja.tsx +60 -0
- package/data/examples/localization-i18n-ko.js +38 -0
- package/data/examples/localization-i18n-ko.tsx +60 -0
- package/data/examples/localization-i18n-nl.js +38 -0
- package/data/examples/localization-i18n-nl.tsx +60 -0
- package/data/examples/localization-i18n-no.js +38 -0
- package/data/examples/localization-i18n-no.tsx +60 -0
- package/data/examples/localization-i18n-np.js +38 -0
- package/data/examples/localization-i18n-np.tsx +60 -0
- package/data/examples/localization-i18n-pl.js +38 -0
- package/data/examples/localization-i18n-pl.tsx +60 -0
- package/data/examples/localization-i18n-pt-BR.js +38 -0
- package/data/examples/localization-i18n-pt-BR.tsx +60 -0
- package/data/examples/localization-i18n-pt.js +38 -0
- package/data/examples/localization-i18n-pt.tsx +60 -0
- package/data/examples/localization-i18n-ro.js +38 -0
- package/data/examples/localization-i18n-ro.tsx +60 -0
- package/data/examples/localization-i18n-ru.js +38 -0
- package/data/examples/localization-i18n-ru.tsx +60 -0
- package/data/examples/localization-i18n-sk.js +38 -0
- package/data/examples/localization-i18n-sk.tsx +60 -0
- package/data/examples/localization-i18n-sr-Cyrl-RS.js +38 -0
- package/data/examples/localization-i18n-sr-Cyrl-RS.tsx +60 -0
- package/data/examples/localization-i18n-sr-Latn-RS.js +38 -0
- package/data/examples/localization-i18n-sr-Latn-RS.tsx +60 -0
- package/data/examples/localization-i18n-sv.js +38 -0
- package/data/examples/localization-i18n-sv.tsx +60 -0
- package/data/examples/localization-i18n-tr.js +38 -0
- package/data/examples/localization-i18n-tr.tsx +60 -0
- package/data/examples/localization-i18n-uk.js +38 -0
- package/data/examples/localization-i18n-uk.tsx +60 -0
- package/data/examples/localization-i18n-vi.js +38 -0
- package/data/examples/localization-i18n-vi.tsx +60 -0
- package/data/examples/localization-i18n-zh-hans.js +38 -0
- package/data/examples/localization-i18n-zh-hans.tsx +60 -0
- package/data/examples/localization-i18n-zh-hant.js +38 -0
- package/data/examples/localization-i18n-zh-hant.tsx +60 -0
- package/data/examples/manual-selection.js +81 -0
- package/data/examples/manual-selection.tsx +105 -0
- package/data/examples/minimal.js +66 -0
- package/data/examples/minimal.tsx +78 -0
- package/data/examples/mui-theme.js +109 -0
- package/data/examples/mui-theme.tsx +136 -0
- package/data/examples/multi-sorting.js +48 -0
- package/data/examples/multi-sorting.tsx +58 -0
- package/data/examples/persistent-state.js +126 -0
- package/data/examples/persistent-state.tsx +184 -0
- package/data/examples/react-query.js +122 -0
- package/data/examples/react-query.tsx +182 -0
- package/data/examples/remote.js +113 -0
- package/data/examples/remote.tsx +150 -0
- package/data/examples/row-actions-buttons.js +54 -0
- package/data/examples/row-actions-buttons.tsx +89 -0
- package/data/examples/row-actions-menu-items.js +36 -0
- package/data/examples/row-actions-menu-items.tsx +64 -0
- package/data/examples/single-row-selection.js +74 -0
- package/data/examples/single-row-selection.tsx +98 -0
- package/data/examples/virtualized.js +122 -0
- package/data/examples/virtualized.tsx +138 -0
- package/data/guides/accessibility.md +119 -0
- package/data/guides/aggregation.md +210 -0
- package/data/guides/async-loading.md +132 -0
- package/data/guides/best-practices.md +363 -0
- package/data/guides/cell-actions.md +139 -0
- package/data/guides/click-to-copy.md +67 -0
- package/data/guides/column-actions.md +69 -0
- package/data/guides/column-filtering.md +366 -0
- package/data/guides/column-grouping.md +192 -0
- package/data/guides/column-hiding.md +133 -0
- package/data/guides/column-ordering-dnd.md +99 -0
- package/data/guides/column-pinning.md +72 -0
- package/data/guides/column-resizing.md +157 -0
- package/data/guides/column-size.md +162 -0
- package/data/guides/customize-components.md +395 -0
- package/data/guides/customize-icons.md +35 -0
- package/data/guides/data-columns.md +292 -0
- package/data/guides/density-toggle.md +46 -0
- package/data/guides/detail-panel.md +195 -0
- package/data/guides/display-columns.md +135 -0
- package/data/guides/editing.md +367 -0
- package/data/guides/expanding-sub-rows.md +194 -0
- package/data/guides/full-screen-toggle.md +63 -0
- package/data/guides/global-filtering.md +237 -0
- package/data/guides/localization.md +57 -0
- package/data/guides/memoization.md +157 -0
- package/data/guides/pagination.md +171 -0
- package/data/guides/row-actions.md +116 -0
- package/data/guides/row-numbers.md +24 -0
- package/data/guides/row-ordering-dnd.md +51 -0
- package/data/guides/row-pinning.md +96 -0
- package/data/guides/row-selection.md +237 -0
- package/data/guides/sorting.md +190 -0
- package/data/guides/state-management.md +165 -0
- package/data/guides/sticky-header.md +41 -0
- package/data/guides/table-event-listeners.md +103 -0
- package/data/guides/toolbar-customization.md +251 -0
- package/data/guides/virtualization.md +183 -0
- package/data/index.json +1930 -0
- package/data/reference/mrt-components.md +183 -0
- package/data/reference/mrt-hooks.md +125 -0
- package/data/skills/README.md +81 -0
- package/data/skills/composable-components/SKILL.md +189 -0
- package/data/skills/customization/SKILL.md +190 -0
- package/data/skills/drag-and-drop-ordering/SKILL.md +227 -0
- package/data/skills/editing/SKILL.md +243 -0
- package/data/skills/filtering/SKILL.md +213 -0
- package/data/skills/getting-started/SKILL.md +213 -0
- package/data/skills/localization/SKILL.md +182 -0
- package/data/skills/migrate-v3-to-v4/SKILL.md +161 -0
- package/data/skills/state-and-server-data/SKILL.md +200 -0
- package/data/skills/virtualization/SKILL.md +203 -0
- package/dist/data.js +159 -0
- package/dist/index.js +244 -0
- package/package.json +50 -0
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
## MRT Components
|
|
2
|
+
|
|
3
|
+
In previous versions of `material-react-table`, you only had the option to use the `<MaterialReactTable />` component. Now in version 2, all internal MRT components are exported for you to optionally use to build up your own custom table components.
|
|
4
|
+
|
|
5
|
+
### \<MaterialReactTable /\>
|
|
6
|
+
|
|
7
|
+
[View Source Code on GitHub](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/components/MaterialReactTable.tsx)
|
|
8
|
+
|
|
9
|
+
For most use cases, you will probably just use the default `<MaterialReactTable />` component.
|
|
10
|
+
|
|
11
|
+
It accepts table options as props, just like in v1, but it also now simply accepts the `table` instance as its only prop instead. You have the choice to use the `useMaterialReactTable` hook to create the table instance in your own scope or not. Using the `table` prop with the `useMaterialReactTable` hook is recommended, because it will give you more flexibility as your table features get more complex.
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
import {
|
|
15
|
+
MaterialReactTable,
|
|
16
|
+
useMaterialReactTable,
|
|
17
|
+
} from 'material-react-table';
|
|
18
|
+
//...
|
|
19
|
+
const table = useMaterialReactTable({
|
|
20
|
+
columns,
|
|
21
|
+
data,
|
|
22
|
+
enableRowPinning: true,
|
|
23
|
+
});
|
|
24
|
+
return <MaterialReactTable table={table} />; //recommended
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
```jsx
|
|
28
|
+
import { MaterialReactTable } from 'material-react-table';
|
|
29
|
+
//...
|
|
30
|
+
return <MaterialReactTable columns={columns} data={data} enableRowPinning />; //passing props instead like in v1 is possible
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
> Do not pass both a `table` prop and other table options as props. Additional table options passed to the `<MaterialReactTable />` component will be ignored if a `table` prop is passed. Either specify all table options in the `useMaterialReactTable` hook or pass all of them as props to the `<MaterialReactTable />` component.
|
|
34
|
+
|
|
35
|
+
### MRT\_\* Sub Components
|
|
36
|
+
|
|
37
|
+
Material React Table now exports all of its internal components. You can use them for your own use cases.
|
|
38
|
+
|
|
39
|
+
#### Table Components
|
|
40
|
+
|
|
41
|
+
[View Table Components Source Code on GitHub](https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/src/components/table)
|
|
42
|
+
|
|
43
|
+
##### \<MRT_TablePaper /\>
|
|
44
|
+
|
|
45
|
+
The `<MRT_TablePaper />` component is the outermost component of the table. Using this is pretty much the same thing as using the `<MaterialReactTable />` component, except that you cannot pass table options as props to it.
|
|
46
|
+
|
|
47
|
+
The Paper component includes UI for the table and the toolbar components.
|
|
48
|
+
|
|
49
|
+
##### \<MRT_TableContainer /\>
|
|
50
|
+
|
|
51
|
+
The `<MRT_TableContainer />` component is the container for the table. It only contains the table ui, but none of the toolbar components.
|
|
52
|
+
|
|
53
|
+
This is a popular use case for tables that do not want the built-in toolbars, but still want all of the other table features.
|
|
54
|
+
|
|
55
|
+
##### \<MRT_Table /\>
|
|
56
|
+
|
|
57
|
+
The `<MRT_Table />` component contains the `<table>` element, and all of the table head, body, and footer components.
|
|
58
|
+
|
|
59
|
+
Be aware that using this deep of a component, you will lose out on row virtualization, modal editing, and full screen features. Use the above `<MRT_TableContainer />` if you want to use those features.
|
|
60
|
+
|
|
61
|
+
##### \<MRT_TableLoadingOverlay /\>
|
|
62
|
+
|
|
63
|
+
Shows a loading spinner over the table above the `MRT_Table` component when the table is loading.
|
|
64
|
+
|
|
65
|
+
#### TableHead Components
|
|
66
|
+
|
|
67
|
+
[View TableHead Components Source Code on GitHub](https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/src/components/head)
|
|
68
|
+
|
|
69
|
+
##### \<MRT_TableHead /\>
|
|
70
|
+
|
|
71
|
+
The `<MRT_TableHead />` component contains the `<thead>` element, and all of the table head rows.
|
|
72
|
+
|
|
73
|
+
##### \<MRT_TableHeadRow /\>
|
|
74
|
+
|
|
75
|
+
The `<MRT_TableHeadRow />` is a `<tr>` element that contains all of the table head cells in a row
|
|
76
|
+
|
|
77
|
+
##### \<MRT_TableHeadCell /\>
|
|
78
|
+
|
|
79
|
+
The `<MRT_TableHeadCell />` is a `<th>` element that contains all of the table head cell components. It contains all of the other table head cell components down below depending on which features are enabled.
|
|
80
|
+
|
|
81
|
+
##### \<MRT_TableHeadCellColumnActionsButton /\>
|
|
82
|
+
|
|
83
|
+
A button that opens up the column actions menu.
|
|
84
|
+
|
|
85
|
+
##### \<MRT_TableHeadCellSortLabel /\>
|
|
86
|
+
|
|
87
|
+
The Sort Icon Button and Label next to a table header
|
|
88
|
+
|
|
89
|
+
##### \<MRT_TableHeadCellFilterLabel /\>
|
|
90
|
+
|
|
91
|
+
The Filter Icon Button and Label next to a table header
|
|
92
|
+
|
|
93
|
+
##### \<MRT_TableHeadCellGrabHandle /\>
|
|
94
|
+
|
|
95
|
+
The Grab Handle Icon Button next to a table header used for column dragging
|
|
96
|
+
|
|
97
|
+
##### \<MRT_TableHeadCellResizeHandle /\>
|
|
98
|
+
|
|
99
|
+
The Resize Handle Icon Button next to a table header used for column resizing
|
|
100
|
+
|
|
101
|
+
##### \<MRT_TableHeadCellFilterContainer /\>
|
|
102
|
+
|
|
103
|
+
The Filter Container that contains the filter input and filter actions
|
|
104
|
+
|
|
105
|
+
#### TableBody Components
|
|
106
|
+
|
|
107
|
+
[View TableBody Components Source Code on GitHub](https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/src/components/body)
|
|
108
|
+
|
|
109
|
+
##### \<MRT_TableBody /\>
|
|
110
|
+
|
|
111
|
+
The `<MRT_TableBody />` component contains the `<tbody>` element, and all of the table body rows. It has the ability to render multiple table bodies, depending on if static row pinning features are enabled and used.
|
|
112
|
+
|
|
113
|
+
##### \<MRT_TableBodyRow /\>
|
|
114
|
+
|
|
115
|
+
The `<MRT_TableBodyRow />` is a `<tr>` element that contains all of the table body cells in a row.
|
|
116
|
+
|
|
117
|
+
##### \<MRT_TableDetailPanel /\>
|
|
118
|
+
|
|
119
|
+
A row and all column-spanning row for rendering detail panels for a row.
|
|
120
|
+
|
|
121
|
+
##### \<MRT_TableBodyCell /\>
|
|
122
|
+
|
|
123
|
+
The `<MRT_TableBodyCell />` is a `<td>` element that surrounds the cell value or custom `Cell` render.
|
|
124
|
+
|
|
125
|
+
##### \<MRT_TableBodyCellValue /\>
|
|
126
|
+
|
|
127
|
+
Renders the value of a cell. This is a popular component to use as an alternative to TanStack Table's `flexRender` method. It renders everything inside of the `<td>`, but not the `<td>` itself.
|
|
128
|
+
|
|
129
|
+
##### \<MRT_TableBodyRowGrabHandle /\>
|
|
130
|
+
|
|
131
|
+
A button for grabbing a row for dragging.
|
|
132
|
+
|
|
133
|
+
##### \<MRT_TableBodyRowPinButton /\>
|
|
134
|
+
|
|
135
|
+
A button or buttons for pinning a row.
|
|
136
|
+
|
|
137
|
+
#### TableFooter Components
|
|
138
|
+
|
|
139
|
+
[View TableFooter Components Source Code on GitHub](https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/src/components/footer)
|
|
140
|
+
|
|
141
|
+
##### \<MRT_TableFooter /\>
|
|
142
|
+
|
|
143
|
+
The `<MRT_TableFooter />` component contains the `<tfoot>` element, and all of the table footer rows.
|
|
144
|
+
|
|
145
|
+
##### \<MRT_TableFooterRow /\>
|
|
146
|
+
|
|
147
|
+
The `<MRT_TableFooterRow />` is a `<tr>` element that contains all of the table footer cells in a row.
|
|
148
|
+
|
|
149
|
+
##### \<MRT_TableFooterCell /\>
|
|
150
|
+
|
|
151
|
+
The `<MRT_TableFooterCell />` is a `<td>` element that surrounds the cell value or custom `Footer` render.
|
|
152
|
+
|
|
153
|
+
#### Input Components
|
|
154
|
+
|
|
155
|
+
[View Input Components Source Code on GitHub](https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/src/components/inputs)
|
|
156
|
+
|
|
157
|
+
##### \<MRT_EditCellTextField /\>
|
|
158
|
+
|
|
159
|
+
The textfield component for editing a cell value that can either show in a modal or table cell.
|
|
160
|
+
|
|
161
|
+
##### \<MRT_GlobalFilterTextField /\>
|
|
162
|
+
|
|
163
|
+
The search textfield component for global filtering.
|
|
164
|
+
|
|
165
|
+
##### \<MRT_FilterTextField /\>
|
|
166
|
+
|
|
167
|
+
The textfield component for filtering a column. A somewhat comprehensive component that can be a textfield, select, multi-select, or date picker.
|
|
168
|
+
|
|
169
|
+
##### \<MRT_FilterCheckbox /\>
|
|
170
|
+
|
|
171
|
+
The checkbox component for filtering a column by boolean values.
|
|
172
|
+
|
|
173
|
+
##### \<MRT_FilterRangeSlider /\>
|
|
174
|
+
|
|
175
|
+
The range slider component for filtering a column by a range of numbers.
|
|
176
|
+
|
|
177
|
+
##### \<MRT_FilterFilterRangeFields /\>
|
|
178
|
+
|
|
179
|
+
A Container component that will render two MRT_FilterTextField components for filtering in a range (min and max).
|
|
180
|
+
|
|
181
|
+
##### \<MRT_SelectCheckbox /\>
|
|
182
|
+
|
|
183
|
+
A checkbox component for selecting a row or selecting all rows from the table header.
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
## MRT Hooks
|
|
2
|
+
|
|
3
|
+
MRT has been adopting more and more of a hooks based approach for its internal logic. Its API is becoming more standardized so that you can use the same hooks that the MRT components use internally to build your own custom headless table if you want to.
|
|
4
|
+
|
|
5
|
+
### useMaterialReactTable
|
|
6
|
+
|
|
7
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMaterialReactTable.ts)
|
|
8
|
+
|
|
9
|
+
> This is probably the only MRT hook you will need to use, unless you are writing a custom headless table.
|
|
10
|
+
|
|
11
|
+
This is the main hook from Material React Table. It creates a TanStack Table instance with all of the features that MRT provides and that you enable, and uses the proper default table options.
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { useMaterialReactTable } from 'material-react-table';
|
|
15
|
+
|
|
16
|
+
const table = useMaterialReactTable({
|
|
17
|
+
...options,
|
|
18
|
+
});
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
This hook is the combination of 2 other internal MRT hooks: [`useMRT_TableOptions`](#usemrt_tableoptions), and [`useMRT_TableInstance`](#usemrt_tableinstance).
|
|
22
|
+
|
|
23
|
+
### useMRT_TableOptions
|
|
24
|
+
|
|
25
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_TableOptions.ts)
|
|
26
|
+
|
|
27
|
+
This hook simply takes in your custom table options and merges them with the default table options. It also does some extra logic to make sure that some default table options are set correctly based on other enabled features. For example, if you enable row virtualization features, the sticky header will also be enabled by default, and the layoutMode will adjust accordingly.
|
|
28
|
+
|
|
29
|
+
```tsx
|
|
30
|
+
import { useMRT_TableOptions } from 'material-react-table';
|
|
31
|
+
|
|
32
|
+
const transformedTableOptions = useMRT_TableOptions({
|
|
33
|
+
...options,
|
|
34
|
+
});
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### useMRT_TableInstance
|
|
38
|
+
|
|
39
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_TableInstance.ts)
|
|
40
|
+
|
|
41
|
+
This is where most of the magic happens. This hook is responsible for creating the TanStack Table instance, and adding all of the MRT features to it. It needs table options to be passed in to it correctly, with good defaults, and it will return the table instance.
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
import { useMRT_TableInstance } from 'material-react-table';
|
|
45
|
+
|
|
46
|
+
const table = useMRT_TableInstance({
|
|
47
|
+
...transformedTableOptions, //usually from useMRT_TableOptions
|
|
48
|
+
});
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
This hook also uses the [`useMRT_Effects`](#usemrt_effects)
|
|
52
|
+
|
|
53
|
+
### useMRT_Effects
|
|
54
|
+
|
|
55
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_Effects.ts)
|
|
56
|
+
|
|
57
|
+
This hook is responsible for adding some extra useEffect hooks to the table instance. These hooks are needed by some MRT features on a table wide level.
|
|
58
|
+
|
|
59
|
+
### useMRT_Rows
|
|
60
|
+
|
|
61
|
+
> New in v2.2.0
|
|
62
|
+
|
|
63
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_Rows.ts)
|
|
64
|
+
|
|
65
|
+
This hook is mostly a wrapper around `table.getRowModel`, but with a bit more custom logic for fuzzy ranking, row pinning, and more. It consumes a `table` instance and returns the rows that should be rendered in the main table body. This can be a useful hook if you are writing a custom headless table, but still want all of the extra MRT enhanced behavior for fuzzy ranking, row pinning, etc. Alternatively, you can just use `table.getRowModel()` for a more vanilla TanStack Table experience.
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { useMaterialReactTable, useMRT_Rows } from 'material-react-table';
|
|
69
|
+
|
|
70
|
+
const table = useMaterialReactTable({
|
|
71
|
+
...options,
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
const rows = useMRT_Rows(table);
|
|
75
|
+
|
|
76
|
+
return rows.map((row) => {
|
|
77
|
+
//render row
|
|
78
|
+
});
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### useMRT_ColumnVirtualizer
|
|
82
|
+
|
|
83
|
+
> New in v2.2.0
|
|
84
|
+
|
|
85
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_ColumnVirtualizer.ts)
|
|
86
|
+
|
|
87
|
+
This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Column Virtualizer instance that is optimized for MRT table columns, with considerations for other MRT features like column pinning, column resizing, column hiding, and more.
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import {
|
|
91
|
+
useMaterialReactTable,
|
|
92
|
+
useMRT_ColumnVirtualizer,
|
|
93
|
+
} from 'material-react-table';
|
|
94
|
+
|
|
95
|
+
const table = useMaterialReactTable({
|
|
96
|
+
...options,
|
|
97
|
+
});
|
|
98
|
+
|
|
99
|
+
const columnVirtualizer = useMRT_ColumnVirtualizer(table);
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
You would only need to use this hook if you are writing a custom headless table and want the same default column virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
|
|
103
|
+
|
|
104
|
+
### useMRT_RowVirtualizer
|
|
105
|
+
|
|
106
|
+
> New in v2.2.0
|
|
107
|
+
|
|
108
|
+
[Source Code](https://github.com/lminii/material-react-table/blob/v4/packages/material-react-table/src/hooks/useMRT_RowVirtualizer.ts)
|
|
109
|
+
|
|
110
|
+
This hook is a wrapper around the `useVirtualizer` hook from TanStack Virtual. It consumes a `table` instance and returns a Row Virtualizer instance that is optimized for MRT table rows, with considerations for other MRT features like row pinning, row dragging, and more.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import {
|
|
114
|
+
useMaterialReactTable,
|
|
115
|
+
useMRT_RowVirtualizer,
|
|
116
|
+
} from 'material-react-table';
|
|
117
|
+
|
|
118
|
+
const table = useMaterialReactTable({
|
|
119
|
+
...options,
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
const rowVirtualizer = useMRT_RowVirtualizer(table);
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
You would only need to use this hook if you are writing a custom headless table and want the same default row virtualization behavior that MRT provides. If you are using the MRT components, this hook is already used internally by the `MRT_Table` component.
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# Material React Table Agent Skills
|
|
2
|
+
|
|
3
|
+
These folders are [Agent Skills](https://agentskills.io) for AI coding assistants such as Claude Code, Cursor, Codex, and Copilot.
|
|
4
|
+
Each folder holds one `SKILL.md` that teaches an agent a slice of the Material React Table V4 API and the patterns the documentation recommends.
|
|
5
|
+
The skills ship inside the `@lminii/material-react-table` npm package, so every install of the library carries them.
|
|
6
|
+
|
|
7
|
+
Full documentation for AI agents, including the MCP server, lives on the [AI Agents](https://material-react-table.minii.dev/docs/getting-started/ai-agents) docs page.
|
|
8
|
+
|
|
9
|
+
## Skills
|
|
10
|
+
|
|
11
|
+
| Skill | Load it for |
|
|
12
|
+
| --- | --- |
|
|
13
|
+
| `getting-started` | Installing V4, defining columns, the `useMaterialReactTable` plus `table` prop pattern, and the sub-component exports. |
|
|
14
|
+
| `customization` | `mui*Props`, `render*` overrides, display columns, icons, and Material UI theming. |
|
|
15
|
+
| `composable-components` | Building a custom layout from the exported `MRT_*` components. |
|
|
16
|
+
| `state-and-server-data` | Controlled state, `on*Change` callbacks, `manual*` options, `rowCount`, and TanStack Query integration. |
|
|
17
|
+
| `editing` | The five edit display modes, create rows, validation, and saving to a server. |
|
|
18
|
+
| `filtering` | Column filter variants and modes, global filtering, faceted values, and custom filter functions. |
|
|
19
|
+
| `virtualization` | Row and column virtualization, virtualizer options, and scroll-to-index. |
|
|
20
|
+
| `localization` | The bundled locales and custom localization strings. |
|
|
21
|
+
| `drag-and-drop-ordering` | Column and row drag and drop ordering. |
|
|
22
|
+
| `migrate-v3-to-v4` | Moving an app from `material-react-table` V3 to `@lminii/material-react-table` V4. |
|
|
23
|
+
|
|
24
|
+
## How Agents Use Them
|
|
25
|
+
|
|
26
|
+
There are three ways to get a skill in front of an agent.
|
|
27
|
+
|
|
28
|
+
### TanStack Intent
|
|
29
|
+
|
|
30
|
+
[TanStack Intent](https://www.npmjs.com/package/@tanstack/intent) discovers skills from the packages installed in a project.
|
|
31
|
+
In a project with `@lminii/material-react-table` installed, an agent (or you) can list and load them:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npx @tanstack/intent@latest list
|
|
35
|
+
npx @tanstack/intent@latest load @lminii/material-react-table#getting-started
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Run `npx @tanstack/intent@latest install` once to add the discovery instructions to your `AGENTS.md` or `CLAUDE.md`.
|
|
39
|
+
After that the agent runs the `list` and `load` commands on its own before editing table code.
|
|
40
|
+
The TanStack Table V9 packages ship skills the same way, and the `requires` field in each `SKILL.md` points at the TanStack skills a feature builds on.
|
|
41
|
+
|
|
42
|
+
### Skills CLI
|
|
43
|
+
|
|
44
|
+
Any harness that reads `SKILL.md` files can install this folder straight from GitHub with the [skills CLI](https://github.com/vercel-labs/skills).
|
|
45
|
+
Pick the command for your agent.
|
|
46
|
+
|
|
47
|
+
| Agent | Command |
|
|
48
|
+
| --- | --- |
|
|
49
|
+
| Claude Code | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a claude-code` |
|
|
50
|
+
| Cursor | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a cursor` |
|
|
51
|
+
| Codex | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a codex` |
|
|
52
|
+
| GitHub Copilot | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a github-copilot` |
|
|
53
|
+
| Gemini CLI | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a gemini-cli` |
|
|
54
|
+
| Windsurf | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a windsurf` |
|
|
55
|
+
| OpenCode | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a opencode` |
|
|
56
|
+
| Cline | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a cline` |
|
|
57
|
+
| Several agents | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills -a claude-code -a cursor` |
|
|
58
|
+
| Every detected agent | `npx skills add https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table/skills --all` |
|
|
59
|
+
|
|
60
|
+
The CLI supports many more agents, including Amp, Antigravity, Augment, Continue, Devin, Droid, Goose, Junie, Kilo Code, Kiro, OpenHands, Qwen Code, Roo Code, Trae, and Zed.
|
|
61
|
+
The full list of `-a` values is in the [Supported Agents](https://github.com/vercel-labs/skills#supported-agents) table.
|
|
62
|
+
|
|
63
|
+
### MCP Server
|
|
64
|
+
|
|
65
|
+
The [`@lminii/material-react-table-mcp`](https://github.com/lminii/material-react-table/tree/v4/packages/material-react-table-mcp) server bundles a copy of these skills.
|
|
66
|
+
Its `get_mrt_skill` tool lists them or returns one by name, and `search_mrt_docs` searches them alongside the guides and examples.
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
claude mcp add material-react-table -- npx -y @lminii/material-react-table-mcp
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## File Format
|
|
73
|
+
|
|
74
|
+
Each `SKILL.md` starts with YAML frontmatter.
|
|
75
|
+
|
|
76
|
+
- `name` and `description` are what Intent and the skills CLI show when listing, so the description says both what the skill covers and when to load it.
|
|
77
|
+
- `metadata` records the library and version the skill was written against.
|
|
78
|
+
- `requires` lists TanStack skills (for example `@tanstack/table-core#core`) that should be loaded alongside it.
|
|
79
|
+
- `sources` lists the docs pages in this repository the skill was distilled from, so a change to those pages is a cue to update the skill.
|
|
80
|
+
|
|
81
|
+
The body is plain Markdown that an agent reads in full, so it stays focused on the API, the recommended patterns, and the mistakes to avoid.
|
|
@@ -0,0 +1,189 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: composable-components
|
|
3
|
+
description: >
|
|
4
|
+
Compose a custom Material React Table V4 layout from exported MRT_* components that all take the same table prop: MRT_TablePaper, MRT_TableContainer, MRT_Table, MRT_TopToolbar, MRT_TablePagination, MRT_GlobalFilterTextField, MRT_ToolbarInternalButtons, MRT_ShowHideColumnsButton, and MRT_TableBodyCellValue for fully custom markup. Load for tables inside cards or dialogs, toolbars placed outside the table, split layouts, or headless rendering with MRT state.
|
|
5
|
+
metadata:
|
|
6
|
+
type: framework
|
|
7
|
+
library: '@lminii/material-react-table'
|
|
8
|
+
library_version: '4.0.0'
|
|
9
|
+
framework: react
|
|
10
|
+
requires:
|
|
11
|
+
- getting-started
|
|
12
|
+
sources:
|
|
13
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/pages/docs/api/mrt-components.mdx'
|
|
14
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx'
|
|
15
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/examples/custom-top-toolbar/sandbox/src/TS.tsx'
|
|
16
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/examples/external-toolbar/sandbox/src/TS.tsx'
|
|
17
|
+
- 'lminii/material-react-table:packages/material-react-table/src/index.ts'
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
This skill builds on `getting-started`. `MaterialReactTable` is a thin composition of exported sub-components. Because every sub-component takes the same `table` instance as a prop, you can render any subset of them anywhere in your tree while MRT keeps managing state.
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import {
|
|
26
|
+
MRT_GlobalFilterTextField,
|
|
27
|
+
MRT_TableContainer,
|
|
28
|
+
MRT_TablePagination,
|
|
29
|
+
MRT_ToggleFiltersButton,
|
|
30
|
+
useMaterialReactTable,
|
|
31
|
+
} from '@lminii/material-react-table'
|
|
32
|
+
|
|
33
|
+
const table = useMaterialReactTable({ columns, data, enableBottomToolbar: false })
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Card>
|
|
37
|
+
<CardHeader
|
|
38
|
+
title="People"
|
|
39
|
+
action={
|
|
40
|
+
<Stack direction="row" gap={1}>
|
|
41
|
+
<MRT_GlobalFilterTextField table={table} />
|
|
42
|
+
<MRT_ToggleFiltersButton table={table} />
|
|
43
|
+
</Stack>
|
|
44
|
+
}
|
|
45
|
+
/>
|
|
46
|
+
<MRT_TableContainer table={table} />
|
|
47
|
+
<CardActions sx={{ justifyContent: 'flex-end' }}>
|
|
48
|
+
<MRT_TablePagination table={table} />
|
|
49
|
+
</CardActions>
|
|
50
|
+
</Card>
|
|
51
|
+
)
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
`MRT_TableContainer` renders the scroll container, the table, the loading overlay, the edit row modal, and the cell action menu. Turn off the built-in toolbars with `enableTopToolbar` and `enableBottomToolbar` when you place their pieces elsewhere.
|
|
55
|
+
|
|
56
|
+
## Core Patterns
|
|
57
|
+
|
|
58
|
+
### Layers of the default component
|
|
59
|
+
|
|
60
|
+
```text
|
|
61
|
+
MRT_TablePaper
|
|
62
|
+
MRT_TopToolbar
|
|
63
|
+
MRT_GlobalFilterTextField, MRT_ToolbarInternalButtons, MRT_ToolbarAlertBanner, MRT_TablePagination
|
|
64
|
+
MRT_TableContainer
|
|
65
|
+
MRT_Table
|
|
66
|
+
MRT_TableHead > MRT_TableHeadRow > MRT_TableHeadCell
|
|
67
|
+
MRT_TableBody > MRT_TableBodyRow > MRT_TableBodyCell, MRT_TableDetailPanel
|
|
68
|
+
MRT_TableFooter > MRT_TableFooterRow > MRT_TableFooterCell
|
|
69
|
+
MRT_BottomToolbar
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Start from the layer just above what you need to change. Replacing `MRT_TopToolbar` with your own component is the most common cut; replacing `MRT_TableBodyRow` is rarely worth it because `muiTableBodyRowProps` covers styling and events.
|
|
73
|
+
|
|
74
|
+
### Toolbar buttons are individual exports
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import {
|
|
78
|
+
MRT_ShowHideColumnsButton,
|
|
79
|
+
MRT_ToggleDensePaddingButton,
|
|
80
|
+
MRT_ToggleFullScreenButton,
|
|
81
|
+
} from '@lminii/material-react-table'
|
|
82
|
+
|
|
83
|
+
<MRT_ShowHideColumnsButton table={table} />
|
|
84
|
+
<MRT_ToggleDensePaddingButton table={table} />
|
|
85
|
+
<MRT_ToggleFullScreenButton table={table} />
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Each button reads and writes MRT state on the shared instance, so it works from any position in the tree.
|
|
89
|
+
|
|
90
|
+
### Fully custom markup with MRT_TableBodyCellValue
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { MRT_TableBodyCellValue, flexRender } from '@lminii/material-react-table'
|
|
94
|
+
|
|
95
|
+
<Table>
|
|
96
|
+
<TableHead>
|
|
97
|
+
{table.getHeaderGroups().map((group) => (
|
|
98
|
+
<TableRow key={group.id}>
|
|
99
|
+
{group.headers.map((header) => (
|
|
100
|
+
<TableCell key={header.id}>
|
|
101
|
+
{header.isPlaceholder ? null : flexRender(header.column.columnDef.Header ?? header.column.columnDef.header, header.getContext())}
|
|
102
|
+
</TableCell>
|
|
103
|
+
))}
|
|
104
|
+
</TableRow>
|
|
105
|
+
))}
|
|
106
|
+
</TableHead>
|
|
107
|
+
<TableBody>
|
|
108
|
+
{table.getRowModel().rows.map((row, staticRowIndex) => (
|
|
109
|
+
<TableRow key={row.id} selected={row.getIsSelected()}>
|
|
110
|
+
{row.getVisibleCells().map((cell) => (
|
|
111
|
+
<TableCell key={cell.id}>
|
|
112
|
+
<MRT_TableBodyCellValue cell={cell} table={table} staticRowIndex={staticRowIndex} />
|
|
113
|
+
</TableCell>
|
|
114
|
+
))}
|
|
115
|
+
</TableRow>
|
|
116
|
+
))}
|
|
117
|
+
</TableBody>
|
|
118
|
+
</Table>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
`MRT_TableBodyCellValue` applies the column's `Cell`, `AggregatedCell`, `GroupedCell`, filter match highlighting, and click to copy, so custom markup keeps MRT cell behaviour. `table.getRowModel()` is the final model after filtering, sorting, grouping, expanding, and pagination.
|
|
122
|
+
|
|
123
|
+
### Row virtualization in custom layouts
|
|
124
|
+
|
|
125
|
+
Render `MRT_TableContainer` rather than `MRT_Table` when `enableRowVirtualization` or `enableColumnVirtualization` is on. The container owns the scroll element the virtualizers measure.
|
|
126
|
+
|
|
127
|
+
## Common Mistakes
|
|
128
|
+
|
|
129
|
+
### HIGH Rendering MRT components without the table prop
|
|
130
|
+
|
|
131
|
+
Wrong:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
<MRT_TablePagination />
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Correct:
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
<MRT_TablePagination table={table} />
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
MRT does not use React context. Every component requires the instance explicitly.
|
|
144
|
+
|
|
145
|
+
Source: `packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx`
|
|
146
|
+
|
|
147
|
+
### MEDIUM Duplicating the toolbar
|
|
148
|
+
|
|
149
|
+
Wrong:
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
const table = useMaterialReactTable({ columns, data })
|
|
153
|
+
<MRT_GlobalFilterTextField table={table} />
|
|
154
|
+
<MaterialReactTable table={table} />
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
Correct:
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
const table = useMaterialReactTable({ columns, data, enableTopToolbar: false })
|
|
161
|
+
<MRT_GlobalFilterTextField table={table} />
|
|
162
|
+
<MaterialReactTable table={table} />
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
The default top toolbar already contains the search field, so two inputs fight over `globalFilter`.
|
|
166
|
+
|
|
167
|
+
Source: `docs/api/mrt-components.mdx`
|
|
168
|
+
|
|
169
|
+
### MEDIUM Using a v8 header render
|
|
170
|
+
|
|
171
|
+
Wrong:
|
|
172
|
+
|
|
173
|
+
```tsx
|
|
174
|
+
flexRender(header.column.columnDef.header, header.getContext())
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
Correct:
|
|
178
|
+
|
|
179
|
+
```tsx
|
|
180
|
+
flexRender(header.column.columnDef.Header ?? header.column.columnDef.header, header.getContext())
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
MRT columns carry both `header` (string) and `Header` (custom render). Falling back to the string alone drops custom header markup.
|
|
184
|
+
|
|
185
|
+
Source: `apps/material-react-table-docs/examples/custom-headless/sandbox/src/TS.tsx`
|
|
186
|
+
|
|
187
|
+
## API Discovery
|
|
188
|
+
|
|
189
|
+
`node_modules/@lminii/material-react-table/dist/index.d.ts` exports every `MRT_*` component with its props interface; all of them include `table: MRT_TableInstance<TData>`. The component tree with links to source is at `/docs/api/mrt-components`.
|