beta.26 display modes refactor

KevinVandy · Jul 11, 2023 · 52219e3 · 52219e3 · vercel · Jul 11, 2023
1 parent 79fc3b3
commit 52219e3
Show file tree

Hide file tree

Showing 67 changed files with 598 additions and 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
@@ -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
@@ -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
@@ -108,7 +108,7 @@ export const tableOptions: TableOption[] = [
     type: 'MutableRefObject<Virtualizer | null>',
   },
   {
-    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<TData> }',
   },
   {
-    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<boolean>',
   },
-    {
+  {
     tableOptionName: 'onCreatingRowSave',
     defaultValue: '',
     description: '',
@@ -1649,7 +1660,7 @@ export const tableOptions: TableOption[] = [
     source: 'MRT',
     type: '({ exitEditingMode, row, table, values}) => Promise<void> | 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
@@ -125,9 +125,7 @@ const Example = () => {
     enableRowActions: true,
     enableRowSelection: true,
     initialState: { showColumnFilters: true },
-    mantinePaginationProps: {
-      variant: 'mantine',
-    },
+    paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
     renderDetailPanel: ({ row }) => (
       <Box

diff --git a/apps/mantine-react-table-docs/examples/advanced/sandbox/src/Legacy.tsx b/apps/mantine-react-table-docs/examples/advanced/sandbox/src/Legacy.tsx
@@ -137,9 +137,7 @@ const Example = () => {
       enableRowActions
       enableRowSelection
       initialState={{ showColumnFilters: true }}
-      mantinePaginationProps={{
-        variant: 'mantine',
-      }}
+      paginationDisplayMode="pages"
       positionToolbarAlertBanner="bottom"
       renderDetailPanel={({ row }) => (
         <Box

diff --git a/apps/mantine-react-table-docs/examples/advanced/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/advanced/sandbox/src/TS.tsx
@@ -141,9 +141,7 @@ const Example = () => {
     enableRowActions: true,
     enableRowSelection: true,
     initialState: { showColumnFilters: true },
-    mantinePaginationProps: {
-      variant: 'mantine',
-    },
+    paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
     renderDetailPanel: ({ row }) => (
       <Box

diff --git a/apps/mantine-react-table-docs/examples/alternate-pagination/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/alternate-pagination/sandbox/src/JS.js
@@ -7,8 +7,8 @@ const Example = () => {
     data,
     mantinePaginationProps: {
       showRowsPerPage: false,
-      variant: 'mantine',
     },
+    paginationDisplayMode: 'mantine',
   });
 
   return <MantineReactTable table={table} />;

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
@@ -7,8 +7,8 @@ const Example = () => {
     data,
     mantinePaginationProps: {
       showRowsPerPage: false,
-      variant: 'mantine',
     },
+    paginationDisplayMode: 'pages',
   });
 
   return <MantineReactTable table={table} />;

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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -44,7 +44,7 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="cell"
+      editDisplayMode="cell"
       enableEditing
       mantineEditTextInputProps={({ cell }) => ({
         //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
@@ -48,7 +48,7 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="cell"
+      editDisplayMode="cell"
       enableEditing
       mantineEditTextInputProps={({ cell }) => ({
         //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
@@ -45,7 +45,7 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="modal" //default
+      editDisplayMode="modal" //default
       enableEditing
       onEditingRowSave={handleSaveRow}
     />

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
@@ -53,7 +53,7 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="modal" //default
+      editDisplayMode="modal" //default
       enableEditing
       onEditingRowSave={handleSaveRow}
     />

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
@@ -45,7 +45,7 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="row"
+      editDisplayMode="row"
       enableEditing
       onEditingRowSave={handleSaveRow}
     />

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
@@ -53,7 +53,7 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="row"
+      editDisplayMode="row"
       enableEditing
       onEditingRowSave={handleSaveRow}
     />

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
@@ -43,14 +43,14 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="table"
+      editDisplayMode="table"
       enableEditing
       mantineEditTextInputProps={({ cell }) => ({
         //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
@@ -47,14 +47,14 @@ const Example = () => {
     <MantineReactTable
       columns={columns}
       data={tableData}
-      editingMode="table"
+      editDisplayMode="table"
       enableEditing
       mantineEditTextInputProps={({ cell }) => ({
         //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
@@ -26,9 +26,8 @@ const Example = () => {
     data,
     enableRowSelection: true,
     getRowId: (row) => row.userId,
-    mantineSelectCheckboxProps: { variant: 'switch' },
-    mantineSelectAllCheckboxProps: { variant: 'switch' },
     positionToolbarAlertBanner: 'bottom',
+    selectDisplayMode: 'switch',
   });
 
   return <MantineReactTable table={table} />;

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
@@ -30,9 +30,8 @@ const Example = () => {
     data,
     enableRowSelection: true,
     getRowId: (row) => row.userId,
-    mantineSelectCheckboxProps: { variant: 'switch' },
-    mantineSelectAllCheckboxProps: { variant: 'switch' },
     positionToolbarAlertBanner: 'bottom',
+    selectDisplayMode: 'switch',
   });
 
   return <MantineReactTable table={table} />;