From 5e8add9ca3e0e2880775eff01ffdecaa233af2f5 Mon Sep 17 00:00:00 2001 From: Kevin Van Cott Date: Fri, 19 May 2023 09:51:31 -0400 Subject: [PATCH] release v1.11.4 - right column pinning fixes --- .../example-groups/LocaleExamples.tsx | 3 + .../examples/localization-i18n-hu/index.tsx | 18 ++++++ .../localization-i18n-hu/sandbox/.gitignore | 5 ++ .../localization-i18n-hu/sandbox/README.md | 6 ++ .../localization-i18n-hu/sandbox/index.html | 13 ++++ .../localization-i18n-hu/sandbox/package.json | 28 +++++++++ .../localization-i18n-hu/sandbox/src/JS.js | 62 +++++++++++++++++++ .../localization-i18n-hu/sandbox/src/TS.tsx | 62 +++++++++++++++++++ .../localization-i18n-hu/sandbox/src/main.tsx | 9 +++ .../sandbox/src/makeData.ts | 23 +++++++ .../sandbox/src/vite.env.d.ts | 1 + .../sandbox/tsconfig.json | 31 ++++++++++ .../sandbox/tsconfig.node.json | 8 +++ .../sandbox/vite.config.js | 7 +++ .../pages/changelog.mdx | 9 +++ .../pages/docs/guides/localization.mdx | 2 +- .../pages/docs/guides/sorting.mdx | 13 ++++ .../stories/features/Sorting.stories.tsx | 8 +++ packages/material-react-table/package.json | 2 +- .../rollup-locales.config.mjs | 1 + .../src/MaterialReactTable.tsx | 8 +-- .../material-react-table/src/column.utils.ts | 7 ++- packages/material-react-table/src/index.tsx | 6 +- .../src/menus/MRT_ColumnActionMenu.tsx | 34 +++++----- .../src/table/MRT_TableRoot.tsx | 30 ++++----- 25 files changed, 355 insertions(+), 41 deletions(-) create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/index.tsx create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/.gitignore create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/README.md create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/index.html create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/package.json create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/JS.js create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/TS.tsx create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/main.tsx create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/makeData.ts create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/vite.env.d.ts create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.json create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.node.json create mode 100644 apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/vite.config.js diff --git a/apps/material-react-table-docs/example-groups/LocaleExamples.tsx b/apps/material-react-table-docs/example-groups/LocaleExamples.tsx index f6c418c94..3e8cef19d 100644 --- a/apps/material-react-table-docs/example-groups/LocaleExamples.tsx +++ b/apps/material-react-table-docs/example-groups/LocaleExamples.tsx @@ -8,6 +8,7 @@ import ES_Table from '../examples/localization-i18n-es'; import FA_Table from '../examples/localization-i18n-fa'; import FI_Table from '../examples/localization-i18n-fi'; import FR_Table from '../examples/localization-i18n-fr'; +import HU_Table from '../examples/localization-i18n-hu'; import ID_Table from '../examples/localization-i18n-id'; import IT_Table from '../examples/localization-i18n-it'; import JA_Table from '../examples/localization-i18n-ja'; @@ -36,6 +37,7 @@ const supportedLocales = [ 'fa', 'fi', 'fr', + 'hu', 'id', 'it', 'ja', @@ -88,6 +90,7 @@ const LocaleExamples = () => { {currentLocale === 'fa' && } {currentLocale === 'fi' && } {currentLocale === 'fr' && } + {currentLocale === 'hu' && } {currentLocale === 'id' && } {currentLocale === 'it' && } {currentLocale === 'ja' && } diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/index.tsx b/apps/material-react-table-docs/examples/localization-i18n-hu/index.tsx new file mode 100644 index 000000000..15681942a --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/index.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet'; +import Example from './sandbox/src/TS'; +const JS = require('!!raw-loader!./sandbox/src/JS.js').default; +const TS = require('!!raw-loader!./sandbox/src/TS.tsx').default; + +const ExampleTable = () => { + return ( + + ); +}; + +export default ExampleTable; diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/.gitignore b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/.gitignore new file mode 100644 index 000000000..d451ff16c --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/.gitignore @@ -0,0 +1,5 @@ +node_modules +.DS_Store +dist +dist-ssr +*.local diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/README.md b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/README.md new file mode 100644 index 000000000..b168d3c4b --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/README.md @@ -0,0 +1,6 @@ +# Example + +To run this example: + +- `npm install` or `yarn` +- `npm run start` or `yarn start` diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/index.html b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/index.html new file mode 100644 index 000000000..67a5a5845 --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/index.html @@ -0,0 +1,13 @@ + + + + + + Material React Table Example + + + +
+ + + diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/package.json b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/package.json new file mode 100644 index 000000000..2ad4dfe9b --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/package.json @@ -0,0 +1,28 @@ +{ + "name": "material-react-table-example-localization-i18n-hu", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite --port 3001", + "build": "vite build", + "serve": "vite preview", + "start": "vite" + }, + "dependencies": { + "@emotion/react": "^11.10.6", + "@emotion/styled": "^11.10.6", + "@mui/icons-material": "^5.11.16", + "@mui/material": "^5.12.1", + "material-react-table": "latest", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.0.37", + "@types/react-dom": "^18.0.11", + "@vitejs/plugin-react": "^4.0.0", + "typescript": "^5.0.4", + "vite": "^4.3.1" + } +} diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/JS.js b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/JS.js new file mode 100644 index 000000000..f0631e259 --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/JS.js @@ -0,0 +1,62 @@ +import React from 'react'; + +//Import Material React Table and its Types +import MaterialReactTable from 'material-react-table'; + +//Import Material React Table Translations +import { MRT_Localization_HU } from 'material-react-table/locales/hu'; + +//mock data +import { data } from './makeData'; + +const columns = [ + //column definitions... + { + accessorKey: 'firstName', + header: 'Keresztnév', + }, + { + accessorKey: 'lastName', + header: 'Vezetéknév', + enableClickToCopy: true, + }, + { + accessorKey: 'age', + header: 'Kor', + }, + //end +]; + +const Example = () => { + return ( + + ); +}; + +//App.tsx or similar +import { createTheme, ThemeProvider, useTheme } from '@mui/material'; +import { huHU } from '@mui/material/locale'; + +const ExampleWithThemeProvider = () => { + const theme = useTheme(); //replace with your theme/createTheme + return ( + //Setting Material UI locale as best practice to result in better accessibility + + + + ); +}; + +export default ExampleWithThemeProvider; diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/TS.tsx new file mode 100644 index 000000000..1220ae89e --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/TS.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +//Import Material React Table and its Types +import MaterialReactTable, { type MRT_ColumnDef } from 'material-react-table'; + +//Import Material React Table Translations +import { MRT_Localization_HU } from 'material-react-table/locales/hu'; + +//mock data +import { data, type Person } from './makeData'; + +const columns: MRT_ColumnDef[] = [ + //column definitions... + { + accessorKey: 'firstName', + header: 'Keresztnév', + }, + { + accessorKey: 'lastName', + header: 'Vezetéknév', + enableClickToCopy: true, + }, + { + accessorKey: 'age', + header: 'Kor', + }, + //end +]; + +const Example = () => { + return ( + + ); +}; + +//App.tsx or similar +import { createTheme, ThemeProvider, useTheme } from '@mui/material'; +import { huHU } from '@mui/material/locale'; + +const ExampleWithThemeProvider = () => { + const theme = useTheme(); //replace with your theme/createTheme + return ( + //Setting Material UI locale as best practice to result in better accessibility + + + + ); +}; + +export default ExampleWithThemeProvider; diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/main.tsx b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/main.tsx new file mode 100644 index 000000000..ae00547ba --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/main.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import Example from './TS'; + +ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( + + + , +); diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/makeData.ts b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/makeData.ts new file mode 100644 index 000000000..5bb2fb1ac --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/makeData.ts @@ -0,0 +1,23 @@ +export type Person = { + firstName: string; + lastName: string; + age: number; +}; + +export const data: Person[] = [ + { + firstName: 'Kevin', + lastName: 'Vandy', + age: 26, + }, + { + firstName: 'Theodore', + lastName: 'Browne', + age: 28, + }, + { + firstName: 'Tanner', + lastName: 'Linsley', + age: 33, + }, +]; diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/vite.env.d.ts b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/vite.env.d.ts new file mode 100644 index 000000000..11f02fe2a --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/src/vite.env.d.ts @@ -0,0 +1 @@ +/// diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.json b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.json new file mode 100644 index 000000000..05c4d41a9 --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.json @@ -0,0 +1,31 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "Node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": [ + "src" + ], + "references": [ + { + "path": "./tsconfig.node.json" + } + ] +} \ No newline at end of file diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.node.json b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.node.json new file mode 100644 index 000000000..65dbdb96a --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "ESNext", + "moduleResolution": "Node" + }, + "include": ["vite.config.ts"] +} diff --git a/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/vite.config.js b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/vite.config.js new file mode 100644 index 000000000..627a31962 --- /dev/null +++ b/apps/material-react-table-docs/examples/localization-i18n-hu/sandbox/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [react()], +}); diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx index f6eaca7a0..9a55695d4 100644 --- a/apps/material-react-table-docs/pages/changelog.mdx +++ b/apps/material-react-table-docs/pages/changelog.mdx @@ -12,6 +12,15 @@ import Head from 'next/head'; ### Version 1 (Latest) +#### v1.11.4 (2023-05-19) + +- Fixed right column pinning spacing issues +- Implemented `enableSortingRemoval` in column actions menu +- Internal virtualization specific logic for Firefox vs Chrome +- Exported new `MRT_FilterFnsState` type +- Exported `MRT_TableHeadCellFilterContainer` component +- Added hu translations that can be imported from `'material-react-table/locales/hu'` + #### v1.11.3 (2023-05-07) - Removed internal `measureElement` virtualizer option to prevent firefox from crashing with virtualization enabled diff --git a/apps/material-react-table-docs/pages/docs/guides/localization.mdx b/apps/material-react-table-docs/pages/docs/guides/localization.mdx index f811697ad..bf44effce 100644 --- a/apps/material-react-table-docs/pages/docs/guides/localization.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/localization.mdx @@ -22,7 +22,7 @@ Material React Table has full support for localization (i18n). Some locales are The following locales are included and can be imported from `'material-react-table/locales/'`: -`cs`, `da`, `de`, `en`, `es`, `fa`, `fi`, `fr`, `id`, `it`, `nl`, `ja`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cryl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant` +`cs`, `da`, `de`, `en`, `es`, `fa`, `fi`, `fr`, `hu`, `id`, `it`, `nl`, `ja`, `pl`, `pt`, `pt-BR`, `ro`, `ru`, `sk`, `sr-Cryl-RS`, `sr-Latn-RS`, `sv`, `tr`, `uk`, `vi`, `zh-Hans`, `zh-Hant` > If your language is not yet supported, please consider making a PR to add it to the library! See [here on GitHub](https://github.com/KevinVandy/material-react-table/tree/main/packages/material-react-table/src/_locales). diff --git a/apps/material-react-table-docs/pages/docs/guides/sorting.mdx b/apps/material-react-table-docs/pages/docs/guides/sorting.mdx index 9d2b832ff..45bbae524 100644 --- a/apps/material-react-table-docs/pages/docs/guides/sorting.mdx +++ b/apps/material-react-table-docs/pages/docs/guides/sorting.mdx @@ -25,6 +25,7 @@ Material React Table supports almost any sorting scenario you may have. Client-s 'enableGlobalFilterRankedResults', 'enableMultiSort', 'enableSorting', + 'enableSortingRemoval', 'getSortedRowModel', 'isMultiSortEvent', 'manualSorting', @@ -118,6 +119,18 @@ Multi-sorting is also enabled by default, which means you can sort by multiple c You can limit the number of columns that can be sorted at once by setting the `maxMultiSortColCount` prop, or you can disable multi-sorting entirely by setting the `enableMultiSort` prop to `false`. +#### Sorting Removal + +By default, users can remove a sort on a column by clicking through the sort direction options or selecting "Clear Sort" from the column actions menu. You can disable this feature by setting the `enableSortingRemoval` prop to `false`. + +```jsx + +``` + #### Sort Direction By default, columns with `string` datatypes will sort alphabetically in ascending order, but columns with `number` datatypes will sort numerically in descending order. You can change the default sort direction per column by specifying the `sortDescFirst` column option to either `true` or `false`. You can also change the default sort direction globally by setting the `sortDescFirst` prop to either `true` or `false`. diff --git a/apps/material-react-table-storybook/stories/features/Sorting.stories.tsx b/apps/material-react-table-storybook/stories/features/Sorting.stories.tsx index 21e589886..110a60ceb 100644 --- a/apps/material-react-table-storybook/stories/features/Sorting.stories.tsx +++ b/apps/material-react-table-storybook/stories/features/Sorting.stories.tsx @@ -85,6 +85,14 @@ export const DisableMultiSorting = () => ( ); +export const DisableSortingRemoval = () => ( + +); + export const SortRanking = () => ( = T | (U & Record); export type MRT_DensityState = 'comfortable' | 'compact' | 'spacious'; +export type MRT_FilterFnsState = Record; + export type { ColumnFiltersState as MRT_ColumnFiltersState, ColumnOrderState as MRT_ColumnOrderState, @@ -245,9 +247,7 @@ export type MRT_TableInstance = {}> = tablePaperRef: MutableRefObject; topToolbarRef: MutableRefObject; }; - setColumnFilterFns: Dispatch< - SetStateAction<{ [key: string]: MRT_FilterOption }> - >; + setColumnFilterFns: Dispatch>; setDensity: Dispatch>; setDraggingColumn: Dispatch | null>>; setDraggingRow: Dispatch | null>>; @@ -270,7 +270,7 @@ export type MRT_TableInstance = {}> = export type MRT_TableState = {}> = Prettify< TableState & { - columnFilterFns: Record; + columnFilterFns: MRT_FilterFnsState; density: MRT_DensityState; draggingColumn: MRT_Column | null; draggingRow: MRT_Row | null; diff --git a/packages/material-react-table/src/column.utils.ts b/packages/material-react-table/src/column.utils.ts index a4d185b64..66dab5f0c 100644 --- a/packages/material-react-table/src/column.utils.ts +++ b/packages/material-react-table/src/column.utils.ts @@ -238,9 +238,10 @@ export const getIsFirstRightPinnedColumn = (column: MRT_Column) => { }; export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => { - return ( - (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 200 - ); + return table + .getRightLeafHeaders() + .slice(column.getPinnedIndex() + 1) + .reduce((acc, col) => acc + col.getSize(), 0); }; export const getCommonCellStyles = ({ diff --git a/packages/material-react-table/src/index.tsx b/packages/material-react-table/src/index.tsx index 5cb9125c6..29b2bf493 100644 --- a/packages/material-react-table/src/index.tsx +++ b/packages/material-react-table/src/index.tsx @@ -11,9 +11,10 @@ import { MRT_EditActionButtons } from './buttons/MRT_EditActionButtons'; import { MRT_ExpandButton } from './buttons/MRT_ExpandButton'; import { MRT_FilterOptionMenu } from './menus/MRT_FilterOptionMenu'; import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton'; -import { MRT_GrabHandleButton } from './buttons/MRT_GrabHandleButton'; import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField'; +import { MRT_GrabHandleButton } from './buttons/MRT_GrabHandleButton'; import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton'; +import { MRT_TableHeadCellFilterContainer } from './head/MRT_TableHeadCellFilterContainer'; import { MRT_TablePagination } from './toolbar/MRT_TablePagination'; import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton'; import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton'; @@ -31,9 +32,10 @@ export { MRT_ExpandButton, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, - MRT_GrabHandleButton, MRT_GlobalFilterTextField, + MRT_GrabHandleButton, MRT_ShowHideColumnsButton, + MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, diff --git a/packages/material-react-table/src/menus/MRT_ColumnActionMenu.tsx b/packages/material-react-table/src/menus/MRT_ColumnActionMenu.tsx index 52cdaba53..4f721488b 100644 --- a/packages/material-react-table/src/menus/MRT_ColumnActionMenu.tsx +++ b/packages/material-react-table/src/menus/MRT_ColumnActionMenu.tsx @@ -45,6 +45,7 @@ export const MRT_ColumnActionMenu = ({ enableHiding, enablePinning, enableSorting, + enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, @@ -162,20 +163,23 @@ export const MRT_ColumnActionMenu = ({ table, }) ?? (enableSorting && - column.getCanSort() && [ - - - - - - {localization.clearSort} - - , + column.getCanSort() && + [ + enableSortingRemoval !== false && ( + + + + + + {localization.clearSort} + + + ), , - ])} + ].filter(Boolean))} {enableColumnFilters && column.getCanFilter() && [ diff --git a/packages/material-react-table/src/table/MRT_TableRoot.tsx b/packages/material-react-table/src/table/MRT_TableRoot.tsx index 4cc587b15..1a7dc8661 100644 --- a/packages/material-react-table/src/table/MRT_TableRoot.tsx +++ b/packages/material-react-table/src/table/MRT_TableRoot.tsx @@ -39,6 +39,7 @@ import type { MRT_DensityState, MRT_ColumnOrderState, MRT_GroupingState, + MRT_FilterFnsState, } from '..'; export const MRT_TableRoot: any = = {}>( @@ -61,22 +62,21 @@ export const MRT_TableRoot: any = = {}>( return initState; }, []); - const [columnFilterFns, setColumnFilterFns] = useState<{ - [key: string]: MRT_FilterOption; - }>(() => - Object.assign( - {}, - ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map( - (col) => ({ - [getColumnId(col)]: - col.filterFn instanceof Function - ? col.filterFn.name ?? 'custom' - : col.filterFn ?? - initialState?.columnFilterFns?.[getColumnId(col)] ?? - getDefaultColumnFilterFn(col), - }), + const [columnFilterFns, setColumnFilterFns] = useState( + () => + Object.assign( + {}, + ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef[]).map( + (col) => ({ + [getColumnId(col)]: + col.filterFn instanceof Function + ? col.filterFn.name ?? 'custom' + : col.filterFn ?? + initialState?.columnFilterFns?.[getColumnId(col)] ?? + getDefaultColumnFilterFn(col), + }), + ), ), - ), ); const [columnOrder, setColumnOrder] = useState( initialState.columnOrder ?? [],