Skip to content

Commit aa6d551

Browse files
icflorescuicflorescu
committed
Fix multiple-merges resulted mess
1 parent fdccc73 commit aa6d551

File tree

4 files changed

+44
-193
lines changed

4 files changed

+44
-193
lines changed

‎package/DataTable.css‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,11 @@
5454
overflow: hidden;
5555
color: var(--mantine-datatable-color);
5656
background: var(--mantine-datatable-background-color);
57+
58+
th,
59+
td {
60+
border-left: 0;
61+
}
5762
}
5863

5964
.mantine-datatable-with-border {
@@ -71,8 +76,8 @@
7176
}
7277

7378
/* Selection column should always have fixed width */
74-
.mantine-datatable th[data-accessor="__selection__"],
75-
.mantine-datatable td[data-accessor="__selection__"] {
79+
.mantine-datatable th[data-accessor='__selection__'],
80+
.mantine-datatable td[data-accessor='__selection__'] {
7681
width: 44px !important;
7782
min-width: 44px !important;
7883
max-width: 44px !important;
@@ -88,8 +93,8 @@
8893
}
8994

9095
/* But selection column should still be fixed even in auto layout */
91-
.mantine-datatable:not(.mantine-datatable-resizable-columns) th[data-accessor="__selection__"],
92-
.mantine-datatable:not(.mantine-datatable-resizable-columns) td[data-accessor="__selection__"] {
96+
.mantine-datatable:not(.mantine-datatable-resizable-columns) th[data-accessor='__selection__'],
97+
.mantine-datatable:not(.mantine-datatable-resizable-columns) td[data-accessor='__selection__'] {
9398
width: 44px !important;
9499
min-width: 44px !important;
95100
max-width: 44px !important;

‎package/DataTable.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { Box, Table, type MantineSize } from '@mantine/core';
22
import { useMergedRef } from '@mantine/hooks';
33
import clsx from 'clsx';
4-
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
5-
import { useCallback, useMemo, useState } from 'react';
4+
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
65
import { DataTableColumnsProvider } from './DataTableDragToggleProvider';
76
import { DataTableEmptyRow } from './DataTableEmptyRow';
87
import { DataTableEmptyState } from './DataTableEmptyState';

‎package/hooks/useDataTableColumnResize.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export function useDataTableColumnResize<T>({
118118
(updates: Array<{ accessor: string; width: string | number }>) => {
119119
// Filter out any updates to the selection column
120120
const filteredUpdates = updates.filter((update) => update.accessor !== '__selection__');
121-
121+
122122
const newWidths = effectiveColumnsWidth.map((column) => {
123123
const accessor = Object.keys(column)[0];
124124
const update = filteredUpdates.find((u) => u.accessor === accessor);

‎package/hooks/useDataTableColumns.ts‎

Lines changed: 33 additions & 186 deletions
Original file line numberDiff line numberDiff line change
@@ -44,191 +44,38 @@ export const useDataTableColumns = <T>({
4444
*/
4545
onFixedLayoutChange?: (enabled: boolean) => void;
4646
}) => {
47-
// align order
48-
function alignColumnsOrder<T>(columnsOrder: string[], columns: DataTableColumn<T>[]) {
49-
const updatedColumnsOrder: string[] = [];
50-
columnsOrder.forEach((col) => {
51-
if (columns.find((c) => c.accessor === col)) {
52-
updatedColumnsOrder.push(col);
53-
}
54-
});
55-
columns.forEach((col) => {
56-
if (!updatedColumnsOrder.includes(col.accessor as string)) {
57-
updatedColumnsOrder.push(col.accessor as string);
58-
}
59-
});
60-
return updatedColumnsOrder;
61-
}
62-
63-
// align toggle
64-
function alignColumnsToggle<T>(columnsToggle: DataTableColumnToggle[], columns: DataTableColumn<T>[]) {
65-
const updatedColumnsToggle: DataTableColumnToggle[] = [];
66-
columnsToggle.forEach((col) => {
67-
if (columns.find((c) => c.accessor === col.accessor)) {
68-
updatedColumnsToggle.push(col);
69-
}
70-
});
71-
columns.forEach((col) => {
72-
if (!updatedColumnsToggle.find((c) => c.accessor === col.accessor)) {
73-
updatedColumnsToggle.push({
74-
accessor: col.accessor as string,
75-
defaultToggle: col.defaultToggle === undefined ? true : col.defaultToggle,
76-
toggleable: col.toggleable as boolean,
77-
toggled: col.defaultToggle === undefined ? true : col.defaultToggle,
78-
});
79-
}
80-
});
81-
return updatedColumnsToggle as DataTableColumnToggle[];
82-
}
83-
84-
// align width
85-
function alignColumnsWidth<T>(columnsWidth: DataTableColumnWidth[], columns: DataTableColumn<T>[]) {
86-
const updatedColumnsWidth: DataTableColumnWidth[] = [];
87-
88-
columnsWidth.forEach((col) => {
89-
const accessor = Object.keys(col)[0];
90-
if (columns.find((c) => c.accessor === accessor)) {
91-
updatedColumnsWidth.push(col);
92-
}
93-
});
94-
95-
columns.forEach((col) => {
96-
const accessor = col.accessor;
97-
if (!updatedColumnsWidth.find((c) => Object.keys(c)[0] === accessor)) {
98-
const widthObj: DataTableColumnWidth = {};
99-
widthObj[accessor as string] = '';
100-
updatedColumnsWidth.push(widthObj);
101-
}
102-
});
103-
104-
return updatedColumnsWidth;
105-
}
106-
107-
// align order
108-
function useAlignColumnsOrder() {
109-
const [columnsOrder, _setColumnsOrder] = useLocalStorage<string[]>({
110-
key: key ? `${key}-columns-order` : '',
111-
defaultValue: key ? (defaultColumnsOrder as string[]) : undefined,
112-
getInitialValueInEffect,
113-
});
114-
115-
function setColumnsOrder(order: string[] | ((prev: string[]) => string[])) {
116-
if (key) {
117-
_setColumnsOrder(order);
118-
}
119-
}
120-
121-
if (!key) {
122-
return [columnsOrder, setColumnsOrder] as const;
123-
}
124-
125-
const alignedColumnsOrder = alignColumnsOrder(columnsOrder, columns);
126-
127-
const prevColumnsOrder = JSON.stringify(columnsOrder);
128-
129-
if (JSON.stringify(alignedColumnsOrder) !== prevColumnsOrder) {
130-
setColumnsOrder(alignedColumnsOrder);
131-
}
132-
133-
return [alignedColumnsOrder, setColumnsOrder] as const;
134-
}
135-
136-
function useAlignColumnsToggle() {
137-
const [columnsToggle, _setColumnsToggle] = useLocalStorage<DataTableColumnToggle[]>({
138-
key: key ? `${key}-columns-toggle` : '',
139-
defaultValue: key ? (defaultColumnsToggle as DataTableColumnToggle[]) : undefined,
140-
getInitialValueInEffect,
141-
});
142-
143-
function setColumnsToggle(
144-
toggle: DataTableColumnToggle[] | ((prev: DataTableColumnToggle[]) => DataTableColumnToggle[])
145-
) {
146-
if (key) {
147-
_setColumnsToggle(toggle);
148-
}
149-
}
150-
151-
if (!key) {
152-
return [columnsToggle, setColumnsToggle] as const;
153-
}
154-
155-
const alignedColumnsToggle = alignColumnsToggle(columnsToggle, columns);
156-
157-
const prevColumnsToggle = JSON.stringify(columnsToggle);
158-
159-
if (JSON.stringify(alignedColumnsToggle) !== prevColumnsToggle) {
160-
setColumnsToggle(alignedColumnsToggle);
161-
}
162-
163-
return [alignColumnsToggle(columnsToggle, columns), setColumnsToggle] as const;
164-
}
165-
166-
function useAlignColumnsWidth() {
167-
const [columnsWidth, _setColumnsWidth] = useLocalStorage<DataTableColumnWidth[]>({
168-
key: key ? `${key}-columns-width` : '',
169-
defaultValue: key ? (defaultColumnsWidth as DataTableColumnWidth[]) : undefined,
170-
getInitialValueInEffect,
171-
});
172-
173-
function setColumnsWidth(
174-
width: DataTableColumnWidth[] | ((prev: DataTableColumnWidth[]) => DataTableColumnWidth[])
175-
) {
176-
if (key) {
177-
_setColumnsWidth(width);
178-
}
179-
}
180-
181-
if (!key) {
182-
return [columnsWidth, setColumnsWidth] as const;
183-
}
184-
185-
const alignedColumnsWidth = alignColumnsWidth(columnsWidth, columns);
186-
187-
const prevColumnsWidth = JSON.stringify(columnsWidth);
188-
189-
if (JSON.stringify(alignedColumnsWidth) !== prevColumnsWidth) {
190-
setColumnsWidth(alignedColumnsWidth);
191-
}
192-
193-
return [alignColumnsWidth(columnsWidth, columns), setColumnsWidth] as const;
194-
}
195-
196-
// Default columns id ordered is the order of the columns in the array
197-
const defaultColumnsOrder = (columns && columns.map((column) => column.accessor)) || [];
198-
199-
// create an array of object with key = accessor and value = width
200-
const defaultColumnsWidth =
201-
(columns && columns.map((column) => ({ [column.accessor]: column.width ?? 'initial' }))) || [];
202-
203-
// Default columns id toggled is the array of columns which have the toggleable property set to true
204-
const defaultColumnsToggle =
205-
columns &&
206-
columns.map((column) => ({
207-
accessor: column.accessor,
208-
defaultToggle: column.defaultToggle || true,
209-
toggleable: column.toggleable,
210-
toggled: column.defaultToggle === undefined ? true : column.defaultToggle,
211-
}));
212-
213-
// Store the columns order in localStorage
214-
const [columnsOrder, setColumnsOrder] = useAlignColumnsOrder();
215-
216-
// Store the columns toggle in localStorage
217-
const [columnsToggle, setColumnsToggle] = useAlignColumnsToggle();
218-
219-
// Store the columns widths in localStorage
220-
const [columnsWidth, setColumnsWidth] = useAlignColumnsWidth();
221-
222-
// we won't use the "remove" function from useLocalStorage() because
223-
// we got issue with rendering
224-
const resetColumnsOrder = () => setColumnsOrder(defaultColumnsOrder as string[]);
225-
226-
const resetColumnsToggle = () => {
227-
setColumnsToggle(defaultColumnsToggle as DataTableColumnToggle[]);
228-
};
229-
230-
const resetColumnsWidth = () => setColumnsWidth(defaultColumnsWidth as DataTableColumnWidth[]);
231-
47+
// Use specialized hooks for each feature
48+
const { columnsOrder, setColumnsOrder, resetColumnsOrder } = useDataTableColumnReorder({
49+
key,
50+
columns,
51+
getInitialValueInEffect,
52+
});
53+
54+
const { columnsToggle, setColumnsToggle, resetColumnsToggle } = useDataTableColumnToggle({
55+
key,
56+
columns,
57+
getInitialValueInEffect,
58+
});
59+
60+
const {
61+
columnsWidth,
62+
setColumnsWidth,
63+
setColumnWidth,
64+
setMultipleColumnWidths,
65+
resetColumnsWidth,
66+
hasResizableColumns,
67+
allResizableWidthsInitial,
68+
measureAndSetColumnWidths,
69+
} = useDataTableColumnResize({
70+
key,
71+
columns,
72+
getInitialValueInEffect,
73+
headerRef,
74+
scrollViewportRef,
75+
onFixedLayoutChange,
76+
});
77+
78+
// Compute effective columns based on order, toggle, and width
23279
const effectiveColumns = useMemo(() => {
23380
if (!columnsOrder) {
23481
return columns;
@@ -252,7 +99,7 @@ export const useDataTableColumns = <T>({
25299
if (column?.accessor === '__selection__') {
253100
return column;
254101
}
255-
102+
256103
return {
257104
...column,
258105
width: columnsWidth.find((width) => {

0 commit comments

Comments
 (0)