release v1.2.0

KevinVandy · Aug 23, 2023 · 58bc275 · 58bc275 · vercel · Aug 23, 2023
1 parent 433b24f
commit 58bc275
Show file tree

Hide file tree

Showing 21 changed files with 336 additions and 122 deletions.
diff --git a/apps/mantine-react-table-docs/components/navigation/TableOfContentsList.tsx b/apps/mantine-react-table-docs/components/navigation/TableOfContentsList.tsx
@@ -1,3 +1,4 @@
+import { Fragment } from 'react';
 import Link from 'next/link';
 import { Box, Anchor } from '@mantine/core';
 import { LinkHeading } from '../mdx/LinkHeading';
@@ -57,12 +58,8 @@ export const TableOfContentsList = ({
       >
         {items.map((item, index) => {
           return (
-            <>
-              <TableOfContentsListItem
-                key={index}
-                item={item}
-                isFooter={isFooter}
-              />
+            <Fragment key={index}>
+              <TableOfContentsListItem item={item} isFooter={isFooter} />
               {item.secondaryItems
                 ? item.secondaryItems.map((item, index) => {
                     return (
@@ -74,7 +71,7 @@ export const TableOfContentsList = ({
                     );
                   })
                 : null}
-            </>
+            </Fragment>
           );
         })}
       </ul>

diff --git a/apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts b/apps/mantine-react-table-docs/components/prop-tables/tableOptions.ts
@@ -1854,7 +1854,7 @@ export const tableOptions: TableOption[] = [
     linkText: '',
     required: false,
     source: 'MRT',
-    type: "'bottom' | 'top' | 'none'",
+    type: "'bottom' | 'top' | 'head-overlay' | 'none'",
   },
   {
     tableOption: 'positionToolbarDropZone',
@@ -1976,6 +1976,16 @@ export const tableOptions: TableOption[] = [
     source: '',
     type: '({ table }) => ReactNode',
   },
+  {
+    tableOption: 'renderToolbarAlertBannerContent',
+    defaultValue: '',
+    description: '',
+    link: '',
+    linkText: '',
+    required: false,
+    source: '',
+    type: '({ groupedAlert, selectedAlert, table }) => ReactNode',
+  },
   {
     tableOption: 'renderTopToolbar',
     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
@@ -1,6 +1,11 @@
 import { useMemo } from 'react';
-import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
-import { Box, Button, Menu, Text, Title } from '@mantine/core';
+import {
+  MRT_GlobalFilterTextInput,
+  MRT_ToggleFiltersButton,
+  MantineReactTable,
+  useMantineReactTable,
+} from 'mantine-react-table';
+import { Box, Button, Flex, Menu, Text, Title } from '@mantine/core';
 import { IconUserCircle, IconSend } from '@tabler/icons-react';
 import { data } from './makeData';
 
@@ -124,9 +129,16 @@ const Example = () => {
     enablePinning: true,
     enableRowActions: true,
     enableRowSelection: true,
-    initialState: { showColumnFilters: true },
+    initialState: { showColumnFilters: true, showGlobalFilter: true },
     paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
+    mantinePaginationProps: {
+      radius: 'xl',
+      size: 'lg',
+    },
+    mantineSearchTextInputProps: {
+      placeholder: 'Search Employees',
+    },
     renderDetailPanel: ({ row }) => (
       <Box
         sx={{
@@ -155,7 +167,7 @@ const Example = () => {
         <Menu.Item icon={<IconSend />}>Send Email</Menu.Item>
       </>
     ),
-    renderTopToolbarCustomActions: ({ table }) => {
+    renderTopToolbar: ({ table }) => {
       const handleDeactivate = () => {
         table.getSelectedRowModel().flatRows.map((row) => {
           alert('deactivating ' + row.getValue('name'));
@@ -175,32 +187,39 @@ const Example = () => {
       };
 
       return (
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <Button
-            color="red"
-            disabled={!table.getIsSomeRowsSelected()}
-            onClick={handleDeactivate}
-            variant="filled"
-          >
-            Deactivate
-          </Button>
-          <Button
-            color="green"
-            disabled={!table.getIsSomeRowsSelected()}
-            onClick={handleActivate}
-            variant="filled"
-          >
-            Activate
-          </Button>
-          <Button
-            color="blue"
-            disabled={!table.getIsSomeRowsSelected()}
-            onClick={handleContact}
-            variant="filled"
-          >
-            Contact
-          </Button>
-        </div>
+        <Flex p="md" justify="space-between">
+          <Flex gap="xs">
+            {/* import MRT sub-components */}
+            <MRT_GlobalFilterTextInput table={table} />
+            <MRT_ToggleFiltersButton table={table} />
+          </Flex>
+          <Flex sx={{ gap: '8px' }}>
+            <Button
+              color="red"
+              disabled={!table.getIsSomeRowsSelected()}
+              onClick={handleDeactivate}
+              variant="filled"
+            >
+              Deactivate
+            </Button>
+            <Button
+              color="green"
+              disabled={!table.getIsSomeRowsSelected()}
+              onClick={handleActivate}
+              variant="filled"
+            >
+              Activate
+            </Button>
+            <Button
+              color="blue"
+              disabled={!table.getIsSomeRowsSelected()}
+              onClick={handleContact}
+              variant="filled"
+            >
+              Contact
+            </Button>
+          </Flex>
+        </Flex>
       );
     },
   });

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
@@ -3,8 +3,10 @@ import {
   MantineReactTable,
   useMantineReactTable,
   type MRT_ColumnDef,
+  MRT_GlobalFilterTextInput,
+  MRT_ToggleFiltersButton,
 } from 'mantine-react-table';
-import { Box, Button, Menu, Text, Title } from '@mantine/core';
+import { Box, Button, Flex, Menu, Text, Title } from '@mantine/core';
 import { IconUserCircle, IconSend } from '@tabler/icons-react';
 import { data } from './makeData';
 
@@ -140,9 +142,16 @@ const Example = () => {
     enablePinning: true,
     enableRowActions: true,
     enableRowSelection: true,
-    initialState: { showColumnFilters: true },
+    initialState: { showColumnFilters: true, showGlobalFilter: true },
     paginationDisplayMode: 'pages',
     positionToolbarAlertBanner: 'bottom',
+    mantinePaginationProps: {
+      radius: 'xl',
+      size: 'lg',
+    },
+    mantineSearchTextInputProps: {
+      placeholder: 'Search Employees',
+    },
     renderDetailPanel: ({ row }) => (
       <Box
         sx={{
@@ -171,7 +180,7 @@ const Example = () => {
         <Menu.Item icon={<IconSend />}>Send Email</Menu.Item>
       </>
     ),
-    renderTopToolbarCustomActions: ({ table }) => {
+    renderTopToolbar: ({ table }) => {
       const handleDeactivate = () => {
         table.getSelectedRowModel().flatRows.map((row) => {
           alert('deactivating ' + row.getValue('name'));
@@ -191,32 +200,39 @@ const Example = () => {
       };
 
       return (
-        <div style={{ display: 'flex', gap: '8px' }}>
-          <Button
-            color="red"
-            disabled={!table.getIsSomeRowsSelected()}
-            onClick={handleDeactivate}
-            variant="filled"
-          >
-            Deactivate
-          </Button>
-          <Button
-            color="green"
-            disabled={!table.getIsSomeRowsSelected()}
-            onClick={handleActivate}
-            variant="filled"
-          >
-            Activate
-          </Button>
-          <Button
-            color="blue"
-            disabled={!table.getIsSomeRowsSelected()}
-            onClick={handleContact}
-            variant="filled"
-          >
-            Contact
-          </Button>
-        </div>
+        <Flex p="md" justify="space-between">
+          <Flex gap="xs">
+            {/* import MRT sub-components */}
+            <MRT_GlobalFilterTextInput table={table} />
+            <MRT_ToggleFiltersButton table={table} />
+          </Flex>
+          <Flex sx={{ gap: '8px' }}>
+            <Button
+              color="red"
+              disabled={!table.getIsSomeRowsSelected()}
+              onClick={handleDeactivate}
+              variant="filled"
+            >
+              Deactivate
+            </Button>
+            <Button
+              color="green"
+              disabled={!table.getIsSomeRowsSelected()}
+              onClick={handleActivate}
+              variant="filled"
+            >
+              Activate
+            </Button>
+            <Button
+              color="blue"
+              disabled={!table.getIsSomeRowsSelected()}
+              onClick={handleContact}
+              variant="filled"
+            >
+              Contact
+            </Button>
+          </Flex>
+        </Flex>
       );
     },
   });

diff --git a/apps/mantine-react-table-docs/examples/customize-row-selection/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/customize-row-selection/sandbox/src/JS.js
@@ -26,7 +26,8 @@ const Example = () => {
     data,
     enableSelectAll: false,
     enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
-    mantineSelectCheckboxProps: { color: 'red', size: 'xl' },
+    mantineSelectCheckboxProps: { color: 'red', size: 'lg' },
+    positionToolbarAlertBanner: 'head-overlay',
   });
 
   return <MantineReactTable table={table} />;

diff --git a/apps/mantine-react-table-docs/examples/customize-row-selection/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/customize-row-selection/sandbox/src/TS.tsx
@@ -31,7 +31,8 @@ const Example = () => {
     data,
     enableSelectAll: false,
     enableRowSelection: (row) => row.original.age >= 21, //enable row selection conditionally per row
-    mantineSelectCheckboxProps: { color: 'red', size: 'xl' },
+    mantineSelectCheckboxProps: { color: 'red', size: 'lg' },
+    positionToolbarAlertBanner: 'head-overlay'
   });
 
   return <MantineReactTable table={table} />;

diff --git a/apps/mantine-react-table-docs/examples/minimal/index.tsx b/apps/mantine-react-table-docs/examples/minimal/index.tsx
@@ -1,5 +1,5 @@
 import { SourceCodeSnippet } from '../../components/mdx/SourceCodeSnippet';
-import Example from './sandbox/src/Legacy';
+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 Legacy = require('!!raw-loader!./sandbox/src/Legacy.tsx').default;

diff --git a/apps/mantine-react-table-docs/examples/minimal/sandbox/src/JS.js b/apps/mantine-react-table-docs/examples/minimal/sandbox/src/JS.js
@@ -46,9 +46,21 @@ export const Example = () => {
       highlightOnHover: false,
       withColumnBorders: true,
       withBorder: colorScheme === 'light',
+      sx: {
+        'thead > tr': {
+          backgroundColor: 'inherit',
+        },
+        'thead > tr > th': {
+          backgroundColor: 'inherit',
+        },
+        'tbody > tr > td': {
+          backgroundColor: 'inherit',
+        },
+      },
     },
   });
 
+  //using MRT_Table instead of MantineReactTable if we do not want any of the toolbar features
   return <MRT_Table table={table} />;
 };
 

diff --git a/apps/mantine-react-table-docs/examples/minimal/sandbox/src/Legacy.tsx b/apps/mantine-react-table-docs/examples/minimal/sandbox/src/Legacy.tsx
@@ -1,8 +1,11 @@
 import { useMemo } from 'react';
 import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
+import { useMantineTheme } from '@mantine/core';
 import { data, type Person } from './makeData';
 
 export const Example = () => {
+  const { colorScheme } = useMantineTheme();
+
   const columns = useMemo<MRT_ColumnDef<Person>[]>(
     () => [
       {
@@ -42,6 +45,18 @@ export const Example = () => {
       mantineTableProps={{
         highlightOnHover: false,
         withColumnBorders: true,
+        withBorder: colorScheme === 'light',
+        sx: {
+          'thead > tr': {
+            backgroundColor: 'inherit',
+          },
+          'thead > tr > th': {
+            backgroundColor: 'inherit',
+          },
+          'tbody > tr > td': {
+            backgroundColor: 'inherit',
+          },
+        },
       }}
     />
   );

diff --git a/apps/mantine-react-table-docs/examples/minimal/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/minimal/sandbox/src/TS.tsx
@@ -47,6 +47,17 @@ export const Example = () => {
       highlightOnHover: false,
       withColumnBorders: true,
       withBorder: colorScheme === 'light',
+      sx: {
+        'thead > tr': {
+          backgroundColor: 'inherit',
+        },
+        'thead > tr > th': {
+          backgroundColor: 'inherit',
+        },
+        'tbody > tr > td': {
+          backgroundColor: 'inherit',
+        },
+      },
     },
   });
 

diff --git a/apps/mantine-react-table-docs/pages/changelog.mdx b/apps/mantine-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,11 @@ import Head from 'next/head';
 
 ### V1
 
+#### V1.2.0 - 2023-08-23
+
+- Added new `"head-overlay"` `positionToolbarAlertBanner` option to overlay the alert banner over the table header
+- Added new `renderToolbarAlertBannerContent` table option to allow full customization of the alert banner content
+
 #### V1.1.2 - 2023-08-18
 
 - Disable other row edit buttons when one row is being edited by default

diff --git a/apps/mantine-react-table-docs/pages/docs/guides/pagination.mdx b/apps/mantine-react-table-docs/pages/docs/guides/pagination.mdx
@@ -21,7 +21,7 @@ Client-side pagination is enabled by default in Mantine React Table. There are a
 <TableOptionsTable
   onlyOptions={
     new Set([
-      'autoResetPagination',
+      'autoResetPageIndex',
       'enablePagination',
       'getPaginationRowModel',
       'manualPagination',