Merge pull request #16 from icflorescu/next

Fix toggling
icflorescu · Jan 17, 2024 · 3966170 · 3966170
2 parents 9ce6392 + 5ec0b78
commit 3966170
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 15 deletions.
diff --git a/docs/examples/DraggingTogglingComplexExample.tsx b/docs/examples/DraggingTogglingComplexExample.tsx
@@ -1,4 +1,4 @@
-import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react';
+import { IconColumnRemove, IconColumns3 } from '@tabler/icons-react';
 import sortBy from 'lodash/sortBy';
 import { DataTable, DataTableSortStatus, useDataTableColumns } from 'mantine-datatable';
 import { useEffect, useState } from 'react';
@@ -41,13 +41,13 @@ export default function DraggingTogglingComplexExample() {
       rowContextMenu={{
         items: () => [
           {
-            key: 'reset-columns.toggled',
+            key: 'reset-toggled-columns',
             icon: <IconColumnRemove size={16} />,
             onClick: resetColumnsToggle,
           },
           {
             key: 'reset-columns-order',
-            icon: <IconColumns1 size={16} />,
+            icon: <IconColumns3 size={16} />,
             onClick: resetColumnsOrder,
           },
         ],

diff --git a/docs/examples/DraggingTogglingResetExample.tsx b/docs/examples/DraggingTogglingResetExample.tsx
@@ -1,4 +1,4 @@
-import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react';
+import { IconColumnRemove, IconColumns3 } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns } from 'mantine-datatable';
 import { companies } from '~/data';
 
@@ -25,13 +25,13 @@ export default function DraggingTogglingResetExample() {
       rowContextMenu={{
         items: () => [
           {
-            key: 'reset-columns.toggled',
+            key: 'reset-toggled-columns',
             icon: <IconColumnRemove size={16} />,
             onClick: resetColumnsToggle,
           },
           {
             key: 'reset-columns-order',
-            icon: <IconColumns1 size={16} />,
+            icon: <IconColumns3 size={16} />,
             onClick: resetColumnsOrder,
           },
         ],

diff --git a/docs/examples/TogglingExample.tsx b/docs/examples/TogglingExample.tsx
@@ -1,5 +1,5 @@
-import { Button, Group, Stack } from '@mantine/core';
-import { IconMap } from '@tabler/icons-react';
+import { Button, Group, Stack, Text } from '@mantine/core';
+import { IconBuildingCommunity, IconBuildingSkyscraper, IconMap, IconRoadSign } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns } from 'mantine-datatable';
 import { companies } from '~/data';
 
@@ -9,13 +9,55 @@ export default function TogglingExample() {
   const { effectiveColumns, resetColumnsToggle } = useDataTableColumns({
     key,
     columns: [
-      { accessor: 'name', width: '40%', toggleable: true, defaultToggle: false },
-      { accessor: 'streetAddress', width: '60%', toggleable: true },
-      { accessor: 'city', width: 160, toggleable: true },
+      {
+        accessor: 'name',
+        title: (
+          <Group spacing={4} mt={-1}>
+            <IconBuildingSkyscraper size={16} />
+            <Text inherit mt={1}>
+              Company
+            </Text>
+          </Group>
+        ),
+        width: '40%',
+        toggleable: true,
+        defaultToggle: false,
+      },
+      {
+        accessor: 'streetAddress',
+        title: (
+          <Group spacing={4} mt={-1}>
+            <IconRoadSign size={16} />
+            <Text inherit mt={1}>
+              Street Address
+            </Text>
+          </Group>
+        ),
+        width: '60%',
+        toggleable: true,
+      },
+      {
+        accessor: 'city',
+        title: (
+          <Group spacing={4} mt={-1}>
+            <IconBuildingCommunity size={16} />
+            <Text inherit mt={1}>
+              City
+            </Text>
+          </Group>
+        ),
+        width: 160,
+        toggleable: true,
+      },
       {
         accessor: 'state',
         width: 40,
-        title: <IconMap />,
+        textAlignment: 'right',
+        title: (
+          <Group position="right">
+            <IconMap size={16} />
+          </Group>
+        ),
       },
     ],
   });

diff --git a/docs/pages/examples/dragging-toggling.tsx b/docs/pages/examples/dragging-toggling.tsx
@@ -36,7 +36,7 @@ export default function Page({ code }: InferGetStaticPropsType<typeof getStaticP
         In order to enable Dragging you’ll have to:
         <ul>
           <li>
-            add a <Code>storeColumnsKey: your_key</Code> property to the DataTable;
+            add a <Code>storeColumnsKey: &apos;your_key&apos;</Code> property to the DataTable;
           </li>
           <li>
             add a <Code>draggable: true</Code> property to each Dragging candidate column;
@@ -65,7 +65,7 @@ export default function Page({ code }: InferGetStaticPropsType<typeof getStaticP
         In order to enable Toggling you’ll have to:
         <ul>
           <li>
-            add a <Code>storeColumnsKey: your_key</Code> property to the DataTable;
+            add a <Code>storeColumnsKey: &apos;your_key&apos;</Code> property to the DataTable;
           </li>
           <li>
             add a <Code>toggleable: true</Code> property to each Toggling candidate column;

diff --git a/package/DataTableHeader.tsx b/package/DataTableHeader.tsx
@@ -120,6 +120,7 @@ export default forwardRef(function DataTableHeader<T>(
               onSortStatusChange={onSortStatusChange}
               filter={filter}
               filtering={filtering}
+              allColumns={columns}
             />
           );
         })}

diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx
@@ -101,6 +101,7 @@ type DataTableHeaderCellProps<T> = {
   sortStatus: DataTableSortProps['sortStatus'];
   sortIcons: DataTableSortProps['sortIcons'];
   onSortStatusChange: DataTableSortProps['onSortStatusChange'];
+  allColumns: DataTableColumn<T>[];
 } & Pick<
   DataTableColumn<T>,
   | 'accessor'
@@ -132,6 +133,7 @@ export default function DataTableHeaderCell<T>({
   onSortStatusChange,
   filter,
   filtering,
+  allColumns,
 }: DataTableHeaderCellProps<T>) {
   const { setSourceColumn, setTargetColumn, swapColumns, columnsToggle, setColumnsToggle } =
     useDataTableDragToggleColumnsContext();
@@ -291,7 +293,9 @@ export default function DataTableHeaderCell<T>({
                     <Group key={column.accessor}>
                       <Checkbox
                         size="xs"
-                        label={column.title ?? humanize(column.accessor)}
+                        label={
+                          allColumns.find((c) => c.accessor === column.accessor)?.title ?? humanize(column.accessor)
+                        }
                         checked={column.toggled}
                         onChange={(e) => {
                           setColumnsToggle(