@drivenets/design-system 0.12.1 → 0.14.0

package/src/components/ds-table/ds-table.module.scss

@@ -1,5 +1,5 @@
 @use '../../styles/typography';
-@use '../../styles/utilities' as utils;
+@use '../../styles/scrollbars' as scrollbars;
 @use './styles/variables' as vars;
 
 :root {
@@ -9,9 +9,10 @@
 	--ds-table-header-height: 45px;
 }
 
-$bulk-actions-height: 60px;
+$bulk-actions-reserved-space: 80px;
 
 .container {
+	position: relative;
 	border-radius: vars.$border-radius;
 	border-width: vars.$border-width;
 	border-style: solid;
@@ -21,7 +22,51 @@ $bulk-actions-height: 60px;
 
 .dataTableContainer {
 	max-height: 100%;
-	overflow: auto;
+	overflow-x: auto;
+	overflow-y: hidden;
+	display: flex;
+	flex-direction: column;
+
+	@include scrollbars.scrollbar-on-hover;
+
+	> table {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		width: max-content;
+		min-width: 100%;
+	}
+
+	thead {
+		display: block;
+		flex-shrink: 0;
+		overflow-y: scroll;
+		scrollbar-gutter: stable;
+
+		@include scrollbars.scrollbar-on-hover;
+	}
+
+	tbody {
+		display: block;
+		overflow-y: auto;
+		flex: 1;
+		min-height: 0;
+		scrollbar-gutter: stable;
+
+		@include scrollbars.scrollbar-on-hover;
+	}
+
+	thead tr,
+	tbody tr {
+		display: flex;
+	}
+
+	thead th,
+	tbody td {
+		display: flex;
+		align-items: center;
+	}
 }
 
 .table {
@@ -40,21 +85,66 @@ $bulk-actions-height: 60px;
 	width: 100%;
 }
 
+.bulkActionsVisible {
+	tbody {
+		padding-bottom: $bulk-actions-reserved-space;
+	}
+}
+
 .emptyState {
+	// colSpan in markup isn't honored by flex row layout, so the cell stretches
+	// across the row; stretch the inner content so it occupies full table width
+	flex: 1;
+	min-width: 0;
 	height: vars.$empty-state-height;
+	justify-content: center;
 	text-align: center;
-}
 
-.virtualized {
-	display: grid;
+	> * {
+		flex: 1;
+	}
 }
 
 .virtualizedContainer {
 	position: relative;
 	height: vars.$virtualized-height;
-	overflow: auto;
-}
+	overflow-x: auto;
+	overflow-y: hidden;
+	display: flex;
+	flex-direction: column;
 
-.bulkActionsVisible {
-	padding-bottom: $bulk-actions-height;
+	@include scrollbars.scrollbar-on-hover;
+
+	> table {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		min-height: 0;
+		width: max-content;
+		min-width: 100%;
+	}
+
+	thead {
+		display: block;
+		flex-shrink: 0;
+		overflow-y: scroll;
+		scrollbar-gutter: stable;
+
+		@include scrollbars.scrollbar-on-hover;
+	}
+
+	tbody {
+		flex: 1;
+		min-height: 0;
+		scrollbar-gutter: stable;
+	}
+
+	thead tr {
+		display: flex;
+	}
+
+	thead th {
+		display: flex;
+		align-items: center;
+	}
 }

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

@@ -23,8 +23,9 @@ import { DsTableRowExpandableCell } from './components/ds-table-row-expandable-c
 import { DsTableRowSelectableCell } from './components/ds-table-row-selectable-cell';
 import { DsTableHeaderSelectableCell } from './components/ds-table-header-selectable-cell';
 import { useDragAndDrop } from './hooks/use-drag-and-drop';
-import { type DsTableContextType, DsTableContext } from './context/ds-table-context';
+import { type DsTableContextType, DsTableContext, useEditingState } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
+import { useColumnGroups } from './grouping';
 import {
 	EMPTY_TABLE_STATE_TEXT,
 	EXPANDER_COLUMN_ID,
@@ -75,8 +76,13 @@ const DsTable = <TData extends { id: string }, TValue>({
 	onColumnFiltersChange,
 	columnVisibility: externalColumnVisibility,
 	onColumnVisibilityChange,
+	collapsedColumnGroups: externalCollapsedColumnGroups,
+	onCollapsedColumnGroupsChange,
+	locale,
 	activeRowId,
 	infiniteScroll,
+	onCellEdit,
+	onCellValidate,
 }: DsDataTableProps<TData, TValue>) => {
 	const [data, setData] = React.useState(tableData);
 	const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -107,12 +113,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);
@@ -121,6 +127,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);
@@ -267,6 +284,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 
 	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
 
+	const editingState = useEditingState<TData, TValue>(onCellEdit, onCellValidate);
+
 	const contextValue: DsTableContextType<TData, TValue> = {
 		stickyHeader,
 		bordered,
@@ -283,6 +302,11 @@ const DsTable = <TData extends { id: string }, TValue>({
 		renderExpandedRow,
 		virtualized,
 		activeRowId,
+		collapsedColumnGroups,
+		onToggleColumnGroup: toggleColumnGroup,
+		locale,
+		onCellEdit,
+		...editingState,
 	};
 
 	return (
@@ -298,18 +322,11 @@ const DsTable = <TData extends { id: string }, TValue>({
 				)}
 			>
 				<DragWrapper>
-					<Table
-						className={classnames(
-							fullWidth && styles.fullWidth,
-							!bordered && styles.tableNoBorder,
-							virtualized && styles.virtualized,
-						)}
-					>
+					<Table className={classnames(fullWidth && styles.fullWidth, !bordered && styles.tableNoBorder)}>
 						<DsTableHeader table={table} />
 						{virtualized ? (
 							<DsTableBodyVirtualized
 								table={table}
-								tableContainerRef={tableContainerRef}
 								emptyState={emptyState}
 								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
 								overscan={virtualizedOptions?.overscan}
@@ -330,17 +347,17 @@ const DsTable = <TData extends { id: string }, TValue>({
 						)}
 					</Table>
 				</DragWrapper>
+				{selectable && actions.length > 0 && (
+					<DsTableBulkActions
+						numSelectedRows={selectedRows.length}
+						actions={actions.map((action) => ({
+							...action,
+							onClick: () => action.onClick(selectedRows),
+						}))}
+						onClearSelection={table.resetRowSelection}
+					/>
+				)}
 			</div>
-			{selectable && actions.length > 0 && (
-				<DsTableBulkActions
-					numSelectedRows={selectedRows.length}
-					actions={actions.map((action) => ({
-						...action,
-						onClick: () => action.onClick(selectedRows),
-					}))}
-					onClearSelection={table.resetRowSelection}
-				/>
-			)}
 		</DsTableContext.Provider>
 	);
 };

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

@@ -1,4 +1,5 @@
 import type React from 'react';
+import './ds-table-column.types';
 import type {
 	ColumnDef,
 	ColumnFiltersState,
@@ -15,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.
@@ -440,4 +466,85 @@ export interface DsDataTableProps<TData, TValue> {
 	 * Callback when column visibility changes
 	 */
 	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
+	 * expected to update the row data in response.
+	 *
+	 * Commits occur on confirm (check button or Enter). Opening another cell
+	 * discards the previous draft without calling this callback.
+	 *
+	 * @param row - The row data of the cell that was edited
+	 * @param columnId - The id of the column whose cell was edited
+	 * @param value - The new committed value
+	 *
+	 * @example
+	 * ```tsx
+	 * const [people, setPeople] = useState(initialPeople);
+	 *
+	 * <DsTable
+	 *   data={people}
+	 *   columns={columns}
+	 *   onCellEdit={(row, columnId, value) => {
+	 *     setPeople((rows) =>
+	 *       rows.map((r) => (r.id === row.id ? { ...r, [columnId]: value } : r)),
+	 *     );
+	 *   }}
+	 * />
+	 * ```
+	 */
+	onCellEdit?: (row: TData, columnId: string, value: TValue) => void;
+
+	/**
+	 * Validates a cell value before it is committed. Return `null` to allow the
+	 * commit (which fires `onCellEdit`), or an error message string to reject it
+	 * and keep the cell in edit mode. Synchronous only.
+	 *
+	 *
+	 * @param row - The row data of the cell being edited
+	 * @param columnId - The id of the column whose cell is being edited
+	 * @param value - The candidate value to validate
+	 *
+	 * @example
+	 * ```tsx
+	 * <DsTable
+	 *   data={people}
+	 *   columns={columns}
+	 *   onCellValidate={(row, columnId, value) => validateField(columnId)(value, row)}
+	 *   onCellEdit={...}
+	 * />
+	 * ```
+	 */
+	onCellValidate?: (row: TData, columnId: string, value: TValue) => string | null;
 }

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/filters/adapters/create-checkbox-filter-adapter.tsx

@@ -1,54 +1,36 @@
 import type { ReactNode } from 'react';
 import type { Row } from '@tanstack/react-table';
 import type { FilterAdapter } from '../types/filter-adapter.types';
-import { type CheckboxFilterItem, CheckboxFilter } from '../components/checkbox-filter';
+import {
+	type CheckboxFilterItem,
+	type CheckboxFilterLocale,
+	CheckboxFilter,
+} from '../components/checkbox-filter';
 import { createFilterAdapter } from './create-filter-adapter';
 
 export interface CheckboxFilterAdapterConfig<TData, TValue> {
-	/**
-	 * Unique identifier (should match column accessorKey)
-	 */
+	/** Unique id, should match the column `accessorKey`. */
 	id: string;
-
-	/**
-	 * Display label for filter navigation
-	 */
 	label: string;
-
-	/**
-	 * Available items to select from
-	 */
+	/** Selectable items. */
 	items: CheckboxFilterItem<TValue>[];
-
-	/**
-	 * Optional custom renderer for each item
-	 */
+	/** Custom row renderer; defaults to `item.label`. */
 	renderer?: (item: CheckboxFilterItem<TValue>) => ReactNode;
-
-	/**
-	 * Optional custom chip label generator
-	 * @default (item) => `${label}: ${item.label}`
-	 */
+	/** @default (item) => `${label}: ${item.label}` */
 	chipLabelTemplate?: (item: CheckboxFilterItem<TValue>) => string;
-
-	/**
-	 * Optional custom cell renderer for table column
-	 */
 	cellRenderer?: (value: TValue) => ReactNode;
-
-	/**
-	 * How to extract the value from a row for comparison
-	 * @default (row) => row.getValue(id)
-	 */
+	/** @default (row) => row.getValue(id) */
 	getRowValue?: (row: Row<TData>) => TValue;
+	/** Show a search input above the list. @default false */
+	searchable?: boolean;
+	/** Show an "All" toggle that selects / clears every (visible) item. @default false */
+	selectAll?: boolean;
+	locale?: CheckboxFilterLocale;
 }
 
 /**
- * Factory function to create a checkbox filter adapter
- *
- * Handles multi-select checkbox filtering with inclusion model:
- * - Empty selection = show all data (no filter active)
- * - Selected items = show only those items
+ * Multi-select inclusion filter: empty selection shows every row, selected
+ * items show only those rows.
  */
 export function createCheckboxFilterAdapter<TData, TValue = string>(
 	config: CheckboxFilterAdapterConfig<TData, TValue>,
@@ -61,20 +43,21 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 		chipLabelTemplate = (item) => `${label}: ${item.label}`,
 		cellRenderer,
 		getRowValue = (row) => row.getValue(id),
+		searchable = false,
+		selectAll = false,
+		locale,
 	} = config;
 
 	return createFilterAdapter<TData, CheckboxFilterItem<TValue>[], TValue>({
 		id,
 		label,
-		initialValue: [], // Start with nothing selected (show all)
+		initialValue: [],
 
 		filterFn: (row, columnId, filterValue) => {
-			// Empty selection = no filter = show all
 			if (filterValue.length === 0) {
 				return true;
 			}
 
-			// Otherwise, show only selected items
 			const rowValue = getRowValue(row);
 			return filterValue.some((item) => item.value === rowValue);
 		},
@@ -82,7 +65,6 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 		cellRenderer,
 
 		toChips: (selectedItems) => {
-			// Generate chips for all selected items
 			return selectedItems.map((item) => ({
 				id: `${id}_${String(item.value)}`,
 				label: chipLabelTemplate(item),
@@ -98,7 +80,6 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 		},
 
 		getActiveFiltersCount: (selectedItems) => {
-			// Count = number of selected items (0 means none selected)
 			return selectedItems.length;
 		},
 
@@ -109,6 +90,9 @@ export function createCheckboxFilterAdapter<TData, TValue = string>(
 					renderer={renderer}
 					selectedItems={value}
 					onSelectionChange={onChange}
+					searchable={searchable}
+					selectAll={selectAll}
+					locale={locale}
 				/>
 			);
 		},

package/src/components/ds-table/filters/adapters/create-dual-range-filter-adapter.tsx

@@ -1,5 +1,5 @@
 import type { Row } from '@tanstack/react-table';
-import type { ChipItem } from '../../../ds-chip-group';
+import type { TagFilterItem } from '../../../ds-tag-filter';
 import type { FilterAdapter } from '../types/filter-adapter.types';
 import { RangeFilter } from '../components/range-filter';
 import { createFilterAdapter } from './create-filter-adapter';
@@ -14,39 +14,18 @@ export interface DualRangeFilterValue {
 }
 
 export interface DualRangeFilterAdapterConfig<TData> {
-	/**
-	 * Unique identifier (should match column accessorKey)
-	 */
+	/** Unique id, should match the column `accessorKey`. */
 	id: string;
-
-	/**
-	 * Display label for filter navigation
-	 */
 	label: string;
-
-	/**
-	 * Field configurations: { fieldKey: displayLabel }
-	 * Example: { running: 'Running', completed: 'Completed' }
-	 */
+	/** Field key → display label, e.g. `{ running: 'Running' }`. */
 	fields: Record<string, string>;
-
-	/**
-	 * Optional formatter for chip display
-	 * @default (num) => num.toLocaleString('en-US')
-	 */
+	/** @default (num) => num.toLocaleString('en-US') */
 	formatNumber?: (num: number) => string;
-
-	/**
-	 * How to extract the value object from a row
-	 * @default (row) => row.getValue(id)
-	 */
+	/** @default (row) => row.getValue(id) */
 	getRowValue?: (row: Row<TData>) => Record<string, number>;
 }
 
-/**
- * Factory function to create a dual-range filter adapter
- * Handles filtering on multiple numeric ranges within a single column
- */
+/** Filter over multiple numeric ranges within one column (AND across fields). */
 export function createDualRangeFilterAdapter<TData>(
 	config: DualRangeFilterAdapterConfig<TData>,
 ): FilterAdapter<TData, DualRangeFilterValue, Record<string, number>> {
@@ -71,7 +50,6 @@ export function createDualRangeFilterAdapter<TData>(
 		filterFn: (row, columnId, filterValue) => {
 			const rowValue = getRowValue(row);
 
-			// Check each field's range
 			for (const [fieldKey, range] of Object.entries(filterValue)) {
 				const hasFilter = range.from !== undefined || range.to !== undefined;
 				const fieldValue = rowValue[fieldKey];
@@ -80,8 +58,9 @@ export function createDualRangeFilterAdapter<TData>(
 					const matchesFrom = range.from === undefined || fieldValue >= range.from;
 					const matchesTo = range.to === undefined || fieldValue <= range.to;
 
+					// AND across fields: every range with a bound must match.
 					if (!matchesFrom || !matchesTo) {
-						return false; // AND logic: all ranges must match
+						return false;
 					}
 				}
 			}
@@ -89,10 +68,10 @@ export function createDualRangeFilterAdapter<TData>(
 			return true;
 		},
 
-		cellRenderer: undefined, // Let the column definition handle rendering
+		cellRenderer: undefined,
 
 		toChips: (value) => {
-			const chips: ChipItem[] = [];
+			const chips: TagFilterItem[] = [];
 
 			Object.entries(value).forEach(([fieldKey, range]) => {
 				const hasFilter = range.from !== undefined || range.to !== undefined;