diff --git a/CHANGELOG.md b/CHANGELOG.md
index db8e07693..442e530c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,10 @@
The following is a list of notable changes to the Mantine DataTable component.
Minor versions that are not listed in the changelog are bug fixes and small improvements.
+## 7.10.4 (2024-06-24)
+
+- Revert [#603](https://github.com/icflorescu/mantine-datatable/pull/603) due to issue [#605](https://github.com/icflorescu/mantine-datatable/issues/605)
+
## 7.10.3 (2024-06-18)
- Fix issue [#596](https://github.com/icflorescu/mantine-datatable/issues/596) (new columns don't appear when added to `useDataTableColumns`), thanks to [@gfazioli](https://github.com/gfazioli) for PR [#603](https://github.com/icflorescu/mantine-datatable/pull/603)
diff --git a/app/examples/column-dragging-and-toggling/page.tsx b/app/examples/column-dragging-and-toggling/page.tsx
index dd666725c..f80555ded 100644
--- a/app/examples/column-dragging-and-toggling/page.tsx
+++ b/app/examples/column-dragging-and-toggling/page.tsx
@@ -13,7 +13,6 @@ import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
import DraggingExample from './DraggingExample';
import DraggingTogglingComplexExample from './DraggingTogglingComplexExample';
import DraggingTogglingResetExample from './DraggingTogglingResetExample';
-import DynamicColumnExample from './DynamicColumnExample';
import TogglingExample from './TogglingExample';
const PATH: Route = '/examples/column-dragging-and-toggling';
@@ -88,13 +87,14 @@ export default async function DraggingExamplePage() {
false
.
-
+ {/* TODO add this back after fixing issue https://github.com/icflorescu/mantine-datatable/issues/605 */}
+ {/*
Of course, you may need to add or remove columns at run-time. In this case, you can directly modify the array of
columns without needing to perform any operations.
-
+ */}
diff --git a/package.json b/package.json
index e0314b3cc..7dd8dc089 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "mantine-datatable",
- "version": "7.10.3",
+ "version": "7.10.4",
"description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
"keywords": [
"mantine",
diff --git a/package/hooks/useDataTableColumns.ts b/package/hooks/useDataTableColumns.ts
index 0440675eb..0a23e0fb6 100644
--- a/package/hooks/useDataTableColumns.ts
+++ b/package/hooks/useDataTableColumns.ts
@@ -37,121 +37,6 @@ export const useDataTableColumns = ({
*/
getInitialValueInEffect?: boolean;
}) => {
- // align order
- function alignColumnsOrder(columnsOrder: string[], columns: DataTableColumn[]) {
- const updatedColumnsOrder: string[] = [];
- columnsOrder.forEach((col) => {
- if (columns.find((c) => c.accessor === col)) {
- updatedColumnsOrder.push(col);
- }
- });
- columns.forEach((col) => {
- if (!updatedColumnsOrder.includes(col.accessor as string)) {
- updatedColumnsOrder.push(col.accessor as string);
- }
- });
- return updatedColumnsOrder;
- }
-
- // align toggle
- function alignColumnsToggle(columnsToggle: DataTableColumnToggle[], columns: DataTableColumn[]) {
- const updatedColumnsToggle: DataTableColumnToggle[] = [];
- columnsToggle.forEach((col) => {
- if (columns.find((c) => c.accessor === col.accessor)) {
- updatedColumnsToggle.push(col);
- }
- });
- columns.forEach((col) => {
- if (!updatedColumnsToggle.find((c) => c.accessor === col.accessor)) {
- updatedColumnsToggle.push({
- accessor: col.accessor as string,
- defaultToggle: col.defaultToggle || true,
- toggleable: col.toggleable as boolean,
- toggled: col.defaultToggle === undefined ? true : col.defaultToggle,
- });
- }
- });
- return updatedColumnsToggle as DataTableColumnToggle[];
- }
-
- // align width
- function alignColumnsWidth(columnsWidth: DataTableColumnWidth[], columns: DataTableColumn[]) {
- const updatedColumnsWidth: DataTableColumnWidth[] = [];
-
- columnsWidth.forEach((col) => {
- const accessor = Object.keys(col)[0];
- if (columns.find((c) => c.accessor === accessor)) {
- updatedColumnsWidth.push(col);
- }
- });
-
- columns.forEach((col) => {
- const accessor = col.accessor;
- if (!updatedColumnsWidth.find((c) => Object.keys(c)[0] === accessor)) {
- const widthObj: DataTableColumnWidth = {};
- widthObj[accessor as string] = '';
- updatedColumnsWidth.push(widthObj);
- }
- });
-
- return updatedColumnsWidth;
- }
-
- // align order
- function useAlignColumnsOrder() {
- const [columnsOrder, setColumnsOrder] = useLocalStorage({
- key: `${key}-columns-order`,
- defaultValue: defaultColumnsOrder as string[],
- getInitialValueInEffect,
- });
-
- const alignedColumnsOrder = alignColumnsOrder(columnsOrder, columns);
-
- const prevColumnsOrder = JSON.stringify(columnsOrder);
-
- if (JSON.stringify(alignedColumnsOrder) !== prevColumnsOrder) {
- setColumnsOrder(alignedColumnsOrder);
- }
-
- return [alignedColumnsOrder, setColumnsOrder] as const;
- }
-
- function useAlignColumnsToggle() {
- const [columnsToggle, setColumnsToggle] = useLocalStorage({
- key: `${key}-columns-toggle`,
- defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
- getInitialValueInEffect,
- });
-
- const alignedColumnsToggle = alignColumnsToggle(columnsToggle, columns);
-
- const prevColumnsToggle = JSON.stringify(columnsToggle);
-
- if (JSON.stringify(alignedColumnsToggle) !== prevColumnsToggle) {
- setColumnsToggle(alignedColumnsToggle);
- }
-
- return [alignColumnsToggle(columnsToggle, columns), setColumnsToggle] as const;
- }
-
- function useAlignColumnsWidth() {
- const [columnsWidth, setColumnsWidth] = useLocalStorage({
- key: `${key}-columns-width`,
- defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
- getInitialValueInEffect,
- });
-
- const alignedColumnsWidth = alignColumnsWidth(columnsWidth, columns);
-
- const prevColumnsWidth = JSON.stringify(columnsWidth);
-
- if (JSON.stringify(alignedColumnsWidth) !== prevColumnsWidth) {
- setColumnsWidth(alignedColumnsWidth);
- }
-
- return [alignColumnsWidth(columnsWidth, columns), setColumnsWidth] as const;
- }
-
// Default columns id ordered is the order of the columns in the array
const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];
@@ -170,13 +55,25 @@ export const useDataTableColumns = ({
}));
// Store the columns order in localStorage
- const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder();
+ const [columnsOrder, setColumnsOrder] = useLocalStorage({
+ key: `${key}-columns-order`,
+ defaultValue: defaultColumnsOrder as string[],
+ getInitialValueInEffect,
+ });
// Store the columns toggle in localStorage
- const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle();
+ const [columnsToggle, setColumnsToggle] = useLocalStorage({
+ key: `${key}-columns-toggle`,
+ defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
+ getInitialValueInEffect,
+ });
// Store the columns widths in localStorage
- const [columnsWidth, setColumnsWidth] = useAlignColumnsWidth();
+ const [columnsWidth, setColumnsWidth] = useLocalStorage({
+ key: `${key}-columns-width`,
+ defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
+ getInitialValueInEffect,
+ });
// we won't use the "remove" function from useLocalStorage() because
// we got issue with rendering