Skip to content

Commit a470243

Browse files
authored
Merge pull request #607 from icflorescu/next
Fix #605
2 parents 63b9766 + 53a6f2e commit a470243

File tree

4 files changed

+23
-122
lines changed

4 files changed

+23
-122
lines changed

CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
The following is a list of notable changes to the Mantine DataTable component.
44
Minor versions that are not listed in the changelog are bug fixes and small improvements.
55

6+
## 7.10.4 (2024-06-24)
7+
8+
- Revert [#603](https://github.com/icflorescu/mantine-datatable/pull/603) due to issue [#605](https://github.com/icflorescu/mantine-datatable/issues/605)
9+
610
## 7.10.3 (2024-06-18)
711

812
- 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)

app/examples/column-dragging-and-toggling/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
1313
import DraggingExample from './DraggingExample';
1414
import DraggingTogglingComplexExample from './DraggingTogglingComplexExample';
1515
import DraggingTogglingResetExample from './DraggingTogglingResetExample';
16-
import DynamicColumnExample from './DynamicColumnExample';
1716
import TogglingExample from './TogglingExample';
1817

1918
const PATH: Route = '/examples/column-dragging-and-toggling';
@@ -88,13 +87,14 @@ export default async function DraggingExamplePage() {
8887
<Code>false</Code>.
8988
</Txt>
9089

91-
<PageSubtitle value="Add & Remove column at run-time" />
90+
{/* TODO add this back after fixing issue https://github.com/icflorescu/mantine-datatable/issues/605 */}
91+
{/* <PageSubtitle value="Add & Remove column at run-time" />
9292
<Txt>
9393
Of course, you may need to add or remove columns at run-time. In this case, you can directly modify the array of
9494
columns without needing to perform any operations.
9595
</Txt>
9696
<DynamicColumnExample />
97-
<CodeBlock code={code['DynamicColumnExample.tsx']} />
97+
<CodeBlock code={code['DynamicColumnExample.tsx']} /> */}
9898

9999
<PageSubtitle value="Dragging and toggling with context menu reset" />
100100
<DraggingTogglingResetExample />

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mantine-datatable",
3-
"version": "7.10.3",
3+
"version": "7.10.4",
44
"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",
55
"keywords": [
66
"mantine",

package/hooks/useDataTableColumns.ts

Lines changed: 15 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -37,121 +37,6 @@ export const useDataTableColumns = <T>({
3737
*/
3838
getInitialValueInEffect?: boolean;
3939
}) => {
40-
// align order
41-
function alignColumnsOrder<T>(columnsOrder: string[], columns: DataTableColumn<T>[]) {
42-
const updatedColumnsOrder: string[] = [];
43-
columnsOrder.forEach((col) => {
44-
if (columns.find((c) => c.accessor === col)) {
45-
updatedColumnsOrder.push(col);
46-
}
47-
});
48-
columns.forEach((col) => {
49-
if (!updatedColumnsOrder.includes(col.accessor as string)) {
50-
updatedColumnsOrder.push(col.accessor as string);
51-
}
52-
});
53-
return updatedColumnsOrder;
54-
}
55-
56-
// align toggle
57-
function alignColumnsToggle<T>(columnsToggle: DataTableColumnToggle[], columns: DataTableColumn<T>[]) {
58-
const updatedColumnsToggle: DataTableColumnToggle[] = [];
59-
columnsToggle.forEach((col) => {
60-
if (columns.find((c) => c.accessor === col.accessor)) {
61-
updatedColumnsToggle.push(col);
62-
}
63-
});
64-
columns.forEach((col) => {
65-
if (!updatedColumnsToggle.find((c) => c.accessor === col.accessor)) {
66-
updatedColumnsToggle.push({
67-
accessor: col.accessor as string,
68-
defaultToggle: col.defaultToggle || true,
69-
toggleable: col.toggleable as boolean,
70-
toggled: col.defaultToggle === undefined ? true : col.defaultToggle,
71-
});
72-
}
73-
});
74-
return updatedColumnsToggle as DataTableColumnToggle[];
75-
}
76-
77-
// align width
78-
function alignColumnsWidth<T>(columnsWidth: DataTableColumnWidth[], columns: DataTableColumn<T>[]) {
79-
const updatedColumnsWidth: DataTableColumnWidth[] = [];
80-
81-
columnsWidth.forEach((col) => {
82-
const accessor = Object.keys(col)[0];
83-
if (columns.find((c) => c.accessor === accessor)) {
84-
updatedColumnsWidth.push(col);
85-
}
86-
});
87-
88-
columns.forEach((col) => {
89-
const accessor = col.accessor;
90-
if (!updatedColumnsWidth.find((c) => Object.keys(c)[0] === accessor)) {
91-
const widthObj: DataTableColumnWidth = {};
92-
widthObj[accessor as string] = '';
93-
updatedColumnsWidth.push(widthObj);
94-
}
95-
});
96-
97-
return updatedColumnsWidth;
98-
}
99-
100-
// align order
101-
function useAlignColumnsOrder() {
102-
const [columnsOrder, setColumnsOrder] = useLocalStorage<string[]>({
103-
key: `${key}-columns-order`,
104-
defaultValue: defaultColumnsOrder as string[],
105-
getInitialValueInEffect,
106-
});
107-
108-
const alignedColumnsOrder = alignColumnsOrder(columnsOrder, columns);
109-
110-
const prevColumnsOrder = JSON.stringify(columnsOrder);
111-
112-
if (JSON.stringify(alignedColumnsOrder) !== prevColumnsOrder) {
113-
setColumnsOrder(alignedColumnsOrder);
114-
}
115-
116-
return [alignedColumnsOrder, setColumnsOrder] as const;
117-
}
118-
119-
function useAlignColumnsToggle() {
120-
const [columnsToggle, setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
121-
key: `${key}-columns-toggle`,
122-
defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
123-
getInitialValueInEffect,
124-
});
125-
126-
const alignedColumnsToggle = alignColumnsToggle(columnsToggle, columns);
127-
128-
const prevColumnsToggle = JSON.stringify(columnsToggle);
129-
130-
if (JSON.stringify(alignedColumnsToggle) !== prevColumnsToggle) {
131-
setColumnsToggle(alignedColumnsToggle);
132-
}
133-
134-
return [alignColumnsToggle(columnsToggle, columns), setColumnsToggle] as const;
135-
}
136-
137-
function useAlignColumnsWidth() {
138-
const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
139-
key: `${key}-columns-width`,
140-
defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
141-
getInitialValueInEffect,
142-
});
143-
144-
const alignedColumnsWidth = alignColumnsWidth(columnsWidth, columns);
145-
146-
const prevColumnsWidth = JSON.stringify(columnsWidth);
147-
148-
if (JSON.stringify(alignedColumnsWidth) !== prevColumnsWidth) {
149-
setColumnsWidth(alignedColumnsWidth);
150-
}
151-
152-
return [alignColumnsWidth(columnsWidth, columns), setColumnsWidth] as const;
153-
}
154-
15540
// Default columns id ordered is the order of the columns in the array
15641
const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];
15742

@@ -170,13 +55,25 @@ export const useDataTableColumns = <T>({
17055
}));
17156

17257
// Store the columns order in localStorage
173-
const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder();
58+
const [columnsOrder, setColumnsOrder] = useLocalStorage<string[]>({
59+
key: `${key}-columns-order`,
60+
defaultValue: defaultColumnsOrder as string[],
61+
getInitialValueInEffect,
62+
});
17463

17564
// Store the columns toggle in localStorage
176-
const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle();
65+
const [columnsToggle, setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
66+
key: `${key}-columns-toggle`,
67+
defaultValue: defaultColumnsToggle as DataTableColumnToggle[],
68+
getInitialValueInEffect,
69+
});
17770

17871
// Store the columns widths in localStorage
179-
const [columnsWidth, setColumnsWidth] = useAlignColumnsWidth();
72+
const [columnsWidth, setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
73+
key: `${key}-columns-width`,
74+
defaultValue: defaultColumnsWidth as DataTableColumnWidth[],
75+
getInitialValueInEffect,
76+
});
18077

18178
// we won't use the "remove" function from useLocalStorage() because
18279
// we got issue with rendering

0 commit comments

Comments
 (0)