@synerise/ds-table-new 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0 (2026-04-10)
+
+### Features
+
+- **table-new:** initial commit ([a524cb9](https://github.com/Synerise/synerise-design/commit/a524cb9cfa464921edb9531ccf002dcc25a3b105))

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,153 @@
+---
+id: table-new
+title: TableNew
+---
+
+TableNew UI Component
+
+A data table component for the Synerise Design System built on top of [@tanstack/react-table](https://tanstack.com/table) and [@tanstack/react-virtual](https://tanstack.com/virtual). It provides two variants: a standard paginated `Table` and a virtualized `VirtualTable` for large datasets with infinite scrolling.
+
+## Installation
+```
+npm i @synerise/ds-table-new
+or
+yarn add @synerise/ds-table-new
+or
+pnpm add @synerise/ds-table-new
+```
+
+## Usage
+
+### Standard paginated table
+
+```tsx
+import { Table } from '@synerise/ds-table-new';
+
+const columns = [
+  { accessorKey: 'name', header: 'Name' },
+  { accessorKey: 'age', header: 'Age' },
+];
+
+const data = [
+  { name: 'John', age: 28 },
+  { name: 'Jane', age: 32 },
+];
+
+<Table data={data} columns={columns} pagination={{ pageSize: 10 }} />
+```
+
+### Virtualized table with infinite scroll
+
+```tsx
+import { VirtualTable } from '@synerise/ds-table-new';
+
+<VirtualTable
+  data={data}
+  columns={columns}
+  scroll={{ y: 500 }}
+  infiniteScroll={{
+    hasMore: true,
+    isLoading: false,
+    hasError: false,
+    onScrollEndReach: () => loadMore(),
+  }}
+/>
+```
+
+## Demo
+
+<iframe src="/storybook-static/iframe.html?id=components-table-new--default"></iframe>
+
+## Exports
+
+| Export | Description |
+| --- | --- |
+| `Table` | Standard paginated table component |
+| `VirtualTable` | Virtualized table for large/infinite datasets |
+| `TableCell` | Pre-built cell renderers |
+| `legacyColumnConfigAdapter` | Utility to convert legacy column configs to TanStack format |
+
+## API
+
+### Shared props (Table & VirtualTable)
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `data` | Array of row data | `TData[]` | **required** |
+| `columns` | Column definitions (TanStack ColumnDef) | `ColumnDef<TData, TValue>[]` | **required** |
+| `title` | Table title rendered in the header bar | `ReactNode` | - |
+| `rowKey` | Unique row identifier — function or property name | `((row: TData) => string) \| keyof TData` | - |
+| `selectionConfig` | Row selection configuration (onChange, limit, etc.) | `SelectionConfig<TData>` | - |
+| `selectedRowKeys` | Currently selected row keys | `string[]` | - |
+| `onRowClick` | Row click handler | `(row: TData, event: MouseEvent) => void` | - |
+| `onSort` | Sort change handler | `OnSortFn` | - |
+| `isLoading` | Show loading skeleton | `boolean` | - |
+| `cellHeight` | Estimated row height in px | `number` | - |
+| `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` | - |
+| `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` | - |
+| `headerWithBorderTop` | Render top border on the table header | `boolean` | - |
+| `hideColumnNames` | Hide the column header row | `boolean` | - |
+| `hideTitleBar` | Hide the entire title bar | `boolean` | - |
+| `hideTitlePart` | Hide only the title, keep the counter | `boolean` | - |
+| `disableColumnNamesLineBreak` | Apply `white-space: nowrap` to column header cells | `boolean` | - |
+| `isCounterLoading` | Show skeleton in place of total count | `boolean` | - |
+| `dataSourceTotalCount` | Total row count (useful when server-side) | `number` | - |
+| `emptyDataComponent` | Custom empty state component | `ReactNode` | - |
+| `texts` | Override default i18n text labels | `Partial<TableTexts>` | - |
+| `expandable` | Tree/expandable row configuration | `Expandable<TData>` | - |
+| `renderSelectionTitle` | Custom selection title renderer | `(selection?) => ReactNode` | - |
+| `renderCustomCounter` | Custom counter renderer | `CustomCounterFn` | - |
+
+### Table-only props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `pagination` | Pagination config or `false` to disable | `boolean \| TablePaginationConfig` | `{ pageSize: 10 }` |
+
+### VirtualTable-only props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `scroll` | Scroll container dimensions `{ x?, y }` | `{ x?: number; y: number }` | - |
+| `infiniteScroll` | Infinite scroll configuration | `InfiniteScrollProps` | - |
+| `stickyHeader` | Stick header to top on scroll | `boolean` | - |
+| `sticky` | Advanced sticky configuration with scroll container | `{ scrollThreshold?; offsetHeader?; getContainer }` | - |
+| `tableRef` | Ref exposing `scrollToTop`, `scrollTo`, `scrollToIndex`, `getDimensions` | `RefObject<VirtualTableRef>` | - |
+| `scrollElementRef` | External scroll container ref | `MutableRefObject<HTMLDivElement \| null>` | - |
+| `onItemsRendered` | Callback with `{ visibleStartIndex }` as rows are virtualized | `(props: OnItemsRenderedProps) => void` | - |
+| `onScrollToRecordIndex` | Callback when scrolling to a specific record index | `(recordIndex, callback?) => void` | - |
+
+### SelectionConfig
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `onChange` | Called when selection changes | `(selectedRowKeys: string[], selectedRows: TData[]) => void` | **required** |
+| `limit` | Maximum number of selectable rows | `number` | - |
+| `hideSelectAll` | Hide "select all" checkbox | `boolean` | - |
+| `fixed` | Fix selection column position | `boolean` | - |
+| `selections` | Custom selection menu items | `SelectionItem[]` | - |
+| `globalSelectionOnChange` | Handler for "select all across pages" | `(selected: boolean) => void` | - |
+| `globalSelected` | Current global selection state | `boolean` | - |
+| `checkRowSelectionStatus` | Per-row disabled/unavailable check | `(record: TData) => { disabled?; unavailable? }` | - |
+| `independentSelectionExpandedRows` | Treat expanded child rows as independent selections | `boolean` | - |
+
+### InfiniteScrollProps
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `hasMore` | Whether more data is available | `boolean` | **required** |
+| `isLoading` | Whether data is currently loading | `boolean` | **required** |
+| `hasError` | Whether the last fetch errored | `boolean` | **required** |
+| `onScrollEndReach` | Called when user scrolls to bottom | `() => void` | - |
+| `onScrollTopReach` | Called when user scrolls to top | `() => void` | - |
+| `showBackToTopButton` | Show "back to top" button | `boolean` | - |
+| `onBackToTop` | Called when "back to top" is clicked | `() => void` | - |
+| `onRetryButtonClick` | Called when retry button is clicked | `(position: 'TOP' \| 'BOTTOM') => void` | - |
+| `prevPage` | State for bidirectional infinite scroll (loading previous pages) | `InfiniteScrollState` | - |
+| `maxScroll` | Maximum scroll height | `number` | - |
+| `render` | Custom loader renderer | `(state: InfiniteScrollState) => ReactElement` | - |

package/dist/Table.const.d.ts

@@ -0,0 +1,20 @@
+import { OnSortFn, SelectionAll, SelectionInvert, StickyData } from './Table.types';
+export declare const EXPANDED_ROW_PROPERTY = "expandedChild";
+export declare const SELECTION_ALL: SelectionAll;
+export declare const SELECTION_INVERT: SelectionInvert;
+export declare const DEFAULT_CELL_HEIGHT = 73;
+export declare const SELECTION_COLUMN_ID = "SELECTION_COLUMN_ID";
+export declare const ACTION_COLUMN_ID = "ACTION_COLUMN_ID";
+export declare const INFINITE_SCROLL_TRIGGER_THRESHOLD = 500;
+export declare const INFINITE_SCROLL_PADDING_START = 101;
+export declare const DEFAULT_PAGINATION_CONFIG: {
+    initialState: {
+        pagination: {
+            pageSize: number;
+        };
+    };
+};
+export declare const INFINITE_LOADER_ITEM_HEIGHT = 64;
+export declare const DEFAULT_STICKY_VALUE: StickyData;
+export declare const BOTTOM_BORDER_WIDTH = 1;
+export declare const EMPTY_SORT_STATE: Parameters<OnSortFn>;

package/dist/Table.const.js

@@ -0,0 +1,42 @@
+const EXPANDED_ROW_PROPERTY = "expandedChild";
+const SELECTION_ALL = "SELECTION_ALL";
+const SELECTION_INVERT = "SELECTION_INVERT";
+const DEFAULT_CELL_HEIGHT = 73;
+const SELECTION_COLUMN_ID = "SELECTION_COLUMN_ID";
+const ACTION_COLUMN_ID = "ACTION_COLUMN_ID";
+const INFINITE_SCROLL_TRIGGER_THRESHOLD = 500;
+const INFINITE_SCROLL_PADDING_START = 101;
+const DEFAULT_PAGINATION_CONFIG = {
+  initialState: {
+    pagination: {
+      pageSize: 10
+    }
+  }
+};
+const INFINITE_LOADER_ITEM_HEIGHT = 64;
+const DEFAULT_STICKY_VALUE = {
+  containerPaddingTop: 0,
+  titleBarHeight: 0,
+  columnHeadersHeight: 0,
+  isRevealed: false
+};
+const BOTTOM_BORDER_WIDTH = 1;
+const EMPTY_SORT_STATE = [{
+  columnKey: "",
+  order: null
+}, {}];
+export {
+  ACTION_COLUMN_ID,
+  BOTTOM_BORDER_WIDTH,
+  DEFAULT_CELL_HEIGHT,
+  DEFAULT_PAGINATION_CONFIG,
+  DEFAULT_STICKY_VALUE,
+  EMPTY_SORT_STATE,
+  EXPANDED_ROW_PROPERTY,
+  INFINITE_LOADER_ITEM_HEIGHT,
+  INFINITE_SCROLL_PADDING_START,
+  INFINITE_SCROLL_TRIGGER_THRESHOLD,
+  SELECTION_ALL,
+  SELECTION_COLUMN_ID,
+  SELECTION_INVERT
+};

package/dist/Table.d.ts

@@ -0,0 +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;

package/dist/Table.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useMemo } 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 { getDefaultSkeletonColumns } from "./utils/getDefaultSkeletonColumns.js";
+import { processColumns } from "./utils/processColumns.js";
+const Table = ({
+  data,
+  columns,
+  texts: defaultTexts,
+  selectionConfig,
+  isLoading,
+  selectedRowKeys,
+  pagination,
+  ...props
+}) => {
+  const texts = useDefaultTexts(defaultTexts);
+  const wrapperRef = useRef(null);
+  const hasSelection = !!selectionConfig;
+  const processedColumns = useMemo(() => {
+    return columns.length ? processColumns(columns, hasSelection, texts) : columns;
+  }, [columns, hasSelection, texts]);
+  const skeletonColumns = useMemo(() => getDefaultSkeletonColumns(), []);
+  const finalColumns = !processedColumns.length && isLoading ? skeletonColumns : processedColumns;
+  const {
+    table,
+    paginationProps,
+    hasPagination,
+    columnSizing,
+    isColumnSizingReady
+  } = useTable({
+    data,
+    columns: finalColumns,
+    pagination,
+    selectionConfig,
+    selectedRowKeys,
+    wrapperRef,
+    requireColumnSizing: false
+  });
+  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 }) }) });
+};
+export {
+  Table
+};

package/dist/Table.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const TableContainer: import('styled-components').StyledComponent<"div", any, {
+    withBorderTop?: boolean;
+    withInfiniteScroll?: boolean;
+}, never>;
+export declare const commonPinnedStyles: import('styled-components').FlattenInterpolation<import('styled-components').ThemedStyledProps<{
+    isPinned?: "left" | "right" | false;
+    leftOffset?: number;
+    rightOffset?: number;
+}, any>>;
+export declare const commonRowStyles = "\n  display: table;\n  width: 100%;\n  table-layout: fixed;\n";
+export declare const commonCellStyles: import('styled-components').FlattenInterpolation<import('styled-components').ThemeProps<any>>;
+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

@@ -0,0 +1,29 @@
+import styled, { css } from "styled-components";
+import DSSkeleton from "@synerise/ds-skeleton";
+const TableContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "Tablestyles__TableContainer",
+  componentId: "sc-zrmzmn-0"
+})(["width:100%;overflow:scroll;", " ", " background:", ";"], (props) => props.withInfiniteScroll && `max-height: 1200px;`, (props) => props.withBorderTop && css(["border-top:solid 1px ", ";"], props.theme.palette["grey-200"]), (props) => props.theme.palette["white"]);
+const commonPinnedStyles = /* @__PURE__ */ css(["left:", ";right:", ";position:", ";z-index:", ";"], (props) => props.isPinned === "left" ? `${props.leftOffset}px` : "auto", (props) => props.isPinned === "right" ? `${props.rightOffset}px` : "auto", (props) => props.isPinned ? "sticky" : "relative", (props) => props.isPinned ? 1 : 0);
+const commonRowStyles = `
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+`;
+const commonCellStyles = /* @__PURE__ */ css(["white-space:nowrap;overflow:hidden;padding:0 24px;text-overflow:ellipsis;border-bottom:1px solid ", ";transition:background-color 0.2s,border-color 0.2s;"], (props) => props.theme.palette["grey-200"]);
+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,
+  commonPinnedStyles,
+  commonRowStyles
+};