@drivenets/design-system 0.18.1 → 0.19.0

package/src/components/ds-table/components/ds-table-group-header-cell/ds-table-group-header-cell.tsx

@@ -5,6 +5,7 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getGroupColumnSizeStyle } from '../../grouping';
 import { getResizableHeaderStyle } from '../../utils/column-size';
 import { defaultDsTableLocale } from '../../ds-table.types';
+import { DsTableHeaderLabel } from '../ds-table-header-label';
 import { DsTableResizeHandle } from '../ds-table-resize-handle';
 import type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';
 import styles from './ds-table-group-header-cell.module.scss';
@@ -29,6 +30,8 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
 
 	const handleToggle = () => onToggleColumnGroup?.(groupId);
+	const headerDef = header.column.columnDef.header;
+	const tooltipText = typeof headerDef === 'string' ? headerDef : undefined;
 
 	return (
 		<TableHead
@@ -38,9 +41,9 @@ export const DsTableGroupHeaderCell = <TData, TValue>({
 			colSpan={header.colSpan}
 		>
 			<div className={styles.groupHeaderContent}>
-				<span className={styles.groupLabel}>
-					{flexRender(header.column.columnDef.header, header.getContext())}
-				</span>
+				<DsTableHeaderLabel tooltipText={tooltipText}>
+					{flexRender(headerDef, header.getContext())}
+				</DsTableHeaderLabel>
 				{isCollapsible && (
 					<DsButtonV3
 						variant="secondary"

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

@@ -15,6 +15,10 @@
 		border-bottom: 1px solid var(--color-dap-gray-400);
 	}
 
+	.scrollbarSpacer:not(.scrollbarSpacerOccupied) {
+		border-bottom: none;
+	}
+
 	&.headerRowNoBorder {
 		.headerCell {
 			border-bottom: none;
@@ -42,6 +46,7 @@
 
 	.pageButtonIconContainer {
 		display: flex;
+		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
 		width: 24px;
@@ -54,9 +59,18 @@
 	}
 }
 
+.scrollbarSpacer {
+	flex-shrink: 0;
+	padding: 0;
+	overflow: hidden;
+	border-left: none;
+	pointer-events: none;
+}
+
 .selectHeaderCell {
 	padding: 0;
 	justify-content: center;
+	text-align: center;
 }
 
 .groupStart:not(:first-child) {
@@ -68,7 +82,10 @@
 	align-items: center;
 	justify-content: space-between;
 	gap: vars.$header-sort-gap;
+	width: 100%;
+	min-width: 0;
 	height: 100%;
+	overflow: hidden;
 }
 
 .headerLabelStack {
@@ -76,15 +93,9 @@
 	overflow: hidden;
 }
 
-.headerLabel {
-	display: block;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 .filterTriggerContainer {
 	display: inline-flex;
+	flex-shrink: 0;
 	align-items: center;
 	margin-left: vars.$header-sort-gap;
 }

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

@@ -12,11 +12,13 @@ import { DsStack } from '../../../ds-stack';
 import { DsTableColumnFilterPopover } from '../../filters/components/column-filter-popover';
 import type { ResolvedColumnFilter } from '../../filters/types/filter-adapter.types';
 import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
+import { DsTableHeaderLabel } from '../ds-table-header-label';
 import { DsTableResizeHandle } from '../ds-table-resize-handle';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { bordered, virtualized, resizableColumns, resizeSizingReady } = useDsTableContext<TData, unknown>();
+	const { bordered, virtualized, resizableColumns, resizeSizingReady, scrollbarSpacerWidth } =
+		useDsTableContext<TData, unknown>();
 
 	return (
 		<TableHeader className={classnames(styles.header, virtualized && styles.virtualizedHeader)}>
@@ -58,6 +60,7 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 							!!resizeSizingReady,
 						);
 						const canSort = header.column.getCanSort();
+						const sortDirection = header.column.getIsSorted();
 						const canResize = resizableColumns && header.column.getCanResize();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 						const isGroupStart = isFirstLeafColumnOfGroup(header.column);
@@ -66,6 +69,8 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 						const resolvedFilter: ResolvedColumnFilter | undefined =
 							metaFilter && 'render' in metaFilter ? metaFilter : undefined;
 						const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
+						const headerDef = header.column.columnDef.header;
+						const tooltipText = typeof headerDef === 'string' ? headerDef : undefined;
 
 						return (
 							<TableHead
@@ -89,28 +94,16 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 										width="100%"
 										className={styles.headerLabelStack}
 									>
-										<span className={styles.headerLabel}>
-											{flexRender(header.column.columnDef.header, header.getContext())}
-										</span>
+										<DsTableHeaderLabel tooltipText={tooltipText}>
+											{flexRender(headerDef, header.getContext())}
+										</DsTableHeaderLabel>
 									</DsStack>
-									{canSort && (
+									{canSort && sortDirection && (
 										<div className={styles.pageButtonIconContainer}>
-											{{
-												asc: (
-													<DsIcon
-														icon="arrow_drop_up"
-														className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
-													/>
-												),
-												desc: (
-													<DsIcon
-														icon="arrow_drop_down"
-														className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
-													/>
-												),
-											}[header.column.getIsSorted() as string] ?? (
-												<div className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)} />
-											)}
+											<DsIcon
+												icon={sortDirection === 'asc' ? 'arrow_drop_up' : 'arrow_drop_down'}
+												className={classnames(styles.pageButtonIcon, stylesShared.pageButtonIcon)}
+											/>
 										</div>
 									)}
 									{resolvedFilter && (
@@ -130,6 +123,19 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 							</TableHead>
 						);
 					})}
+					<TableHead
+						aria-hidden
+						className={classnames(
+							styles.headerCell,
+							styles.scrollbarSpacer,
+							scrollbarSpacerWidth > 0 && styles.scrollbarSpacerOccupied,
+						)}
+						style={{
+							width: scrollbarSpacerWidth,
+							minWidth: scrollbarSpacerWidth,
+							flexShrink: 0,
+						}}
+					/>
 				</TableRow>
 			))}
 		</TableHeader>

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

@@ -0,0 +1,12 @@
+@use '../../../styles/typography';
+
+.headerLabel {
+	display: block;
+	min-width: 0;
+}
+
+.headerLabelInner {
+	display: block;
+	min-width: 0;
+	@include typography.ellipsis;
+}

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import classnames from 'classnames';
+import { DsTooltip } from '../../ds-tooltip';
+import { useIsHorizontallyOverflowing } from '../../../utils/use-is-horizontally-overflowing';
+import styles from './ds-table-header-label.module.scss';
+
+type DsTableHeaderLabelProps = {
+	children: ReactNode;
+	tooltipText?: string;
+	className?: string;
+};
+
+export const DsTableHeaderLabel = ({ className, children, tooltipText }: DsTableHeaderLabelProps) => {
+	const { ref, isOverflowing } = useIsHorizontallyOverflowing<HTMLSpanElement>(tooltipText);
+	const title = isOverflowing ? tooltipText : undefined;
+
+	return (
+		<span className={classnames(styles.headerLabel, className)}>
+			<DsTooltip content={title} placement="top">
+				<span ref={ref} className={styles.headerLabelInner}>
+					{children}
+				</span>
+			</DsTooltip>
+		</span>
+	);
+};
+
+DsTableHeaderLabel.displayName = 'DsTableHeaderLabel';

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

@@ -59,7 +59,6 @@
 }
 
 .cellReorder {
-	width: vars.$reorder-column-width;
 	text-align: center;
 
 	&.isDragging {

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

@@ -2,6 +2,7 @@ import { createContext, useContext, useMemo, type ReactNode, type RefObject } fr
 import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
 import type { DsTablePropsWithDefaults } from '../ds-table-defaults';
 import type { DsTableResizeContextSlice } from '../hooks/use-column-resize';
+import type { ScrollbarSpacerWidth } from '../hooks/use-scrollbar-spacer';
 import { useEditingState, type UseEditingStateResult } from '../hooks/use-editing-state';
 
 /** Visual phase of the full-height column-resize divider. */
@@ -56,6 +57,10 @@ export interface DsTableContextType<TData, TValue>
 	 * boundary header's column (leaf or group). Clamps and fires persist.
 	 */
 	onResizeKeyboardNudge?: (columnId: string, delta: number) => void;
+	/**
+	 * Overflow-only **Scrollbar spacer** width (0 or rest scrollbar size).
+	 */
+	scrollbarSpacerWidth: ScrollbarSpacerWidth;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -124,6 +129,7 @@ export const DsTableContextProvider = <TData, TValue>({
 		onResizeDragStart,
 		onResizeReset,
 		onResizeKeyboardNudge,
+		scrollbarSpacerWidth,
 	} = derived.resize;
 
 	const { editing, beginEdit, setDraft, commit, cancel } = useEditingState<TData, TValue>(
@@ -160,6 +166,7 @@ export const DsTableContextProvider = <TData, TValue>({
 			onResizeDragStart,
 			onResizeReset,
 			onResizeKeyboardNudge,
+			scrollbarSpacerWidth,
 			editing,
 			beginEdit,
 			setDraft,
@@ -194,6 +201,7 @@ export const DsTableContextProvider = <TData, TValue>({
 			onResizeDragStart,
 			onResizeReset,
 			onResizeKeyboardNudge,
+			scrollbarSpacerWidth,
 			editing,
 			beginEdit,
 			setDraft,

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

@@ -58,10 +58,7 @@ $bulk-actions-reserved-space: 80px;
 	thead {
 		display: block;
 		flex-shrink: 0;
-		overflow-y: scroll;
-		scrollbar-gutter: stable;
-
-		@include scrollbars.scrollbar-on-hover;
+		overflow-y: hidden;
 	}
 
 	tbody {
@@ -70,14 +67,24 @@ $bulk-actions-reserved-space: 80px;
 		overflow-x: hidden;
 		flex: 1;
 		min-height: 0;
-		scrollbar-gutter: stable;
+		scrollbar-gutter: auto;
 
 		@include scrollbars.scrollbar-on-hover;
+
+		&:has(.emptyState) {
+			display: flex;
+			flex-direction: column;
+		}
 	}
 
 	thead tr,
 	tbody tr {
 		display: flex;
+		width: 100%;
+	}
+
+	tbody tr {
+		padding-inline-end: var(--ds-table-body-scrollbar-compensation, 0px);
 	}
 
 	thead th,
@@ -109,18 +116,19 @@ $bulk-actions-reserved-space: 80px;
 	}
 }
 
+.emptyStateRow {
+	flex: 1;
+	align-items: center;
+}
+
 .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
+	// across the row; center the Empty state in the remaining body
 	flex: 1;
 	min-width: 0;
-	height: vars.$empty-state-height;
 	justify-content: center;
+	align-items: center;
 	text-align: center;
-
-	> * {
-		flex: 1;
-	}
 }
 
 .virtualizedContainer {
@@ -145,20 +153,22 @@ $bulk-actions-reserved-space: 80px;
 	thead {
 		display: block;
 		flex-shrink: 0;
-		overflow-y: scroll;
-		scrollbar-gutter: stable;
-
-		@include scrollbars.scrollbar-on-hover;
+		overflow-y: hidden;
 	}
 
 	tbody {
 		flex: 1;
 		min-height: 0;
-		scrollbar-gutter: stable;
+		scrollbar-gutter: auto;
 	}
 
 	thead tr {
 		display: flex;
+		width: 100%;
+	}
+
+	tbody tr {
+		padding-inline-end: var(--ds-table-body-scrollbar-compensation, 0px);
 	}
 
 	thead th {

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

@@ -14,7 +14,7 @@ import {
 } from '@tanstack/react-table';
 import classnames from 'classnames';
 import { Table, TableBody, TableCell, TableRow } from './components/core-table';
-import { DsTableBulkActions } from './components/ds-table-bulk-actions';
+import { DsBulkActions } from '../ds-bulk-actions';
 import { DsTableHeader } from './components/ds-table-header';
 import { DsTableResizeOverlay } from './components/ds-table-resize-overlay';
 import styles from './ds-table.module.scss';
@@ -26,7 +26,8 @@ import { useColumnResize } from './hooks/use-column-resize';
 import { DsTableContextProvider } from './context/ds-table-context';
 import { DsTableBodyVirtualized } from './components/ds-table-body-virtualized';
 import { useColumnGroups } from './grouping';
-import { EMPTY_TABLE_STATE_TEXT } from './utils/constants';
+import { DsEmptyState } from '../ds-empty-state';
+import { getUtilityColumnSizing } from './utils/column-size';
 import { createSkeletonRows, getAugmentedColumns, toSkeletonColumns } from './utils/table-columns';
 import { createTableApi } from './utils/table-api';
 import { areBodiesFrozen } from './utils/frozen-body';
@@ -75,6 +76,9 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 		resizableColumns,
 		columnSizing,
 		onColumnSizingChange,
+		selectableColumnWidth,
+		expandableColumnWidth,
+		reorderableColumnWidth,
 	} = tableProps;
 	const [data, setData] = React.useState(tableData);
 	const [sorting, setSorting] = React.useState<SortingState>([]);
@@ -155,12 +159,32 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 				reorderable,
 				virtualized,
 				showSelectAllCheckbox,
+				selectableColumnWidth,
+				expandableColumnWidth,
+				reorderableColumnWidth,
 			}),
-		[columnsProp, hasSelectColumn, hasExpanderColumn, reorderable, virtualized, showSelectAllCheckbox],
+		[
+			columnsProp,
+			hasSelectColumn,
+			hasExpanderColumn,
+			reorderable,
+			virtualized,
+			showSelectAllCheckbox,
+			selectableColumnWidth,
+			expandableColumnWidth,
+			reorderableColumnWidth,
+		],
 	);
 
 	const skeletonColumns = useMemo(() => toSkeletonColumns(columns), [columns]);
 	const skeletonData = useMemo(() => createSkeletonRows<TData>(), []);
+	const utilityColumnSizing = useMemo(() => getUtilityColumnSizing(columns), [columns]);
+	const sourceDataLength = (reorderable ? data : tableData).length;
+	const inferredEmptyState = useMemo(
+		() => <DsEmptyState variant={sourceDataLength === 0 ? 'noData' : 'noMatches'} />,
+		[sourceDataLength],
+	);
+	const resolvedEmptyState = emptyState ?? inferredEmptyState;
 
 	const resize = useColumnResize({
 		enabled: resizableColumns,
@@ -168,6 +192,8 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 		onColumnSizingChange,
 		columns,
 		columnVisibility,
+		overflowKey: (reorderable ? data : tableData).length,
+		utilityColumnSizing,
 	});
 
 	const table = useReactTable({
@@ -238,7 +264,7 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 							{virtualized ? (
 								<MemoizedDsTableBodyVirtualized
 									table={table}
-									emptyState={emptyState}
+									emptyState={resolvedEmptyState}
 									estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
 									overscan={virtualizedOptions?.overscan}
 									onScroll={onScroll}
@@ -249,7 +275,7 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 								<MemoizedDsTableRowsBody
 									table={table}
 									rowSelection={rowSelection}
-									emptyState={emptyState}
+									emptyState={resolvedEmptyState}
 									SortableWrapper={SortableWrapper}
 								/>
 							)}
@@ -260,14 +286,20 @@ const DsTable = <TData extends { id: string }, TValue>(props: DsDataTableProps<T
 					) : null}
 				</div>
 				{selectable && actions.length > 0 && (
-					<DsTableBulkActions
-						numSelectedRows={selectedRows.length}
-						actions={actions.map((action) => ({
-							...action,
-							onClick: () => action.onClick(selectedRows),
-						}))}
+					<DsBulkActions
+						placement="floating"
+						selectedCount={selectedRows.length}
 						onClearSelection={table.resetRowSelection}
-					/>
+					>
+						{actions.map((action, index) => (
+							<DsBulkActions.Item
+								key={`${action.label}-${String(index)}`}
+								icon={action.icon}
+								label={action.label}
+								onClick={() => action.onClick(selectedRows)}
+							/>
+						))}
+					</DsBulkActions>
 				)}
 			</div>
 		</DsTableContextProvider>
@@ -296,9 +328,9 @@ const DsTableRowsBody = <TData extends { id: string }>({
 				{rows.length ? (
 					rows.map((row) => <DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />)
 				) : (
-					<TableRow>
+					<TableRow className={styles.emptyStateRow}>
 						<TableCell colSpan={columnCount} className={styles.emptyState}>
-							{emptyState || EMPTY_TABLE_STATE_TEXT}
+							{emptyState}
 						</TableCell>
 					</TableRow>
 				)}

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

@@ -296,7 +296,9 @@ export interface DsDataTableProps<TData, TValue> {
 	activeRowId?: string | null;
 
 	/**
-	 * Empty state of the table
+	 * Replaces the inferred **Empty state**. When omitted, the table renders
+	 * `DsEmptyState` as `noData` if `data` is empty, or `noMatches` if `data`
+	 * has rows but filters hide all of them.
 	 */
 	emptyState?: React.ReactNode;
 
@@ -340,14 +342,17 @@ export interface DsDataTableProps<TData, TValue> {
 	 * from {@link onColumnSizingChange}. Pass it (typically on the next mount) to
 	 * restore widths; columns absent from the map are measured and sized
 	 * automatically. This seeds widths — live resizing still updates them
-	 * internally — so it is not a fully controlled value.
+	 * internally — so it is not a fully controlled value. Ids for the select,
+	 * expander, and reorder utility columns are ignored; use the matching
+	 * `*ColumnWidth` props instead.
 	 */
 	columnSizing?: Record<string, number>;
 
 	/**
 	 * Called with the next column id → width (px) map when a resize finishes
 	 * (drag end, double-click restore, or keyboard nudge). Use this to persist
-	 * widths across sessions.
+	 * widths across sessions. Select, expander, and reorder utility columns are
+	 * omitted from the map.
 	 */
 	onColumnSizingChange?: (columnSizing: Record<string, number>) => void;
 
@@ -363,6 +368,14 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	expandable?: boolean | ((row: TData) => boolean);
 
+	/**
+	 * Width in px of the expander utility column. Ignored when `expandable` is
+	 * off. Non-finite or `<= 0` falls back to the default. The column is not
+	 * user-resizable. Wins over a `columnSizing` entry for this column.
+	 * @default 36
+	 */
+	expandableColumnWidth?: number;
+
 	/**
 	 * Function to render the expanded row
 	 */
@@ -394,6 +407,14 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	selectable?: boolean | ((rowData: TData) => boolean);
 
+	/**
+	 * Width in px of the select utility column. Ignored when `selectable` is
+	 * off. Non-finite or `<= 0` falls back to the default. The column is not
+	 * user-resizable. Wins over a `columnSizing` entry for this column.
+	 * @default 36
+	 */
+	selectableColumnWidth?: number;
+
 	/**
 	 * Whether to show the select/deselect all checkbox in the header
 	 * @default true
@@ -474,6 +495,15 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	reorderable?: boolean;
 
+	/**
+	 * Width in px of the reorder utility column. Ignored when `reorderable` is
+	 * off or the table is virtualized. Non-finite or `<= 0` falls back to the
+	 * default. The column is not user-resizable. Wins over a `columnSizing`
+	 * entry for this column.
+	 * @default 60
+	 */
+	reorderableColumnWidth?: number;
+
 	/**
 	 * Callback when the order of rows changes via drag & drop
 	 */