@drivenets/design-system 0.12.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -62,50 +62,50 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.2",
-    "@eslint/compat": "^2.0.3",
+    "@eslint/compat": "^2.1.0",
     "@faker-js/faker": "^10.3.0",
-    "@hookform/resolvers": "^5.2.2",
-    "@rolldown/plugin-babel": "^0.2.2",
-    "@storybook/addon-a11y": "^10.2.19",
-    "@storybook/addon-docs": "^10.2.19",
+    "@hookform/resolvers": "^5.4.0",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
     "@storybook/addon-mcp": "^0.6.0",
-    "@storybook/addon-vitest": "^10.2.19",
-    "@storybook/react-vite": "^10.2.19",
-    "@tanstack/react-query": "^5.90.21",
-    "@tanstack/react-router": "^1.166.2",
-    "@tsdown/css": "^0.21.6",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
+    "@tanstack/react-query": "^5.100.14",
+    "@tanstack/react-router": "^1.170.8",
+    "@tsdown/css": "^0.22.0",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260426.1",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser-playwright": "^4.1.0",
-    "@vitest/coverage-v8": "^4.1.5",
+    "@typescript/native-preview": "7.0.0-dev.20260521.1",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.7",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-storybook": "^10.2.19",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-storybook": "^10.4.1",
     "mockdate": "^3.0.5",
-    "playwright": "^1.58.2",
-    "publint": "^0.3.18",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.2",
+    "playwright": "^1.60.0",
+    "publint": "^0.3.21",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "react-hook-form": "^7.76.1",
     "remark-gfm": "^4.0.1",
-    "sass-embedded": "^1.97.3",
-    "storybook": "^10.2.19",
-    "tsdown": "^0.21.10",
+    "sass-embedded": "^1.100.0",
+    "storybook": "^10.4.1",
+    "tsdown": "^0.22.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^6.0.3",
     "typescript-plugin-css-modules": "^5.2.0",
-    "vite": "8.0.5",
-    "vitest": "^4.1.5",
+    "vite": "8.0.14",
+    "vitest": "^4.1.7",
     "vitest-browser-react": "^2.1.0",
-    "zod": "^4.3.6",
-    "@drivenets/vite-plugin-design-system": "0.0.8",
-    "@drivenets/eslint-plugin-internal": "0.0.0"
+    "zod": "^4.4.3",
+    "@drivenets/eslint-plugin-internal": "0.0.0",
+    "@drivenets/vite-plugin-design-system": "0.0.9"
   },
   "scripts": {
     "start": "storybook dev -p 6006",

package/src/components/ds-date-input/ds-date-input.utils.ts

@@ -23,7 +23,7 @@ interface ParsedDateRange {
  */
 export const isoStringToDateValue = (isoDate: string): DateValue | undefined => {
 	try {
-		return parseDate(isoDate) as unknown as DateValue;
+		return parseDate(isoDate);
 	} catch {
 		return undefined;
 	}
@@ -109,7 +109,7 @@ const parseDateString = (dateStr: string): DateValue | null => {
 		return null;
 	}
 
-	return new CalendarDate(yearNum, monthNum, dayNum) as unknown as DateValue;
+	return new CalendarDate(yearNum, monthNum, dayNum);
 };
 
 /**

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

@@ -6,6 +6,7 @@ import type { DsDrawerProps } from './ds-drawer.types';
 import styles from './ds-drawer.module.scss';
 import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
+import { useArkDialogBodyLockCleanup } from '../../utils/use-ark-dialog-body-lock-cleanup';
 import { useResponsiveValue } from '../../utils/responsive';
 
 const DsDrawer = ({
@@ -22,6 +23,7 @@ const DsDrawer = ({
 	children,
 }: DsDrawerProps) => {
 	const resolvedColumns = useResponsiveValue(columns);
+	useArkDialogBodyLockCleanup(open, backdrop);
 
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);

package/src/components/ds-form-control/ds-form-control.tsx

@@ -45,6 +45,7 @@ const DsFormControl = ({
 	id,
 	status,
 	label,
+	hideLabel = false,
 	required = false,
 	slots,
 	message,
@@ -68,17 +69,19 @@ const DsFormControl = ({
 				)}
 				style={style}
 			>
-				<div className={styles.labelContainer}>
-					<label
-						htmlFor={controlId}
-						className={classNames(styles.label, {
-							[styles.required]: required,
-						})}
-					>
-						{label}
-					</label>
-					{slots?.endAdornment && <div className={styles.endAdornment}>{slots.endAdornment}</div>}
-				</div>
+				{!hideLabel && (
+					<div className={styles.labelContainer}>
+						<label
+							htmlFor={controlId}
+							className={classNames(styles.label, {
+								[styles.required]: required,
+							})}
+						>
+							{label}
+						</label>
+						{slots?.endAdornment && <div className={styles.endAdornment}>{slots.endAdornment}</div>}
+					</div>
+				)}
 
 				{children}
 

package/src/components/ds-form-control/ds-form-control.types.ts

@@ -17,6 +17,10 @@ export interface DsFormControlProps extends React.PropsWithChildren {
 	 * Label text
 	 */
 	label: string;
+	/**
+	 * When true, the label row is not rendered (e.g. inline table cell editors).
+	 */
+	hideLabel?: boolean;
 	/**
 	 * Marks the field as required
 	 */

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

@@ -1,4 +1,3 @@
-import type { CSSProperties } from 'react';
 import classNames from 'classnames';
 
 import type { DsGridBaseProps, DsGridItemBaseProps } from './ds-grid.types';
@@ -32,7 +31,7 @@ export const DsGridBase = ({
 	}
 
 	return (
-		<div className={gridClass} style={{ ...style, ...cssVars } as CSSProperties}>
+		<div className={gridClass} style={{ ...style, ...cssVars }}>
 			{children}
 		</div>
 	);

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

@@ -4,6 +4,7 @@ import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import type { DsModalProps } from './ds-modal.types';
 import styles from './ds-modal.module.scss';
+import { useArkDialogBodyLockCleanup } from '../../utils/use-ark-dialog-body-lock-cleanup';
 import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
 
@@ -24,6 +25,8 @@ const DsModal = ({
 	children,
 	onOpenChange,
 }: DsModalProps) => {
+	useArkDialogBodyLockCleanup(open, modal);
+
 	const handleOpenChange = (details: { open: boolean }) => {
 		onOpenChange(details.open);
 	};

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

@@ -1,9 +1,28 @@
+@use '../../../../styles/scrollbars' as scrollbars;
+
 .body {
-	display: grid;
+	display: block;
+	position: relative;
+	overflow-y: auto;
+	flex: 1;
+	min-height: 0;
+	scrollbar-gutter: stable;
+
+	@include scrollbars.scrollbar-on-hover;
+}
+
+// 1px row pinned at `top: <totalSize>` (set inline) so absolutely-positioned
+// rows extend the parent's scrollable overflow area.
+.sentinel {
+	position: absolute;
+	left: 0;
+	width: 1px;
+	height: 1px;
+	pointer-events: none;
+	visibility: hidden;
 }
 
 .emptyState {
 	position: absolute;
 	inset: 0;
-	top: var(--ds-table-header-height);
 }

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

@@ -10,7 +10,6 @@ import { useInfiniteScroll } from './use-infinite-scroll';
 
 export const DsTableBodyVirtualized = <TData,>({
 	table,
-	tableContainerRef,
 	emptyState,
 	estimateSize,
 	overscan,
@@ -20,6 +19,7 @@ export const DsTableBodyVirtualized = <TData,>({
 }: DsTableBodyVirtualizedProps<TData>) => {
 	const rowsMapRef = useRef(new Map<string, HTMLTableRowElement>());
 	const rowHeightsMapRef = useRef(new Map<string, number>());
+	const tbodyRef = useRef<HTMLTableSectionElement>(null);
 
 	const { rows } = table.getRowModel();
 
@@ -32,16 +32,16 @@ export const DsTableBodyVirtualized = <TData,>({
 		return item ? `${item.row.id}${item.isExpandedRowContent ? '-expanded-content' : ''}` : String(index);
 	};
 
-	const { loadDataIfNeeded } = useInfiniteScroll(tableContainerRef, rows.length, infiniteScroll);
+	const { loadDataIfNeeded } = useInfiniteScroll(tbodyRef, rows.length, infiniteScroll);
 
-	const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+	const rowVirtualizer = useVirtualizer<HTMLTableSectionElement, HTMLTableRowElement>({
 		count: rowsAndExpandedRowContent.length,
 		estimateSize: (index) => {
 			const cachedHeight = rowHeightsMapRef.current.get(getItemKey(index));
 			return cachedHeight || estimateSize;
 		}, // estimate row height for accurate scrollbar dragging
 		getItemKey,
-		getScrollElement: () => tableContainerRef.current,
+		getScrollElement: () => tbodyRef.current,
 		// measure dynamic row height, except in firefox because it measures table border height incorrectly
 		measureElement:
 			typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1
@@ -86,6 +86,7 @@ export const DsTableBodyVirtualized = <TData,>({
 
 	return (
 		<DsTableBody
+			ref={tbodyRef}
 			rowsMapRef={rowsMapRef}
 			rowHeightsMapRef={rowHeightsMapRef}
 			rowVirtualizer={rowVirtualizer}
@@ -97,7 +98,8 @@ export const DsTableBodyVirtualized = <TData,>({
 };
 
 interface DsTableBodyProps<TData> {
-	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	ref: RefObject<HTMLTableSectionElement | null>;
+	rowVirtualizer: Virtualizer<HTMLTableSectionElement, HTMLTableRowElement>;
 	rowsMapRef: RefObject<Map<string, HTMLTableRowElement>>;
 	rowHeightsMapRef: RefObject<Map<string, number>>;
 	rowsAndExpandedRowContent: {
@@ -109,6 +111,7 @@ interface DsTableBodyProps<TData> {
 }
 
 function DsTableBody<TData>({
+	ref,
 	rowVirtualizer,
 	rowsMapRef,
 	rowHeightsMapRef,
@@ -117,14 +120,10 @@ function DsTableBody<TData>({
 	rowSelection,
 }: DsTableBodyProps<TData>) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
+	const totalSize = rowVirtualizer.getTotalSize();
 
 	return (
-		<TableBody
-			className={styles.body}
-			style={{
-				height: `${rowVirtualizer.getTotalSize().toString()}px`, // tells scrollbar how big the table is
-			}}
-		>
+		<TableBody ref={ref} className={styles.body}>
 			{virtualRows.length > 0 ? (
 				virtualRows.map((virtualRow) => {
 					const row = rowsAndExpandedRowContent[virtualRow.index];
@@ -150,6 +149,10 @@ function DsTableBody<TData>({
 					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
 				</TableRow>
 			)}
+
+			<tr aria-hidden className={styles.sentinel} style={{ top: `${totalSize.toString()}px` }}>
+				<td />
+			</tr>
 		</TableBody>
 	);
 }

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

@@ -1,4 +1,4 @@
-import { type RefObject, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { type RowSelectionState, type Table } from '@tanstack/react-table';
 
 export interface DsTableBodyVirtualizedProps<TData> {
@@ -7,11 +7,6 @@ export interface DsTableBodyVirtualizedProps<TData> {
 	 * and column state.
 	 */
 	table: Table<TData>;
-	/**
-	 * Ref to the scrollable container that hosts the virtualized rows. Required by
-	 * the virtualizer to measure viewport size and listen for scroll events.
-	 */
-	tableContainerRef: RefObject<HTMLDivElement | null>;
 	/**
 	 * Optional content rendered in place of rows when the table has no data.
 	 */

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

@@ -1,14 +1,14 @@
 @use '../../../../styles/typography';
 
 .bulkActionsContainer {
-	position: fixed;
+	position: absolute;
 	bottom: 20px;
 	left: 50%;
 	transform: translateX(-50%);
 	background-color: var(--color-dap-gray-050);
 	border-radius: 8px;
 	box-shadow: 0 4px 12px #0445cc66;
-	z-index: 1000;
+	z-index: 1;
 	display: flex;
 	align-items: center;
 	border-radius: 8px;

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

@@ -1,6 +1,8 @@
 @use '../../../../styles/typography';
 
 .tableCellEllipsis {
+	flex: 1;
+	min-width: 0;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;

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

@@ -2,31 +2,31 @@ import { type Cell, flexRender } from '@tanstack/react-table';
 import classnames from 'classnames';
 import { DsIcon } from '../../../ds-icon';
 import { DsDropdownMenu } from '../../../ds-dropdown-menu';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { DsTableEditableCell } from '../edit/ds-table-editable-cell';
+import { DsTableEditingCell } from '../edit/ds-table-editing-cell';
 import styles from './ds-table-cell.module.scss';
 import type { DsTableCellProps } from './ds-table-cell.types';
 
-const DsDefaultTableCell = <TData, TValue>({ cell }: { cell: Cell<TData, TValue> }) => {
-	return (
-		<div className={styles.tableCellEllipsis}>
-			{flexRender(cell.column.columnDef.cell, cell.getContext())}
-		</div>
-	);
-};
-
 export const DsTableCell = <TData, TValue>({
 	row,
 	cell,
 	primaryRowActions = [],
 	secondaryRowActions = [],
 }: DsTableCellProps<TData, TValue>) => {
+	const { editing } = useDsTableContext<TData, TValue>();
+	const isCellBeingEdited =
+		editing !== null && editing.cell.row.id === row.id && editing.cell.column.id === cell.column.id;
+
 	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
 	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
 
-	if (visiblePrimary.length || visibleSecondary.length) {
+	if (!isCellBeingEdited && (visiblePrimary.length || visibleSecondary.length)) {
 		const hasSecondaryRowActions = visibleSecondary.length > 0;
+
 		return (
 			<div className={styles.lastCell}>
-				<DsDefaultTableCell cell={cell} />
+				<CellContent cell={cell} isCellBeingEdited={isCellBeingEdited} />
 				<div className={styles.cellActions}>
 					{visiblePrimary.map((action, i) => {
 						const isDisabled = action.disabled?.(row.original);
@@ -95,5 +95,36 @@ export const DsTableCell = <TData, TValue>({
 			</div>
 		);
 	}
-	return <DsDefaultTableCell cell={cell} />;
+
+	return <CellContent cell={cell} isCellBeingEdited={isCellBeingEdited} />;
+};
+
+interface CellContentProps<TData, TValue> {
+	cell: Cell<TData, TValue>;
+	isCellBeingEdited: boolean;
+}
+
+const CellContent = <TData, TValue>({ cell, isCellBeingEdited }: CellContentProps<TData, TValue>) => {
+	const columnDef = cell.column.columnDef;
+	const isEditable = typeof columnDef.editCell === 'function';
+
+	if (isCellBeingEdited) {
+		return <DsTableEditingCell cell={cell} />;
+	}
+
+	if (isEditable) {
+		return (
+			<DsTableEditableCell cell={cell}>
+				<div className={styles.tableCellEllipsis}>
+					{flexRender(cell.column.columnDef.cell, cell.getContext())}
+				</div>
+			</DsTableEditableCell>
+		);
+	}
+
+	return (
+		<div className={styles.tableCellEllipsis}>
+			{flexRender(cell.column.columnDef.cell, cell.getContext())}
+		</div>
+	);
 };

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

@@ -2,14 +2,11 @@
 @use '../../styles/variables' as vars;
 
 .stickyHeader {
-	position: sticky;
-	top: 0;
-	z-index: 10;
 	background-color: var(--background);
 }
 
 .virtualizedHeader {
-	display: grid;
+	display: block;
 }
 
 .headerRow {
@@ -57,6 +54,7 @@
 
 .selectHeaderCell {
 	padding: 0;
+	justify-content: center;
 }
 
 .headerSortContainer {
@@ -66,3 +64,25 @@
 	gap: vars.$header-sort-gap;
 	height: 100%;
 }
+
+.filterTriggerContainer {
+	display: inline-flex;
+	align-items: center;
+	margin-left: vars.$header-sort-gap;
+}
+
+.filterableHeader {
+	&:hover .filterTriggerContainer > * {
+		opacity: 1;
+	}
+
+	&:focus-within .filterTriggerContainer > * {
+		opacity: 1;
+	}
+}
+
+.filterActive {
+	.filterTriggerContainer > * {
+		opacity: 1;
+	}
+}

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

@@ -9,6 +9,8 @@ import { useDsTableContext } from '../../context/ds-table-context';
 import { getColumnSizeStyle } from '../../utils/column-size';
 import { SELECT_COLUMN_ID } from '../../utils/constants';
 import { DsStack } from '../../../ds-stack';
+import { DsTableColumnFilterPopover } from '../../filters/components/column-filter-popover';
+import type { ResolvedColumnFilter } from '../../filters/types/filter-adapter.types';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
@@ -27,10 +29,15 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 					)}
 				>
 					{headerGroup.headers.map((header) => {
-						const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+						const headerStyle = getColumnSizeStyle(header.column.getSize());
 						const canSort = header.column.getCanSort();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
 
+						const metaFilter = header.column.columnDef.meta?.filter;
+						const resolvedFilter: ResolvedColumnFilter | undefined =
+							metaFilter && 'render' in metaFilter ? metaFilter : undefined;
+						const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
+
 						return (
 							<TableHead
 								key={header.id}
@@ -38,6 +45,8 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 									styles.headerCell,
 									canSort && styles.sortableHeader,
 									isSelectColumn && styles.selectHeaderCell,
+									resolvedFilter && styles.filterableHeader,
+									hasActiveColumnFilter && styles.filterActive,
 								)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
@@ -67,6 +76,18 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 												)}
 											</div>
 										)}
+										{resolvedFilter && (
+											<div className={styles.filterTriggerContainer}>
+												<DsTableColumnFilterPopover
+													hasActiveFilter={resolvedFilter.hasActiveFilter}
+													onApply={resolvedFilter.onApply}
+													onClear={resolvedFilter.onClear}
+													onCancel={resolvedFilter.onCancel}
+												>
+													{resolvedFilter.render()}
+												</DsTableColumnFilterPopover>
+											</div>
+										)}
 									</div>
 								)}
 							</TableHead>

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

@@ -50,6 +50,8 @@
 	background-color: var(--background-secondary);
 
 	& > td {
+		flex: 1;
+		min-width: 0;
 		padding: var(--standard);
 	}
 
@@ -80,4 +82,24 @@
 .selectableCell {
 	padding: 0;
 	text-align: center;
+	justify-content: center;
+}
+
+.tableRow .editableCell {
+	padding: 1px;
+
+	&:hover {
+		border: 1px solid var(--border-secondary-hover);
+	}
+
+	&:focus-within {
+		border: 1px solid var(--border-action-primary);
+	}
+
+	&:hover,
+	&:focus-within {
+		padding: 0;
+		border-bottom-width: 2px;
+		background: var(--background);
+	}
 }

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

@@ -118,6 +118,7 @@ const DsTableRow = <TData,>({ ref, row, isSelected }: DsTableRowProps<TData>) =>
 								styles.tableCell,
 								cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
 								cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
+								typeof cell.column.columnDef.editCell === 'function' && styles.editableCell,
 							)}
 							style={cellStyle}
 						>

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

@@ -79,3 +79,22 @@
 
 	@include table-mixins.expanded-row-border('bottom');
 }
+
+.row td.editableCell {
+	padding: 1px;
+
+	&:hover {
+		border: 1px solid var(--border-secondary-hover);
+	}
+
+	&:focus-within {
+		border: 1px solid var(--border-action-primary);
+	}
+
+	&:hover,
+	&:focus-within {
+		padding: 0;
+		border-bottom-width: 2px;
+		background: var(--background);
+	}
+}

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

@@ -67,7 +67,7 @@ export const DsTableRowVirtualized = <TData,>({
 				<>
 					{row.getVisibleCells().map((cell, idx) => {
 						const isLastColumn = idx === row.getVisibleCells().length - 1;
-						const cellStyle = getColumnSizeStyle(cell.column.getSize(), true);
+						const cellStyle = getColumnSizeStyle(cell.column.getSize());
 
 						return (
 							<TableCell
@@ -77,6 +77,7 @@ export const DsTableRowVirtualized = <TData,>({
 									styles.cell,
 									cell.column.id === EXPANDER_COLUMN_ID && styles.expandableCell,
 									cell.column.id === SELECT_COLUMN_ID && styles.selectableCell,
+									typeof cell.column.columnDef.editCell === 'function' && styles.editableCell,
 								)}
 							>
 								{isLastColumn ? (

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

@@ -25,7 +25,7 @@ export interface DsTableRowVirtualizedProps<TData> {
 	/**
 	 * TanStack virtualizer driving the scroll window for the table body.
 	 */
-	rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
+	rowVirtualizer: Virtualizer<HTMLTableSectionElement, HTMLTableRowElement>;
 	/**
 	 * Virtual item descriptor for this row (index, start, size) from the virtualizer.
 	 */

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

@@ -0,0 +1,3 @@
+.fullWidth {
+	width: 100%;
+}