diff --git a/docs/examples/DraggingTogglingComplexExample.tsx b/docs/examples/DraggingTogglingComplexExample.tsx
index ffaaac0..089ab1c 100644
--- 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: ,
onClick: resetColumnsToggle,
},
{
key: 'reset-columns-order',
- icon: ,
+ icon: ,
onClick: resetColumnsOrder,
},
],
diff --git a/docs/examples/DraggingTogglingResetExample.tsx b/docs/examples/DraggingTogglingResetExample.tsx
index 386a46c..19493d7 100644
--- 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: ,
onClick: resetColumnsToggle,
},
{
key: 'reset-columns-order',
- icon: ,
+ icon: ,
onClick: resetColumnsOrder,
},
],
diff --git a/docs/examples/TogglingExample.tsx b/docs/examples/TogglingExample.tsx
index 3f91642..c6fc972 100644
--- 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: (
+
+
+
+ Company
+
+
+ ),
+ width: '40%',
+ toggleable: true,
+ defaultToggle: false,
+ },
+ {
+ accessor: 'streetAddress',
+ title: (
+
+
+
+ Street Address
+
+
+ ),
+ width: '60%',
+ toggleable: true,
+ },
+ {
+ accessor: 'city',
+ title: (
+
+
+
+ City
+
+
+ ),
+ width: 160,
+ toggleable: true,
+ },
{
accessor: 'state',
width: 40,
- title: ,
+ textAlignment: 'right',
+ title: (
+
+
+
+ ),
},
],
});
diff --git a/docs/pages/examples/dragging-toggling.tsx b/docs/pages/examples/dragging-toggling.tsx
index 41ea855..4a3a39c 100644
--- a/docs/pages/examples/dragging-toggling.tsx
+++ b/docs/pages/examples/dragging-toggling.tsx
@@ -36,7 +36,7 @@ export default function Page({ code }: InferGetStaticPropsType
- add a storeColumnsKey: your_key
property to the DataTable;
+ add a storeColumnsKey: 'your_key'
property to the DataTable;
add a draggable: true
property to each Dragging candidate column;
@@ -65,7 +65,7 @@ export default function Page({ code }: InferGetStaticPropsType
- add a storeColumnsKey: your_key
property to the DataTable;
+ add a storeColumnsKey: 'your_key'
property to the DataTable;
add a toggleable: true
property to each Toggling candidate column;
diff --git a/package/DataTableHeader.tsx b/package/DataTableHeader.tsx
index aa3eb87..385b0de 100644
--- a/package/DataTableHeader.tsx
+++ b/package/DataTableHeader.tsx
@@ -120,6 +120,7 @@ export default forwardRef(function DataTableHeader(
onSortStatusChange={onSortStatusChange}
filter={filter}
filtering={filtering}
+ allColumns={columns}
/>
);
})}
diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx
index 27119bc..3dabe2e 100644
--- a/package/DataTableHeaderCell.tsx
+++ b/package/DataTableHeaderCell.tsx
@@ -101,6 +101,7 @@ type DataTableHeaderCellProps = {
sortStatus: DataTableSortProps['sortStatus'];
sortIcons: DataTableSortProps['sortIcons'];
onSortStatusChange: DataTableSortProps['onSortStatusChange'];
+ allColumns: DataTableColumn[];
} & Pick<
DataTableColumn,
| 'accessor'
@@ -132,6 +133,7 @@ export default function DataTableHeaderCell({
onSortStatusChange,
filter,
filtering,
+ allColumns,
}: DataTableHeaderCellProps) {
const { setSourceColumn, setTargetColumn, swapColumns, columnsToggle, setColumnsToggle } =
useDataTableDragToggleColumnsContext();
@@ -291,7 +293,9 @@ export default function DataTableHeaderCell({
c.accessor === column.accessor)?.title ?? humanize(column.accessor)
+ }
checked={column.toggled}
onChange={(e) => {
setColumnsToggle(