@drivenets/design-system 0.0.1

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

@@ -0,0 +1,81 @@
+@use '../../../../styles/typography';
+@use '../../styles/variables' as vars;
+
+.stickyHeader {
+	position: sticky;
+	top: 0;
+	z-index: 10;
+	background-color: var(--color-background);
+}
+
+.virtualizedHeader {
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
+}
+
+.headerRow {
+	.headerCell {
+		border-bottom: 1px solid var(--neutral-6);
+
+		&.selectColumn {
+			width: vars.$select-column-width;
+			padding: 0;
+		}
+	}
+
+	&.headerRowNoBorder {
+		.headerCell {
+			border-bottom: none;
+		}
+	}
+}
+
+.headerRowVirtualized {
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
+	align-items: center;
+}
+
+.expandColumn {
+	width: vars.$expand-column-width;
+}
+
+.reorderColumn {
+	width: vars.$reorder-column-width;
+}
+
+.headerCell {
+	@include typography.body-sm-md;
+	color: var(--color-font-main);
+	text-align: left;
+	padding: 0 var(--spacing-standard);
+	height: var(--ds-table-header-height);
+
+	&.sortableHeader {
+		cursor: pointer;
+		user-select: none;
+	}
+
+	.pageButtonIconContainer {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 24px;
+		height: 24px;
+
+		&.pageButtonIcon {
+			color: var(--neutral-4);
+			transition: transform 0.2s ease-in-out;
+		}
+	}
+}
+
+.headerSortContainer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: vars.$header-sort-gap;
+	height: 100%;
+}

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

@@ -0,0 +1,99 @@
+import { flexRender } from '@tanstack/react-table';
+import classnames from 'classnames';
+import { DsCheckbox } from '../../../ds-checkbox';
+import { DsIcon } from '../../../ds-icon';
+import { TableHead, TableHeader, TableRow } from '../core-table';
+import styles from './ds-table-header.module.scss';
+import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
+import type { DsTableHeaderProps } from './ds-table-header.types';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { getColumnStyle } from '../../utils/column-styling';
+
+const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
+	const { stickyHeader, bordered, expandable, selectable, reorderable, showSelectAllCheckbox, virtualized } =
+		useDsTableContext<TData, unknown>();
+
+	return (
+		<TableHeader
+			className={classnames(stickyHeader && styles.stickyHeader, virtualized && styles.virtualizedHeader)}
+		>
+			{table.getHeaderGroups().map((headerGroup) => (
+				<TableRow
+					key={headerGroup.id}
+					className={classnames(
+						styles.headerRow,
+						!bordered && styles.headerRowNoBorder,
+						virtualized && styles.headerRowVirtualized,
+					)}
+				>
+					{selectable && (
+						<TableHead className={classnames(styles.headerCell, styles.selectColumn)}>
+							{showSelectAllCheckbox && (
+								<DsCheckbox
+									className={stylesShared.checkboxContainer}
+									checked={
+										table.getIsAllRowsSelected()
+											? true
+											: table.getIsSomeRowsSelected()
+												? 'indeterminate'
+												: false
+									}
+									onClick={(e) => {
+										e.stopPropagation();
+										const toggleHandler = table.getToggleAllRowsSelectedHandler();
+										toggleHandler(e);
+									}}
+								/>
+							)}
+						</TableHead>
+					)}
+					{expandable && <TableHead className={classnames(styles.headerCell, styles.expandColumn)} />}
+					{reorderable && (
+						<TableHead className={classnames(styles.headerCell, styles.reorderColumn)}>Order</TableHead>
+					)}
+					{headerGroup.headers.map((header, idx) => {
+						const isLastColumn = idx === headerGroup.headers.length - 1;
+						const headerStyle = getColumnStyle(header.column.getSize(), virtualized, isLastColumn);
+
+						return (
+							<TableHead
+								key={header.id}
+								className={classnames(styles.headerCell, header.column.getCanSort() && styles.sortableHeader)}
+								onClick={header.column.getToggleSortingHandler()}
+								style={headerStyle}
+							>
+								{header.isPlaceholder ? null : (
+									<div className={styles.headerSortContainer}>
+										<div>{flexRender(header.column.columnDef.header, header.getContext())}</div>
+										{header.column.getCanSort() && (
+											<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)} />
+												)}
+											</div>
+										)}
+									</div>
+								)}
+							</TableHead>
+						);
+					})}
+				</TableRow>
+			))}
+		</TableHeader>
+	);
+};
+
+export default DsTableHeader;

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

@@ -0,0 +1,11 @@
+import type { Table } from '@tanstack/react-table';
+
+/**
+ * Props for the table header component
+ */
+export interface DsTableHeaderProps<TData> {
+	/**
+	 * The table instance from @tanstack/react-table
+	 */
+	table: Table<TData>;
+}

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

@@ -0,0 +1,2 @@
+export { default as DsTableHeader } from './ds-table-header';
+export * from './ds-table-header.types';

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

@@ -0,0 +1,137 @@
+@use '../../../../styles/typography';
+@use '../../styles/variables' as vars;
+
+@mixin expanded-row-border($side) {
+	$border: 1px solid var(--color-border-action-primary);
+
+	// Prevent double border with adjacent expanded rows.
+	&:not(.expandedRow + &) > td {
+		border-#{$side}: $border;
+	}
+
+	& > td:first-child {
+		border-inline-start: $border;
+	}
+
+	& > td:last-child {
+		border-inline-end: $border;
+	}
+}
+
+.tableRow {
+	&:not(.virtualizedRow) {
+		&:not(:last-child) {
+			.tableCell {
+				border-bottom: vars.$border-width solid var(--color-border-secondary);
+			}
+		}
+
+		.cellCheckbox.tableCell {
+			padding: 0;
+			width: vars.$select-column-width;
+		}
+	}
+
+	&.virtualizedRow {
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-column: 1 / -1;
+		grid-row: 1;
+		align-items: center;
+
+		&:not(:last-child) {
+			border-bottom: vars.$border-width solid var(--color-border-secondary);
+		}
+
+		.tableCell {
+			&.cellCheckbox {
+				text-align: center;
+				padding: 0;
+				width: vars.$select-column-width;
+			}
+		}
+	}
+
+	&:hover {
+		background-color: var(--color-background-secondary);
+	}
+
+	&[data-state='selected'] {
+		background-color: var(--color-background-selected-weak);
+	}
+
+	&[data-state='active'] {
+		background-color: var(--color-background-selected-weak);
+	}
+
+	&.clickableRow {
+		cursor: pointer;
+	}
+
+	&.rowNoBorder {
+		border-bottom: none;
+	}
+
+	&.expanded {
+		@include expanded-row-border('top');
+	}
+
+	&.sizeSmall {
+		height: var(--ds-table-row-small);
+	}
+
+	&.sizeMedium {
+		height: var(--ds-table-row-medium);
+	}
+
+	&.sizeLarge {
+		height: var(--ds-table-row-large);
+	}
+}
+
+.expandedRow {
+	background-color: var(--color-background-secondary);
+
+	& > td {
+		padding: var(--spacing-standard);
+	}
+
+	@include expanded-row-border('bottom');
+}
+
+.cellButton {
+	width: vars.$expand-column-width;
+}
+
+.cellReorder {
+	width: vars.$reorder-column-width;
+	text-align: center;
+
+	&.isDragging {
+		background: var(--color-background-action);
+
+		.rowDragHandle {
+			color: var(--color-secondary-white);
+		}
+	}
+}
+
+.tableCell {
+	@include typography.body-sm-reg;
+	vertical-align: middle;
+	color: var(--color-font-main);
+	padding: 0 var(--spacing-standard);
+}
+
+.expandToggleButton {
+	background: none;
+	border: none;
+	padding: 0;
+	margin: 0;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	opacity: 1;
+	transition-property: opacity, background-color;
+}

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

@@ -0,0 +1,205 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { DsIcon } from '../../../ds-icon';
+import { DsCheckbox } from '../../../ds-checkbox';
+import { DsButton } from '../../../ds-button';
+import { TableCell, TableRow } from '../core-table';
+import { DsTableCell } from '../ds-table-cell';
+import type { DsTableRowProps } from './ds-table-row.types';
+import styles from './ds-table-row.module.scss';
+import stylesShared from '../../styles/shared/ds-table-shared.module.scss';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { mergeRefs } from '../../utils/merge-refs';
+import { getColumnStyle } from '../../utils/column-styling';
+
+interface DsRowDragHandleProps {
+	isDragging: boolean;
+	attributes: ReturnType<typeof useSortable>['attributes'];
+	listeners: ReturnType<typeof useSortable>['listeners'];
+}
+
+const DsRowDragHandle = ({ isDragging, attributes, listeners }: DsRowDragHandleProps) => {
+	return (
+		<TableCell
+			className={classnames(styles.tableCell, styles.cellReorder, {
+				[styles.isDragging]: isDragging,
+			})}
+		>
+			<DsIcon
+				className={styles.rowDragHandle}
+				icon={isDragging ? 'drag_indicator' : 'arrow_downward'}
+				size={isDragging ? 'medium' : 'small'}
+				onClick={(e: React.MouseEvent) => e.stopPropagation()}
+				{...attributes}
+				{...listeners}
+			></DsIcon>
+		</TableCell>
+	);
+};
+
+const DsTableRow = <TData,>({ ref, row, virtualRow }: DsTableRowProps<TData>) => {
+	const {
+		expandable,
+		expandedRows,
+		selectable,
+		reorderable,
+		onRowClick,
+		onRowDoubleClick,
+		renderExpandedRow,
+		virtualized,
+		bordered,
+		highlightOnHover,
+		rowSize,
+		toggleRowExpanded,
+		primaryRowActions,
+		secondaryRowActions,
+		activeRowId,
+	} = useDsTableContext<TData, unknown>();
+	const isExpanded = expandedRows[row.id];
+	const isExpandable = typeof expandable === 'function' ? expandable(row.original) : expandable;
+	const isActive = activeRowId === row.id;
+
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+		id: row.id,
+		disabled: !reorderable,
+	});
+	const rowStyle: React.CSSProperties =
+		virtualRow && virtualized
+			? {
+					transform: `translateY(${String(virtualRow.start)}px)`,
+				}
+			: reorderable
+				? {
+						// Convert DND-kit's transform coordinates to CSS transform string
+						transform: CSS.Transform.toString(transform),
+						transition,
+						...(isDragging
+							? {
+									background: 'var(--action-active-light)',
+									boxShadow: '0 0 12px 0 rgba(0, 102, 250, 0.60)',
+									zIndex: 1,
+								}
+							: {}),
+						position: 'relative',
+					}
+				: {};
+
+	return (
+		<React.Fragment key={row.id}>
+			<TableRow
+				ref={mergeRefs(reorderable ? setNodeRef : null, ref)}
+				data-state={isActive ? 'active' : row.getIsSelected() ? 'selected' : undefined}
+				className={classnames(
+					styles.tableRow,
+					{
+						[styles.sizeSmall]: rowSize === 'small',
+						[styles.sizeMedium]: rowSize === 'medium',
+						[styles.sizeLarge]: rowSize === 'large',
+					},
+					virtualized && styles.virtualizedRow,
+					onRowClick && styles.clickableRow,
+					highlightOnHover && styles.highlightHoverRow,
+					!bordered && styles.rowNoBorder,
+					isExpanded && styles.expanded,
+				)}
+				style={rowStyle}
+				onClick={() => onRowClick?.(row.original)}
+				onDoubleClick={() => onRowDoubleClick?.(row.original)}
+			>
+				{selectable && (
+					<TableCell className={classnames(styles.tableCell, styles.cellCheckbox)}>
+						<DsCheckbox
+							className={stylesShared.checkboxContainer}
+							checked={row.getIsSelected()}
+							disabled={!row.getCanSelect()}
+							onClick={(e) => {
+								e.stopPropagation();
+								const toggleHandler = row.getToggleSelectedHandler();
+								toggleHandler(e);
+							}}
+							onDoubleClick={(e: React.MouseEvent) => {
+								e.stopPropagation();
+							}}
+						/>
+					</TableCell>
+				)}
+				{expandable && (
+					<TableCell className={classnames(styles.tableCell, styles.cellButton)}>
+						{isExpandable && (
+							<DsButton
+								variant={virtualized ? 'ghost' : 'borderless'}
+								size="small"
+								onClick={(e: React.MouseEvent) => {
+									e.stopPropagation();
+									toggleRowExpanded(row.id);
+								}}
+								onDoubleClick={(e: React.MouseEvent) => {
+									e.stopPropagation();
+								}}
+								className={styles.expandToggleButton}
+							>
+								<DsIcon
+									icon={virtualized ? (isExpanded ? 'arrow_drop_down' : 'arrow_right') : 'chevron_right'}
+									className={classnames(
+										stylesShared.pageButtonIcon,
+										!virtualized && isExpanded && 'rotate-90',
+									)}
+								/>
+							</DsButton>
+						)}
+					</TableCell>
+				)}
+				{reorderable && (
+					<DsRowDragHandle isDragging={isDragging} attributes={attributes} listeners={listeners} />
+				)}
+				{row.getVisibleCells().map((cell, idx) => {
+					const isLastColumn = idx === row.getVisibleCells().length - 1;
+					const cellStyle = getColumnStyle(cell.column.getSize(), virtualized, isLastColumn);
+
+					return (
+						<TableCell key={cell.id} className={styles.tableCell} style={cellStyle}>
+							{isLastColumn ? (
+								<DsTableCell
+									row={row}
+									cell={cell}
+									primaryRowActions={primaryRowActions}
+									secondaryRowActions={secondaryRowActions}
+								/>
+							) : (
+								<DsTableCell row={row} cell={cell} />
+							)}
+						</TableCell>
+					);
+				})}
+			</TableRow>
+			{isExpanded && renderExpandedRow && (
+				<TableRow
+					style={
+						virtualRow && virtualized
+							? {
+									transform: `translateY(${String(virtualRow.start + virtualRow.size)}px)`,
+								}
+							: undefined
+					}
+					className={styles.expandedRow}
+				>
+					<TableCell
+						colSpan={
+							row.getVisibleCells().length +
+							(selectable ? 1 : 0) +
+							(isExpandable ? 1 : 0) +
+							(reorderable ? 1 : 0)
+						}
+						className={styles.tableCell}
+					>
+						{renderExpandedRow(row.original)}
+					</TableCell>
+				</TableRow>
+			)}
+		</React.Fragment>
+	);
+};
+
+export default DsTableRow;

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

@@ -0,0 +1,22 @@
+import type { Ref } from 'react';
+import type { Row } from '@tanstack/react-table';
+import type { VirtualItem } from '@tanstack/react-virtual';
+
+/**
+ * Props for the table row component
+ */
+export interface DsTableRowProps<TData> {
+	/**
+	 * Ref for the table row
+	 */
+	ref?: Ref<HTMLTableRowElement>;
+	/**
+	 * The row data from the table
+	 */
+	row: Row<TData>;
+
+	/**
+	 * Virtual row data for virtualized tables
+	 */
+	virtualRow?: VirtualItem;
+}

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

@@ -0,0 +1,2 @@
+export { default as DsTableRow } from './ds-table-row';
+export * from './ds-table-row.types';

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

@@ -0,0 +1,39 @@
+import { createContext, useContext } from 'react';
+import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
+
+export interface DsTableContextType<TData, TValue> extends Partial<DsDataTableProps<TData, TValue>> {
+	/**
+	 * The expanded rows
+	 */
+	expandedRows: Record<string, boolean>;
+	/**
+	 * Toggle the expanded state of a row
+	 * @param rowId - The id of the row to toggle
+	 */
+	toggleRowExpanded: (rowId: string) => void;
+	/**
+	 * Whether the table is virtualized
+	 * @default false
+	 */
+	virtualized?: boolean;
+	/**
+	 * Row size variant
+	 * @default 'medium'
+	 */
+	rowSize: DsTableRowSize;
+	/**
+	 * ID of the currently active row
+	 */
+	activeRowId?: string | null;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const DsTableContext = createContext<DsTableContextType<any, any> | null>(null);
+
+export const useDsTableContext = <TData, TValue>(): DsTableContextType<TData, TValue> => {
+	const context = useContext(DsTableContext);
+	if (!context) {
+		throw new Error('useDsTableContext must be used within DsTable');
+	}
+	return context as DsTableContextType<TData, TValue>;
+};

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

@@ -0,0 +1,60 @@
+@use '../../styles/typography';
+@use '../../styles/utilities' as utils;
+@use './styles/variables' as vars;
+
+.container {
+	border-radius: vars.$border-radius;
+	border-width: vars.$border-width;
+	border-style: solid;
+	border-color: var(--neutral-6);
+	background: var(--color-background);
+}
+
+.virtualizedContainer {
+	position: relative;
+	height: vars.$virtualized-height;
+	overflow: auto;
+}
+
+.dataTableContainer {
+	max-height: 100%;
+	overflow: auto;
+}
+
+.table {
+	width: 100%;
+	caption-side: bottom;
+	@include typography.p-base;
+
+	&.tableNoBorder {
+		border-collapse: separate;
+		border-spacing: 0;
+		border: none;
+	}
+}
+
+.fullWidth {
+	width: 100%;
+}
+
+.emptyState {
+	height: vars.$empty-state-height;
+	text-align: center;
+}
+
+.emptyStateVirtualized {
+	position: absolute;
+	inset: 0;
+	top: var(--ds-table-header-height);
+}
+
+.virtualized {
+	display: grid;
+	grid-template-columns: var(--ds-table-columns-template);
+}
+
+.virtualizedBody {
+	display: grid;
+	grid-template-columns: subgrid;
+	grid-column: 1 / -1;
+}