@synerise/ds-table-new 1.4.2 → 1.4.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.4.3...@synerise/ds-table-new@1.4.4) (2026-06-11)
+
+**Note:** Version bump only for package @synerise/ds-table-new
+
+## [1.4.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.4.2...@synerise/ds-table-new@1.4.3) (2026-06-03)
+
+### Bug Fixes
+
+- **modal:** a11y and other tweaks ([cfbeb11](https://github.com/Synerise/synerise-design/commit/cfbeb11c8e1a60d99885ec87e91783eb1800c8d9))
+- **table-new:** expandalble row custom content and default table sticky header features ([4f8a670](https://github.com/Synerise/synerise-design/commit/4f8a6704e3dc2c00ee88549553af30af02fe5430))
+
 ## [1.4.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.4.1...@synerise/ds-table-new@1.4.2) (2026-05-27)
 
 **Note:** Version bump only for package @synerise/ds-table-new

package/dist/Table.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableProps } from './Table.types';
-export declare const Table: <TData extends object, TValue>({ data, columns, texts: defaultTexts, selectionConfig, isLoading, selectedRowKeys, pagination, matchesSearchQuery, filterData, onSearchQueryChange, searchProps, expandable, rowKey, onSort, tableRef, ...props }: TableProps<TData, TValue>) => React.JSX.Element;
+export declare const Table: <TData extends object, TValue>({ data, columns, texts: defaultTexts, selectionConfig, isLoading, selectedRowKeys, pagination, matchesSearchQuery, filterData, onSearchQueryChange, searchProps, expandable, rowKey, onSort, tableRef, stickyHeader, ...props }: TableProps<TData, TValue>) => React.JSX.Element;

package/dist/Table.js

@@ -1,7 +1,9 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useMemo, useImperativeHandle } from "react";
+import { useRef, useState, useMemo, useImperativeHandle } from "react";
+import { DEFAULT_STICKY_VALUE } from "./Table.const.js";
 import { BaseTable } from "./components/BaseTable/BaseTable.js";
 import { SelectionContext } from "./contexts/SelectionContext.js";
+import { StickyContext } from "./contexts/StickyContext.js";
 import { TableContext } from "./contexts/TableContext.js";
 import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
 import { useTable } from "./hooks/useTable.js";
@@ -24,10 +26,12 @@ const Table = ({
   rowKey,
   onSort,
   tableRef,
+  stickyHeader,
   ...props
 }) => {
   const texts = useDefaultTexts(defaultTexts);
   const wrapperRef = useRef(null);
+  const [stickyData, setStickyData] = useState(DEFAULT_STICKY_VALUE);
   const hasSelection = !!selectionConfig;
   const processedColumns = useMemo(() => {
     return columns.length ? processColumns(columns, hasSelection, texts) : columns;
@@ -72,7 +76,11 @@ const Table = ({
     table,
     getScrollContainer: () => null
   }), [table]);
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { texts, isLoading: effectiveIsLoading, hasPagination, paginationProps, tableOuterRef: wrapperRef, selectedRowKeys, columnSizing, isColumnSizingReady, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, ...props }) }) });
+  const stickyValue = useMemo(() => stickyHeader ? {
+    stickyData,
+    setStickyData
+  } : null, [stickyData, stickyHeader]);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { texts, isLoading: effectiveIsLoading, hasPagination, paginationProps, tableOuterRef: wrapperRef, selectedRowKeys, columnSizing, isColumnSizingReady, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, expandable, ...props }) }) }) });
 };
 export {
   Table

package/dist/Table.types.d.ts

@@ -1,5 +1,5 @@
 import { PaginationProps } from 'antd';
-import { HTMLAttributes, MouseEvent, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
+import { CSSProperties, HTMLAttributes, MouseEvent, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
 import { SearchInputProps } from '@synerise/ds-search';
 import { TooltipProps } from '@synerise/ds-tooltip';
 import { Column, ColumnDef, ColumnMeta, Row, RowData } from '@tanstack/react-table';
@@ -65,6 +65,44 @@ export type DSTableProps<TData, TValue = unknown> = SharedTableProps<TData, TVal
 export type Expandable<TData> = {
     childrenColumnName?: keyof TData;
     expandedRowKeys?: string[];
+    /**
+     * Render custom content directly below an expanded parent row.
+     * Result is wrapped in an extra `<tr>` containing a single `<td>` that
+     * spans every visible column (including the selection column when enabled).
+     *
+     * Currently honored by `Table` (non-virtual). `VirtualTable` ignores this
+     * prop because variable-height expanded rows require dynamic virtualization
+     * sizing not yet implemented.
+     *
+     * Signature mirrors antd 4 / legacy `@synerise/ds-table`:
+     * `(record, index, indent, expanded) => ReactNode`.
+     */
+    expandedRowRender?: (record: TData, index: number, indent: number, expanded: boolean) => ReactNode;
+    /**
+     * When true, clicking anywhere on a row toggles its expanded state.
+     * Composes with `onRowClick` and any `onClick` from `getRowProps` — call
+     * `event.preventDefault()` from those handlers to suppress the toggle.
+     *
+     * For uncontrolled use (no `expandedRowKeys`) the table updates internal
+     * expansion state itself. For controlled use, the toggle is delivered via
+     * `onExpand` and the consumer is responsible for updating `expandedRowKeys`.
+     *
+     * Suppressed for rows where `rowExpandable(record)` returns false.
+     */
+    expandRowByClick?: boolean;
+    /**
+     * Returns false to mark a row as non-expandable. Hides the expander UI in
+     * `TreeTable` and suppresses `expandRowByClick` for that row. Rows whose
+     * predicate returns undefined / true are considered expandable.
+     */
+    rowExpandable?: (record: TData) => boolean;
+    /**
+     * Fires when a row's expanded state changes via `expandRowByClick`.
+     * Receives the new expanded state and the row's record. In controlled mode
+     * (when `expandedRowKeys` is set) consumers must use this to update their
+     * source of truth.
+     */
+    onExpand?: (expanded: boolean, record: TData) => void;
 };
 /**
  * Table props shared virtual & non-virtual
@@ -94,6 +132,8 @@ export type SharedTableProps<TData, TValue> = {
     cellHeight?: number;
     /** optional className for styled-components composition */
     className?: string;
+    /** inline styles applied to the outermost table wrapper element */
+    style?: CSSProperties;
     /**
      * renders in table header next to title and counter when there's any selected rows
      * useful for rendering batch action items
@@ -220,6 +260,18 @@ export type SharedTableProps<TData, TValue> = {
      * render table with rounded corners and shadow
      */
     cardStyles?: boolean;
+    /**
+     * When true, the column header row uses `position: sticky` and stays pinned
+     * to the top of the nearest scrollable ancestor as the user scrolls.
+     *
+     * On `VirtualTable` this also switches the scroll element to the table's own
+     * container (or `scrollElementRef`) so the header sticks under the title bar.
+     *
+     * On `Table` (paginated) there is no internal scroll container — the header
+     * sticks to whatever ancestor scrolls in the consumer's layout (typically
+     * the page). The pagination footer flows below the body as normal.
+     */
+    stickyHeader?: boolean;
     /**
      * set to true to prevent rendering column header row with column names
      */
@@ -309,7 +361,6 @@ type VirtualProps = {
      * disables sorting - relies on data being provided pre-sorted
      */
     infiniteScroll?: InfiniteScrollProps;
-    stickyHeader?: boolean;
     onItemsRendered?: (props: OnItemsRenderedProps) => void;
     scrollElementRef?: MutableRefObject<HTMLDivElement | null>;
     onScrollToRecordIndex?: (recordIndex: number, callback?: () => void) => void;
@@ -447,7 +498,7 @@ export type CustomCounterArgs = {
     content: ReactNode;
 };
 export type CustomCounterFn = (props: CustomCounterArgs) => ReactNode;
-export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps'> & {
+export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'expandable'> & {
     texts: TableBodyTexts;
 };
 export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent'> & {
@@ -512,7 +563,7 @@ export type TableRowProps<TData> = {
     isSelected?: boolean;
     isExpanded?: boolean;
     isParentExpanded?: boolean;
-} & Pick<SharedTableProps<TData, unknown>, 'onRowClick' | 'getRowProps' | 'getRowTooltipProps'>;
+} & Pick<SharedTableProps<TData, unknown>, 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'expandable'>;
 export type TableRowVirtualProps<TData> = TableRowProps<TData> & {
     cellHeight: number;
     virtual: VirtualItem;

package/dist/VirtualTable.js

@@ -245,7 +245,7 @@ const VirtualTable = ({
     rowVirtualizer.scrollToOffset(0);
   }, [onBackToTop, rowVirtualizer]);
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, children: /* @__PURE__ */ jsxs(SelectionContext.Provider, { value: selectionConfig, children: [
-    /* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading: effectiveIsLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, cellHeight, ...props }),
+    /* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading: effectiveIsLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, cellHeight, expandable, ...props }),
     showBackToTopButton && /* @__PURE__ */ jsx(BackToTopButton, { label: texts.infiniteScrollBackToTop, onClick: handleBackToTop, scrollContainerRef: scrollableContainerRef, hasData: !tableIsEmpty && columns.length > 0, threshold: (stickyData.titleBarHeight || 0) + (Number.isFinite(stickyData.containerPaddingTop) ? stickyData.containerPaddingTop : 0) })
   ] }) }) });
 };

package/dist/components/BaseTable/BaseTable.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { BaseTableProps, TableInternalProps } from '../../Table.types';
-export declare const BaseTable: <TData extends object, TValue>({ infiniteScroll, cellHeight, className, itemsMenu, texts, isCounterLoading, isLoading, rowKey, title, hideTitleBar, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerWithBorderTop, emptyDataComponent, headerButton, hideColumnNames, expandable, columnSizing, isColumnSizingReady, paginationProps, hasPagination, disableColumnNamesLineBreak, dataSourceTotalCount, cardStyles, tableOuterRef, withScroll, withBodyScroll, maxHeight, tableBodyScrollRef, onRowClick, getRowProps, getRowTooltipProps, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, summary, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;
+export declare const BaseTable: <TData extends object, TValue>({ infiniteScroll, cellHeight, className, style, itemsMenu, texts, isCounterLoading, isLoading, rowKey, title, hideTitleBar, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerWithBorderTop, emptyDataComponent, headerButton, hideColumnNames, expandable, columnSizing, isColumnSizingReady, paginationProps, hasPagination, disableColumnNamesLineBreak, dataSourceTotalCount, cardStyles, tableOuterRef, withScroll, withBodyScroll, maxHeight, tableBodyScrollRef, onRowClick, getRowProps, getRowTooltipProps, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, summary, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;

package/dist/components/BaseTable/BaseTable.js

@@ -14,6 +14,7 @@ const BaseTable = ({
   infiniteScroll,
   cellHeight = DEFAULT_CELL_HEIGHT,
   className,
+  style,
   itemsMenu,
   texts,
   isCounterLoading,
@@ -85,9 +86,10 @@ const BaseTable = ({
     maxHeight,
     tableBodyScrollRef,
     addNode,
-    isEmpty
+    isEmpty,
+    expandable
   };
-  return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing: useColgroupLayout ? {} : columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: useColgroupLayout ? void 0 : size, children: [
+  return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing: useColgroupLayout ? {} : columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: useColgroupLayout ? void 0 : size, style, children: [
     /* @__PURE__ */ jsxs(TableContainer, { ref: tableOuterRef, className, withBorderTop: headerWithBorderTop, cardStyles, withScroll, $maxHeight: maxHeight, "data-testid": "ds-table-container", children: [
       !hideTitleBar && /* @__PURE__ */ jsx(TableHeader, { itemsMenu, texts, childrenColumnName: expandable?.childrenColumnName, isCounterLoading, isLoading, rowKey, title, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerButton, dataSourceTotalCount, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps }),
       useUnifiedScroll ? /* @__PURE__ */ jsx(UnifiedTableContent, { useColgroupLayout, ...contentProps }) : /* @__PURE__ */ jsx(StickyTableContent, { ...contentProps }),

package/dist/components/BaseTable/BaseTable.styles.js

@@ -4,7 +4,7 @@ import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalS
 const BaseTableWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BaseTablestyles__BaseTableWrapper",
   componentId: "sc-1oa5lc2-0"
-})(["", " --table-size:", ";", " position:relative;z-index:1;"], (props) => css(["", ""], Object.entries(props.columnSizing || {}).map(([key, value]) => `--${key}-width: ${value}px;`).join("\n")), (props) => !props.isEmpty && props.$size ? `${props.$size}px` : "100%", (props) => !props.$isColumnSizingReady && `opacity: 0;`);
+})(["", " --table-size:", ";", " position:relative;z-index:1;.ant-pagination .ant-pagination-total-text strong{font-weight:500;}"], (props) => css(["", ""], Object.entries(props.columnSizing || {}).map(([key, value]) => `--${key}-width: ${value}px;`).join("\n")), (props) => !props.isEmpty && props.$size ? `${props.$size}px` : "100%", (props) => !props.$isColumnSizingReady && `opacity: 0;`);
 const TableContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BaseTablestyles__TableContainer",
   componentId: "sc-1oa5lc2-1"

package/dist/components/BaseTable/StickyTableContent.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { BaseTableProps, TableInternalProps } from '../../Table.types';
-export type StickyTableContentProps<TData, TValue> = Pick<BaseTableProps<TData, TValue> & TableInternalProps, 'infiniteScroll' | 'texts' | 'isLoading' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'summary' | 'hideColumnNames' | 'disableColumnNamesLineBreak' | 'withBodyScroll' | 'maxHeight' | 'tableBodyScrollRef'> & {
+export type StickyTableContentProps<TData, TValue> = Pick<BaseTableProps<TData, TValue> & TableInternalProps, 'infiniteScroll' | 'texts' | 'isLoading' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'summary' | 'hideColumnNames' | 'disableColumnNamesLineBreak' | 'withBodyScroll' | 'maxHeight' | 'tableBodyScrollRef' | 'expandable'> & {
     cellHeight: number;
     addNode: (node: HTMLDivElement | null) => void;
     isEmpty: boolean;
 };
-export declare const StickyTableContent: <TData extends object, TValue>({ infiniteScroll, cellHeight, texts, isLoading, emptyDataComponent, onRowClick, getRowProps, getRowTooltipProps, summary, hideColumnNames, disableColumnNamesLineBreak, withBodyScroll, maxHeight, tableBodyScrollRef, addNode, isEmpty, }: StickyTableContentProps<TData, TValue>) => React.JSX.Element;
+export declare const StickyTableContent: <TData extends object, TValue>({ infiniteScroll, cellHeight, texts, isLoading, emptyDataComponent, onRowClick, getRowProps, getRowTooltipProps, summary, hideColumnNames, disableColumnNamesLineBreak, withBodyScroll, maxHeight, tableBodyScrollRef, addNode, isEmpty, expandable, }: StickyTableContentProps<TData, TValue>) => React.JSX.Element;

package/dist/components/BaseTable/StickyTableContent.js

@@ -23,7 +23,8 @@ const StickyTableContent = ({
   maxHeight,
   tableBodyScrollRef,
   addNode,
-  isEmpty
+  isEmpty,
+  expandable
 }) => {
   const {
     table,
@@ -57,7 +58,7 @@ const StickyTableContent = ({
     tableBodyWrapperRef.current = element;
     addNode(element);
   }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-table", children: [
-    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body"),
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps, expandable }, "table-body"),
     !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
   ] }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/BaseTable/UnifiedTableContent.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 import { BaseTableProps, TableInternalProps } from '../../Table.types';
-export type UnifiedTableContentProps<TData, TValue> = Pick<BaseTableProps<TData, TValue> & TableInternalProps, 'infiniteScroll' | 'texts' | 'isLoading' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'summary' | 'hideColumnNames' | 'disableColumnNamesLineBreak' | 'withBodyScroll' | 'maxHeight' | 'tableBodyScrollRef'> & {
+export type UnifiedTableContentProps<TData, TValue> = Pick<BaseTableProps<TData, TValue> & TableInternalProps, 'infiniteScroll' | 'texts' | 'isLoading' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'summary' | 'hideColumnNames' | 'disableColumnNamesLineBreak' | 'withBodyScroll' | 'maxHeight' | 'tableBodyScrollRef' | 'expandable'> & {
     cellHeight: number;
     addNode: (node: HTMLDivElement | null) => void;
     isEmpty: boolean;
     useColgroupLayout: boolean;
 };
-export declare const UnifiedTableContent: <TData extends object, TValue>({ infiniteScroll, cellHeight, texts, isLoading, emptyDataComponent, onRowClick, getRowProps, getRowTooltipProps, summary, hideColumnNames, disableColumnNamesLineBreak, withBodyScroll, maxHeight, tableBodyScrollRef, addNode, isEmpty, useColgroupLayout, }: UnifiedTableContentProps<TData, TValue>) => React.JSX.Element;
+export declare const UnifiedTableContent: <TData extends object, TValue>({ infiniteScroll, cellHeight, texts, isLoading, emptyDataComponent, onRowClick, getRowProps, getRowTooltipProps, summary, hideColumnNames, disableColumnNamesLineBreak, withBodyScroll, maxHeight, tableBodyScrollRef, addNode, isEmpty, useColgroupLayout, expandable, }: UnifiedTableContentProps<TData, TValue>) => React.JSX.Element;

package/dist/components/BaseTable/UnifiedTableContent.js

@@ -24,7 +24,8 @@ const UnifiedTableContent = ({
   tableBodyScrollRef,
   addNode,
   isEmpty,
-  useColgroupLayout
+  useColgroupLayout,
+  expandable
 }) => {
   const {
     table
@@ -36,7 +37,7 @@ const UnifiedTableContent = ({
   }, nativeScrollbar: useColgroupLayout, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-table", $tableLayoutAuto: useColgroupLayout, children: [
     useColgroupLayout && !isEmpty && /* @__PURE__ */ jsx("colgroup", { children: table.getVisibleLeafColumns().map((column, index) => /* @__PURE__ */ jsx("col", { style: getUnifiedColumnSizingStyle(column) }, column.id ?? `col-${index}`)) }),
     !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }),
-    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body"),
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps, expandable }, "table-body"),
     !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
   ] }) });
   return withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: body }) : body;

package/dist/components/Cell/Copyable/Copyable.types.d.ts

@@ -1,8 +1,14 @@
+import { TooltipProps } from '@synerise/ds-tooltip';
 import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type BaseCopyableCellProps = {
     value: string;
     confirmMessage: string;
     tooltipTimeout: number;
+    /**
+     * Tooltip placement for the copy icon's confirmation tooltip.
+     * @default 'top'
+     */
+    placement?: TooltipProps['placement'];
 };
 export type CopyableCellProps = WithHTMLAttributes<HTMLDivElement, BaseCopyableCellProps>;
 /**

package/dist/components/Cell/Copyable/CopyableCell.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { CopyableCellProps } from './Copyable.types';
-declare const CopyableCell: ({ value, confirmMessage, tooltipTimeout, ...htmlAttributes }: CopyableCellProps) => React.JSX.Element;
+declare const CopyableCell: ({ value, confirmMessage, tooltipTimeout, placement, ...htmlAttributes }: CopyableCellProps) => React.JSX.Element;
 export { CopyableCell };

package/dist/components/Cell/Copyable/CopyableCell.js

@@ -7,6 +7,7 @@ const CopyableCell = ({
   value,
   confirmMessage,
   tooltipTimeout = DEFAULT_TIMEOUT,
+  placement = "top",
   ...htmlAttributes
 }) => {
   const [tooltipVisible, setTooltipVisible] = useState(false);
@@ -18,7 +19,7 @@ const CopyableCell = ({
   }, [tooltipVisible, setTooltipVisible, tooltipTimeout]);
   return /* @__PURE__ */ jsxs(Copyable, { ...htmlAttributes, children: [
     /* @__PURE__ */ jsx(CopyableValue, { children: value }),
-    /* @__PURE__ */ jsx(CopyIcon, { copyValue: value, placement: "left", texts: {
+    /* @__PURE__ */ jsx(CopyIcon, { copyValue: value, placement, texts: {
       copiedTooltip: confirmMessage
     } })
   ] });

package/dist/components/TableBody/TableBody.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableBodyProps } from '../../Table.types';
-export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowProps, getRowTooltipProps, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;
+export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowProps, getRowTooltipProps, emptyDataComponent, texts, expandable, }: TableBodyProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableBody/TableBody.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
 import { DEFAULT_CELL_HEIGHT } from "../../Table.const.js";
 import { useTableContext } from "../../contexts/TableContext.js";
-import { TBody } from "./TableBody.styles.js";
+import { TBody, ExpandedContentRow, ExpandedContentCell } from "./TableBody.styles.js";
 import { TableEmptyBody } from "./TableEmptyBody/TableEmptyBody.js";
 import { TableRow } from "./TableRow/TableRow.js";
 import { TableRowVirtual } from "./TableRow/TableRowVirtual.js";
@@ -12,7 +13,8 @@ const TableBody = ({
   getRowProps,
   getRowTooltipProps,
   emptyDataComponent,
-  texts
+  texts,
+  expandable
 }) => {
   const {
     table,
@@ -40,14 +42,26 @@ const TableBody = ({
     height: `${rowVirtualizer.getTotalSize()}px`,
     position: "relative"
   } : void 0, children: rowVirtualizer && virtualItems.length ? (
-    // Virtualized: place spacer and absolutely-positioned rows
+    // Virtualized: place spacer and absolutely-positioned rows.
+    // Note: `expandedRowRender` is not honored in virtual mode because
+    // variable-height expanded rows are not yet integrated with the
+    // virtualizer's size estimation.
     virtualItems.map((virtual) => {
       const row = allRows[virtual.index];
-      return /* @__PURE__ */ jsx(TableRowVirtual, { virtual, cellHeight, row, texts, onRowClick, getRowProps, getRowTooltipProps, rowIndex: virtual.index, infiniteScroll, isLast: virtual.index === allRows.length - 1, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id);
+      return /* @__PURE__ */ jsx(TableRowVirtual, { virtual, cellHeight, row, texts, onRowClick, getRowProps, getRowTooltipProps, expandable, rowIndex: virtual.index, infiniteScroll, isLast: virtual.index === allRows.length - 1, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id);
     })
   ) : (
-    // Non-virtualized: render all rows in the normal flow
-    allRows.map((row) => /* @__PURE__ */ jsx(TableRow, { onRowClick, getRowProps, getRowTooltipProps, row, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id))
+    // Non-virtualized: render rows + optional expanded-content row after
+    // each expanded parent (mirrors antd's expandedRowRender behavior).
+    allRows.map((row) => {
+      const isExpanded = row.getIsExpanded();
+      const canExpand = !expandable?.rowExpandable || expandable.rowExpandable(row.original);
+      const expandedContent = expandable?.expandedRowRender && isExpanded && canExpand ? expandable.expandedRowRender(row.original, row.index, row.depth, isExpanded) : null;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(TableRow, { onRowClick, getRowProps, getRowTooltipProps, expandable, row, isSelected: row.getIsSelected(), isExpanded, isParentExpanded: row.getIsAllParentsExpanded() }),
+        expandedContent !== null && /* @__PURE__ */ jsx(ExpandedContentRow, { "data-key": `${row.id}-expanded`, "data-row-expanded-content": "true", role: "row", children: /* @__PURE__ */ jsx(ExpandedContentCell, { colSpan: row.getVisibleCells().length, children: expandedContent }) })
+      ] }, row.id);
+    })
   ) }, "virtual-table-body") : /* @__PURE__ */ jsx(TableEmptyBody, { emptyDataComponent, texts });
 };
 export {

package/dist/components/TableBody/TableBody.styles.d.ts

@@ -1,2 +1,4 @@
 export declare const Tr: import('styled-components').StyledComponent<"tr", any, {}, never>;
 export declare const TBody: import('styled-components').StyledComponent<"tbody", any, {}, never>;
+export declare const ExpandedContentRow: import('styled-components').StyledComponent<"tr", any, {}, never>;
+export declare const ExpandedContentCell: import('styled-components').StyledComponent<"td", any, {}, never>;

package/dist/components/TableBody/TableBody.styles.js

@@ -9,7 +9,17 @@ const TBody = /* @__PURE__ */ styled.tbody.withConfig({
   displayName: "TableBodystyles__TBody",
   componentId: "sc-1dty8xx-1"
 })(["position:relative;display:block;"]);
+const ExpandedContentRow = /* @__PURE__ */ styled.tr.withConfig({
+  displayName: "TableBodystyles__ExpandedContentRow",
+  componentId: "sc-1dty8xx-2"
+})(["background:", ";"], (props) => props.theme.palette["white"]);
+const ExpandedContentCell = /* @__PURE__ */ styled.td.withConfig({
+  displayName: "TableBodystyles__ExpandedContentCell",
+  componentId: "sc-1dty8xx-3"
+})(["padding:0;background:", ";border-bottom:1px solid ", ";position:relative;tr:hover &{background:", ";}&:before{position:absolute;width:2px;height:100%;left:0;top:0;background-color:", ";content:'';}"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["grey-200"], (props) => props.theme.palette["grey-100"], (props) => props.theme.palette["grey-600"]);
 export {
+  ExpandedContentCell,
+  ExpandedContentRow,
   TBody,
   Tr
 };

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.js

@@ -11,7 +11,7 @@ const TableEmptyBody = ({
     table
   } = useTableContext();
   const colSpan = table.getAllLeafColumns().length;
-  return /* @__PURE__ */ jsx(TBody, { className: "ds-table-body", children: /* @__PURE__ */ jsx(Tr, { className: "ds-table-row", children: /* @__PURE__ */ jsx(Td, { colSpan, className: "ds-table-cell", children: /* @__PURE__ */ jsx(TableEmptyBodyWrapper, { children: emptyDataComponent !== void 0 ? emptyDataComponent : /* @__PURE__ */ jsx(Result, { description: texts.emptyText || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TABLE.EMPTY_TEXT" }), type: "no-results", noSearchResults: true }) }) }) }) });
+  return /* @__PURE__ */ jsx(TBody, { className: "ds-table-body", children: /* @__PURE__ */ jsx(Tr, { className: "ds-table-row", children: /* @__PURE__ */ jsx(Td, { colSpan, className: "ds-table-cell", children: /* @__PURE__ */ jsx(TableEmptyBodyWrapper, { children: emptyDataComponent !== void 0 ? emptyDataComponent : /* @__PURE__ */ jsx(Result, { description: texts.emptyText || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TABLE.EMPTY_TEXT" }), type: "no-results" }) }) }) }) });
 };
 export {
   TableEmptyBody

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.styles.js

@@ -14,7 +14,7 @@ const TBody = /* @__PURE__ */ styled.tbody.withConfig({
 const TableEmptyBodyWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableEmptyBodystyles__TableEmptyBodyWrapper",
   componentId: "sc-14kyiyc-3"
-})(["min-height:160px;display:flex;align-items:center;"]);
+})(["min-height:160px;display:flex;align-items:center;justify-content:center;"]);
 export {
   TBody,
   TableEmptyBodyWrapper,

package/dist/components/TableBody/TableRow/TableRow.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableRowProps } from '../../../Table.types';
-export declare const TableRow: <TData extends object>({ row, onRowClick, getRowProps, getRowTooltipProps, }: TableRowProps<TData>) => React.JSX.Element;
+export declare const TableRow: <TData extends object>({ row, onRowClick, getRowProps, getRowTooltipProps, expandable, }: TableRowProps<TData>) => React.JSX.Element;

package/dist/components/TableBody/TableRow/TableRow.js

@@ -10,7 +10,8 @@ const TableRow = ({
   row,
   onRowClick,
   getRowProps,
-  getRowTooltipProps
+  getRowTooltipProps,
+  expandable
 }) => {
   const isUnifiedTableContent = !useStickyContext();
   const customRowProps = getRowProps?.(row.original) ?? {};
@@ -18,8 +19,15 @@ const TableRow = ({
     onClick: customOnClick,
     ...restCustomRowProps
   } = customRowProps;
-  const mergedOnClick = onRowClick || customOnClick ? (event) => {
+  const canExpand = !expandable?.rowExpandable || expandable.rowExpandable(row.original);
+  const togglesOnRowClick = !!expandable?.expandRowByClick && canExpand;
+  const mergedOnClick = onRowClick || customOnClick || togglesOnRowClick ? (event) => {
     customOnClick?.(event);
+    if (togglesOnRowClick && !event.isDefaultPrevented()) {
+      const nextExpanded = !row.getIsExpanded();
+      row.toggleExpanded();
+      expandable?.onExpand?.(nextExpanded, row.original);
+    }
     if (onRowClick && !event.isDefaultPrevented()) {
       event.stopPropagation();
       onRowClick(row.original, event);

package/dist/components/TableBody/TableRow/TableRowVirtual.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
 import { TableRowVirtualProps } from '../../../Table.types';
-declare const TableRowVirtualInner: <TData extends object>({ cellHeight, rowIndex, virtual, infiniteScroll, texts, row, isLast, onRowClick, getRowProps, getRowTooltipProps, isExpanded: _isExpanded, isParentExpanded, }: TableRowVirtualProps<TData>) => React.JSX.Element;
+declare const TableRowVirtualInner: <TData extends object>({ cellHeight, rowIndex, virtual, infiniteScroll, texts, row, isLast, onRowClick, getRowProps, getRowTooltipProps, isExpanded: _isExpanded, isParentExpanded, expandable, }: TableRowVirtualProps<TData>) => React.JSX.Element;
 export declare const TableRowVirtual: typeof TableRowVirtualInner;
 export {};

package/dist/components/TableBody/TableRow/TableRowVirtual.js

@@ -20,7 +20,8 @@ const TableRowVirtualInner = ({
   getRowProps,
   getRowTooltipProps,
   isExpanded: _isExpanded,
-  isParentExpanded
+  isParentExpanded,
+  expandable
 }) => {
   const {
     rowVirtualizer
@@ -72,8 +73,15 @@ const TableRowVirtualInner = ({
     style: customStyle,
     ...restCustomRowProps
   } = customRowProps;
-  const mergedOnClick = onRowClick || customOnClick ? (event) => {
+  const canExpand = !expandable?.rowExpandable || expandable.rowExpandable(row.original);
+  const togglesOnRowClick = !!expandable?.expandRowByClick && canExpand;
+  const mergedOnClick = onRowClick || customOnClick || togglesOnRowClick ? (event) => {
     customOnClick?.(event);
+    if (togglesOnRowClick && !event.isDefaultPrevented()) {
+      const nextExpanded = !row.getIsExpanded();
+      row.toggleExpanded();
+      expandable?.onExpand?.(nextExpanded, row.original);
+    }
     if (onRowClick && !event.isDefaultPrevented()) {
       event.stopPropagation();
       onRowClick(row.original, event);

package/dist/components/TreeTable/TreeTable.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TreeTableProps } from './TreeTable.types';
-export declare const TreeTable: <TData extends object, TValue>({ data, columns, childrenColumnName, defaultExpandAllRows, expandedRowKeys: controlledExpandedKeys, onExpandRow, expandIconColumnIndex, hideExpandIcon, rowKey, ...props }: TreeTableProps<TData, TValue>) => React.JSX.Element;
+export declare const TreeTable: <TData extends object, TValue>({ data, columns, childrenColumnName, defaultExpandAllRows, expandedRowKeys: controlledExpandedKeys, onExpandRow, expandIconColumnIndex, hideExpandIcon, rowKey, style, rowExpandable, ...props }: TreeTableProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TreeTable/TreeTable.js

@@ -29,6 +29,8 @@ const TreeTable = ({
   expandIconColumnIndex = 0,
   hideExpandIcon = false,
   rowKey,
+  style,
+  rowExpandable,
   ...props
 }) => {
   const childrenKey = childrenColumnName ?? "children";
@@ -81,11 +83,12 @@ const TreeTable = ({
           const rowId = getRowKey(rowData);
           const isParent = hasChildren(rowData);
           const isExpanded = expandedKeys.includes(rowId);
+          const canExpand = !rowExpandable || rowExpandable(rowData);
           const indents = Array.from({
             length: depth
           }, (_, i) => /* @__PURE__ */ jsx(IndentBar, { $level: i, $active: i + 1 === depth }, i));
           const originalCell = typeof col.cell === "function" ? col.cell(info) : info.getValue();
-          const rowPrefix = isParent && !hideExpandIcon ? /* @__PURE__ */ jsx(Expander, { expanded: isExpanded, onClick: (e) => {
+          const rowPrefix = isParent && canExpand && !hideExpandIcon ? /* @__PURE__ */ jsx(Expander, { expanded: isExpanded, onClick: (e) => {
             e.stopPropagation();
             toggleExpand(rowId);
           } }) : depth > 0 ? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ChildRowLeftDownM, {}), color: theme.palette["grey-400"] }) : null;
@@ -98,8 +101,8 @@ const TreeTable = ({
         }
       };
     });
-  }, [columns, expandIconColumnIndex, getRowKey, hasChildren, expandedKeys, toggleExpand, hideExpandIcon]);
-  return /* @__PURE__ */ jsx(TreeTableRoot, { children: /* @__PURE__ */ jsx(Table, { data, columns: treeColumns, rowKey, expandable: {
+  }, [columns, expandIconColumnIndex, getRowKey, hasChildren, expandedKeys, toggleExpand, hideExpandIcon, rowExpandable]);
+  return /* @__PURE__ */ jsx(TreeTableRoot, { style, children: /* @__PURE__ */ jsx(Table, { data, columns: treeColumns, rowKey, expandable: {
     childrenColumnName: childrenKey,
     expandedRowKeys: expandedKeys
   }, ...props }) });

package/dist/components/TreeTable/TreeTable.types.d.ts

@@ -32,4 +32,10 @@ export type TreeTableProps<TData, TValue> = Omit<TableProps<TData, TValue>, 'exp
      * @default false
      */
     hideExpandIcon?: boolean;
+    /**
+     * Returns false to mark a row as non-expandable. Hides the expander button
+     * for that row while preserving indentation. Rows whose predicate returns
+     * undefined / true keep the expander UI as normal.
+     */
+    rowExpandable?: (record: TData) => boolean;
 };

package/dist/hooks/useTable.js

@@ -140,6 +140,7 @@ const useTable = ({
   const getSubRows = useCallback((row) => {
     return row[childrenColumnName];
   }, [childrenColumnName]);
+  const isExpansionControlled = !!expandable?.expandedRowKeys;
   const expandedKeys = expandable?.expandedRowKeys ? arrayToTrueMap(expandable?.expandedRowKeys) : void 0;
   const table = useReactTable({
     // Override TanStack's built-in sizing defaults (size: 150, minSize: 20,
@@ -162,8 +163,14 @@ const useTable = ({
     getExpandedRowModel: expandable ? getExpandedRowModel() : void 0,
     getGroupedRowModel: getGroupedRowModel(),
     onRowSelectionChange: handleSelectionChange,
-    onExpandedChange: () => {
-    },
+    // Swallow TanStack's expansion writes only when the consumer is the source
+    // of truth (controlled via `expandable.expandedRowKeys`). For uncontrolled
+    // use (e.g. `expandable.expandRowByClick` without `expandedRowKeys`) we
+    // omit this so `row.toggleExpanded()` can update the internal state.
+    ...isExpansionControlled ? {
+      onExpandedChange: () => {
+      }
+    } : {},
     onSortingChange: handleSortingChange,
     enableRowSelection: (row) => {
       const {
@@ -172,14 +179,16 @@ const useTable = ({
       } = selectionConfig?.checkRowSelectionStatus?.(row.original) || {};
       return !!selectionConfig && !unavailable && !disabled;
     },
-    manualExpanding: !!expandable?.expandedRowKeys,
+    manualExpanding: isExpansionControlled,
     initialState: {
       columnPinning: {
         right: rightPinnedColumns,
         left: leftPinnedColumns
       },
       ...paginationInitialState,
-      expanded: expandedKeys
+      ...isExpansionControlled ? {
+        expanded: expandedKeys
+      } : {}
     },
     state: {
       columnPinning: {
@@ -188,7 +197,11 @@ const useTable = ({
       },
       sorting,
       rowSelection,
-      expanded: expandedKeys
+      // Only project expanded into TanStack state when controlled — otherwise
+      // TanStack keeps and manages its own internal state.
+      ...isExpansionControlled ? {
+        expanded: expandedKeys
+      } : {}
     }
   });
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -43,28 +43,28 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-badge": "^1.0.55",
-    "@synerise/ds-button": "^1.5.31",
-    "@synerise/ds-checkbox": "^1.2.32",
-    "@synerise/ds-copy-icon": "^1.2.13",
-    "@synerise/ds-dropdown": "^1.3.14",
+    "@synerise/ds-badge": "^1.0.56",
+    "@synerise/ds-button": "^1.5.32",
+    "@synerise/ds-checkbox": "^1.2.33",
+    "@synerise/ds-copy-icon": "^1.2.14",
+    "@synerise/ds-dropdown": "^1.3.15",
     "@synerise/ds-flag": "^1.0.12",
-    "@synerise/ds-icon": "^1.18.2",
-    "@synerise/ds-inline-alert": "^1.1.25",
-    "@synerise/ds-input": "^1.7.9",
-    "@synerise/ds-input-number": "^1.2.46",
+    "@synerise/ds-icon": "^1.18.3",
+    "@synerise/ds-inline-alert": "^1.1.26",
+    "@synerise/ds-input": "^1.7.10",
+    "@synerise/ds-input-number": "^1.2.47",
     "@synerise/ds-loader": "^1.0.17",
-    "@synerise/ds-modal": "^1.5.1",
-    "@synerise/ds-pagination": "^1.0.66",
-    "@synerise/ds-result": "^1.0.62",
-    "@synerise/ds-scrollbar": "^1.4.1",
-    "@synerise/ds-search": "^1.5.27",
-    "@synerise/ds-skeleton": "^1.0.56",
-    "@synerise/ds-tag": "^1.4.29",
-    "@synerise/ds-tags": "^1.5.43",
-    "@synerise/ds-tooltip": "^1.5.1",
-    "@synerise/ds-typography": "^1.1.24",
-    "@synerise/ds-utils": "^1.9.1",
+    "@synerise/ds-modal": "^1.6.0",
+    "@synerise/ds-pagination": "^1.0.67",
+    "@synerise/ds-result": "^1.0.63",
+    "@synerise/ds-scrollbar": "^1.5.0",
+    "@synerise/ds-search": "^1.5.28",
+    "@synerise/ds-skeleton": "^1.0.57",
+    "@synerise/ds-tag": "^1.4.30",
+    "@synerise/ds-tags": "^1.5.44",
+    "@synerise/ds-tooltip": "^1.5.2",
+    "@synerise/ds-typography": "^1.1.25",
+    "@synerise/ds-utils": "^1.10.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
     "unit-to-px": "^1.0.5",
@@ -80,5 +80,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "b95ec2ba9c2c12116a41d82cedfe2b973c370449"
+  "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
 }