@drivenets/design-system 0.12.1 → 0.14.0

package/src/components/ds-status-badge-v2/ds-status-badge-v2.figma.ts

@@ -0,0 +1,41 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34428-16204
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-status-badge-v2
+// component=DsStatusBadgeV2
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const phase = instance.getEnum('status', {
+	'not-started': 'not-started',
+	temporary: 'temporary',
+	'in-review': 'in-review',
+	pending: 'pending',
+	active: 'active',
+	execution: 'execution',
+	'result-succeeded': 'result-succeeded',
+	'result-warning': 'result-warning',
+	'result-failed': 'result-failed',
+	deprecated: 'deprecated',
+});
+const variant = instance.getEnum('variant', { primary: 'primary', secondary: 'secondary' });
+const size = instance.getEnum('Size', { medium: 'medium', small: 'small' });
+const structure = instance.getEnum('structure', {
+	'icon+text': 'icon+text',
+	'icon-only': 'icon-only',
+	'text-only': 'text-only',
+});
+
+const labelNode = instance.findText('Active', { traverseInstances: true });
+const label = labelNode.type === 'TEXT' ? labelNode.textContent : 'Active';
+
+export default {
+	example:
+		structure === 'icon-only'
+			? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" iconOnly />`
+			: structure === 'text-only'
+				? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />`
+				: figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`,
+	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"],
+	id: 'ds-status-badge-v2',
+	metadata: { nestable: true },
+};

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: {
@@ -108,7 +110,8 @@ interface DsTableBodyProps<TData> {
 	rowSelection: RowSelectionState;
 }
 
-function DsTableBody<TData>({
+export function DsTableBody<TData>({
+	ref,
 	rowVirtualizer,
 	rowsMapRef,
 	rowHeightsMapRef,
@@ -117,14 +120,15 @@ function DsTableBody<TData>({
 	rowSelection,
 }: DsTableBodyProps<TData>) {
 	const virtualRows = rowVirtualizer.getVirtualItems();
+	const totalSize = rowVirtualizer.getTotalSize();
+
+	// Gate the empty state on real data count, not on rendered virtual rows.
+	// getVirtualItems() transiently returns [] while the virtualizer re-measures
+	// after a `data` swap; rendering nothing for that frame avoids an empty-state flash.
+	const hasNoData = rowsAndExpandedRowContent.length === 0;
 
 	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];
@@ -145,11 +149,15 @@ function DsTableBody<TData>({
 						/>
 					);
 				})
-			) : (
+			) : hasNoData ? (
 				<TableRow>
 					<TableCell className={styles.emptyState}>{emptyState || EMPTY_TABLE_STATE_TEXT}</TableCell>
 				</TableRow>
-			)}
+			) : null}
+
+			<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-group-header-cell/ds-table-group-header-cell.module.scss

@@ -0,0 +1,31 @@
+@use '../../../../styles/typography';
+@use '../../styles/variables' as vars;
+
+.groupHeaderCell {
+	@include typography.body-sm-md;
+	color: var(--font-main);
+	height: var(--ds-table-header-height);
+	padding: 0;
+	border-bottom: vars.$border-width solid var(--color-dap-gray-400);
+	border-left: vars.$group-border-width solid var(--border);
+}
+
+.groupHeaderContent {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: vars.$header-sort-gap;
+	width: 100%;
+	height: 100%;
+	padding: 0 var(--standard);
+}
+
+.groupLabel {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.collapseToggle {
+	flex-shrink: 0;
+}

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

@@ -0,0 +1,48 @@
+import { flexRender } from '@tanstack/react-table';
+import { DsButtonV3 } from '../../../ds-button-v3';
+import { TableHead } from '../core-table';
+import { useDsTableContext } from '../../context/ds-table-context';
+import { getGroupColumnSizeStyle } from '../../grouping';
+import { defaultDsTableLocale } from '../../ds-table.types';
+import type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';
+import styles from './ds-table-group-header-cell.module.scss';
+
+export const DsTableGroupHeaderCell = <TData, TValue>({
+	header,
+}: DsTableGroupHeaderCellProps<TData, TValue>) => {
+	const { collapsedColumnGroups, onToggleColumnGroup, locale } = useDsTableContext<TData, TValue>();
+
+	const groupId = header.column.id;
+	const visibleLeafColumns = header.column.getLeafColumns().filter((leaf) => leaf.getIsVisible());
+	const groupStyle = getGroupColumnSizeStyle(visibleLeafColumns);
+
+	const isCollapsible = header.column.columnDef.meta?.group?.collapsible ?? false;
+	const isCollapsed = collapsedColumnGroups?.includes(groupId) ?? false;
+
+	const mergedLocale = { ...defaultDsTableLocale, ...locale };
+	const toggleLabel = isCollapsed ? mergedLocale.expandColumnGroup : mergedLocale.collapseColumnGroup;
+
+	const handleToggle = () => onToggleColumnGroup?.(groupId);
+
+	return (
+		<TableHead className={styles.groupHeaderCell} style={groupStyle} colSpan={header.colSpan}>
+			<div className={styles.groupHeaderContent}>
+				<span className={styles.groupLabel}>
+					{flexRender(header.column.columnDef.header, header.getContext())}
+				</span>
+				{isCollapsible && (
+					<DsButtonV3
+						variant="secondary"
+						size="tiny"
+						icon={isCollapsed ? 'chevron_right' : 'chevron_left'}
+						className={styles.collapseToggle}
+						aria-label={toggleLabel}
+						aria-expanded={!isCollapsed}
+						title={toggleLabel}
+						onClick={handleToggle}
+					/>
+				)}
+			</div>
+		</TableHead>
+	);
+};

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

@@ -0,0 +1,12 @@
+import type { Header } from '@tanstack/react-table';
+
+/**
+ * Props for the grouping column header cell.
+ */
+export interface DsTableGroupHeaderCellProps<TData, TValue> {
+	/**
+	 * The grouping header from `@tanstack/react-table` (a header whose column nests
+	 * child columns).
+	 */
+	header: Header<TData, TValue>;
+}

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

@@ -0,0 +1,2 @@
+export { DsTableGroupHeaderCell } from './ds-table-group-header-cell';
+export type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';

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,11 @@
 
 .selectHeaderCell {
 	padding: 0;
+	justify-content: center;
+}
+
+.groupStart {
+	border-left: vars.$group-border-width solid var(--border);
 }
 
 .headerSortContainer {
@@ -66,3 +68,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,10 @@ 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';
+import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
+import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
@@ -27,9 +31,29 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 					)}
 				>
 					{headerGroup.headers.map((header) => {
-						const headerStyle = getColumnSizeStyle(header.column.getSize(), virtualized);
+						if (header.isPlaceholder) {
+							return (
+								<TableHead
+									key={header.id}
+									className={styles.headerCell}
+									style={getColumnSizeStyle(header.getSize())}
+								/>
+							);
+						}
+
+						if (header.subHeaders.length > 0) {
+							return <DsTableGroupHeaderCell key={header.id} header={header} />;
+						}
+
+						const headerStyle = getColumnSizeStyle(header.column.getSize());
 						const canSort = header.column.getCanSort();
 						const isSelectColumn = header.column.id === SELECT_COLUMN_ID;
+						const isGroupStart = isFirstLeafColumnOfGroup(header.column);
+
+						const metaFilter = header.column.columnDef.meta?.filter;
+						const resolvedFilter: ResolvedColumnFilter | undefined =
+							metaFilter && 'render' in metaFilter ? metaFilter : undefined;
+						const hasActiveColumnFilter = resolvedFilter?.hasActiveFilter ?? false;
 
 						return (
 							<TableHead
@@ -38,37 +62,50 @@ const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
 									styles.headerCell,
 									canSort && styles.sortableHeader,
 									isSelectColumn && styles.selectHeaderCell,
+									resolvedFilter && styles.filterableHeader,
+									hasActiveColumnFilter && styles.filterActive,
+									isGroupStart && styles.groupStart,
 								)}
 								onClick={header.column.getToggleSortingHandler()}
 								style={headerStyle}
 							>
-								{header.isPlaceholder ? null : (
-									<div className={styles.headerSortContainer}>
-										<DsStack direction="column" justifyContent="center" width="100%">
-											{flexRender(header.column.columnDef.header, header.getContext())}
-										</DsStack>
-										{canSort && (
-											<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>
-								)}
+								<div className={styles.headerSortContainer}>
+									<DsStack direction="column" justifyContent="center" width="100%">
+										{flexRender(header.column.columnDef.header, header.getContext())}
+									</DsStack>
+									{canSort && (
+										<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>
+									)}
+									{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,28 @@
 .selectableCell {
 	padding: 0;
 	text-align: center;
+	justify-content: center;
+}
+
+.groupStart {
+	border-left: vars.$group-border-width solid var(--border);
+}
+
+.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

@@ -10,6 +10,7 @@ import styles from './ds-table-row.module.scss';
 import { useDsTableContext } from '../../context/ds-table-context';
 import { mergeRefs } from '../../../../utils/merge-refs';
 import { getColumnSizeStyle } from '../../utils/column-size';
+import { isFirstLeafColumnOfGroup } from '../../grouping';
 import { EXPANDER_COLUMN_ID, REORDER_COLUMN_ID, SELECT_COLUMN_ID } from '../../utils/constants';
 
 interface DsRowDragHandleProps {
@@ -118,6 +119,8 @@ 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,
+								isFirstLeafColumnOfGroup(cell.column) && styles.groupStart,
+								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

@@ -66,6 +66,10 @@
 	justify-content: center;
 }
 
+.groupStart {
+	border-left: vars.$group-border-width solid var(--border);
+}
+
 .expandedRowContent {
 	background-color: var(--background-secondary);
 
@@ -79,3 +83,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);
+	}
+}