fix(@clayui/core): fixes columns visibility initial state behavior

liferay · Mar 5, 2024 · 34614f8 · 34614f8
1 parent 89a8f07
commit 34614f8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx
@@ -54,7 +54,6 @@ function HeadInner<T extends Record<string, any>>(
 ) {
 	const {
 		columnsVisibility,
-		headCellsCount,
 		hiddenColumns,
 		messages,
 		onHeadCellsChange,
@@ -69,6 +68,9 @@ function HeadInner<T extends Record<string, any>>(
 	});
 
 	useMemo(() => {
+		if (hiddenColumns.size === 0) {
+			onHiddenColumnsChange(collection.getItems(), 0);
+		}
 		onHeadCellsChange(collection.getSize());
 	}, []);
 
@@ -151,12 +153,11 @@ function HeadInner<T extends Record<string, any>>(
 															},
 														}}
 														disabled={
-															!hiddenColumns.has(
+															hiddenColumns.has(
 																item
 															) &&
-															headCellsCount -
-																1 ===
-																hiddenColumns.size
+															hiddenColumns.size ===
+																1
 														}
 														onChange={(event) => {
 															event.stopPropagation();

diff --git a/packages/clay-core/src/table/Table.tsx b/packages/clay-core/src/table/Table.tsx
@@ -212,7 +212,26 @@ export const Table = React.forwardRef<HTMLDivElement, Props>(
 							onExpandedChange: setExpandedKeys,
 							onHeadCellsChange: setHeadCellsCount,
 							onHiddenColumnsChange: useCallback(
-								(column: React.Key, index: number) => {
+								(
+									column: React.Key | Array<React.Key>,
+									index: number
+								) => {
+									if (Array.isArray(column)) {
+										const columns = new Map(hidden);
+
+										column.forEach((value, index) => {
+											if (columns.has(value)) {
+												columns.delete(value);
+											} else {
+												columns.set(value, index);
+											}
+										});
+
+										setHidden(columns);
+
+										return;
+									}
+
 									const columns = new Map(hidden);
 
 									if (columns.has(column)) {

diff --git a/packages/clay-core/src/table/context.tsx b/packages/clay-core/src/table/context.tsx
@@ -21,7 +21,10 @@ type Context = {
 	onHeadCellsChange: (value: number) => void;
 	onLoadMore?: (item: unknown) => Promise<Array<any> | undefined>;
 	onSortChange: (sorting: Sorting | null, textValue: string) => void;
-	onHiddenColumnsChange: (column: React.Key, index: number) => void;
+	onHiddenColumnsChange: (
+		column: React.Key | Array<React.Key>,
+		index: number
+	) => void;
 	sort: Sorting | null;
 	sortDescriptionId: string;
 	treegrid: boolean;