@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,213 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: filtering
|
|
3
|
+
description: >
|
|
4
|
+
Configure column and global filtering in Material React Table V4: filterVariant (text, select, multi-select, autocomplete, range, range-slider, checkbox, date, datetime, time and their ranges), enableFacetedValues, filterFn and filterFns, enableColumnFilterModes with columnFilterModeOptions, columnFilterDisplayMode, globalFilterFn and ranked results, filter match highlighting, and the muiFilter*Props. Load for dropdown or date filters, custom filter logic, filter mode menus, or search that matches the wrong rows.
|
|
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
|
+
- '@tanstack/table-core#column-filtering'
|
|
13
|
+
- '@tanstack/table-core#global-filtering'
|
|
14
|
+
sources:
|
|
15
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx'
|
|
16
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/global-filtering.mdx'
|
|
17
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx'
|
|
18
|
+
- 'lminii/material-react-table:packages/material-react-table/src/fns/filterFns.ts'
|
|
19
|
+
- 'lminii/material-react-table:packages/material-react-table/src/utils/column.utils.ts'
|
|
20
|
+
- 'lminii/material-react-table:packages/material-react-table/src/types.ts'
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
This skill builds on `getting-started`, `@tanstack/table-core#column-filtering`, and `@tanstack/table-core#global-filtering`. Client-side column filters and the global search are on by default. MRT adds filter inputs, filter variants, fuzzy matching, and filter mode menus on top of the TanStack filtering model; server-side filtering is covered by `state-and-server-data`.
|
|
24
|
+
|
|
25
|
+
## Setup
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
const columns: MRT_ColumnDef<Person>[] = [
|
|
29
|
+
{ accessorKey: 'name', header: 'Name' }, // text filter, fuzzy
|
|
30
|
+
{ accessorKey: 'city', header: 'City', filterVariant: 'select' },
|
|
31
|
+
{ accessorKey: 'state', header: 'State', filterVariant: 'multi-select' },
|
|
32
|
+
{ accessorKey: 'salary', header: 'Salary', filterVariant: 'range-slider' },
|
|
33
|
+
{
|
|
34
|
+
accessorFn: (row) => new Date(row.hireDate), // filter and sort on a Date
|
|
35
|
+
id: 'hireDate',
|
|
36
|
+
header: 'Hired',
|
|
37
|
+
filterVariant: 'date-range',
|
|
38
|
+
Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(),
|
|
39
|
+
},
|
|
40
|
+
]
|
|
41
|
+
|
|
42
|
+
const table = useMaterialReactTable({
|
|
43
|
+
columns,
|
|
44
|
+
data,
|
|
45
|
+
enableFacetedValues: true, // options and min/max come from the data
|
|
46
|
+
initialState: { showColumnFilters: true },
|
|
47
|
+
})
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
`enableColumnFilters` (table) and `enableColumnFilter` (column) turn column filters off; `enableGlobalFilter` does the same for search; `enableFilters: false` removes both. `showColumnFilters` and `showGlobalFilter` are state slices, so seed them in `initialState` to show the inputs immediately.
|
|
51
|
+
|
|
52
|
+
## Core Patterns
|
|
53
|
+
|
|
54
|
+
### Pick the variant and let it pick the filter function
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
{ accessorKey: 'isActive', accessorFn: (row) => (row.isActive ? 'true' : 'false'), id: 'isActive', header: 'Active', filterVariant: 'checkbox' },
|
|
58
|
+
{ accessorKey: 'age', header: 'Age', filterVariant: 'range', filterFn: 'between' },
|
|
59
|
+
{ accessorKey: 'team', header: 'Team', filterVariant: 'autocomplete', filterSelectOptions: teams },
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
Variants: `text` (default), `autocomplete`, `select`, `multi-select`, `range`, `range-slider`, `checkbox`, `date`, `date-range`, `datetime`, `datetime-range`, `time`, `time-range`. The default `filterFn` follows the variant: `multi-select` uses `arrIncludesSome`, any `range` variant uses `betweenInclusive`, `select` and `checkbox` use `equals`, everything else uses `fuzzy`. `filterSelectOptions` takes strings or `{ label, value }` objects; with `enableFacetedValues` the select, multi-select, autocomplete, and range-slider inputs fill themselves from the column's unique values or min and max. The checkbox variant compares against the strings `'true'` and `'false'`, so its accessor must return strings.
|
|
63
|
+
|
|
64
|
+
### Date, datetime, and time variants need the pickers provider
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
|
|
68
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
|
|
69
|
+
|
|
70
|
+
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
71
|
+
<MaterialReactTable table={table} />
|
|
72
|
+
</LocalizationProvider>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
MRT renders `@mui/x-date-pickers` V9 components for these variants and expects one `LocalizationProvider` above the table. The accessor should return a `Date` so comparisons and sorting work. `muiFilterDatePickerProps`, `muiFilterDateTimePickerProps`, and `muiFilterTimePickerProps` forward props to the picker; for range variants the callback form receives `rangeFilterIndex` (0 for the start input, 1 for the end).
|
|
76
|
+
|
|
77
|
+
### Custom filter functions
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
const table = useMaterialReactTable({
|
|
81
|
+
columns: [
|
|
82
|
+
{ accessorKey: 'name', header: 'Name', filterFn: 'startsWith' }, // MRT built-in
|
|
83
|
+
{ accessorKey: 'code', header: 'Code', filterFn: 'includesStringSensitive' }, // TanStack built-in
|
|
84
|
+
{ accessorKey: 'tags', header: 'Tags', filterFn: 'hasAllTags' }, // registered below
|
|
85
|
+
],
|
|
86
|
+
data,
|
|
87
|
+
filterFns: {
|
|
88
|
+
hasAllTags: (row, columnId, filterValue: string) =>
|
|
89
|
+
filterValue.split(',').every((tag) => row.getValue<string[]>(columnId).includes(tag.trim())),
|
|
90
|
+
},
|
|
91
|
+
globalFilterFn: 'contains', // default is 'fuzzy'
|
|
92
|
+
})
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
MRT built-ins: `between`, `betweenInclusive`, `contains`, `empty`, `endsWith`, `equals`, `fuzzy`, `greaterThan`, `greaterThanOrEqualTo`, `lessThan`, `lessThanOrEqualTo`, `notEmpty`, `notEquals`, `startsWith`. TanStack built-ins such as `includesString`, `equalsString`, `arrIncludes`, `arrIncludesAll`, `arrIncludesSome`, `weakEquals`, and `inNumberRange` also work by name. A function passed to `filterFn` receives `(row, columnId, filterValue)` and returns a boolean; functions registered in `filterFns` become names usable in `filterFn`, `globalFilterFn`, and the filter mode menus. The `fuzzy` global filter ranks rows by match quality unless `enableGlobalFilterRankedResults` is false, a sort is active, rows are expanded, or a `manual*` option is set.
|
|
96
|
+
|
|
97
|
+
### Let users switch filter modes
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
const table = useMaterialReactTable({
|
|
101
|
+
columns: [
|
|
102
|
+
{ accessorKey: 'name', header: 'Name', columnFilterModeOptions: ['fuzzy', 'contains', 'startsWith'] },
|
|
103
|
+
{ accessorKey: 'age', header: 'Age', columnFilterModeOptions: ['between', 'lessThan', 'greaterThan'] },
|
|
104
|
+
],
|
|
105
|
+
data,
|
|
106
|
+
enableColumnFilterModes: true,
|
|
107
|
+
enableGlobalFilterModes: true,
|
|
108
|
+
globalFilterModeOptions: ['fuzzy', 'startsWith'],
|
|
109
|
+
columnFilterDisplayMode: 'popover', // 'subheader' (default), 'popover', or 'custom'
|
|
110
|
+
})
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
The chosen modes live in the `columnFilterFns` and `globalFilterFn` state slices, controllable through `onColumnFilterFnsChange` and `onGlobalFilterFnChange`. `renderColumnFilterModeMenuItems` and `renderGlobalFilterModeMenuItems` replace the menu; each receives `onSelectFilterMode(name)` and `internalFilterOptions`. `columnFilterDisplayMode: 'custom'` keeps the filtering logic while you render inputs elsewhere with `column.setFilterValue`. Filter values arrive after a short debounce (200 ms client-side, 400 ms with `manualFiltering`).
|
|
114
|
+
|
|
115
|
+
### Keep match highlighting in custom cells
|
|
116
|
+
|
|
117
|
+
```tsx
|
|
118
|
+
{
|
|
119
|
+
accessorKey: 'name',
|
|
120
|
+
header: 'Name',
|
|
121
|
+
Cell: ({ renderedCellValue }) => <strong>{renderedCellValue}</strong>,
|
|
122
|
+
}
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
Text filters and the global search highlight matches inside cells. A custom `Cell` keeps that only when it renders `renderedCellValue` instead of `cell.getValue()`. `enableFilterMatchHighlighting: false` turns it off per table or per column.
|
|
126
|
+
|
|
127
|
+
## Common Mistakes
|
|
128
|
+
|
|
129
|
+
### HIGH Filter variant does not match the accessor value type
|
|
130
|
+
|
|
131
|
+
Wrong:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
{ accessorKey: 'hireDate', header: 'Hired', filterVariant: 'date-range' } // hireDate is an ISO string
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Correct:
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
{
|
|
141
|
+
accessorFn: (row) => new Date(row.hireDate),
|
|
142
|
+
id: 'hireDate',
|
|
143
|
+
header: 'Hired',
|
|
144
|
+
filterVariant: 'date-range',
|
|
145
|
+
Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(),
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
The `betweenInclusive` comparison the date variants use works on `Date` objects and numbers, not on date strings, so string columns silently match everything or nothing.
|
|
150
|
+
|
|
151
|
+
Source: `docs/examples/customize-filter-variants`
|
|
152
|
+
|
|
153
|
+
### HIGH Reading the filter value with the wrong shape
|
|
154
|
+
|
|
155
|
+
Wrong:
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
filterFn: (row, id, filterValue) => row.getValue<number>(id) >= filterValue, // range variant
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Correct:
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
filterFn: (row, id, [min, max]: [number, number]) => {
|
|
165
|
+
const value = row.getValue<number>(id)
|
|
166
|
+
return (min === '' || value >= min) && (max === '' || value <= max)
|
|
167
|
+
}
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
Range variants store `[min, max]` and multi-select stores an array; text, select, and checkbox store a single value. Match the shape or the custom function throws or filters everything out.
|
|
171
|
+
|
|
172
|
+
Source: `packages/material-react-table/src/fns/filterFns.ts`
|
|
173
|
+
|
|
174
|
+
### MEDIUM Passing removed Material UI text field props to filters
|
|
175
|
+
|
|
176
|
+
Wrong:
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
muiFilterTextFieldProps: { InputProps: { startAdornment: <SearchIcon /> } }
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Correct:
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
muiFilterTextFieldProps: { slotProps: { input: { startAdornment: <SearchIcon /> } } }
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
Material UI V9 removed `InputProps` and `inputProps`; MRT merges `slotProps.input`, `slotProps.htmlInput`, and `slotProps.select` into its own.
|
|
189
|
+
|
|
190
|
+
Source: `MIGRATION.md`
|
|
191
|
+
|
|
192
|
+
### MEDIUM Mode menu offers a function that is not registered
|
|
193
|
+
|
|
194
|
+
Wrong:
|
|
195
|
+
|
|
196
|
+
```tsx
|
|
197
|
+
columnFilterModeOptions: ['fuzzy', 'isPrime'], // isPrime only exists in the column's filterFn
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
Correct:
|
|
201
|
+
|
|
202
|
+
```tsx
|
|
203
|
+
filterFns: { isPrime: (row, id) => isPrime(row.getValue<number>(id)) },
|
|
204
|
+
columnFilterModeOptions: ['fuzzy', 'isPrime'],
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Filter mode names resolve through the table `filterFns` map. A name that is not there falls back to the default and the menu label shows the raw key.
|
|
208
|
+
|
|
209
|
+
Source: `docs/guides/column-filtering.mdx`
|
|
210
|
+
|
|
211
|
+
## API Discovery
|
|
212
|
+
|
|
213
|
+
Search `node_modules/@lminii/material-react-table/dist/index.d.ts` for `filterVariant`, `MRT_FilterOption`, `filterFns`, and `muiFilter` for the exact unions and callback props. `MRT_FilterFns` is exported for reuse. The Column Filtering and Global Filtering guides at `/docs/guides/column-filtering` and `/docs/guides/global-filtering` list the related table, column, and state options, and `/docs/examples/customize-filter-variants`, `customize-filter-modes`, `enable-filter-facet-values`, and `alternate-column-filtering` are runnable examples.
|
|
@@ -0,0 +1,213 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: getting-started
|
|
3
|
+
description: >
|
|
4
|
+
Build a Material React Table V4 with useMaterialReactTable and the MaterialReactTable table prop: install @lminii/material-react-table with Material UI V9 peers, define stable data and MRT_ColumnDef columns, toggle features with enable* options, and read the instance. Load for a first MRT table, a Material UI data grid on TanStack Table V9, or when a TanStack useTable or upstream material-react-table example is producing the wrong setup.
|
|
5
|
+
metadata:
|
|
6
|
+
type: framework
|
|
7
|
+
library: '@lminii/material-react-table'
|
|
8
|
+
library_version: '4.0.0'
|
|
9
|
+
framework: react
|
|
10
|
+
requires:
|
|
11
|
+
- '@tanstack/table-core#core'
|
|
12
|
+
sources:
|
|
13
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/pages/docs/getting-started/install.mdx'
|
|
14
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/pages/docs/getting-started/usage.mdx'
|
|
15
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/pages/docs/guides/best-practices.mdx'
|
|
16
|
+
- 'lminii/material-react-table:packages/material-react-table/src/hooks/useMaterialReactTable.ts'
|
|
17
|
+
- 'lminii/material-react-table:packages/material-react-table/src/types.ts'
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
This skill builds on `@tanstack/table-core#core` for the headless model and stable inputs. Material React Table (MRT) owns the TanStack Table instance, feature registration, and all Material UI rendering. Application code never calls `useTable` or `tableFeatures`; it configures MRT options and renders MRT components.
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
npm install @lminii/material-react-table @mui/material@^9 @mui/icons-material@^9 @mui/x-date-pickers@^9 @emotion/react @emotion/styled
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
Do not install `@tanstack/react-table`; MRT pins its own exact version. Node 22.12 or newer is required for the CommonJS build because TanStack Table V9 is ESM-only.
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import { useMemo } from 'react'
|
|
32
|
+
import {
|
|
33
|
+
MaterialReactTable,
|
|
34
|
+
useMaterialReactTable,
|
|
35
|
+
type MRT_ColumnDef,
|
|
36
|
+
} from '@lminii/material-react-table'
|
|
37
|
+
|
|
38
|
+
type Person = { name: string; age: number }
|
|
39
|
+
|
|
40
|
+
const data: Person[] = [
|
|
41
|
+
{ name: 'Ada', age: 36 },
|
|
42
|
+
{ name: 'Grace', age: 45 },
|
|
43
|
+
]
|
|
44
|
+
|
|
45
|
+
export function PeopleTable() {
|
|
46
|
+
const columns = useMemo<MRT_ColumnDef<Person>[]>(
|
|
47
|
+
() => [
|
|
48
|
+
{ accessorKey: 'name', header: 'Name' },
|
|
49
|
+
{ accessorKey: 'age', header: 'Age' },
|
|
50
|
+
],
|
|
51
|
+
[],
|
|
52
|
+
)
|
|
53
|
+
|
|
54
|
+
const table = useMaterialReactTable({
|
|
55
|
+
columns,
|
|
56
|
+
data,
|
|
57
|
+
enableRowSelection: true,
|
|
58
|
+
})
|
|
59
|
+
|
|
60
|
+
return <MaterialReactTable table={table} />
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
`useMaterialReactTable(options)` returns an `MRT_TableInstance<TData>`. Every MRT component takes that instance through a `table` prop; nothing is passed through React context.
|
|
65
|
+
|
|
66
|
+
## Core Patterns
|
|
67
|
+
|
|
68
|
+
### Accessors return primitives, renders return markup
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
const columns: MRT_ColumnDef<Person>[] = [
|
|
72
|
+
{
|
|
73
|
+
accessorFn: (row) => `${row.firstName} ${row.lastName}`,
|
|
74
|
+
id: 'fullName',
|
|
75
|
+
header: 'Name',
|
|
76
|
+
Cell: ({ cell, row }) => (
|
|
77
|
+
<a href={row.original.profileUrl}>{cell.getValue<string>()}</a>
|
|
78
|
+
),
|
|
79
|
+
},
|
|
80
|
+
]
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
`accessorKey` or `accessorFn` feeds sorting, filtering, grouping, and search, so it must return a string, number, boolean, or Date. `Cell`, `Header`, `Footer`, `Edit`, `Filter`, `AggregatedCell`, and `GroupedCell` are the render slots. An `accessorFn` column needs an explicit `id`.
|
|
84
|
+
|
|
85
|
+
### Infer column types with createMRTColumnHelper
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { createMRTColumnHelper } from '@lminii/material-react-table'
|
|
89
|
+
|
|
90
|
+
const helper = createMRTColumnHelper<Person>()
|
|
91
|
+
const columns = [
|
|
92
|
+
helper.accessor('name', { header: 'Name' }),
|
|
93
|
+
helper.accessor((row) => row.age, {
|
|
94
|
+
id: 'age',
|
|
95
|
+
header: 'Age',
|
|
96
|
+
Cell: ({ cell }) => cell.getValue().toLocaleString(), // typed number
|
|
97
|
+
}),
|
|
98
|
+
helper.display({ id: 'actions', header: 'Actions' }),
|
|
99
|
+
]
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
### Toggle features with enable* options
|
|
103
|
+
|
|
104
|
+
Table-level `enable*` options switch a feature on for every column; the same option on a column definition overrides it for that column. `enableColumnFilters`, `enableSorting`, `enablePagination`, `enableGlobalFilter`, `enableColumnActions`, `enableDensityToggle`, `enableFullScreenToggle`, `enableHiding`, and `enableTopToolbar` are on by default. Row selection, editing, grouping, pinning, ordering, expanding, virtualization, and row actions are off until enabled.
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
const table = useMaterialReactTable({
|
|
108
|
+
columns,
|
|
109
|
+
data,
|
|
110
|
+
enableColumnOrdering: true,
|
|
111
|
+
enableColumnPinning: true,
|
|
112
|
+
enableGrouping: true,
|
|
113
|
+
enablePagination: false,
|
|
114
|
+
renderDetailPanel: ({ row }) => <pre>{JSON.stringify(row.original)}</pre>,
|
|
115
|
+
})
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Read the instance where you need it
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
const selectedRows = table.getSelectedRowModel().rows
|
|
122
|
+
const { pagination, sorting } = table.getState()
|
|
123
|
+
table.resetRowSelection()
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
`table.getState()` returns the full MRT state, including MRT-only slices such as `density`, `isFullScreen`, and `showColumnFilters`. Inside render code `table.state` is the reactive equivalent.
|
|
127
|
+
|
|
128
|
+
## Common Mistakes
|
|
129
|
+
|
|
130
|
+
### HIGH Building the table with TanStack hooks
|
|
131
|
+
|
|
132
|
+
Wrong:
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
const table = useTable({ features, columns, data })
|
|
136
|
+
return <MaterialReactTable table={table} />
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
Correct:
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
const table = useMaterialReactTable({ columns, data })
|
|
143
|
+
return <MaterialReactTable table={table} />
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
`MaterialReactTable` needs the MRT instance, which registers MRT's features, display columns, localization, icons, and Material UI props. A bare TanStack instance lacks all of them.
|
|
147
|
+
|
|
148
|
+
Source: `packages/material-react-table/src/hooks/useMaterialReactTable.ts`
|
|
149
|
+
|
|
150
|
+
### HIGH Unstable data or columns
|
|
151
|
+
|
|
152
|
+
Wrong:
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
const table = useMaterialReactTable({
|
|
156
|
+
columns: [{ accessorKey: 'name', header: 'Name' }],
|
|
157
|
+
data: response.data ?? [],
|
|
158
|
+
})
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
Correct:
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
const columns = useMemo<MRT_ColumnDef<Person>[]>(() => [...], [])
|
|
165
|
+
const EMPTY: Person[] = []
|
|
166
|
+
const table = useMaterialReactTable({ columns, data: response.data ?? EMPTY })
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
A new array each render invalidates every row model and can loop forever. Keep `columns` and `data` in `useMemo`, `useState`, module scope, or a query cache.
|
|
170
|
+
|
|
171
|
+
Source: `docs/getting-started/usage.mdx`
|
|
172
|
+
|
|
173
|
+
### MEDIUM Mixing the upstream and fork package names
|
|
174
|
+
|
|
175
|
+
Wrong:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
import { MaterialReactTable } from 'material-react-table'
|
|
179
|
+
import { MRT_Localization_DE } from '@lminii/material-react-table/locales/de'
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Correct:
|
|
183
|
+
|
|
184
|
+
```tsx
|
|
185
|
+
import { MaterialReactTable } from '@lminii/material-react-table'
|
|
186
|
+
import { MRT_Localization_DE } from '@lminii/material-react-table/locales/de'
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
Two copies of MRT produce two `MRT_TableInstance` types and duplicate Emotion styles. Pick the fork everywhere, or alias `material-react-table` to it in `package.json`.
|
|
190
|
+
|
|
191
|
+
Source: `MIGRATION.md`
|
|
192
|
+
|
|
193
|
+
### MEDIUM Returning JSX from an accessor
|
|
194
|
+
|
|
195
|
+
Wrong:
|
|
196
|
+
|
|
197
|
+
```tsx
|
|
198
|
+
{ accessorFn: (row) => <b>{row.name}</b>, id: 'name', header: 'Name' }
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
Correct:
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
{ accessorKey: 'name', header: 'Name', Cell: ({ cell }) => <b>{cell.getValue<string>()}</b> }
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
Sorting, filtering, and global search compare accessor values, so JSX breaks all three.
|
|
208
|
+
|
|
209
|
+
Source: `docs/getting-started/usage.mdx`
|
|
210
|
+
|
|
211
|
+
## API Discovery
|
|
212
|
+
|
|
213
|
+
Read `node_modules/@lminii/material-react-table/dist/index.d.ts` for `MRT_TableOptions`, `MRT_ColumnDef`, `MRT_TableInstance`, and `MRT_TableState`; the `mui*Props`, `render*`, `enable*`, and `on*Change` option families are all declared there with JSDoc. The docs prop tables at `/docs/api/table-options`, `/docs/api/column-options`, and `/docs/api/state-options` list every option with its default and source library.
|
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: localization
|
|
3
|
+
description: >
|
|
4
|
+
Translate Material React Table V4 with the localization option: import a built-in locale from @lminii/material-react-table/locales/<code>, override individual MRT_Localization strings, write a full custom locale with the language BCP 47 tag, keep {column} placeholders, and pair it with Material UI theme locales and the date pickers adapterLocale. Load for i18n, translating toolbar and menu text, number formatting in pagination, or a locale import that fails to resolve.
|
|
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/guides/localization.mdx'
|
|
14
|
+
- 'lminii/material-react-table:apps/material-react-table-docs/examples/localization-i18n-de/sandbox/src/TS.tsx'
|
|
15
|
+
- 'lminii/material-react-table:packages/material-react-table/src/locales/en.ts'
|
|
16
|
+
- 'lminii/material-react-table:packages/material-react-table/src/hooks/useMRT_TableOptions.ts'
|
|
17
|
+
- 'lminii/material-react-table:packages/material-react-table/src/types.ts'
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
This skill builds on `getting-started`. Every user-facing string MRT renders comes from one `MRT_Localization` object. The `localization` option takes a partial object that is merged over the English defaults, so a locale file or a handful of overrides both work.
|
|
21
|
+
|
|
22
|
+
## Setup
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import { MRT_Localization_DE } from '@lminii/material-react-table/locales/de'
|
|
26
|
+
|
|
27
|
+
const table = useMaterialReactTable({
|
|
28
|
+
columns,
|
|
29
|
+
data,
|
|
30
|
+
localization: MRT_Localization_DE,
|
|
31
|
+
})
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Built-in locales, imported from `@lminii/material-react-table/locales/<code>`: `ar`, `az`, `bg`, `cs`, `da`, `de`, `el`, `en`, `es`, `et`, `fa`, `fi`, `fr`, `he`, `hr`, `hu`, `hy`, `id`, `it`, `ja`, `ko`, `mk`, `nl`, `no`, `np`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cyrl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant`. Each exports `MRT_Localization_<CODE>` with hyphens replaced by underscores, for example `MRT_Localization_PT_BR` and `MRT_Localization_ZH_HANS`. Column headers, cell content, and your own toolbar buttons are not translated by MRT; those come from your column definitions and render slots.
|
|
35
|
+
|
|
36
|
+
## Core Patterns
|
|
37
|
+
|
|
38
|
+
### Override a few strings
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
const table = useMaterialReactTable({
|
|
42
|
+
columns,
|
|
43
|
+
data,
|
|
44
|
+
localization: {
|
|
45
|
+
...MRT_Localization_DE,
|
|
46
|
+
noRecordsToDisplay: 'Keine Personen gefunden',
|
|
47
|
+
rowsPerPage: 'Personen pro Seite',
|
|
48
|
+
},
|
|
49
|
+
})
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
Partial objects are merged over English, so an override object without a base locale still renders every other string. Keep the `localization` object stable (module scope or `useMemo`); MRT memoizes the merge on its identity.
|
|
53
|
+
|
|
54
|
+
### Write a custom locale
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
import { type MRT_Localization } from '@lminii/material-react-table'
|
|
58
|
+
|
|
59
|
+
export const MRT_Localization_GA: MRT_Localization = {
|
|
60
|
+
...MRT_Localization_EN, // start from English so nothing is missing
|
|
61
|
+
language: 'ga', // BCP 47 tag used for number formatting
|
|
62
|
+
actions: 'Gníomhartha',
|
|
63
|
+
filterByColumn: 'Scag de réir {column}',
|
|
64
|
+
sortByColumnAsc: 'Sórtáil de réir {column} in ord ardaitheach',
|
|
65
|
+
noRecordsToDisplay: 'Níl aon taifid le taispeáint',
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
`MRT_Localization` has around 90 keys; `language` is required on the type and feeds `toLocaleString` for the row counts in pagination and the selection banner. Strings such as `filterByColumn`, `sortByColumnAsc`, `dropToGroupBy`, and `filteringByColumn` contain `{column}` placeholders that MRT replaces with the column header, so keep the token verbatim. Fully translated locales are welcome as pull requests to `packages/material-react-table/src/locales`.
|
|
70
|
+
|
|
71
|
+
### Pair with Material UI and the date pickers
|
|
72
|
+
|
|
73
|
+
```tsx
|
|
74
|
+
import { createTheme, ThemeProvider, useTheme } from '@mui/material'
|
|
75
|
+
import { deDE } from '@mui/material/locale'
|
|
76
|
+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'
|
|
77
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
|
|
78
|
+
import { deDE as pickersDeDE } from '@mui/x-date-pickers/locales'
|
|
79
|
+
import 'dayjs/locale/de'
|
|
80
|
+
|
|
81
|
+
const theme = useTheme()
|
|
82
|
+
|
|
83
|
+
<ThemeProvider theme={createTheme(theme, deDE, pickersDeDE)}>
|
|
84
|
+
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
|
|
85
|
+
<MaterialReactTable table={table} />
|
|
86
|
+
</LocalizationProvider>
|
|
87
|
+
</ThemeProvider>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
MRT's `localization` covers MRT strings only. Material UI's own component text (pagination select labels, accessibility labels) comes from the theme locale, and the date and time filter pickers take their month names and formats from the pickers locale and `adapterLocale`.
|
|
91
|
+
|
|
92
|
+
### Switch locales at runtime
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
const locales = { en: MRT_Localization_EN, de: MRT_Localization_DE, ja: MRT_Localization_JA }
|
|
96
|
+
|
|
97
|
+
const table = useMaterialReactTable({
|
|
98
|
+
columns,
|
|
99
|
+
data,
|
|
100
|
+
localization: locales[currentLanguage],
|
|
101
|
+
})
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
The table re-renders with the new strings; no state is reset.
|
|
105
|
+
|
|
106
|
+
## Common Mistakes
|
|
107
|
+
|
|
108
|
+
### HIGH Importing a locale from the upstream package name
|
|
109
|
+
|
|
110
|
+
Wrong:
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
import { MRT_Localization_ES } from 'material-react-table/locales/es'
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
Correct:
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
import { MRT_Localization_ES } from '@lminii/material-react-table/locales/es'
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The fork publishes locales under its own `exports` map. The upstream path resolves only if the upstream package is also installed, which produces two copies of MRT.
|
|
123
|
+
|
|
124
|
+
Source: `MIGRATION.md`
|
|
125
|
+
|
|
126
|
+
### MEDIUM Custom locale without the language tag
|
|
127
|
+
|
|
128
|
+
Wrong:
|
|
129
|
+
|
|
130
|
+
```tsx
|
|
131
|
+
localization: { actions: 'Ações', cancel: 'Cancelar', rowsPerPage: 'Linhas por página' }
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
Correct:
|
|
135
|
+
|
|
136
|
+
```tsx
|
|
137
|
+
localization: { language: 'pt', actions: 'Ações', cancel: 'Cancelar', rowsPerPage: 'Linhas por página' }
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Without `language`, the English `en` tag from the merged defaults formats row counts, so `1.234` renders as `1,234`.
|
|
141
|
+
|
|
142
|
+
Source: `packages/material-react-table/src/locales/en.ts`
|
|
143
|
+
|
|
144
|
+
### MEDIUM Dropping the {column} placeholder
|
|
145
|
+
|
|
146
|
+
Wrong:
|
|
147
|
+
|
|
148
|
+
```tsx
|
|
149
|
+
localization: { filterByColumn: 'Filtrer' }
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
Correct:
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
localization: { filterByColumn: 'Filtrer par {column}' }
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
MRT substitutes the header into `{column}`; without it the tooltip and placeholder no longer say which column they apply to.
|
|
159
|
+
|
|
160
|
+
Source: `packages/material-react-table/src/locales/en.ts`
|
|
161
|
+
|
|
162
|
+
### LOW Passing an unstable localization object
|
|
163
|
+
|
|
164
|
+
Wrong:
|
|
165
|
+
|
|
166
|
+
```tsx
|
|
167
|
+
localization: { ...MRT_Localization_FR, noRecordsToDisplay: t('empty') }, // new object each render
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
Correct:
|
|
171
|
+
|
|
172
|
+
```tsx
|
|
173
|
+
const localization = useMemo(() => ({ ...MRT_Localization_FR, noRecordsToDisplay: t('empty') }), [t])
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
A fresh object every render re-runs the merge and invalidates the memoized table options.
|
|
177
|
+
|
|
178
|
+
Source: `packages/material-react-table/src/hooks/useMRT_TableOptions.ts`
|
|
179
|
+
|
|
180
|
+
## API Discovery
|
|
181
|
+
|
|
182
|
+
`MRT_Localization` in `node_modules/@lminii/material-react-table/dist/index.d.ts` lists every key; `en.ts` in `packages/material-react-table/src/locales` is the reference translation. `ls node_modules/@lminii/material-react-table/locales` shows the shipped locale folders. The Localization guide at `/docs/guides/localization` renders an example per locale.
|