@drivenets/design-system 0.13.0 → 0.15.0

package/src/components/ds-table/components/ds-table-row-virtualized/ds-table-row-virtualized.tsx

@@ -2,6 +2,7 @@ import classnames from 'classnames';
 import styles from './ds-table-row-virtualized.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { getColumnSizeStyle } from '../../utils/column-size';
+import { isFirstLeafColumnOfGroup } from '../../grouping';
 import { TableCell, TableRow } from '../core-table';
 import type { DsTableRowVirtualizedProps } from './ds-table-row-virtualized.types';
 import { DsTableCell } from '../ds-table-cell';
@@ -25,6 +26,7 @@ export const DsTableRowVirtualized = <TData,>({
 		renderExpandedRow,
 		onRowClick,
 		onRowDoubleClick,
+		loading,
 	} = useDsTableContext<TData, unknown>();
 	const isExpanded = row.getIsExpanded();
 	const isActive = activeRowId === row.id;
@@ -57,6 +59,7 @@ export const DsTableRowVirtualized = <TData,>({
 				onRowClick && styles.clickableRow,
 				!bordered && styles.rowNoBorder,
 				isExpanded && styles.expanded,
+				loading && styles.loadingRow,
 			)}
 			onClick={isExpandedRowContent ? undefined : () => onRowClick?.(row.original)}
 			onDoubleClick={isExpandedRowContent ? undefined : () => onRowDoubleClick?.(row.original)}
@@ -77,6 +80,7 @@ export const DsTableRowVirtualized = <TData,>({
 									styles.cell,
 									cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
 									cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
+									isFirstLeafColumnOfGroup(cell.column) && styles.groupStart,
 									typeof cell.column.columnDef.editCell === 'function' && styles.editableCell,
 								)}
 							>

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.module.scss

@@ -11,18 +11,30 @@
 		outline: none;
 	}
 
-	.editButton {
+	.editButton,
+	.lockIcon {
 		flex-shrink: 0;
 		opacity: 0;
 		pointer-events: none;
 	}
 
+	.lockIcon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
 	&:hover,
 	&:focus-within,
 	&[data-active] {
-		.editButton {
+		.editButton,
+		.lockIcon {
 			opacity: 1;
 			pointer-events: auto;
 		}
 	}
+
+	&[data-locked] {
+		cursor: default;
+	}
 }

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx

@@ -1,5 +1,7 @@
 import type { MouseEvent } from 'react';
 import { DsButtonV3 } from '../../../../ds-button-v3';
+import { DsIcon } from '../../../../ds-icon';
+import { DsTooltip } from '../../../../ds-tooltip';
 import styles from './ds-table-editable-cell.module.scss';
 import type { DsTableEditableCellProps } from './ds-table-editable-cell.types';
 import { useDsTableContext } from '../../../context/ds-table-context';
@@ -16,6 +18,23 @@ export const DsTableEditableCell = <TData, TValue>({
 		beginEdit(cell);
 	};
 
+	const editDisabled = cell.column.columnDef.editDisabled?.(cell.getContext());
+	const locked = editDisabled === true || typeof editDisabled === 'object';
+	const reason = typeof editDisabled === 'object' ? editDisabled.reason : undefined;
+
+	if (locked) {
+		return (
+			<div className={styles.root} data-locked="">
+				{children}
+				<DsTooltip content={reason}>
+					<span className={styles.lockIcon} aria-label="Editing disabled" role="img">
+						<DsIcon icon="lock" size="small" color="secondary" />
+					</span>
+				</DsTooltip>
+			</div>
+		);
+	}
+
 	return (
 		<div
 			className={styles.root}

package/src/components/ds-table/context/ds-table-context.ts

@@ -23,6 +23,10 @@ export interface DsTableContextType<TData, TValue> extends Partial<DsDataTablePr
 	 * ID of the currently active row
 	 */
 	activeRowId?: string | null;
+	/**
+	 * Toggles the collapsed state of a column group by its id.
+	 */
+	onToggleColumnGroup?: (groupId: string) => void;
 	/** The cell currently in edit mode, if any. */
 	editing: EditingState<TData, TValue> | null;
 	beginEdit: (cell: Cell<TData, TValue>) => void;

package/src/components/ds-table/ds-table-column.types.ts

@@ -1,6 +1,15 @@
 import type { ReactNode } from 'react';
 import type { CellContext, RowData } from '@tanstack/react-table';
 
+/**
+ * Result of a column's `editDisabled` resolver for a single cell.
+ *
+ * - `false` (or `undefined`) keeps the cell editable.
+ * - `true` locks the cell with no tooltip.
+ * - `{ reason }` locks the cell and shows `reason` in a tooltip on hover.
+ */
+export type DsTableEditDisabledResult = boolean | { reason?: ReactNode };
+
 declare module '@tanstack/react-table' {
 	interface ColumnDefBase<TData extends RowData, TValue> {
 		/**
@@ -8,5 +17,20 @@ declare module '@tanstack/react-table' {
 		 * When omitted, the column is not editable.
 		 */
 		editCell?: (context: CellContext<TData, TValue>) => ReactNode;
+
+		/**
+		 * Locks individual cells of an otherwise editable column (one that defines
+		 * `editCell`). When this returns a truthy value for a cell, that cell shows a
+		 * lock icon instead of the edit affordance and cannot enter edit mode. Return
+		 * `{ reason }` to surface an optional tooltip explaining why. Has no effect on
+		 * columns without `editCell`.
+		 */
+		editDisabled?: (context: CellContext<TData, TValue>) => DsTableEditDisabledResult;
+
+		/**
+		 * Renders this column's cell content while the table is `loading`.
+		 * When omitted, a default text skeleton is rendered.
+		 */
+		loadingCell?: (context: CellContext<TData, TValue>) => ReactNode;
 	}
 }

package/src/components/ds-table/ds-table.tsx

@@ -25,6 +25,8 @@ import { DsTableHeaderSelectableCell } from './components/ds-table-header-select
 import { useDragAndDrop } from './hooks/use-drag-and-drop';
 import { type DsTableContextType, DsTableContext, useEditingState } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
+import { useColumnGroups } from './grouping';
+import { DsSkeletonText } from '../ds-skeleton';
 import {
 	EMPTY_TABLE_STATE_TEXT,
 	EXPANDER_COLUMN_ID,
@@ -33,6 +35,7 @@ import {
 	REORDER_COLUMN_WIDTH,
 	SELECT_COLUMN_ID,
 	SELECT_COLUMN_WIDTH,
+	SKELETON_ROW_COUNT,
 } from './utils/constants';
 
 // Row size to pixel height mapping (matches CSS variables)
@@ -58,6 +61,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	bordered = true,
 	fullWidth = true,
 	rowSize = 'medium',
+	loading = false,
 	expandable = false,
 	renderExpandedRow,
 	selectable = false,
@@ -75,6 +79,9 @@ const DsTable = <TData extends { id: string }, TValue>({
 	onColumnFiltersChange,
 	columnVisibility: externalColumnVisibility,
 	onColumnVisibilityChange,
+	collapsedColumnGroups: externalCollapsedColumnGroups,
+	onCollapsedColumnGroupsChange,
+	locale,
 	activeRowId,
 	infiniteScroll,
 	onCellEdit,
@@ -109,12 +116,12 @@ const DsTable = <TData extends { id: string }, TValue>({
 		}
 	};
 
-	const columnVisibility = externalColumnVisibility ?? internalColumnVisibility;
+	const baseColumnVisibility = externalColumnVisibility ?? internalColumnVisibility;
 	const handleColumnVisibilityChange = (
 		updaterOrValue: VisibilityState | ((old: VisibilityState) => VisibilityState),
 	) => {
 		const newVisibility =
-			typeof updaterOrValue === 'function' ? updaterOrValue(columnVisibility) : updaterOrValue;
+			typeof updaterOrValue === 'function' ? updaterOrValue(baseColumnVisibility) : updaterOrValue;
 
 		if (onColumnVisibilityChange) {
 			onColumnVisibilityChange(newVisibility);
@@ -123,6 +130,17 @@ const DsTable = <TData extends { id: string }, TValue>({
 		}
 	};
 
+	const { collapsedColumnGroups, toggleColumnGroup, collapsedVisibility } = useColumnGroups({
+		columns: columnsProp,
+		collapsedColumnGroups: externalCollapsedColumnGroups,
+		onCollapsedColumnGroupsChange,
+	});
+
+	const columnVisibility = useMemo(
+		() => ({ ...baseColumnVisibility, ...collapsedVisibility }),
+		[baseColumnVisibility, collapsedVisibility],
+	);
+
 	const handleSortingChange = (updaterOrValue: SortingState | ((old: SortingState) => SortingState)) => {
 		const newSorting = typeof updaterOrValue === 'function' ? updaterOrValue(sorting) : updaterOrValue;
 		setSorting(newSorting);
@@ -186,9 +204,29 @@ const DsTable = <TData extends { id: string }, TValue>({
 		return augmentedColumns;
 	}, [columnsProp, hasExpanderColumn, hasReorderColumn, hasSelectColumn, showSelectAllCheckbox]);
 
+	const skeletonColumns = useMemo<ColumnDef<TData, TValue>[]>(() => {
+		const toSkeleton = (cols: ColumnDef<TData, TValue>[]): ColumnDef<TData, TValue>[] =>
+			cols.map((column) =>
+				'columns' in column && column.columns
+					? { ...column, columns: toSkeleton(column.columns) }
+					: { ...column, cell: column.loadingCell ?? (() => <DsSkeletonText width="60%" />) },
+			);
+
+		return toSkeleton(columns);
+	}, [columns]);
+
+	const skeletonData = useMemo<TData[]>(
+		() =>
+			Array.from(
+				{ length: SKELETON_ROW_COUNT },
+				(_, i) => ({ id: `ds-table-skeleton-${String(i)}` }) as TData,
+			),
+		[],
+	);
+
 	const table = useReactTable({
-		data: reorderable ? data : tableData,
-		columns,
+		data: loading ? skeletonData : reorderable ? data : tableData,
+		columns: loading ? skeletonColumns : columns,
 		getCoreRowModel: getCoreRowModel(),
 		onSortingChange: handleSortingChange,
 		getSortedRowModel: getSortedRowModel(),
@@ -280,13 +318,17 @@ const DsTable = <TData extends { id: string }, TValue>({
 		selectable,
 		reorderable,
 		showSelectAllCheckbox,
-		onRowClick,
-		onRowDoubleClick,
+		loading,
+		onRowClick: loading ? undefined : onRowClick,
+		onRowDoubleClick: loading ? undefined : onRowDoubleClick,
 		primaryRowActions,
 		secondaryRowActions,
 		renderExpandedRow,
 		virtualized,
 		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup: toggleColumnGroup,
+		locale,
 		onCellEdit,
 		...editingState,
 	};

package/src/components/ds-table/ds-table.types.ts

@@ -16,6 +16,31 @@ import type { InfiniteScrollConfig, ScrollParams } from './components/ds-table-b
  */
 export type DsTableRowSize = 'small' | 'medium' | 'large';
 
+/**
+ * Overridable, user-facing strings used by the table (e.g. accessible labels for
+ * the column-group collapse toggle). Pass a partial object via the `locale` prop
+ * to localize.
+ */
+export interface DsTableLocale {
+	/**
+	 * Accessible label for the toggle that collapses a column group.
+	 */
+	collapseColumnGroup: string;
+
+	/**
+	 * Accessible label for the toggle that expands a column group.
+	 */
+	expandColumnGroup: string;
+}
+
+/**
+ * Default English strings for {@link DsTableLocale}.
+ */
+export const defaultDsTableLocale: DsTableLocale = Object.freeze({
+	collapseColumnGroup: 'Collapse column group',
+	expandColumnGroup: 'Expand column group',
+});
+
 /**
  * API for programmatically controlling a DsTable component.
  * This interface provides methods to interact with the table's selection, sorting, filtering, and pagination features.
@@ -289,6 +314,13 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	rowSize?: DsTableRowSize;
 
+	/**
+	 * When `true`, renders placeholder skeleton rows instead of the data. Column
+	 * headers stay intact and row interactions are disabled while loading.
+	 * @default false
+	 */
+	loading?: boolean;
+
 	/**
 	 * Whether the table is expandable or if an individual row should be expandable
 	 */
@@ -442,6 +474,36 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	onColumnVisibilityChange?: (visibility: VisibilityState) => void;
 
+	/**
+	 * Controlled list of collapsed column-group ids. A group is collapsible when its
+	 * column def sets `meta.group.collapsible`; collapsing hides every leaf column in
+	 * the group except those marked `meta.keepVisibleWhenCollapsed`. Omit for
+	 * uncontrolled behavior (seeded from `meta.group.defaultCollapsed`).
+	 *
+	 * @example
+	 * ```tsx
+	 * const [collapsed, setCollapsed] = useState<string[]>(['equipment']);
+	 *
+	 * <DsTable
+	 *   collapsedColumnGroups={collapsed}
+	 *   onCollapsedColumnGroupsChange={setCollapsed}
+	 * />
+	 * ```
+	 */
+	collapsedColumnGroups?: string[];
+
+	/**
+	 * Callback fired with the next list of collapsed group ids when a group's
+	 * collapse toggle is clicked.
+	 */
+	onCollapsedColumnGroupsChange?: (collapsedGroupIds: string[]) => void;
+
+	/**
+	 * Overrides for user-facing strings (e.g. column-group toggle labels). Merged
+	 * over the built-in English defaults.
+	 */
+	locale?: Partial<DsTableLocale>;
+
 	/**
 	 * Callback fired when an editable cell commits a new value via one of the
 	 * `DsTableEditCell*` wrappers or the `useCellEditor` hook. The parent is

package/src/components/ds-table/figma/ds-table-expandable.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=36535-44213
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-table
+// component=DsTable
+//
+// `DAP_Table Expandable_v03` is the expandable table on the "Table New (Data grid)"
+// page. It maps to the same `DsTable` code component as the simple table, with the
+// `expandable` prop enabled and a `renderExpandedRow` callback for the nested content.
+// The Simple vs Expandable split exists only because of a Figma restriction (a
+// component can't contain an instance of itself); in code it's one `DsTable`.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTable columns={columns} data={data} expandable renderExpandedRow={(row) => null} />`,
+	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	id: 'ds-table-expandable',
+	metadata: { nestable: false },
+};

package/src/components/ds-table/figma/ds-table.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=36354-1965
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-table
+// component=DsTable
+//
+// `DAP_Table Simple_v03` is the non-expandable table on the "Table New (Data grid)"
+// page. Figma models the table as separate components (header/row/cell),
+// while code exposes a single declarative `DsTable` driven by `columns`/`data`,
+// so the snippet is a representative usage that references those consts.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsTable columns={columns} data={data} />`,
+	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	id: 'ds-table',
+	metadata: { nestable: false },
+};

package/src/components/ds-table/grouping/hooks/use-column-groups.ts

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import type { ColumnDef, VisibilityState } from '@tanstack/react-table';
+import { useControlled } from '../../../../utils/use-controlled';
+import { getCollapsedColumnVisibility, getInitialCollapsedGroups } from '../utils/column-group';
+
+interface UseColumnGroupsParams<TData, TValue> {
+	/**
+	 * Consumer-provided columns (before utility columns are injected). Group defs
+	 * nest child columns via `columns`.
+	 */
+	columns: ColumnDef<TData, TValue>[];
+
+	/**
+	 * Controlled list of collapsed group ids. When provided, the table no longer
+	 * manages collapse state internally.
+	 */
+	collapsedColumnGroups?: string[];
+
+	/**
+	 * Called with the next list of collapsed group ids whenever a group is toggled.
+	 */
+	onCollapsedColumnGroupsChange?: (collapsedGroupIds: string[]) => void;
+}
+
+interface UseColumnGroupsResult {
+	/**
+	 * The effective list of collapsed group ids (controlled or internal).
+	 */
+	collapsedColumnGroups: string[];
+
+	/**
+	 * Toggles a single group's collapsed state.
+	 */
+	toggleColumnGroup: (groupId: string) => void;
+
+	/**
+	 * Visibility overrides derived from the collapsed groups, to be layered on top
+	 * of the consumer's own column visibility.
+	 */
+	collapsedVisibility: VisibilityState;
+}
+
+/**
+ * Manages column-group collapse state. Supports both controlled
+ * (`collapsedColumnGroups` + `onCollapsedColumnGroupsChange`) and uncontrolled
+ * usage (seeded from `meta.group.defaultCollapsed`).
+ */
+export const useColumnGroups = <TData, TValue>({
+	columns,
+	collapsedColumnGroups,
+	onCollapsedColumnGroupsChange,
+}: UseColumnGroupsParams<TData, TValue>): UseColumnGroupsResult => {
+	const [collapsed, setCollapsed] = useControlled(
+		collapsedColumnGroups,
+		onCollapsedColumnGroupsChange,
+		getInitialCollapsedGroups(columns),
+	);
+
+	const toggleColumnGroup = (groupId: string) => {
+		const next = collapsed.includes(groupId)
+			? collapsed.filter((id) => id !== groupId)
+			: [...collapsed, groupId];
+
+		setCollapsed(next);
+	};
+
+	const collapsedVisibility = useMemo(
+		() => getCollapsedColumnVisibility(columns, collapsed),
+		[columns, collapsed],
+	);
+
+	return { collapsedColumnGroups: collapsed, toggleColumnGroup, collapsedVisibility };
+};

package/src/components/ds-table/grouping/index.ts

@@ -0,0 +1,5 @@
+import './types/column-group-meta.augmentation';
+
+export type { DsColumnGroupMeta } from './types/column-group.types';
+export { useColumnGroups } from './hooks/use-column-groups';
+export { getGroupColumnSizeStyle, isFirstLeafColumnOfGroup } from './utils/column-group';

package/src/components/ds-table/grouping/types/column-group-meta.augmentation.ts

@@ -0,0 +1,26 @@
+import '@tanstack/react-table';
+import type { DsColumnGroupMeta } from './column-group.types';
+
+declare module '@tanstack/react-table' {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	interface ColumnMeta<TData, TValue> {
+		/**
+		 * Set on a grouping column def (one that nests child `columns`) to configure
+		 * the group header and its collapse behavior.
+		 */
+		group?: DsColumnGroupMeta;
+
+		/**
+		 * Set on a leaf column to keep it visible while its parent group is collapsed
+		 * (e.g. a key identifier column that should always stay on screen).
+		 *
+		 * Only affects the collapsed state. When `false` or omitted (the default),
+		 * the column is hidden while the group is collapsed and shown again when the
+		 * group is expanded — it is never permanently hidden by this flag.
+		 * @default false
+		 */
+		keepVisibleWhenCollapsed?: boolean;
+	}
+}
+
+export {};

package/src/components/ds-table/grouping/types/column-group.types.ts

@@ -0,0 +1,35 @@
+/**
+ * Configuration for a grouping column, set on a column definition that nests
+ * child columns via TanStack's `columns` array. Lives under `meta.group`.
+ *
+ * @example
+ * ```tsx
+ * const columns: ColumnDef<Row>[] = [
+ *   {
+ *     id: 'equipment',
+ *     header: 'Equipment',
+ *     meta: { group: { collapsible: true } },
+ *     columns: [
+ *       { accessorKey: 'cabinetType', header: 'Cabinet Type', meta: { keepVisibleWhenCollapsed: true } },
+ *       { accessorKey: 'shelf', header: 'Shelf#' },
+ *     ],
+ *   },
+ * ];
+ * ```
+ */
+export interface DsColumnGroupMeta {
+	/**
+	 * Renders a collapse/expand toggle in the group header. When collapsed, every
+	 * leaf column in the group is hidden except those marked
+	 * `meta.keepVisibleWhenCollapsed`.
+	 * @default false
+	 */
+	collapsible?: boolean;
+
+	/**
+	 * When the table manages collapse state internally (uncontrolled), start this
+	 * group collapsed. Ignored once `collapsedColumnGroups` is provided.
+	 * @default false
+	 */
+	defaultCollapsed?: boolean;
+}

package/src/components/ds-table/grouping/utils/column-group.ts

@@ -0,0 +1,119 @@
+import type { CSSProperties } from 'react';
+import {
+	type Column,
+	type ColumnDef,
+	type VisibilityState,
+	defaultColumnSizing,
+} from '@tanstack/react-table';
+
+/**
+ * Builds the flex style for a group header cell so it lines up with the combined
+ * width of its visible leaf columns.
+ *
+ * Fixed-width leaves contribute to `flexBasis`; default-sized leaves each add one
+ * unit of `flexGrow`, mirroring how {@link getColumnSizeStyle} sizes leaf cells so
+ * both header rows distribute free space identically.
+ */
+export const getGroupColumnSizeStyle = <TData, TValue>(
+	leafColumns: Column<TData, TValue>[],
+): CSSProperties => {
+	let fixedWidth = 0;
+	let flexCount = 0;
+
+	for (const leaf of leafColumns) {
+		const size = leaf.getSize();
+		if (size !== defaultColumnSizing.size) {
+			fixedWidth += size;
+		} else {
+			flexCount += 1;
+		}
+	}
+
+	if (flexCount === 0) {
+		return { width: fixedWidth, minWidth: fixedWidth, flexShrink: 0 };
+	}
+
+	return { flexGrow: flexCount, flexShrink: 0, flexBasis: fixedWidth, minWidth: fixedWidth };
+};
+
+/**
+ * Whether a column is the first visible leaf of its parent group. Used to draw a
+ * single side border at the start of each group in both the header and body.
+ */
+export const isFirstLeafColumnOfGroup = <TData, TValue>(column: Column<TData, TValue>): boolean => {
+	const parent = column.parent;
+	if (!parent) {
+		return false;
+	}
+
+	const visibleLeaves = parent.getLeafColumns().filter((leaf) => leaf.getIsVisible());
+
+	return visibleLeaves[0]?.id === column.id;
+};
+
+type GroupColumnDef<TData, TValue> = ColumnDef<TData, TValue> & {
+	id?: string;
+	accessorKey?: string;
+	columns?: ColumnDef<TData, TValue>[];
+};
+
+const getLeafColumnId = <TData, TValue>(def: GroupColumnDef<TData, TValue>): string | undefined =>
+	def.id ?? def.accessorKey;
+
+/**
+ * Collects the ids of groups declared with `meta.group.defaultCollapsed`, used to
+ * seed the uncontrolled collapse state.
+ */
+export const getInitialCollapsedGroups = <TData, TValue>(columns: ColumnDef<TData, TValue>[]): string[] => {
+	const collapsed: string[] = [];
+
+	const visit = (defs: ColumnDef<TData, TValue>[]) => {
+		for (const def of defs as GroupColumnDef<TData, TValue>[]) {
+			if (def.columns) {
+				if (def.id && def.meta?.group?.defaultCollapsed) {
+					collapsed.push(def.id);
+				}
+				visit(def.columns);
+			}
+		}
+	};
+
+	visit(columns);
+
+	return collapsed;
+};
+
+/**
+ * Maps collapsed groups to a {@link VisibilityState} that hides every leaf column
+ * inside a collapsed group except those flagged `meta.keepVisibleWhenCollapsed`.
+ * Layered on top of the consumer's own visibility so collapse never mutates it.
+ */
+export const getCollapsedColumnVisibility = <TData, TValue>(
+	columns: ColumnDef<TData, TValue>[],
+	collapsedGroupIds: string[],
+): VisibilityState => {
+	const visibility: VisibilityState = {};
+
+	const visit = (defs: ColumnDef<TData, TValue>[], isInsideCollapsedGroup: boolean) => {
+		for (const def of defs as GroupColumnDef<TData, TValue>[]) {
+			if (def.columns) {
+				const isGroupCollapsed = isInsideCollapsedGroup || (!!def.id && collapsedGroupIds.includes(def.id));
+				visit(def.columns, isGroupCollapsed);
+				continue;
+			}
+
+			if (!isInsideCollapsedGroup || def.meta?.keepVisibleWhenCollapsed) {
+				continue;
+			}
+
+			const columnId = getLeafColumnId(def);
+			if (columnId) {
+				visibility[columnId] = false;
+			}
+		}
+	};
+
+	visit(columns, false);
+
+	return visibility;
+};

package/src/components/ds-table/index.ts

@@ -1,7 +1,11 @@
+import './grouping/types/column-group-meta.augmentation';
+
 export type { SecondaryRowAction, RowAction } from './components/ds-table-cell';
 export type { ScrollParams } from './components/ds-table-body-virtualized';
 
 export * from './filters';
+export type { DsColumnGroupMeta } from './grouping';
+export type { DsTableEditDisabledResult } from './ds-table-column.types';
 
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';

package/src/components/ds-table/styles/_variables.scss

@@ -1,5 +1,6 @@
 $border-radius: 4px;
 $border-width: 1px;
+$group-border-width: 2px;
 $virtualized-height: 600px;
 $reorder-column-width: 60px;
 $container-margin-vertical: 1rem;

package/src/components/ds-table/utils/constants.ts

@@ -33,3 +33,8 @@ export const REORDER_COLUMN_ID = 'reorder';
  * Width (in px) of the reorder column.
  */
 export const REORDER_COLUMN_WIDTH = 60;
+
+/**
+ * Number of placeholder skeleton rows rendered while the table is `loading`.
+ */
+export const SKELETON_ROW_COUNT = 5;