Merge pull request #516 from icflorescu/next

Fix column toggling
icflorescu · Jan 17, 2024 · 4873009 · 4873009
2 parents 4ff3393 + 9203185
commit 4873009
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 20 deletions.
diff --git a/app/examples/column-dragging-and-toggling/DraggingTogglingComplexExample.tsx b/app/examples/column-dragging-and-toggling/DraggingTogglingComplexExample.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react';
+import { IconColumnRemove, IconColumns3 } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns, type DataTableSortStatus } from '__PACKAGE__';
 import sortBy from 'lodash/sortBy';
 import { useContextMenu } from 'mantine-contextmenu';
@@ -46,13 +46,13 @@ export default function DraggingTogglingComplexExample() {
       onRowContextMenu={({ event }) =>
         showContextMenu([
           {
-            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,
           },
         ])(event)

diff --git a/app/examples/column-dragging-and-toggling/DraggingTogglingResetExample.tsx b/app/examples/column-dragging-and-toggling/DraggingTogglingResetExample.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { IconColumnRemove, IconColumns1 } from '@tabler/icons-react';
+import { IconColumnRemove, IconColumns3 } from '@tabler/icons-react';
 import { DataTable, useDataTableColumns } from '__PACKAGE__';
 import { useContextMenu } from 'mantine-contextmenu';
 import { companies } from '~/data';
@@ -30,13 +30,13 @@ export default function DraggingTogglingResetExample() {
       onRowContextMenu={({ event }) =>
         showContextMenu([
           {
-            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,
           },
         ])(event)

diff --git a/app/examples/column-dragging-and-toggling/TogglingExample.tsx b/app/examples/column-dragging-and-toggling/TogglingExample.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-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 '__PACKAGE__';
 import { companies } from '~/data';
 
@@ -11,10 +11,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: 'state', textAlign: 'right', title: <IconMap /> },
+      {
+        accessor: 'name',
+        title: (
+          <Group gap={4} mt={-1} justify="start">
+            <IconBuildingSkyscraper size={16} />
+            <Text inherit mt={1}>
+              Company
+            </Text>
+          </Group>
+        ),
+        width: '40%',
+        toggleable: true,
+        defaultToggle: false,
+      },
+      {
+        accessor: 'streetAddress',
+        title: (
+          <Group gap={4} mt={-1} justify="start">
+            <IconRoadSign size={16} />
+            <Text inherit mt={1}>
+              Street Address
+            </Text>
+          </Group>
+        ),
+        width: '60%',
+        toggleable: true,
+      },
+      {
+        accessor: 'city',
+        title: (
+          <Group gap={4} mt={-1}>
+            <IconBuildingCommunity size={16} />
+            <Text inherit mt={1}>
+              City
+            </Text>
+          </Group>
+        ),
+        width: 160,
+        toggleable: true,
+      },
+      {
+        accessor: 'state',
+        textAlign: 'right',
+        title: (
+          <Group justify="right">
+            <IconMap size={16} />
+          </Group>
+        ),
+      },
     ],
   });
 

diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx
@@ -42,8 +42,8 @@ export default async function DraggingExamplePage() {
       </Txt>
       <UnorderedList compact>
         <li>
-          add a <Code>storeColumnsKey: your_key</Code> property to the DataTable (since the order of the columns is
-          persisted in the local storage);
+          add a <Code>storeColumnsKey: &apos;your_key&apos;</Code> property to the DataTable (since the order of the
+          columns is persisted in the local storage);
         </li>
         <li>
           add a <Code>draggable: true</Code> property to each <strong>dragging candidate</strong> column;
@@ -58,18 +58,18 @@ export default async function DraggingExamplePage() {
       </Txt>
       <PageSubtitle value="Column toggling" />
       <Txt>
-        In the below example you can toggle the first 3 columns. The last column is not toggleable and will always be
-        visible. The first column is toggled off by default. Click with right mouse button on the header to select the
-        columns you want to toggle.
+        In the example below you can toggle the first 3 columns. The last column is not toggleable and will always be
+        visible. The first column is toggled off by default. Right-click on the header to select the columns you want to
+        toggle.
       </Txt>
       <TogglingExample />
       <Txt>
         In order to enable <strong>column toggling</strong> you’ll have to:
       </Txt>
       <UnorderedList compact>
         <li>
-          add a <Code>storeColumnsKey: your_key</Code> property to the DataTable (since the order of the columns is
-          persisted in the local storage);
+          add a <Code>storeColumnsKey: &apos;your_key&apos;</Code> property to the DataTable (since the order of the
+          columns is persisted in the local storage);
         </li>
         <li>
           add a <Code>toggleable: true</Code> property to each <strong>toggling candidate</strong> column;

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

diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx
@@ -36,6 +36,7 @@ type DataTableHeaderCellProps<T> = {
   sortStatus: DataTableSortProps<T>['sortStatus'];
   sortIcons: DataTableSortProps<T>['sortIcons'];
   onSortStatusChange: DataTableSortProps<T>['onSortStatusChange'];
+  allColumns: DataTableColumn<T>[];
 } & Pick<
   DataTableColumn<T>,
   'accessor' | 'sortable' | 'draggable' | 'toggleable' | 'resizable' | 'textAlign' | 'width' | 'filter' | 'filtering'
@@ -58,6 +59,7 @@ export function DataTableHeaderCell<T>({
   onSortStatusChange,
   filter,
   filtering,
+  allColumns,
 }: DataTableHeaderCellProps<T>) {
   const { setSourceColumn, setTargetColumn, swapColumns, columnsToggle, setColumnsToggle } =
     useDataTableColumnsContext();
@@ -221,7 +223,9 @@ export 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(