@synerise/ds-table-new 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.1...@synerise/ds-table-new@1.0.2) (2026-04-20)
+
+**Note:** Version bump only for package @synerise/ds-table-new
+
 ## [1.0.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@0.1.0...@synerise/ds-table-new@1.0.1) (2026-04-14)
 
 ### Bug Fixes

package/README.md

@@ -86,7 +86,11 @@ import { VirtualTable } from '@synerise/ds-table-new';
 | `className` | CSS class for styled-components composition | `string` | - |
 | `showHeader` | Show or hide the table header bar | `boolean` | - |
 | `itemsMenu` | Rendered next to title when rows are selected (batch actions) | `ReactNode` | - |
-| `searchComponent` | Search input rendered on the right side of the header | `ReactNode` | - |
+| `matchesSearchQuery` | Pure predicate for built-in search — table manages query state and renders SearchInput | `(query: string, row: TData) => boolean` | - |
+| `searchProps` | Override SearchInput defaults when using built-in search (placeholder, clearTooltip, etc.) | `Partial<SearchInputProps>` | - |
+| `onSearchQueryChange` | Callback fired when internal search query changes (built-in search only) | `(query: string) => void` | - |
+| `filterData` | Closure-based filter for custom search — table filters internally, consumer manages query state | `(row: TData) => boolean` | - |
+| `searchComponent` | Custom search UI rendered in the header — replaces built-in SearchInput when provided | `ReactNode` | - |
 | `filterComponent` | Filter controls rendered on the right side of the header | `ReactNode` | - |
 | `headerButton` | Button rendered in the header | `ReactNode` | - |
 | `cardStyles` | Render table with rounded corners and shadow | `boolean` | - |
@@ -136,6 +140,58 @@ import { VirtualTable } from '@synerise/ds-table-new';
 | `checkRowSelectionStatus` | Per-row disabled/unavailable check | `(record: TData) => { disabled?; unavailable? }` | - |
 | `independentSelectionExpandedRows` | Treat expanded child rows as independent selections | `boolean` | - |
 
+### Search
+
+TableNew supports three search modes:
+
+**Built-in search** — table manages query state, renders SearchInput, and filters data internally:
+
+```tsx
+import { Table } from '@synerise/ds-table-new';
+
+<Table
+  data={data}
+  columns={columns}
+  matchesSearchQuery={(query, row) =>
+    row.name.toLowerCase().includes(query.toLowerCase())
+  }
+  searchProps={{
+    placeholder: 'Search by name...',
+    clearTooltip: 'Clear search',
+  }}
+  onSearchQueryChange={(query) => console.log('query:', query)}
+/>
+```
+
+**Custom search with internal filtering** — consumer manages query state, table filters via `filterData`:
+
+```tsx
+import { Table } from '@synerise/ds-table-new';
+import { SearchInput } from '@synerise/ds-search';
+
+const [query, setQuery] = useState('');
+
+<Table
+  data={data}
+  columns={columns}
+  filterData={(row) =>
+    !query || row.name.toLowerCase().includes(query.toLowerCase())
+  }
+  searchComponent={
+    <SearchInput
+      value={query}
+      onChange={setQuery}
+      onClear={() => setQuery('')}
+      placeholder="Search..."
+      clearTooltip="Clear"
+      closeOnClickOutside
+    />
+  }
+/>
+```
+
+When using `matchesSearchQuery` or `filterData` with selection, the table preserves selected items that are filtered out of the display. Selection always operates on the full `data` array.
+
 ### InfiniteScrollProps
 
 | Property | Description | Type | Default |

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, ...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, ...props }: TableProps<TData, TValue>) => React.JSX.Element;

package/dist/Table.js

@@ -1,10 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, useImperativeHandle } from "react";
 import { BaseTable } from "./components/BaseTable/BaseTable.js";
 import { SelectionContext } from "./contexts/SelectionContext.js";
 import { TableContext } from "./contexts/TableContext.js";
 import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
 import { useTable } from "./hooks/useTable.js";
+import { useTableHighlight } from "./hooks/useTableHighlight.js";
 import { getDefaultSkeletonColumns } from "./utils/getDefaultSkeletonColumns.js";
 import { processColumns } from "./utils/processColumns.js";
 const Table = ({
@@ -15,6 +16,14 @@ const Table = ({
   isLoading,
   selectedRowKeys,
   pagination,
+  matchesSearchQuery,
+  filterData,
+  onSearchQueryChange,
+  searchProps,
+  expandable,
+  rowKey,
+  onSort,
+  tableRef,
   ...props
 }) => {
   const texts = useDefaultTexts(defaultTexts);
@@ -30,21 +39,38 @@ const Table = ({
     paginationProps,
     hasPagination,
     columnSizing,
-    isColumnSizingReady
+    isColumnSizingReady,
+    searchQuery,
+    setSearchQuery,
+    handleSearchClear,
+    hasBuiltInSearch,
+    totalDataCount
   } = useTable({
     data,
     columns: finalColumns,
     pagination,
     selectionConfig,
     selectedRowKeys,
+    matchesSearchQuery,
+    filterData,
+    onSearchQueryChange,
+    expandable,
+    rowKey,
+    onSort,
     wrapperRef,
     requireColumnSizing: false
   });
+  const {
+    highlightRow
+  } = useTableHighlight(wrapperRef);
+  useImperativeHandle(tableRef, () => ({
+    highlightRow
+  }));
   const tableContextValue = useMemo(() => ({
     table,
     getScrollContainer: () => null
   }), [table]);
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { texts, isLoading, hasPagination, paginationProps, tableOuterRef: wrapperRef, selectedRowKeys, columnSizing, isColumnSizingReady, ...props }) }) });
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { texts, isLoading, hasPagination, paginationProps, tableOuterRef: wrapperRef, selectedRowKeys, columnSizing, isColumnSizingReady, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, ...props }) }) });
 };
 export {
   Table

package/dist/Table.styles.d.ts

@@ -12,4 +12,3 @@ export declare const commonCellStyles: import('styled-components').FlattenInterp
 export declare const TableSkeleton: import('styled-components').StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import('@synerise/ds-skeleton').SkeletonProps) => React.JSX.Element, any, {
     skeletonWidth?: string;
 }, never>;
-export declare const StyledTable: import('styled-components').StyledComponent<"table", any, {}, never>;

package/dist/Table.styles.js

@@ -15,12 +15,7 @@ const TableSkeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
   displayName: "Tablestyles__TableSkeleton",
   componentId: "sc-zrmzmn-1"
 })(["padding:0;", ""], (props) => props.skeletonWidth && `width: ${props.skeletonWidth};`);
-const StyledTable = /* @__PURE__ */ styled.table.withConfig({
-  displayName: "Tablestyles__StyledTable",
-  componentId: "sc-zrmzmn-2"
-})(["width:100%;border-spacing:0;border-collapse:separate;"]);
 export {
-  StyledTable,
   TableContainer,
   TableSkeleton,
   commonCellStyles,

package/dist/Table.types.d.ts

@@ -1,19 +1,67 @@
 import { PaginationProps } from 'antd/lib/pagination';
 import { 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';
 import { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+export type HighlightOptions = {
+    /** Duration in milliseconds. Default: 600 */
+    duration?: number;
+};
+export type TableRef = {
+    /** Temporarily highlight a row by key. Highlight fades out after duration. */
+    highlightRow: (rowKey: string, options?: HighlightOptions) => void;
+};
 /**
  * Standard paginated table component props
  */
 export type TableProps<TData, TValue> = SharedTableProps<TData, TValue> & PaginatedProps & {
     texts?: Partial<TableTexts>;
+    tableRef?: RefObject<TableRef>;
 };
 /**
  * Virtual non-paginated table component props
  */
 export type VirtualTableProps<TData, TValue> = SharedTableProps<TData, TValue> & VirtualProps & {};
 export type DSColumnMeta<TData extends RowData, TValue> = ColumnMeta<TData, TValue>;
+/**
+ * Legacy column type matching @synerise/ds-table's VirtualColumnType.
+ * Used by legacyColumnConfigAdapter to convert old column configs to TanStack ColumnDef.
+ * For new code, prefer ColumnDef from @tanstack/react-table directly.
+ */
+export type LegacyColumnType<T> = {
+    dataIndex?: string | string[];
+    key?: string | number;
+    title?: ReactNode | ((props: Record<string, unknown>) => ReactNode);
+    render?: (value: unknown, record: T, index: number) => ReactNode;
+    childRender?: (value: unknown, row: T, index: number) => ReactNode;
+    sorter?: boolean | ((a: T, b: T) => number) | {
+        compare?: (a: T, b: T) => number;
+        multiple?: number | false;
+    };
+    sortOrder?: 'ascend' | 'descend' | null;
+    sortRender?: 'default' | 'string' | ((sortStateApi: SortStateAPI, column: LegacyColumnType<T>) => ReactNode);
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    fixed?: 'left' | 'right';
+    align?: 'left' | 'center' | 'right';
+    id?: string | number;
+    fixedFirst?: boolean;
+    left?: number;
+    right?: number;
+    ellipsis?: boolean;
+    className?: string;
+    getCellTooltipProps?: (row: T) => TooltipProps | false;
+};
+/**
+ * @deprecated Compatibility alias. Use LegacyColumnType with legacyColumnConfigAdapter, or ColumnDef for new code.
+ */
+export type DSColumnType<TData> = LegacyColumnType<TData>;
+/**
+ * @deprecated Compatibility alias. Use TableProps or VirtualTableProps for new code.
+ */
+export type DSTableProps<TData, TValue = unknown> = SharedTableProps<TData, TValue>;
 export type Expandable<TData> = {
     childrenColumnName?: keyof TData;
     expandedRowKeys?: string[];
@@ -56,15 +104,102 @@ export type SharedTableProps<TData, TValue> = {
      */
     disableColumnNamesLineBreak?: boolean;
     /**
-     * renders on the right side of table header
-     * can be used for filtering data based on query
-     * data filtering is to be set up in the implementation / server-side
+     * Enables built-in search. Table manages query state internally, renders SearchInput,
+     * and filters `data` for rendering while keeping full data for selection.
+     * Takes precedence over `filterData` if both provided.
+     *
+     * Should be a stable reference (defined outside component or wrapped in useCallback)
+     * since it receives the query as a parameter and doesn't need to close over state.
+     *
+     * @example
+     * ```tsx
+     * const matchesSearchQuery = (query: string, row: User) =>
+     *   row.name.toLowerCase().includes(query.toLowerCase());
+     *
+     * <Table data={users} matchesSearchQuery={matchesSearchQuery} />
+     * ```
+     */
+    matchesSearchQuery?: (query: string, row: TData) => boolean;
+    /**
+     * Override SearchInput props when using built-in search (matchesSearchQuery).
+     * Ignored when searchComponent is provided.
+     *
+     * @example
+     * ```tsx
+     * <Table
+     *   data={data}
+     *   columns={columns}
+     *   matchesSearchQuery={matchFn}
+     *   searchProps={{
+     *     placeholder: 'Search by name...',
+     *     clearTooltip: 'Clear search',
+     *   }}
+     * />
+     * ```
+     */
+    searchProps?: Partial<SearchInputProps>;
+    /**
+     * Called when the internal search query changes. Useful for URL sync or analytics.
+     * Only fires when using built-in search (matchesSearchQuery).
+     *
+     * @example
+     * ```tsx
+     * <Table
+     *   data={data}
+     *   columns={columns}
+     *   matchesSearchQuery={matchFn}
+     *   onSearchQueryChange={(query) => {
+     *     updateUrlParam('search', query);
+     *   }}
+     * />
+     * ```
+     */
+    onSearchQueryChange?: (query: string) => void;
+    /**
+     * Filters `data` internally for rendering while keeping full data for selection.
+     * For use with `searchComponent` where the consumer manages query state.
+     * Ignored when `matchesSearchQuery` is provided.
+     *
+     * @example
+     * ```tsx
+     * const [query, setQuery] = useState('');
+     *
+     * <Table
+     *   data={users}
+     *   filterData={query ? (row) => row.name.includes(query) : undefined}
+     *   searchComponent={<CustomSearch value={query} onChange={setQuery} />}
+     * />
+     * ```
+     */
+    filterData?: (row: TData) => boolean;
+    /**
+     * Custom search component rendered in the table header.
+     * When provided, takes precedence over built-in SearchInput rendering.
+     *
+     * Can be used with `filterData` for internal filtering, or alone for
+     * external/legacy filtering where the consumer pre-filters `data`.
+     *
+     * @example
+     * ```tsx
+     * <Table
+     *   data={data}
+     *   columns={columns}
+     *   searchComponent={
+     *     <SearchInput
+     *       value={query}
+     *       onChange={setQuery}
+     *       onClear={() => setQuery('')}
+     *       placeholder="Search..."
+     *       clearTooltip="Clear"
+     *       closeOnClickOutside
+     *     />
+     *   }
+     * />
+     * ```
      */
     searchComponent?: ReactNode;
     /**
-     * renders on the right side of table header
-     * can be used for rendering custom filter buttons
-     * data filtering is to be set up in the implementation / server-side
+     * Custom filter component rendered in the table header.
      */
     filterComponent?: ReactNode;
     rowKey?: RowKey<TData>;
@@ -123,6 +258,10 @@ export type BaseTableProps<TData, TValue> = Omit<SharedTableProps<TData, TValue>
     texts: TableTexts;
     columnSizing: Record<string, number>;
     isColumnSizingReady: boolean;
+    searchQuery?: string;
+    setSearchQuery?: (query: string) => void;
+    handleSearchClear?: () => void;
+    hasBuiltInSearch?: boolean;
 } & VirtualProps & PaginatedProps;
 export type ScrollDirection = 'forward' | 'backward' | null;
 export type TableInternalProps = {
@@ -144,6 +283,8 @@ export type VirtualTableRef = {
     scrollToTop: () => void;
     scrollTo: (top: number) => void;
     scrollToIndex: (index: number, options?: Parameters<Virtualizer<HTMLDivElement, Element>['scrollToIndex']>[1]) => void;
+    /** Temporarily highlight a row by key. Highlight fades out after duration. */
+    highlightRow: (rowKey: string, options?: HighlightOptions) => void;
 };
 type VirtualProps = {
     /** max-height (px) for the built-in scroll container. Ignored when scrollElementRef is provided. Defaults to 800. */
@@ -158,6 +299,16 @@ type VirtualProps = {
     onItemsRendered?: (props: OnItemsRenderedProps) => void;
     scrollElementRef?: MutableRefObject<HTMLDivElement | null>;
     onScrollToRecordIndex?: (recordIndex: number, callback?: () => void) => void;
+    /**
+     * render a sticky back-to-top button once the top of the table is scrolled out of view.
+     * Available with or without `infiniteScroll`.
+     */
+    showBackToTopButton?: boolean;
+    /**
+     * Called when the back-to-top button is clicked.
+     * Defaults to scrolling the virtual table to the top when omitted.
+     */
+    onBackToTop?: () => void;
 };
 export type OnItemsRenderedProps = {
     visibleStartIndex: number;
@@ -181,14 +332,12 @@ export type InfiniteScrollState = {
 };
 export type InfiniteScrollProps = InfiniteScrollState & {
     maxScroll?: number;
-    showBackToTopButton?: boolean;
     nextPage?: InfiniteScrollState;
     prevPage?: InfiniteScrollState;
     render?: (state: InfiniteScrollState) => ReactElement;
     onRetryButtonClick?: (position: LoaderItemPosition | undefined) => void;
     onScrollEndReach?: () => void;
     onScrollTopReach?: () => void;
-    onBackToTop?: () => void;
 };
 export type LoaderItemProps = {
     infiniteScroll: InfiniteScrollProps & InfiniteScrollState;
@@ -241,7 +390,9 @@ export type RowSelection = {
     selectedRowKeys: string[];
 };
 export type RowKey<TData> = ((row: TData) => string) | keyof TData;
-export type TableTexts = TableHeaderTexts & TableBodyTexts & TableColumnSorterTexts & TableRowSelectionTexts & {};
+export type TableTexts = TableHeaderTexts & TableBodyTexts & TableColumnSorterTexts & TableRowSelectionTexts & {
+    infiniteScrollBackToTop: ReactNode;
+};
 export type TableColumnSorterTexts = {
     columnSortAscend: ReactNode;
     columnSortDescend: ReactNode;
@@ -284,6 +435,9 @@ export type CustomCounterArgs = {
 export type CustomCounterFn = (props: CustomCounterArgs) => ReactNode;
 export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowTooltipProps'> & {
     texts: TableBodyTexts;
+    withBodyScroll?: boolean;
+    tableBodyScrollRef?: React.MutableRefObject<HTMLElement | null>;
+    maxHeight?: number;
 };
 export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent'> & {
     texts: TableEmptyBodyTexts;
@@ -293,7 +447,7 @@ export type TableCounterProps<TData, TValue> = Pick<BaseTableProps<TData, TValue
     selectedItemsCount?: number;
     tableTotal: number;
 };
-export type TableHeaderProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'itemsMenu' | 'title' | 'isCounterLoading' | 'searchComponent' | 'filterComponent' | 'rowKey' | 'headerButton' | 'renderCustomCounter' | 'renderSelectionTitle' | 'dataSourceTotalCount' | 'hideTitlePart' | 'isLoading'> & {
+export type TableHeaderProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'itemsMenu' | 'title' | 'isCounterLoading' | 'searchComponent' | 'filterComponent' | 'rowKey' | 'headerButton' | 'renderCustomCounter' | 'renderSelectionTitle' | 'dataSourceTotalCount' | 'hideTitlePart' | 'isLoading' | 'searchQuery' | 'setSearchQuery' | 'handleSearchClear' | 'hasBuiltInSearch' | 'searchProps'> & {
     selectedRows?: number;
     selectionConfig?: SelectionConfig<TData>;
     texts: TableHeaderTexts;

package/dist/VirtualTable.d.ts

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

package/dist/VirtualTable.js

@@ -1,7 +1,8 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect, useImperativeHandle } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DEFAULT_STICKY_VALUE, DEFAULT_CELL_HEIGHT, INFINITE_LOADER_ITEM_HEIGHT, INFINITE_SCROLL_PADDING_START } from "./Table.const.js";
+import { BackToTopButton } from "./components/BackToTopButton/BackToTopButton.js";
 import { BaseTable } from "./components/BaseTable/BaseTable.js";
 import { SelectionContext } from "./contexts/SelectionContext.js";
 import { StickyContext } from "./contexts/StickyContext.js";
@@ -9,6 +10,7 @@ import { TableContext } from "./contexts/TableContext.js";
 import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
 import { useInfiniteScroll } from "./hooks/useInfiniteScroll.js";
 import { useTable } from "./hooks/useTable.js";
+import { useTableHighlight } from "./hooks/useTableHighlight.js";
 import { getDefaultSkeletonColumns } from "./utils/getDefaultSkeletonColumns.js";
 import { getInfiniteScrollPadding } from "./utils/getInfiniteScrollPadding.js";
 import { getIsRevealed } from "./utils/getIsRevealed.js";
@@ -31,6 +33,12 @@ const VirtualTable = ({
   isLoading,
   onScrollToRecordIndex,
   maxHeight,
+  matchesSearchQuery,
+  filterData,
+  onSearchQueryChange,
+  searchProps,
+  showBackToTopButton,
+  onBackToTop,
   ...props
 }) => {
   const [stickyData, setStickyData] = useState(DEFAULT_STICKY_VALUE);
@@ -50,7 +58,12 @@ const VirtualTable = ({
   const {
     table,
     columnSizing,
-    isColumnSizingReady
+    isColumnSizingReady,
+    searchQuery,
+    setSearchQuery,
+    handleSearchClear,
+    hasBuiltInSearch,
+    totalDataCount
   } = useTable({
     data,
     expandable,
@@ -60,6 +73,9 @@ const VirtualTable = ({
     rowKey,
     selectionConfig,
     selectedRowKeys,
+    matchesSearchQuery,
+    filterData,
+    onSearchQueryChange,
     onSort,
     pagination: false
   });
@@ -159,8 +175,12 @@ const VirtualTable = ({
       rowVirtualizer.scrollToOffset(INFINITE_LOADER_ITEM_HEIGHT);
     }
   }, [rowVirtualizer, infiniteScroll?.prevPage?.hasMore]);
+  const {
+    highlightRow
+  } = useTableHighlight(tableOuterRef);
   useImperativeHandle(tableRef, () => ({
     getDimensions,
+    highlightRow,
     scrollTo: rowVirtualizer.scrollToOffset,
     scrollToIndex: (topLevelIndex, options) => {
       const {
@@ -215,7 +235,17 @@ const VirtualTable = ({
     rowVirtualizer,
     getScrollContainer
   }), [table, rowVirtualizer, getScrollContainer]);
-  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, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading, ...props }) }) }) });
+  const handleBackToTop = useCallback(() => {
+    if (onBackToTop) {
+      onBackToTop();
+      return;
+    }
+    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, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, ...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) })
+  ] }) }) });
 };
 export {
   VirtualTable

package/dist/components/BackToTopButton/BackToTopButton.d.ts

@@ -0,0 +1,11 @@
+import { default as React, MutableRefObject, ReactNode } from 'react';
+type BackToTopButtonProps = {
+    label?: ReactNode;
+    onClick: () => void;
+    scrollContainerRef?: MutableRefObject<HTMLDivElement | null>;
+    hasData: boolean;
+    /** Scroll threshold in px above which the button becomes visible. Should match the sticky-header offset. */
+    threshold: number;
+};
+export declare const BackToTopButton: ({ label, onClick, scrollContainerRef, hasData, threshold, }: BackToTopButtonProps) => React.JSX.Element;
+export {};

package/dist/components/BackToTopButton/BackToTopButton.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Button from "@synerise/ds-button";
+import Icon, { ArrowUpCircleM } from "@synerise/ds-icon";
+import { BackToTopWrapper } from "./BackToTopButton.styles.js";
+const BackToTopButton = ({
+  label,
+  onClick,
+  scrollContainerRef,
+  hasData,
+  threshold
+}) => {
+  const [isPastThreshold, setIsPastThreshold] = useState(false);
+  useEffect(() => {
+    const el = scrollContainerRef?.current;
+    if (!el) {
+      return;
+    }
+    const update = () => setIsPastThreshold(el.scrollTop > threshold);
+    update();
+    el.addEventListener("scroll", update, {
+      passive: true
+    });
+    return () => el.removeEventListener("scroll", update);
+  }, [scrollContainerRef, threshold]);
+  const isVisible = hasData && isPastThreshold;
+  return /* @__PURE__ */ jsx(BackToTopWrapper, { $visible: isVisible, children: /* @__PURE__ */ jsxs(Button, { type: "custom-color", mode: "icon-label", color: "grey", "data-testid": "ds-table-back-to-top-button", onClick, children: [
+    /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(ArrowUpCircleM, {}) }),
+    label
+  ] }) });
+};
+export {
+  BackToTopButton
+};

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

@@ -0,0 +1,3 @@
+export declare const BackToTopWrapper: import('styled-components').StyledComponent<"div", any, {
+    $visible?: boolean;
+}, never>;

package/dist/components/BackToTopButton/BackToTopButton.styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+const BackToTopWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "BackToTopButtonstyles__BackToTopWrapper",
+  componentId: "sc-5jc0of-0"
+})(["display:", ";position:fixed;bottom:24px;right:24px;z-index:2;&&&& > .ds-table-back-to-top-button{transform:none;}"], (props) => props.$visible ? "flex" : "none");
+export {
+  BackToTopWrapper
+};

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, getRowTooltipProps, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;
+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, getRowTooltipProps, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;

package/dist/components/BaseTable/BaseTable.js

@@ -46,7 +46,12 @@ const BaseTable = ({
   maxHeight,
   tableBodyScrollRef,
   onRowClick,
-  getRowTooltipProps
+  getRowTooltipProps,
+  searchQuery,
+  setSearchQuery,
+  handleSearchClear,
+  hasBuiltInSearch,
+  searchProps
 }) => {
   const horizontalScrollRefs = useRef([]);
   const tableBodyWrapperRef = useRef(null);
@@ -58,7 +63,7 @@ const BaseTable = ({
   } = useTableContext();
   const stickyContext = useStickyContext();
   const stickyContextRef = useRef(stickyContext);
-  const useUnifiedScroll = !stickyContext && !withBodyScroll;
+  const useUnifiedScroll = !stickyContext;
   useEffect(() => {
     stickyContextRef.current = stickyContext;
   }, [stickyContext]);
@@ -95,18 +100,18 @@ const BaseTable = ({
     addNode(element);
   }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", children: [
     !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, getRowTooltipProps }, "table-body")
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { withBodyScroll, tableBodyScrollRef, maxHeight, cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowTooltipProps }, "table-body")
   ] }) });
   return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: size, 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 }),
+      !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 ? unifiedTableContent : /* @__PURE__ */ jsxs(Fragment, { children: [
         !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumnsHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), stickyData: stickyContext?.stickyData, isScrolled: rowVirtualizer?.scrollOffset, ref: handleRef, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }) }) }),
         withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: tableBodyContent }) : tableBodyContent
       ] }),
       hasPagination && /* @__PURE__ */ jsx(TablePagination, { ...paginationProps })
     ] }),
-    !isEmpty && /* @__PURE__ */ jsx(TableHorizontalScrollBar, { contentRef: (element) => addNode(element) })
+    !isEmpty && !!stickyContext && /* @__PURE__ */ jsx(TableHorizontalScrollBar, { contentRef: (element) => addNode(element) })
   ] });
 };
 export {

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

@@ -20,7 +20,7 @@ const TableSkeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
 const StyledTable = /* @__PURE__ */ styled.table.withConfig({
   displayName: "BaseTablestyles__StyledTable",
   componentId: "sc-1oa5lc2-4"
-})(["width:var(--table-size);border-spacing:0;border-collapse:separate;"]);
+})(["width:var(--table-size);border-spacing:0;border-collapse:separate;@keyframes ds-table-row-highlight{0%{background-color:transparent;}5%{background-color:var( --ds-highlight-color,", " );}30%{background-color:var( --ds-highlight-color,", " );}100%{background-color:transparent;}}tr.ds-table-row-highlight td{transition:background 0.3s ease-in-out;animation:ds-table-row-highlight var(--ds-highlight-duration,600ms) ease-in-out forwards;}"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-050"]);
 const TableColumnsHorizontalScroll = /* @__PURE__ */ styled(TableHorizontalScroll).withConfig({
   displayName: "BaseTablestyles__TableColumnsHorizontalScroll",
   componentId: "sc-1oa5lc2-5"