From 52219e3e5eef6d267946e279f2551173e8bed1a1 Mon Sep 17 00:00:00 2001 From: Kevin Vandy Date: Tue, 11 Jul 2023 00:55:55 -0500 Subject: [PATCH] beta.26 display modes refactor --- .../prop-tables/ColumnOptionsTable.tsx | 5 +- .../prop-tables/TableOptionsTable.tsx | 5 +- .../components/prop-tables/tableOptions.ts | 43 ++++- .../examples/advanced/sandbox/src/JS.js | 4 +- .../examples/advanced/sandbox/src/Legacy.tsx | 4 +- .../examples/advanced/sandbox/src/TS.tsx | 4 +- .../alternate-pagination/sandbox/src/JS.js | 2 +- .../alternate-pagination/sandbox/src/TS.tsx | 2 +- .../editing-crud-cell/sandbox/src/JS.js | 4 +- .../editing-crud-cell/sandbox/src/TS.tsx | 4 +- .../editing-crud-modal/sandbox/src/JS.js | 4 +- .../editing-crud-modal/sandbox/src/TS.tsx | 4 +- .../editing-crud-row/sandbox/src/JS.js | 12 +- .../editing-crud-row/sandbox/src/TS.tsx | 12 +- .../editing-crud-table/sandbox/src/JS.js | 4 +- .../editing-crud-table/sandbox/src/TS.tsx | 4 +- .../enable-editing-cell/sandbox/src/JS.js | 2 +- .../enable-editing-cell/sandbox/src/TS.tsx | 2 +- .../enable-editing-modal/sandbox/src/JS.js | 2 +- .../enable-editing-modal/sandbox/src/TS.tsx | 2 +- .../enable-editing-row/sandbox/src/JS.js | 2 +- .../enable-editing-row/sandbox/src/TS.tsx | 2 +- .../enable-editing-table/sandbox/src/JS.js | 4 +- .../enable-editing-table/sandbox/src/TS.tsx | 4 +- .../sandbox/src/JS.js | 3 +- .../sandbox/src/TS.tsx | 3 +- .../examples/export-to-csv/sandbox/src/JS.js | 9 +- .../export-to-csv/sandbox/src/Legacy.tsx | 4 +- .../examples/export-to-csv/sandbox/src/TS.tsx | 4 +- .../font-awesome-icons/sandbox/src/JS.js | 2 +- .../font-awesome-icons/sandbox/src/TS.tsx | 2 +- .../examples/memoize-cells/sandbox/src/JS.js | 2 +- .../examples/memoize-cells/sandbox/src/TS.tsx | 2 +- .../sandbox/src/makeData.ts | 4 +- .../pages/changelog.mdx | 13 +- .../pages/docs/guides/column-filtering.mdx | 3 +- .../pages/docs/guides/editing.mdx | 6 +- .../pages/docs/guides/pagination.mdx | 7 +- .../pages/docs/guides/row-selection.mdx | 3 +- packages/mantine-react-table/package.json | 2 +- .../src/body/MRT_TableBody.tsx | 4 +- .../src/body/MRT_TableBodyCell.tsx | 17 +- .../buttons/MRT_ToggleRowActionMenuButton.tsx | 8 +- .../mantine-react-table/src/column.utils.ts | 4 +- .../src/head/MRT_TableHeadCell.tsx | 3 +- .../head/MRT_TableHeadCellFilterContainer.tsx | 21 +- .../src/head/MRT_TableHeadCellFilterLabel.tsx | 180 ++++++++++++------ .../src/hooks/useMRT_DisplayColumns.tsx | 4 +- .../src/hooks/useMRT_TableOptions.ts | 12 +- packages/mantine-react-table/src/icons.ts | 2 + packages/mantine-react-table/src/index.ts | 2 +- .../src/inputs/MRT_EditCellTextInput.tsx | 10 +- .../src/inputs/MRT_FilterTextInput.tsx | 4 +- .../src/inputs/MRT_SelectCheckbox.tsx | 50 +++-- .../src/menus/MRT_ColumnActionMenu.tsx | 41 ++-- .../src/menus/MRT_RowActionMenu.tsx | 4 +- .../src/table/MRT_Table.tsx | 8 +- .../src/toolbar/MRT_ProgressBar.tsx | 12 +- .../src/toolbar/MRT_TablePagination.tsx | 17 +- .../toolbar/MRT_ToolbarInternalButtons.tsx | 9 +- packages/mantine-react-table/src/types.ts | 144 ++++++-------- .../stories/features/Editing.stories.tsx | 24 +-- .../stories/features/Filtering.stories.tsx | 162 ++++++++++++++++ .../stories/features/Memod.stories.tsx | 8 +- .../stories/features/Pagination.stories.tsx | 4 +- .../stories/features/Selection.stories.tsx | 3 +- .../stories/fixed-bugs/editing.stories.tsx | 2 +- 67 files changed, 598 insertions(+), 367 deletions(-) diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx index 437ba2817..27971fe31 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsTable.tsx @@ -140,10 +140,7 @@ const ColumnOptionsTable = ({ onlyOptions }: Props) => { columnVisibility: { required: false, description: false }, density: 'xs', showGlobalFilter: true, - sorting: [ - { id: 'required', desc: true }, - { id: 'columnOption', desc: false }, - ], + sorting: [{ id: 'columnOption', desc: false }], }} mantineSearchTextInputProps={{ placeholder: 'Search Column Options', diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableOptionsTable.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableOptionsTable.tsx index 6cff74685..d25619e87 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/TableOptionsTable.tsx +++ b/apps/mantine-react-table-docs/components/prop-tables/TableOptionsTable.tsx @@ -153,10 +153,7 @@ const TableOptionsTable = ({ onlyOptions }: Props) => { columnVisibility: { required: false, description: false }, density: 'xs', showGlobalFilter: true, - sorting: [ - { id: 'required', desc: true }, - { id: 'tableOptionName', desc: false }, - ], + sorting: [{ id: 'tableOptionName', desc: false }], }} mantineSearchTextInputProps={{ placeholder: 'Search All Props', diff --git a/apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts b/apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts index 6d2141242..85476f4ac 100644 --- a/apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts +++ b/apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts @@ -108,7 +108,7 @@ export const tableOptions: TableOption[] = [ type: 'MutableRefObject', }, { - tableOptionName: 'creatingMode', + tableOptionName: 'createDisplayMode', defaultValue: "'modal'", description: 'You can choose between 3 different built-in creating modes. Create a row in a modal, or a row inline, or render your own custom creating UI.', @@ -206,7 +206,7 @@ export const tableOptions: TableOption[] = [ type: '{ [key: string]: MRT_ColumnDef }', }, { - tableOptionName: 'editingMode', + tableOptionName: 'editDisplayMode', defaultValue: "'modal'", description: 'You can choose between 5 different built-in editing modes. Edit a row in a modal, or a row inline, just 1 cell at a time, always have all cells editable, or create your own custom external editing UI.', @@ -667,7 +667,18 @@ export const tableOptions: TableOption[] = [ linkText: '', required: false, source: '', - type: '(dataRow: TData) => TData[]', //? + type: '(dataRow: TData) => TData[]', + }, + { + tableOptionName: 'columnFilterDisplayMode', + defaultValue: "'subheader'", + description: + 'You can choose between 3 different built-in filter display modes. See column filters below the header, in a pop-up menu, or in your own custom components.', + link: '/docs/guides/editing#editing-modes', + linkText: 'MRT Editing Docs', + required: false, + source: 'MRT', + type: "'subheader' | 'popover' | 'custom'", }, { tableOptionName: 'filterFns', @@ -1629,7 +1640,7 @@ export const tableOptions: TableOption[] = [ source: 'MRT', type: 'OnChangeFn', }, - { + { tableOptionName: 'onCreatingRowSave', defaultValue: '', description: '', @@ -1649,7 +1660,7 @@ export const tableOptions: TableOption[] = [ source: 'MRT', type: '({ exitEditingMode, row, table, values}) => Promise | void', }, - { + { tableOptionName: 'onCreatingRowCancel', defaultValue: '', description: '', @@ -1753,6 +1764,17 @@ export const tableOptions: TableOption[] = [ source: 'TanStack Table', type: 'number', }, + { + tableOptionName: 'paginationDisplayMode', + defaultValue: "'default'", + description: + "You can choose between 3 different built-in pagination display modes. Use the default pagination UI, mantine's pagination component, or a custom pagination component.", + link: '/docs/guides/editing#editing-modes', + linkText: 'MRT Editing Docs', + required: false, + source: 'MRT', + type: "'default' | 'pages' | 'custom'", + }, { tableOptionName: 'paginateExpandedRows', defaultValue: '', @@ -1994,6 +2016,17 @@ export const tableOptions: TableOption[] = [ source: '', type: `'all' | 'page'`, }, + { + tableOptionName: 'selectDisplayMode', + defaultValue: "'checkbox'", + description: + 'You can choose between 3 different built-in select display modes. Use the default checkboxes, radio buttons, or switches.', + link: '/docs/guides/editing#editing-modes', + linkText: 'MRT Editing Docs', + required: false, + source: 'MRT', + type: "'checkbox' | 'radio' | 'switch'", + }, { tableOptionName: 'sortDescFirst', defaultValue: '', diff --git a/apps/mantine-react-table-docs/examples/advanced/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/advanced/sandbox/src/JS.js index 2abdc152f..2607d5ebb 100644 --- a/apps/mantine-react-table-docs/examples/advanced/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/advanced/sandbox/src/JS.js @@ -125,9 +125,7 @@ const Example = () => { enableRowActions: true, enableRowSelection: true, initialState: { showColumnFilters: true }, - mantinePaginationProps: { - variant: 'mantine', - }, + paginationDisplayMode: 'pages', positionToolbarAlertBanner: 'bottom', renderDetailPanel: ({ row }) => ( { enableRowActions enableRowSelection initialState={{ showColumnFilters: true }} - mantinePaginationProps={{ - variant: 'mantine', - }} + paginationDisplayMode="pages" positionToolbarAlertBanner="bottom" renderDetailPanel={({ row }) => ( { enableRowActions: true, enableRowSelection: true, initialState: { showColumnFilters: true }, - mantinePaginationProps: { - variant: 'mantine', - }, + paginationDisplayMode: 'pages', positionToolbarAlertBanner: 'bottom', renderDetailPanel: ({ row }) => ( { data, mantinePaginationProps: { showRowsPerPage: false, - variant: 'mantine', }, + paginationDisplayMode: 'mantine', }); return ; diff --git a/apps/mantine-react-table-docs/examples/alternate-pagination/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/alternate-pagination/sandbox/src/TS.tsx index f9146dc3e..b668dcb8e 100644 --- a/apps/mantine-react-table-docs/examples/alternate-pagination/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/alternate-pagination/sandbox/src/TS.tsx @@ -7,8 +7,8 @@ const Example = () => { data, mantinePaginationProps: { showRowsPerPage: false, - variant: 'mantine', }, + paginationDisplayMode: 'pages', }); return ; diff --git a/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/JS.js index 617ba4176..b6faf1cf3 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/JS.js @@ -161,8 +161,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'row', // ('modal', and 'custom' are also available) - editingMode: 'cell', // ('modal', 'row', 'cell', and 'custom' are also available) + createDisplayMode: 'row', // ('modal', and 'custom' are also available) + editDisplayMode: 'cell', // ('modal', 'row', 'cell', and 'custom' are also available) enableEditing: true, enableRowActions: true, positionActionsColumn: 'last', diff --git a/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/TS.tsx index 3d5d6a265..f30bf5fe4 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/editing-crud-cell/sandbox/src/TS.tsx @@ -169,8 +169,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'row', // ('modal', and 'custom' are also available) - editingMode: 'cell', // ('modal', 'row', 'cell', and 'custom' are also available) + createDisplayMode: 'row', // ('modal', and 'custom' are also available) + editDisplayMode: 'cell', // ('modal', 'row', 'cell', and 'custom' are also available) enableEditing: true, enableRowActions: true, positionActionsColumn: 'last', diff --git a/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/JS.js index 8b637e092..244d67578 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/JS.js @@ -154,8 +154,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'modal', //default ('row', and 'custom' are also available) - editingMode: 'modal', //default ('row', 'cell', 'table', and 'custom' are also available) + createDisplayMode: 'modal', //default ('row', and 'custom' are also available) + editDisplayMode: 'modal', //default ('row', 'cell', 'table', and 'custom' are also available) enableEditing: true, getRowId: (row) => row.id, mantineToolbarAlertBannerProps: isLoadingUsersError diff --git a/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx index 2b7ab1e60..9c3d1b98f 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/editing-crud-modal/sandbox/src/TS.tsx @@ -165,8 +165,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'modal', //default ('row', and 'custom' are also available) - editingMode: 'modal', //default ('row', 'cell', 'table', and 'custom' are also available) + createDisplayMode: 'modal', //default ('row', and 'custom' are also available) + editDisplayMode: 'modal', //default ('row', 'cell', 'table', and 'custom' are also available) enableEditing: true, getRowId: (row) => row.id, mantineToolbarAlertBannerProps: isLoadingUsersError diff --git a/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/JS.js index 9b6c167f9..0335c8569 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/JS.js @@ -4,13 +4,7 @@ import { // createRow, useMantineReactTable, } from 'mantine-react-table'; -import { - ActionIcon, - Button, - Flex, - Text, - Tooltip, -} from '@mantine/core'; +import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core'; import { ModalsProvider, modals } from '@mantine/modals'; import { IconEdit, IconTrash } from '@tabler/icons-react'; import { @@ -151,8 +145,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'row', // ('modal', and 'custom' are also available) - editingMode: 'row', // ('modal', 'cell', 'table', and 'custom' are also available) + createDisplayMode: 'row', // ('modal', and 'custom' are also available) + editDisplayMode: 'row', // ('modal', 'cell', 'table', and 'custom' are also available) enableEditing: true, getRowId: (row) => row.id, mantineToolbarAlertBannerProps: isLoadingUsersError diff --git a/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/TS.tsx index 982552a52..eeee6b630 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/editing-crud-row/sandbox/src/TS.tsx @@ -7,13 +7,7 @@ import { type MRT_TableOptions, useMantineReactTable, } from 'mantine-react-table'; -import { - ActionIcon, - Button, - Flex, - Text, - Tooltip, -} from '@mantine/core'; +import { ActionIcon, Button, Flex, Text, Tooltip } from '@mantine/core'; import { ModalsProvider, modals } from '@mantine/modals'; import { IconEdit, IconTrash } from '@tabler/icons-react'; import { @@ -162,8 +156,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'row', // ('modal', and 'custom' are also available) - editingMode: 'row', // ('modal', 'cell', 'table', and 'custom' are also available) + createDisplayMode: 'row', // ('modal', and 'custom' are also available) + editDisplayMode: 'row', // ('modal', 'cell', 'table', and 'custom' are also available) enableEditing: true, getRowId: (row) => row.id, mantineToolbarAlertBannerProps: isLoadingUsersError diff --git a/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/JS.js index 5e05405a6..3230e9be2 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/JS.js @@ -161,8 +161,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'row', // ('modal', and 'custom' are also available) - editingMode: 'table', // ('modal', 'row', 'cell', and 'custom' are also available) + createDisplayMode: 'row', // ('modal', and 'custom' are also available) + editDisplayMode: 'table', // ('modal', 'row', 'cell', and 'custom' are also available) enableEditing: true, enableRowActions: true, positionActionsColumn: 'last', diff --git a/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/TS.tsx index 122e41957..59b8128e2 100644 --- a/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/editing-crud-table/sandbox/src/TS.tsx @@ -169,8 +169,8 @@ const Example = () => { const table = useMantineReactTable({ columns, data: fetchedUsers, - creatingMode: 'row', // ('modal', and 'custom' are also available) - editingMode: 'table', // ('modal', 'row', 'cell', and 'custom' are also available) + createDisplayMode: 'row', // ('modal', and 'custom' are also available) + editDisplayMode: 'table', // ('modal', 'row', 'cell', and 'custom' are also available) enableEditing: true, enableRowActions: true, positionActionsColumn: 'last', diff --git a/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/JS.js index e32d677c4..d6b76c710 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/JS.js @@ -44,7 +44,7 @@ const Example = () => { ({ //onBlur is more efficient, but could use onChange instead diff --git a/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/TS.tsx index 53572869a..b88b32736 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/enable-editing-cell/sandbox/src/TS.tsx @@ -48,7 +48,7 @@ const Example = () => { ({ //onBlur is more efficient, but could use onChange instead diff --git a/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/JS.js index 9b0978ca9..ce10114b8 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/JS.js @@ -45,7 +45,7 @@ const Example = () => { diff --git a/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/TS.tsx index 4769dc270..5c75cedee 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/enable-editing-modal/sandbox/src/TS.tsx @@ -53,7 +53,7 @@ const Example = () => { diff --git a/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/JS.js index 6d3ef79ea..ed61a2a6b 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/JS.js @@ -45,7 +45,7 @@ const Example = () => { diff --git a/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/TS.tsx index 8168c5baf..da0e7c87e 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/enable-editing-row/sandbox/src/TS.tsx @@ -53,7 +53,7 @@ const Example = () => { diff --git a/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/JS.js index 96201d748..2589a8d6f 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/JS.js @@ -43,14 +43,14 @@ const Example = () => { ({ //onBlur is more efficient, but could use onChange instead onBlur: (event) => { handleSaveCell(cell, event.target.value); }, - variant: 'unstyled', //default for editingMode="table" + variant: 'unstyled', //default for editDisplayMode="table" })} /> ); diff --git a/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/TS.tsx index bb20a8eb2..e3435acf6 100644 --- a/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/enable-editing-table/sandbox/src/TS.tsx @@ -47,14 +47,14 @@ const Example = () => { ({ //onBlur is more efficient, but could use onChange instead onBlur: (event) => { handleSaveCell(cell, event.target.value); }, - variant: 'unstyled', //default for editingMode="table" + variant: 'unstyled', //default for editDisplayMode="table" })} /> ); diff --git a/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/JS.js index 28faaf46f..1a57eb4b9 100644 --- a/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/JS.js @@ -26,9 +26,8 @@ const Example = () => { data, enableRowSelection: true, getRowId: (row) => row.userId, - mantineSelectCheckboxProps: { variant: 'switch' }, - mantineSelectAllCheckboxProps: { variant: 'switch' }, positionToolbarAlertBanner: 'bottom', + selectDisplayMode: 'switch', }); return ; diff --git a/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/TS.tsx index 98e3d9234..88679bfac 100644 --- a/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/enable-row-selection-switch/sandbox/src/TS.tsx @@ -30,9 +30,8 @@ const Example = () => { data, enableRowSelection: true, getRowId: (row) => row.userId, - mantineSelectCheckboxProps: { variant: 'switch' }, - mantineSelectAllCheckboxProps: { variant: 'switch' }, positionToolbarAlertBanner: 'bottom', + selectDisplayMode: 'switch', }); return ; diff --git a/apps/mantine-react-table-docs/examples/export-to-csv/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/export-to-csv/sandbox/src/JS.js index d88b02cf8..80db96fd6 100644 --- a/apps/mantine-react-table-docs/examples/export-to-csv/sandbox/src/JS.js +++ b/apps/mantine-react-table-docs/examples/export-to-csv/sandbox/src/JS.js @@ -1,7 +1,4 @@ -import { - MantineReactTable, - useMantineReactTable, -} from 'mantine-react-table'; +import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'; import { Box, Button } from '@mantine/core'; import { IconDownload } from '@tabler/icons-react'; import { ExportToCsv } from 'export-to-csv'; //or use your library of choice here @@ -65,9 +62,7 @@ const Example = () => { columns, data, enableRowSelection: true, - mantinePaginationProps: { - variant: 'mantine', - }, + paginationDisplayMode: 'pages', positionToolbarAlertBanner: 'bottom', renderTopToolbarCustomActions: ({ table }) => ( { columns={columns} data={data} enableRowSelection - mantinePaginationProps={{ - variant: 'mantine', - }} + paginationDisplayMode="pages" positionToolbarAlertBanner="bottom" renderTopToolbarCustomActions={({ table }) => ( { columns, data, enableRowSelection: true, - mantinePaginationProps: { - variant: 'mantine', - }, + paginationDisplayMode: 'pages', positionToolbarAlertBanner: 'bottom', renderTopToolbarCustomActions: ({ table }) => ( { { { return <>{cell.getValue()}; }, }} - editingMode="row" + editDisplayMode="row" enableColumnOrdering enableDensityToggle={false} //density toggle is not compatible with memoization enableEditing diff --git a/apps/mantine-react-table-docs/examples/memoize-cells/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/memoize-cells/sandbox/src/TS.tsx index 40ec9fb2f..f83d48d19 100644 --- a/apps/mantine-react-table-docs/examples/memoize-cells/sandbox/src/TS.tsx +++ b/apps/mantine-react-table-docs/examples/memoize-cells/sandbox/src/TS.tsx @@ -42,7 +42,7 @@ export const Example = () => { return <>{cell.getValue()}; }, }} - editingMode="row" + editDisplayMode="row" enableColumnOrdering enableDensityToggle={false} //density toggle is not compatible with memoization enableEditing diff --git a/apps/mantine-react-table-docs/examples/row-actions-menu-items/sandbox/src/makeData.ts b/apps/mantine-react-table-docs/examples/row-actions-menu-items/sandbox/src/makeData.ts index 289927eb2..d489b3eb3 100644 --- a/apps/mantine-react-table-docs/examples/row-actions-menu-items/sandbox/src/makeData.ts +++ b/apps/mantine-react-table-docs/examples/row-actions-menu-items/sandbox/src/makeData.ts @@ -1,4 +1,4 @@ -import { type MRT_ColumnDef } from "mantine-react-table"; +import { type MRT_ColumnDef } from 'mantine-react-table'; export type Person = { firstName: string; @@ -29,7 +29,7 @@ export const columns: MRT_ColumnDef[] = [ accessorKey: 'state', header: 'State', }, -] +]; export const data = [ { diff --git a/apps/mantine-react-table-docs/pages/changelog.mdx b/apps/mantine-react-table-docs/pages/changelog.mdx index 51c889787..4d5be1cf9 100644 --- a/apps/mantine-react-table-docs/pages/changelog.mdx +++ b/apps/mantine-react-table-docs/pages/changelog.mdx @@ -12,6 +12,17 @@ import Head from 'next/head'; ### V1 +#### V1.0.0-beta.26 + +- Renamed `creatingMode` table option to `createDisplayMode` +- Renamed `editingMode` table option to `editDisplayMode` +- Added `columnFilterDisplayMode` table option to render column filters in `'subheader' | 'popover' | 'custom'` display modes +- Added `paginationDisplayMode` table option to render pagination in `'default' | 'pages' | 'custom'` display modes +- Added `selectDisplayMode` table option to render `'checkbox' | 'radio' | 'switch'` select modes +- Fixed large pagination numbers not being formatted with locale string +- Better column actions menu alignment +- Starting using `IconFilterCog` tabler icon for filter mode switching button. + #### V1.0.0-beta.25 - Fixed "Toggle Full Screen" tooltip not hiding after clicking to toggle full screen @@ -46,7 +57,7 @@ import Head from 'next/head'; #### V1.0.0-beta.19 -- New `"custom"` editingMode that does not render any editing UI, but still handles the edit states +- New `"custom"` editDisplayMode that does not render any editing UI, but still handles the edit states - New `isSaving` state option to show spinner in edit save buttons - New `renderEditRowModalContent` table option to allow for the edit modal to be fully customized - New `mantineEditRowModalProps` table option to allow for customizing the props of the edit modal diff --git a/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx b/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx index 1c738c34d..226b439c6 100644 --- a/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx +++ b/apps/mantine-react-table-docs/pages/docs/guides/column-filtering.mdx @@ -31,19 +31,20 @@ Filtering is one of the most powerful features of Mantine React Table and is ena 'enableFacetedValues', 'enableFilterMatchHighlighting', 'enableFilters', + 'columnFilterDisplayMode', 'filterFns', 'filterFromLeafRows', 'getFacetedMinMaxValues', 'getFacetedRowModel', 'getFacetedUniqueValues', 'getFilteredRowModel', - 'mantineHighlightProps', 'mantineFilterAutocompleteProps', 'mantineFilterCheckboxProps', 'mantineFilterMultiSelectProps', 'mantineFilterRangeProps', 'mantineFilterSelectProps', 'mantineFilterTextInputProps', + 'mantineHighlightProps', 'manualFiltering', 'maxLeafRowFilterDepth', 'onColumnFilterFnsChange', diff --git a/apps/mantine-react-table-docs/pages/docs/guides/editing.mdx b/apps/mantine-react-table-docs/pages/docs/guides/editing.mdx index f40f94f21..d78354f16 100644 --- a/apps/mantine-react-table-docs/pages/docs/guides/editing.mdx +++ b/apps/mantine-react-table-docs/pages/docs/guides/editing.mdx @@ -26,8 +26,8 @@ There are 4 visually distinct editing modes to choose from, whether you want to @@ -184,7 +185,7 @@ const table = useMantineReactTable({ ### Alternate Switch and Radio Variants -By default, the selection inputs are Mantine checkboxes, but you can use switch or radio buttons instead with the `mantineSelectCheckboxProps.variant` prop. +By default, the selection inputs are Mantine checkboxes, but you can use switch or radio buttons instead with the `selectDisplayMode` table option. diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json index 62fe1fb74..924826dd0 100644 --- a/packages/mantine-react-table/package.json +++ b/packages/mantine-react-table/package.json @@ -1,5 +1,5 @@ { - "version": "1.0.0-beta.25", + "version": "1.0.0-beta.26", "license": "MIT", "name": "mantine-react-table", "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.", diff --git a/packages/mantine-react-table/src/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/body/MRT_TableBody.tsx index ade0a7a29..4f8635c7a 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBody.tsx +++ b/packages/mantine-react-table/src/body/MRT_TableBody.tsx @@ -35,7 +35,7 @@ export const MRT_TableBody = >({ getPrePaginationRowModel, getState, options: { - creatingMode, + createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, @@ -150,7 +150,7 @@ export const MRT_TableBody = >({ : (tableBodyProps?.sx as any)), })} > - {creatingRow && creatingMode === 'row' && ( + {creatingRow && createDisplayMode === 'row' && ( )} {!rows.length ? ( diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx index 246f98ea7..f74834666 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx +++ b/packages/mantine-react-table/src/body/MRT_TableBodyCell.tsx @@ -48,8 +48,8 @@ export const MRT_TableBodyCell = >({ const { getState, options: { - creatingMode, - editingMode, + createDisplayMode, + editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, @@ -158,18 +158,18 @@ export const MRT_TableBodyCell = >({ const isEditing = isEditable && - !['modal', 'custom'].includes(editingMode as string) && - (editingMode === 'table' || + !['modal', 'custom'].includes(editDisplayMode as string) && + (editDisplayMode === 'table' || editingRow?.id === row.id || editingCell?.id === cell.id) && !row.getIsGrouped(); const isCreating = - isEditable && creatingMode === 'row' && creatingRow?.id === row.id; + isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id; const handleDoubleClick = (event: MouseEvent) => { tableCellProps?.onDoubleClick?.(event); - if (isEditable && editingMode === 'cell') { + if (isEditable && editDisplayMode === 'cell') { setEditingCell(cell); setTimeout(() => { const textField = editInputRefs.current[cell.id]; @@ -207,7 +207,8 @@ export const MRT_TableBodyCell = >({ onDoubleClick={handleDoubleClick} sx={(theme) => ({ alignItems: layoutMode === 'grid' ? 'center' : undefined, - cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', + cursor: + isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', @@ -222,7 +223,7 @@ export const MRT_TableBodyCell = >({ '&:hover': { outline: isEditing && - ['table', 'cell'].includes(editingMode ?? '') && + ['table', 'cell'].includes(editDisplayMode ?? '') && columnDefType !== 'display' ? `1px solid ${theme.colors.gray[7]}` : undefined, diff --git a/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx index 161094a33..753a53805 100644 --- a/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx +++ b/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx @@ -20,8 +20,8 @@ export const MRT_ToggleRowActionMenuButton = < const { getState, options: { - creatingMode, - editingMode, + createDisplayMode, + editDisplayMode, enableEditing, icons: { IconEdit }, localization, @@ -42,8 +42,8 @@ export const MRT_ToggleRowActionMenuButton = < }; const showEditActionButtons = - (isCreating && creatingMode === 'row') || - (isEditing && editingMode === 'row'); + (isCreating && createDisplayMode === 'row') || + (isEditing && editDisplayMode === 'row'); return ( <> diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts index b4d7c7f68..72fc3ab32 100644 --- a/packages/mantine-react-table/src/column.utils.ts +++ b/packages/mantine-react-table/src/column.utils.ts @@ -154,7 +154,7 @@ export const getLeadingDisplayColumnIds = >( props.positionActionsColumn === 'first' && (props.enableRowActions || (props.enableEditing && - ['row', 'modal', 'custom'].includes(props.editingMode ?? ''))) && + ['row', 'modal', 'custom'].includes(props.editDisplayMode ?? ''))) && 'mrt-row-actions', props.positionExpandColumn === 'first' && showExpandColumn(props) && @@ -170,7 +170,7 @@ export const getTrailingDisplayColumnIds = >( props.positionActionsColumn === 'last' && (props.enableRowActions || (props.enableEditing && - ['row', 'modal'].includes(props.editingMode ?? ''))) && + ['row', 'modal'].includes(props.editDisplayMode ?? ''))) && 'mrt-row-actions', props.positionExpandColumn === 'last' && showExpandColumn(props) && diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx index d0d1fa610..6c89795aa 100644 --- a/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx +++ b/packages/mantine-react-table/src/head/MRT_TableHeadCell.tsx @@ -22,6 +22,7 @@ export const MRT_TableHeadCell = >({ const { getState, options: { + columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, @@ -232,7 +233,7 @@ export const MRT_TableHeadCell = >({ )} )} - {column.getCanFilter() && ( + {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && ( )} diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx index 9375d92f3..2e6df900f 100644 --- a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx +++ b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx @@ -20,11 +20,13 @@ export const MRT_TableHeadCellFilterContainer = < const { getState, options: { + columnFilterDisplayMode, enableColumnFilterModes, columnFilterModeOptions, - icons: { IconFilter }, + icons: { IconFilterCog }, localization, }, + refs: { filterInputRefs }, } = table; const { showColumnFilters } = getState(); const { column } = header; @@ -40,7 +42,7 @@ export const MRT_TableHeadCellFilterContainer = < !!allowedColumnFilterOptions?.length); return ( - + {columnDef.filterVariant === 'checkbox' ? ( @@ -56,7 +58,7 @@ export const MRT_TableHeadCellFilterContainer = < )} {showChangeModeButton && ( - + - + - + + setTimeout( + () => filterInputRefs.current[`${column.id}-0`]?.focus(), + 100, + ) + } + /> )} diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx index b2cf67fe5..32e1c7ce6 100644 --- a/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx +++ b/packages/mantine-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx @@ -1,6 +1,15 @@ -import { type MouseEvent } from 'react'; -import { ActionIcon, Box, Transition, Tooltip } from '@mantine/core'; +import { useState, type MouseEvent } from 'react'; +import { + ActionIcon, + Box, + Transition, + Tooltip, + Popover, + useMantineTheme, +} from '@mantine/core'; +import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer'; import { type MRT_Header, type MRT_TableInstance } from '../types'; +import { getPrimaryColor } from '../column.utils'; interface Props> { header: MRT_Header; @@ -15,6 +24,7 @@ export const MRT_TableHeadCellFilterLabel = < }: Props) => { const { options: { + columnFilterDisplayMode, icons: { IconFilter }, localization, }, @@ -24,76 +34,120 @@ export const MRT_TableHeadCellFilterLabel = < const { column } = header; const { columnDef } = column; + const theme = useMantineTheme(); + + const filterValue = column.getFilterValue(); + + const [popoverOpened, setPopoverOpened] = useState(false); + + const isFilterActive = + (Array.isArray(filterValue) && filterValue.filter(Boolean).length) || + !!filterValue; + const isRangeFilter = columnDef.filterVariant === 'range' || ['between', 'betweenInclusive', 'inNumberRange'].includes( columnDef._filterFn, ); const currentFilterOption = columnDef._filterFn; - const filterTooltip = localization.filteringByColumn - .replace('{column}', String(columnDef.header)) - .replace( - '{filterType}', - // @ts-ignore - localization[ - `filter${ - currentFilterOption?.charAt(0)?.toUpperCase() + - currentFilterOption?.slice(1) - }` - ], - ) - .replace( - '{filterValue}', - `"${ - Array.isArray(column.getFilterValue()) - ? (column.getFilterValue() as [string, string]).join( - `" ${isRangeFilter ? localization.and : localization.or} "`, - ) - : (column.getFilterValue() as string) - }"`, - ) - .replace('" "', ''); + const filterTooltip = + columnFilterDisplayMode === 'popover' && !isFilterActive + ? localization.filterByColumn?.replace( + '{column}', + String(columnDef.header), + ) + : localization.filteringByColumn + .replace('{column}', String(columnDef.header)) + .replace( + '{filterType}', + // @ts-ignore + localization[ + `filter${ + currentFilterOption?.charAt(0)?.toUpperCase() + + currentFilterOption?.slice(1) + }` + ], + ) + .replace( + '{filterValue}', + `"${ + Array.isArray(column.getFilterValue()) + ? (column.getFilterValue() as [string, string]).join( + `" ${isRangeFilter ? localization.and : localization.or} "`, + ) + : (column.getFilterValue() as string) + }"`, + ) + .replace('" "', ''); return ( - setPopoverOpened(false)} + opened={popoverOpened} + position="top" + keepMounted={columnDef.filterVariant === 'range-slider'} + shadow="xl" + width={Math.min(column.getSize() * 2, 300)} + withinPortal > - {(styles) => ( - - 40 ? 300 : undefined} - withinPortal - > - ) => { - setShowColumnFilters(true); - setTimeout(() => { - filterInputRefs.current[`${column.id}-0`]?.focus(); - filterInputRefs.current[`${column.id}-0`]?.select(); - }, 100); - event.stopPropagation(); - }} - size="sm" - sx={{ - opacity: 0.5, - padding: '2px', - '&:hover': { - opacity: 1, - }, - }} - > - - - - + + {(styles) => ( + + + 40 ? 300 : undefined} + withinPortal + > + ) => { + event.stopPropagation(); + if (columnFilterDisplayMode === 'popover') { + setPopoverOpened((opened) => !opened); + } else { + setShowColumnFilters(true); + } + setTimeout(() => { + filterInputRefs.current[`${column.id}-0`]?.focus(); + filterInputRefs.current[`${column.id}-0`]?.select(); + }, 100); + }} + size="sm" + sx={{ + opacity: isFilterActive ? 1 : 0.5, + padding: '2px', + '&:hover': { + opacity: 1, + }, + }} + > + + + + + + )} + + {columnFilterDisplayMode === 'popover' && ( + event.stopPropagation()}> + + )} - + ); }; diff --git a/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx b/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx index 4340c563a..b29d67841 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx +++ b/packages/mantine-react-table/src/hooks/useMRT_DisplayColumns.tsx @@ -49,7 +49,7 @@ export const useMRT_DisplayColumns = >({ ((tableOptions.state?.columnOrder ?? columnOrder).includes( 'mrt-row-actions', ) || - (creatingRow && tableOptions.creatingMode === 'row')) && { + (creatingRow && tableOptions.createDisplayMode === 'row')) && { Cell: ({ cell, row, table }) => ( >({ columnOrder, grouping, tableOptions.displayColumnDefOptions, - tableOptions.editingMode, + tableOptions.editDisplayMode, tableOptions.enableColumnDragging, tableOptions.enableColumnFilterModes, tableOptions.enableColumnOrdering, diff --git a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts index 09aa93173..8fdc0a451 100644 --- a/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts +++ b/packages/mantine-react-table/src/hooks/useMRT_TableOptions.ts @@ -12,11 +12,12 @@ export const useMRT_TableOptions: >( ) => MRT_DefinedTableOptions = >({ aggregationFns, autoResetExpanded = false, + columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', - creatingMode = 'modal', + createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, - editingMode = 'modal', + editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, @@ -52,6 +53,7 @@ export const useMRT_TableOptions: >( manualGrouping, manualPagination, manualSorting, + paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', @@ -111,11 +113,12 @@ export const useMRT_TableOptions: >( return { aggregationFns: _aggregationFns, autoResetExpanded, + columnFilterDisplayMode, columnResizeMode, - creatingMode, + createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, - editingMode, + editDisplayMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, @@ -151,6 +154,7 @@ export const useMRT_TableOptions: >( manualGrouping, manualPagination, manualSorting, + paginationDisplayMode, positionActionsColumn, positionExpandColumn, positionGlobalFilter, diff --git a/packages/mantine-react-table/src/icons.ts b/packages/mantine-react-table/src/icons.ts index 5af6245af..fda8b518e 100644 --- a/packages/mantine-react-table/src/icons.ts +++ b/packages/mantine-react-table/src/icons.ts @@ -20,6 +20,7 @@ import { IconEdit, IconEyeOff, IconFilter, + IconFilterCog, IconFilterOff, IconGripHorizontal, IconMaximize, @@ -55,6 +56,7 @@ export const MRT_Default_Icons = { IconEdit, IconEyeOff, IconFilter, + IconFilterCog, IconFilterOff, IconGripHorizontal, IconMaximize, diff --git a/packages/mantine-react-table/src/index.ts b/packages/mantine-react-table/src/index.ts index 8fbed588a..0654ea0d6 100644 --- a/packages/mantine-react-table/src/index.ts +++ b/packages/mantine-react-table/src/index.ts @@ -13,4 +13,4 @@ export * from './sortingFns'; export * from './table'; export * from './toolbar'; export * from './types'; -export * from './useMantineReactTable'; \ No newline at end of file +export * from './useMantineReactTable'; diff --git a/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx index 9b6ce11f0..5b96f6f3d 100644 --- a/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx +++ b/packages/mantine-react-table/src/inputs/MRT_EditCellTextInput.tsx @@ -14,8 +14,8 @@ export const MRT_EditCellTextInput = >({ const { getState, options: { - creatingMode, - editingMode, + createDisplayMode, + editDisplayMode, mantineEditTextInputProps, mantineEditSelectProps, }, @@ -107,18 +107,18 @@ export const MRT_EditCellTextInput = >({ ? columnDef.enableEditing(row) : columnDef.enableEditing) === false, label: ['modal', 'custom'].includes( - (isCreating ? creatingMode : editingMode) as string, + (isCreating ? createDisplayMode : editDisplayMode) as string, ) ? column.columnDef.header : undefined, name: cell.id, placeholder: !['modal', 'custom'].includes( - (isCreating ? creatingMode : editingMode) as string, + (isCreating ? createDisplayMode : editDisplayMode) as string, ) ? columnDef.header : undefined, value, - variant: editingMode === 'table' ? 'unstyled' : 'default', + variant: editDisplayMode === 'table' ? 'unstyled' : 'default', onClick: (e: any) => { e.stopPropagation(); textInputProps?.onClick?.(e); diff --git a/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.tsx b/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.tsx index 765126fde..470a6df2a 100644 --- a/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.tsx +++ b/packages/mantine-react-table/src/inputs/MRT_FilterTextInput.tsx @@ -27,6 +27,7 @@ export const MRT_FilterTextInput = >({ }: Props) => { const { options: { + columnFilterDisplayMode, columnFilterModeOptions, icons: { IconX }, localization, @@ -350,6 +351,7 @@ export const MRT_FilterTextInput = >({ ) : isMultiSelectFilter ? ( >({ {...commonProps} allowDeselect clearable - popoverProps={{ withinPortal: true }} + popoverProps={{ withinPortal: columnFilterDisplayMode !== 'popover' }} {...dateInputProps} ref={(node) => { if (node) { diff --git a/packages/mantine-react-table/src/inputs/MRT_SelectCheckbox.tsx b/packages/mantine-react-table/src/inputs/MRT_SelectCheckbox.tsx index 501c2c7f8..942e2e981 100644 --- a/packages/mantine-react-table/src/inputs/MRT_SelectCheckbox.tsx +++ b/packages/mantine-react-table/src/inputs/MRT_SelectCheckbox.tsx @@ -8,11 +8,7 @@ import { type RadioProps, type SwitchProps, } from '@mantine/core'; -import { - type SelectVariant, - type MRT_Row, - type MRT_TableInstance, -} from '../types'; +import { type MRT_Row, type MRT_TableInstance } from '../types'; interface Props> { row?: MRT_Row; @@ -28,11 +24,12 @@ export const MRT_SelectCheckbox = >({ const { getState, options: { - localization, enableMultiRowSelection, - mantineSelectCheckboxProps, + localization, mantineSelectAllCheckboxProps, + mantineSelectCheckboxProps, selectAllMode, + selectDisplayMode, }, } = table; const { density, isLoading } = getState(); @@ -45,8 +42,6 @@ export const MRT_SelectCheckbox = >({ ? mantineSelectCheckboxProps({ row, table }) : mantineSelectCheckboxProps; - const SelectVariant = checkboxProps?.variant; - const allRowsSelected = selectAll ? selectAllMode === 'page' ? table.getIsAllPageRowsSelected() @@ -70,8 +65,8 @@ export const MRT_SelectCheckbox = >({ e.stopPropagation(); checkboxProps?.onClick?.(e); }, - // title: undefined, - } as CheckboxProps & RadioProps & SwitchProps & { variant: SelectVariant }; + title: undefined, + } as CheckboxProps & RadioProps & SwitchProps; return ( >({ : localization.toggleSelectRow) } > - {SelectVariant === 'switch' ? ( - // - - ) : // - SelectVariant === 'radio' || enableMultiRowSelection === false ? ( - - ) : ( - - )} + + {selectDisplayMode === 'switch' ? ( + + ) : selectDisplayMode === 'radio' || + enableMultiRowSelection === false ? ( + + ) : ( + + )} + ); }; diff --git a/packages/mantine-react-table/src/menus/MRT_ColumnActionMenu.tsx b/packages/mantine-react-table/src/menus/MRT_ColumnActionMenu.tsx index 0144a0d9e..764f12bda 100644 --- a/packages/mantine-react-table/src/menus/MRT_ColumnActionMenu.tsx +++ b/packages/mantine-react-table/src/menus/MRT_ColumnActionMenu.tsx @@ -15,6 +15,7 @@ export const MRT_ColumnActionMenu = >({ toggleAllColumnsVisible, setColumnOrder, options: { + columnFilterDisplayMode, enableColumnFilters, enableColumnResizing, enableGrouping, @@ -147,24 +148,26 @@ export const MRT_ColumnActionMenu = >({ )} )} - {enableColumnFilters && column.getCanFilter() && ( - <> - } - onClick={handleClearFilter} - > - {localization.clearFilter} - - } onClick={handleFilterByColumn}> - {localization.filterByColumn?.replace( - '{column}', - String(columnDef.header), - )} - - {(enableGrouping || enableHiding) && } - - )} + {enableColumnFilters && + columnFilterDisplayMode !== 'popover' && + column.getCanFilter() && ( + <> + } + onClick={handleClearFilter} + > + {localization.clearFilter} + + } onClick={handleFilterByColumn}> + {localization.filterByColumn?.replace( + '{column}', + String(columnDef.header), + )} + + {(enableGrouping || enableHiding) && } + + )} {enableGrouping && column.getCanGroup() && ( <> } onClick={handleGroupByColumn}> @@ -244,7 +247,7 @@ export const MRT_ColumnActionMenu = >({ ); return ( - + >({ }: Props) => { const { options: { - editingMode, + editDisplayMode, enableEditing, icons: { IconEdit, IconDots }, localization, @@ -37,7 +37,7 @@ export const MRT_RowActionMenu = >({ event.stopPropagation()}> - {enableEditing && editingMode !== 'table' && ( + {enableEditing && editDisplayMode !== 'table' && ( } onClick={handleEdit}> {localization.edit} diff --git a/packages/mantine-react-table/src/table/MRT_Table.tsx b/packages/mantine-react-table/src/table/MRT_Table.tsx index 73b25de7f..06aebfa15 100644 --- a/packages/mantine-react-table/src/table/MRT_Table.tsx +++ b/packages/mantine-react-table/src/table/MRT_Table.tsx @@ -26,8 +26,8 @@ export const MRT_Table = >({ columnVirtualizerInstanceRef, columnVirtualizerProps, columns, - creatingMode, - editingMode, + createDisplayMode, + editDisplayMode, enableColumnResizing, enableColumnVirtualization, enablePinning, @@ -151,8 +151,8 @@ export const MRT_Table = >({ virtualPaddingRight, }; - const createModalOpen = creatingMode === 'modal' && creatingRow; - const editModalOpen = editingMode === 'modal' && editingRow; + const createModalOpen = createDisplayMode === 'modal' && creatingRow; + const editModalOpen = editDisplayMode === 'modal' && editingRow; return ( <> diff --git a/packages/mantine-react-table/src/toolbar/MRT_ProgressBar.tsx b/packages/mantine-react-table/src/toolbar/MRT_ProgressBar.tsx index d4f108fbb..5be4d84a2 100644 --- a/packages/mantine-react-table/src/toolbar/MRT_ProgressBar.tsx +++ b/packages/mantine-react-table/src/toolbar/MRT_ProgressBar.tsx @@ -35,11 +35,17 @@ export const MRT_ProgressBar = >({ animate aria-label="Loading" aria-busy="true" - sx={{ - position: 'relative', - }} value={100} {...linearProgressProps} + sx={(theme) => ({ + borderRadius: 0, + '& .mantine-Progress-bar': { + borderRadius: 0, + }, + ...(linearProgressProps?.sx instanceof Function + ? linearProgressProps.sx(theme) + : (linearProgressProps?.sx as any)), + })} /> ); diff --git a/packages/mantine-react-table/src/toolbar/MRT_TablePagination.tsx b/packages/mantine-react-table/src/toolbar/MRT_TablePagination.tsx index 389268880..6c1e59c67 100644 --- a/packages/mantine-react-table/src/toolbar/MRT_TablePagination.tsx +++ b/packages/mantine-react-table/src/toolbar/MRT_TablePagination.tsx @@ -40,6 +40,7 @@ export const MRT_TablePagination = >({ }, localization, mantinePaginationProps, + paginationDisplayMode, rowCount, }, } = table; @@ -105,7 +106,7 @@ export const MRT_TablePagination = >({ withinPortal /> )} - {paginationProps?.variant === 'mantine' ? ( + {paginationDisplayMode === 'pages' ? ( setPageIndex(newPageIndex - 1)} total={numberOfPages} @@ -117,11 +118,13 @@ export const MRT_TablePagination = >({ lastIcon={IconChevronRightPipe} {...paginationProps} /> - ) : ( + ) : paginationDisplayMode === 'default' ? ( <> {`${ - lastRowIndex === 0 ? 0 : firstRowIndex + 1 - }-${lastRowIndex} ${localization.of} ${totalRowCount}`} + lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString() + }-${lastRowIndex.toLocaleString()} ${ + localization.of + } ${totalRowCount.toLocaleString()}`} {showFirstLastPageButtons && ( >({ = totalRowCount} - onClick={() => - setPageIndex(numberOfPages - 1) - } + onClick={() => setPageIndex(numberOfPages - 1)} sx={commonActionButtonStyles} > @@ -163,7 +164,7 @@ export const MRT_TablePagination = >({ )} - )} + ) : null} ); }; diff --git a/packages/mantine-react-table/src/toolbar/MRT_ToolbarInternalButtons.tsx b/packages/mantine-react-table/src/toolbar/MRT_ToolbarInternalButtons.tsx index d09eec019..38680cf98 100644 --- a/packages/mantine-react-table/src/toolbar/MRT_ToolbarInternalButtons.tsx +++ b/packages/mantine-react-table/src/toolbar/MRT_ToolbarInternalButtons.tsx @@ -15,6 +15,7 @@ export const MRT_ToolbarInternalButtons = >({ }: Props) => { const { options: { + columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableDensityToggle, @@ -45,9 +46,11 @@ export const MRT_ToolbarInternalButtons = >({ !initialState?.showGlobalFilter && ( )} - {enableFilters && enableColumnFilters && ( - - )} + {enableFilters && + enableColumnFilters && + columnFilterDisplayMode !== 'popover' && ( + + )} {(enableHiding || enableColumnOrdering || enablePinning) && ( )} diff --git a/packages/mantine-react-table/src/types.ts b/packages/mantine-react-table/src/types.ts index 22ff7649d..d7592641e 100644 --- a/packages/mantine-react-table/src/types.ts +++ b/packages/mantine-react-table/src/types.ts @@ -14,7 +14,6 @@ import { type BadgeProps, type BoxProps, type CheckboxProps, - type FlexProps, type HighlightProps, type ModalProps, type MultiSelectProps, @@ -83,12 +82,9 @@ export type MantineShade = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; export type ColumnAlignment = { align?: 'left' | 'center' | 'right' }; -export type SelectVariant = 'checkbox' | 'radio' | 'switch'; - export type MRT_PaginationProps = Partial & { rowsPerPageOptions?: string[]; showRowsPerPage?: boolean; - variant: 'default' | 'mantine'; }; export type MRT_DensityState = 'xs' | 'md' | 'xl'; @@ -525,31 +521,25 @@ export type MRT_ColumnDef> = Omit< rangeFilterIndex?: number; }) => HTMLPropsRef & Partial); mantineTableBodyCellProps?: - | (Partial & HTMLPropsRef & ColumnAlignment) + | (HTMLPropsRef & BoxProps & ColumnAlignment) | ((props: { cell: MRT_Cell; column: MRT_Column; row: MRT_Row; table: MRT_TableInstance; - }) => Partial & - HTMLPropsRef & - ColumnAlignment); + }) => HTMLPropsRef & BoxProps & ColumnAlignment); mantineTableFooterCellProps?: - | (Partial & HTMLPropsRef & ColumnAlignment) + | (HTMLPropsRef & BoxProps & ColumnAlignment) | ((props: { table: MRT_TableInstance; column: MRT_Column; - }) => Partial & - HTMLPropsRef & - ColumnAlignment); + }) => HTMLPropsRef & BoxProps & ColumnAlignment); mantineTableHeadCellProps?: - | (Partial & HTMLPropsRef & ColumnAlignment) + | (HTMLPropsRef & BoxProps & ColumnAlignment) | ((props: { table: MRT_TableInstance; column: MRT_Column; - }) => Partial & - HTMLPropsRef & - ColumnAlignment); + }) => HTMLPropsRef & BoxProps & ColumnAlignment); renderColumnActionsMenuItems?: (props: { column: MRT_Column; table: MRT_TableInstance; @@ -722,8 +712,11 @@ export type MRT_TableOptions> = Omit< displayColumnDefOptions?: Partial<{ [key in MRT_DisplayColumnIds]: Partial>; }>; - editingMode?: 'modal' | 'row' | 'cell' | 'table' | 'custom'; - creatingMode?: 'modal' | 'row' | 'custom'; + createDisplayMode?: 'modal' | 'row' | 'custom'; + editDisplayMode?: 'modal' | 'row' | 'cell' | 'table' | 'custom'; + columnFilterDisplayMode?: 'subheader' | 'popover' | 'custom'; + paginationDisplayMode?: 'default' | 'pages' | 'custom'; + selectDisplayMode?: 'checkbox' | 'radio' | 'switch'; enableBottomToolbar?: boolean; enableClickToCopy?: boolean; enableColumnActions?: boolean; @@ -775,10 +768,10 @@ export type MRT_TableOptions> = Omit< */ localization?: Partial; mantineBottomToolbarProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineColumnActionsButtonProps?: | (HTMLPropsRef & Partial) | ((props: { @@ -806,11 +799,11 @@ export type MRT_TableOptions> = Omit< row: MRT_Row; }) => HTMLPropsRef & Partial); mantineDetailPanelProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; row: MRT_Row; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineEditRowModalProps?: | (HTMLPropsRef & Partial) | ((props: { @@ -818,13 +811,13 @@ export type MRT_TableOptions> = Omit< row: MRT_Row; }) => HTMLPropsRef & Partial); mantineEditSelectProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & Partial) | ((props: { cell: MRT_Cell; column: MRT_Column; row: MRT_Row; table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & Partial); mantineEditTextInputProps?: | (HTMLPropsRef & Partial) | ((props: { @@ -901,23 +894,21 @@ export type MRT_TableOptions> = Omit< table: MRT_TableInstance; }) => HTMLPropsRef & Partial); mantineProgressProps?: - | (ProgressProps & HTMLPropsRef) + | (HTMLPropsRef & ProgressProps) | ((props: { isTopToolbar: boolean; table: MRT_TableInstance; - }) => ProgressProps & HTMLPropsRef); + }) => HTMLPropsRef & ProgressProps); mantinePaginationProps?: - | Partial> + | Partial & MRT_PaginationProps> | ((props: { table: MRT_TableInstance; - }) => Partial< - MRT_PaginationProps & FlexProps & HTMLPropsRef - >); + }) => Partial & MRT_PaginationProps>); mantinePaperProps?: - | (PaperProps & HTMLPropsRef) + | (HTMLPropsRef & PaperProps) | ((props: { table: MRT_TableInstance; - }) => PaperProps & HTMLPropsRef); + }) => HTMLPropsRef & PaperProps); mantineRowDragHandleProps?: | (HTMLPropsRef & Partial) | ((props: { @@ -931,122 +922,107 @@ export type MRT_TableOptions> = Omit< }) => HTMLPropsRef & Partial); mantineSelectAllCheckboxProps?: | (HTMLPropsRef & - (CheckboxProps | RadioProps | SwitchProps) & { - variant?: SelectVariant; - }) + (CheckboxProps | RadioProps | SwitchProps)) | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & - (CheckboxProps | RadioProps | SwitchProps) & { - variant?: SelectVariant; - }); + (CheckboxProps | RadioProps | SwitchProps)); mantineSelectCheckboxProps?: - | (((CheckboxProps | RadioProps | SwitchProps) & { - variant?: SelectVariant; - }) & - HTMLPropsRef) - | ((props: { table: MRT_TableInstance; row: MRT_Row }) => (( - | CheckboxProps - | RadioProps - | SwitchProps - ) & { - variant?: SelectVariant; - }) & - HTMLPropsRef); + | (HTMLPropsRef & + (CheckboxProps | RadioProps | SwitchProps)) + | ((props: { + table: MRT_TableInstance; + row: MRT_Row; + }) => HTMLPropsRef & + (CheckboxProps | RadioProps | SwitchProps)); mantineSkeletonProps?: - | (SkeletonProps & HTMLPropsRef) + | (HTMLPropsRef & SkeletonProps) | ((props: { cell: MRT_Cell; column: MRT_Column; row: MRT_Row; table: MRT_TableInstance; - }) => SkeletonProps & HTMLPropsRef); + }) => HTMLPropsRef & SkeletonProps); mantineTableBodyCellProps?: - | (Partial & HTMLPropsRef & ColumnAlignment) + | (HTMLPropsRef & BoxProps & ColumnAlignment) | ((props: { cell: MRT_Cell; column: MRT_Column; row: MRT_Row; table: MRT_TableInstance; - }) => Partial & - HTMLPropsRef & - ColumnAlignment); + }) => HTMLPropsRef & BoxProps & ColumnAlignment); mantineTableBodyProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableBodyRowProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { isDetailPanel?: boolean; row: MRT_Row; staticRowIndex: number; table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableContainerProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableFooterCellProps?: - | (Partial & HTMLPropsRef & ColumnAlignment) + | (HTMLPropsRef & BoxProps & ColumnAlignment) | ((props: { table: MRT_TableInstance; column: MRT_Column; - }) => Partial & - HTMLPropsRef & - ColumnAlignment); + }) => HTMLPropsRef & BoxProps & ColumnAlignment); mantineTableFooterProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableFooterRowProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; footerGroup: MRT_HeaderGroup; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableHeadCellProps?: - | (Partial & HTMLPropsRef & ColumnAlignment) + | (HTMLPropsRef & BoxProps & ColumnAlignment) | ((props: { table: MRT_TableInstance; column: MRT_Column; - }) => Partial & - HTMLPropsRef & - ColumnAlignment); + }) => HTMLPropsRef & BoxProps & ColumnAlignment); mantineTableHeadProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableHeadRowProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; headerGroup: MRT_HeaderGroup; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); mantineTableProps?: - | (TableProps & HTMLPropsRef) + | (HTMLPropsRef & TableProps) | ((props: { table: MRT_TableInstance; - }) => TableProps & HTMLPropsRef); + }) => HTMLPropsRef & TableProps); mantineToolbarAlertBannerBadgeProps?: | (HTMLPropsRef & Partial) | ((props: { table: MRT_TableInstance; }) => HTMLPropsRef & Partial); mantineToolbarAlertBannerProps?: - | (AlertProps & HTMLPropsRef) + | (HTMLPropsRef & AlertProps) | ((props: { table: MRT_TableInstance; - }) => AlertProps & HTMLPropsRef); + }) => HTMLPropsRef & AlertProps); mantineTopToolbarProps?: - | (HTMLPropsRef & Partial) + | (HTMLPropsRef & BoxProps) | ((props: { table: MRT_TableInstance; - }) => HTMLPropsRef & Partial); + }) => HTMLPropsRef & BoxProps); /** * Memoize cells, rows, or the entire table body to potentially improve render performance. * diff --git a/packages/mantine-react-table/stories/features/Editing.stories.tsx b/packages/mantine-react-table/stories/features/Editing.stories.tsx index 530023f9f..188423048 100644 --- a/packages/mantine-react-table/stories/features/Editing.stories.tsx +++ b/packages/mantine-react-table/stories/features/Editing.stories.tsx @@ -173,7 +173,7 @@ export const EditingEnabledEditModeRow = () => { ]} data={tableData} enableEditing - editingMode="row" + editDisplayMode="row" onEditingRowSave={handleSaveRow} /> ); @@ -214,7 +214,7 @@ export const EditingEnabledEditModeCell = () => { }, ]} data={tableData} - editingMode="cell" + editDisplayMode="cell" enableEditing mantineEditTextInputProps={({ cell }) => ({ onBlur: (event) => { @@ -260,7 +260,7 @@ export const EditingEnabledEditModeTable = () => { }, ]} data={tableData} - editingMode="table" + editDisplayMode="table" enableEditing mantineEditTextInputProps={({ cell }) => ({ onBlur: (event) => { @@ -299,7 +299,7 @@ export const EditingEnabledEditModeCustom = () => { }, ]} data={tableData} - editingMode="custom" + editDisplayMode="custom" enableEditing /> ); @@ -340,7 +340,7 @@ export const CustomEditModal = () => { }, ]} data={tableData} - editingMode="modal" + editDisplayMode="modal" enableEditing mantineEditTextInputProps={({ cell }) => ({ onBlur: (event) => { @@ -404,7 +404,7 @@ export const EditSelectVariant = () => { }, ]} data={tableData} - editingMode="row" + editDisplayMode="row" enableRowActions enableEditing onEditingRowSave={handleSaveRow} @@ -499,7 +499,7 @@ export const EditSelectVariantAlternate = () => { }, ]} data={tableData} - editingMode="row" + editDisplayMode="row" enableRowActions enableEditing onEditingRowSave={handleSaveRow} @@ -789,7 +789,7 @@ export const EditingEnabledAsyncRow = () => { }, ]} data={tableData} - editingMode="row" + editDisplayMode="row" enableEditing enableRowActions onEditingRowSave={handleSaveRow} @@ -899,7 +899,7 @@ export const EditingEnabledEditModeTableWithGroupedRows = () => { data={tableData} enableEditing enableGrouping - editingMode="table" + editDisplayMode="table" onEditingRowSave={handleSaveRow} /> ); @@ -945,7 +945,7 @@ export const EnableEditingConditionally = () => { ]} data={tableData} enableEditing={(row) => row.index % 2 === 0} - editingMode="row" + editDisplayMode="row" onEditingRowSave={handleSaveRow} /> ); @@ -991,7 +991,7 @@ export const EnableEditingConditionallyCell = () => { ]} data={tableData} enableEditing={(row) => row.index % 2 === 0} - editingMode="cell" + editDisplayMode="cell" onEditingRowSave={handleSaveRow} /> ); @@ -1037,7 +1037,7 @@ export const EnableEditingConditionallyTable = () => { ]} data={tableData} enableEditing={(row) => row.index % 2 === 0} - editingMode="table" + editDisplayMode="table" onEditingRowSave={handleSaveRow} /> ); diff --git a/packages/mantine-react-table/stories/features/Filtering.stories.tsx b/packages/mantine-react-table/stories/features/Filtering.stories.tsx index a5725ffbc..db938d9e0 100644 --- a/packages/mantine-react-table/stories/features/Filtering.stories.tsx +++ b/packages/mantine-react-table/stories/features/Filtering.stories.tsx @@ -73,6 +73,14 @@ export const FilteringEnabledDefault = () => ( ); +export const PopoverDisplayMode = () => ( + +); + export const ColumnFilteringDisabled = () => ( ( /> ); +export const FilterFnAndFilterVariantsPopover = () => ( + (originalRow.isActive ? 'true' : 'false'), + id: 'isActive', + filterVariant: 'checkbox', + Cell: ({ cell }) => (cell.getValue() === 'true' ? 'Yes' : 'No'), + size: 200, + }, + { + header: 'First Name', + accessorKey: 'firstName', + filterFn: 'fuzzy', // default + }, + { + header: 'Last Name', + accessorKey: 'lastName', + filterFn: 'contains', + }, + { + header: 'Age', + accessorKey: 'age', + filterVariant: 'range', + }, + { + header: 'Salary', + accessorKey: 'salary', + Cell: ({ cell }) => + cell.getValue().toLocaleString('en-US', { + currency: 'USD', + style: 'currency', + }), + filterVariant: 'range-slider', + mantineFilterRangeSliderProps: { + min: 1000, + max: 100000, + }, + }, + { + header: 'Gender', + accessorKey: 'gender', + mantineFilterSelectProps: { data: ['Male', 'Female', 'Other'] as any }, + filterVariant: 'select', + }, + { + header: 'Address', + accessorKey: 'address', + filterFn: 'includesStringSensitive', + }, + { + header: 'State', + accessorKey: 'state', + mantineFilterMultiSelectProps: { + data: [ + 'Alabama', + 'Arizona', + 'Arkansas', + 'California', + 'Colorado', + 'Connecticut', + 'Delaware', + 'Florida', + 'Georgia', + 'New York', + 'Texas', + 'Washington', + ] as any, + }, + filterVariant: 'multi-select', + }, + { + accessorFn: (row) => { + const bDay = new Date(row.birthDate); + bDay.setHours(0, 0, 0, 0); // remove time from date + return bDay; + }, + id: 'birthDate', + Cell: ({ cell }) => cell.getValue().toLocaleDateString(), + filterVariant: 'date', + header: 'Birth Date', + sortingFn: 'datetime', + size: 200, + }, + { + accessorFn: (row) => { + const hDay = new Date(row.hireDate); + hDay.setHours(0, 0, 0, 0); // remove time from date + return hDay; + }, + Cell: ({ cell }) => cell.getValue().toLocaleDateString(), + id: 'hireDate', + filterVariant: 'date-range', + header: 'Hire Date', + sortingFn: 'datetime', + size: 200, + }, + ]} + data={data} + columnFilterDisplayMode="popover" + /> +); + export const FilterFnAndFilterVariantsFaceted = () => ( ( /> ); +export const EnableFilterModesPopover = () => ( + + cell.getValue().toLocaleString('en-US', { + currency: 'USD', + style: 'currency', + }), + filterVariant: 'range-slider', + mantineFilterRangeSliderProps: { + min: 1000, + max: 100000, + }, + }, + { + header: 'Gender', + accessorKey: 'gender', + mantineFilterSelectProps: { data: ['Male', 'Female', 'Other'] as any }, + }, + { + header: 'Address', + accessorKey: 'address', + }, + { + header: 'State', + accessorKey: 'state', + }, + ]} + data={data} + columnFilterDisplayMode="popover" + enableColumnFilterModes + /> +); + export const DisableSomeFilterTypesForCertainColumns = () => ( { { { { [] = [ accessorKey: 'address', }, ]; -const data = [...Array(210)].map(() => ({ +const data = [...Array(3333)].map(() => ({ firstName: faker.person.firstName(), lastName: faker.person.lastName(), age: faker.number.int(80), @@ -41,7 +41,7 @@ export const MantinePaginationEnabledDefault = () => ( ); diff --git a/packages/mantine-react-table/stories/features/Selection.stories.tsx b/packages/mantine-react-table/stories/features/Selection.stories.tsx index 68c9c829c..bacf9f943 100644 --- a/packages/mantine-react-table/stories/features/Selection.stories.tsx +++ b/packages/mantine-react-table/stories/features/Selection.stories.tsx @@ -153,8 +153,7 @@ export const SelectSwitch = () => ( columns={columns} data={data} enableRowSelection - mantineSelectCheckboxProps={{ variant: 'switch' }} - mantineSelectAllCheckboxProps={{ variant: 'switch' }} + selectDisplayMode="switch" /> ); diff --git a/packages/mantine-react-table/stories/fixed-bugs/editing.stories.tsx b/packages/mantine-react-table/stories/fixed-bugs/editing.stories.tsx index fbbe5e667..5b66de5c5 100644 --- a/packages/mantine-react-table/stories/fixed-bugs/editing.stories.tsx +++ b/packages/mantine-react-table/stories/fixed-bugs/editing.stories.tsx @@ -53,7 +53,7 @@ export const TableEditModeAndRowActions = () => { (