@synerise/ds-table-new 0.1.0 → 1.0.2

package/dist/components/TableHorizontalScroll/TableHorizontalScroll.js

@@ -1,9 +1,8 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState, useRef, useCallback } from "react";
 import { useMergeRefs } from "@floating-ui/react";
-import Scrollbar from "@synerise/ds-scrollbar";
 import { useResizeObserver } from "@synerise/ds-utils";
-import { HorizontalScrollContainer, LeftShadow, HorizontalScrollWrapper, RightShadow, ScrollbarWrapper } from "./TableHorizontalScroll.styles.js";
+import { HorizontalScrollContainer, LeftShadow, HorizontalScrollWrapper, RightShadow } from "./TableHorizontalScroll.styles.js";
 const TableHorizontalScroll = forwardRef(({
   children,
   stickyLeft = 0,
@@ -27,14 +26,11 @@ const TableHorizontalScroll = forwardRef(({
     calculateOffsets(event.currentTarget);
   }, [calculateOffsets]);
   useResizeObserver(wrapperRef, () => wrapperRef.current && calculateOffsets(wrapperRef.current));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(HorizontalScrollContainer, { showLeftShadow: !isMaxLeft, showRightShadow: !isMaxRight, ...rest, children: [
-      /* @__PURE__ */ jsx(LeftShadow, { offset: stickyLeft }),
-      /* @__PURE__ */ jsx(HorizontalScrollWrapper, { ref: mergedRef, onScroll: handleScroll, children }),
-      /* @__PURE__ */ jsx(RightShadow, { offset: stickyRight })
-    ] }),
-    /* @__PURE__ */ jsx(ScrollbarWrapper, { children: /* @__PURE__ */ jsx(Scrollbar, {}) })
-  ] });
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(HorizontalScrollContainer, { showLeftShadow: !isMaxLeft, showRightShadow: !isMaxRight, ...rest, children: [
+    /* @__PURE__ */ jsx(LeftShadow, { offset: stickyLeft }),
+    /* @__PURE__ */ jsx(HorizontalScrollWrapper, { ref: mergedRef, onScroll: handleScroll, children }),
+    /* @__PURE__ */ jsx(RightShadow, { offset: stickyRight })
+  ] }) });
 });
 export {
   TableHorizontalScroll

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

@@ -0,0 +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, rowKey, ...props }: TreeTableProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TreeTable/TreeTable.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useState, useEffect, useMemo } from "react";
+import { Expander } from "@synerise/ds-button";
+import { theme } from "@synerise/ds-core";
+import Icon, { ChildRowLeftDownM } from "@synerise/ds-icon";
+import { Table } from "../../Table.js";
+import { IndentBar, TreeCellWrapper, IndentsContainer, ExpanderWrapper, INDENT_SIZE, TreeTableRoot } from "./TreeTable.styles.js";
+const getAllKeys = (data, childrenKey, getRowKey) => {
+  const keys = [];
+  const traverse = (rows) => {
+    for (const row of rows) {
+      keys.push(getRowKey(row));
+      const children = row[childrenKey];
+      if (children?.length) {
+        traverse(children);
+      }
+    }
+  };
+  traverse(data);
+  return keys;
+};
+const TreeTable = ({
+  data,
+  columns,
+  childrenColumnName,
+  defaultExpandAllRows,
+  expandedRowKeys: controlledExpandedKeys,
+  onExpandRow,
+  expandIconColumnIndex = 0,
+  rowKey,
+  ...props
+}) => {
+  const childrenKey = childrenColumnName ?? "children";
+  const getRowKey = useCallback((row) => {
+    if (typeof rowKey === "function") {
+      return rowKey(row);
+    }
+    if (typeof rowKey === "string") {
+      return String(row[rowKey]);
+    }
+    return String(row.key ?? row.id ?? "");
+  }, [rowKey]);
+  const [internalExpandedKeys, setInternalExpandedKeys] = useState(() => {
+    if (defaultExpandAllRows) {
+      return getAllKeys(data, childrenKey, getRowKey);
+    }
+    return [];
+  });
+  useEffect(() => {
+    if (defaultExpandAllRows) {
+      setInternalExpandedKeys(getAllKeys(data, childrenKey, getRowKey));
+    }
+  }, [data, defaultExpandAllRows, childrenKey, getRowKey]);
+  const expandedKeys = controlledExpandedKeys ?? internalExpandedKeys;
+  const toggleExpand = useCallback((key) => {
+    const isExpanded = expandedKeys.includes(key);
+    onExpandRow?.(key, !isExpanded);
+    if (!controlledExpandedKeys) {
+      setInternalExpandedKeys((prev) => isExpanded ? prev.filter((k) => k !== key) : [...prev, key]);
+    }
+  }, [expandedKeys, onExpandRow, controlledExpandedKeys]);
+  const hasChildren = useCallback((row) => {
+    const children = row[childrenKey];
+    return !!children?.length;
+  }, [childrenKey]);
+  const treeColumns = useMemo(() => {
+    if (!columns.length || expandIconColumnIndex < 0) {
+      return columns;
+    }
+    const targetIndex = Math.min(expandIconColumnIndex, columns.length - 1);
+    return columns.map((col, index) => {
+      if (index !== targetIndex) {
+        return col;
+      }
+      return {
+        ...col,
+        cell: (info) => {
+          const depth = info.row.depth;
+          const rowData = info.row.original;
+          const rowId = getRowKey(rowData);
+          const isParent = hasChildren(rowData);
+          const isExpanded = expandedKeys.includes(rowId);
+          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();
+          return /* @__PURE__ */ jsxs(TreeCellWrapper, { $indentWidth: depth * INDENT_SIZE, children: [
+            depth > 0 && /* @__PURE__ */ jsx(IndentsContainer, { $depth: depth, children: indents }),
+            /* @__PURE__ */ jsx(ExpanderWrapper, { children: isParent ? /* @__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 }),
+            originalCell
+          ] });
+        }
+      };
+    });
+  }, [columns, expandIconColumnIndex, getRowKey, hasChildren, expandedKeys, toggleExpand]);
+  return /* @__PURE__ */ jsx(TreeTableRoot, { children: /* @__PURE__ */ jsx(Table, { data, columns: treeColumns, rowKey, expandable: {
+    childrenColumnName: childrenKey,
+    expandedRowKeys: expandedKeys
+  }, ...props }) });
+};
+export {
+  TreeTable
+};

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

@@ -0,0 +1,15 @@
+declare const INDENT_SIZE = 42;
+declare const LEVEL_COLORS: string[];
+export declare const IndentsContainer: import('styled-components').StyledComponent<"div", any, {
+    $depth: number;
+}, never>;
+export declare const IndentBar: import('styled-components').StyledComponent<"span", any, {
+    $level: number;
+    $active: boolean;
+}, never>;
+export declare const ExpanderWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const TreeCellWrapper: import('styled-components').StyledComponent<"div", any, {
+    $indentWidth: number;
+}, never>;
+export declare const TreeTableRoot: import('styled-components').StyledComponent<"div", any, {}, never>;
+export { INDENT_SIZE, LEVEL_COLORS };

package/dist/components/TreeTable/TreeTable.styles.js

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+const INDENT_SIZE = 42;
+const LEVEL_COLORS = ["yellow", "green", "cyan", "violet", "orange", "purple", "blue", "grey"];
+const getColorHue = (active, level) => {
+  if (level === LEVEL_COLORS.indexOf("cyan") && active) {
+    return "500";
+  }
+  return active ? "600" : "200";
+};
+const IndentsContainer = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TreeTablestyles__IndentsContainer",
+  componentId: "sc-1t443rr-0"
+})(["position:absolute;top:0;left:36px;height:100%;width:", "px;display:flex;"], ({
+  $depth
+}) => $depth * INDENT_SIZE);
+const IndentBar = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "TreeTablestyles__IndentBar",
+  componentId: "sc-1t443rr-1"
+})(["width:", "px;position:relative;&:before{content:'';position:absolute;top:0;left:0;height:100%;width:2px;background-color:", ";}"], INDENT_SIZE, ({
+  $level,
+  $active,
+  theme
+}) => $level >= 0 ? theme.palette[`${LEVEL_COLORS[$level % LEVEL_COLORS.length]}-${getColorHue($active, $level)}`] : theme.palette["grey-600"]);
+const ExpanderWrapper = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "TreeTablestyles__ExpanderWrapper",
+  componentId: "sc-1t443rr-2"
+})(["display:inline-flex;align-items:center;justify-content:flex-start;width:24px;margin-right:8px;flex-shrink:0;"]);
+const TreeCellWrapper = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TreeTablestyles__TreeCellWrapper",
+  componentId: "sc-1t443rr-3"
+})(["display:flex;align-items:center;width:100%;padding-left:", "px;"], ({
+  $indentWidth
+}) => $indentWidth);
+const TreeTableRoot = /* @__PURE__ */ styled.div.withConfig({
+  displayName: "TreeTablestyles__TreeTableRoot",
+  componentId: "sc-1t443rr-4"
+})(["td{position:relative;font-weight:500;}"]);
+export {
+  ExpanderWrapper,
+  INDENT_SIZE,
+  IndentBar,
+  IndentsContainer,
+  LEVEL_COLORS,
+  TreeCellWrapper,
+  TreeTableRoot
+};

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

@@ -0,0 +1,26 @@
+import { TableProps } from '../../Table.types';
+export type TreeTableProps<TData, TValue> = Omit<TableProps<TData, TValue>, 'expandable'> & {
+    /**
+     * Property name on row data containing child rows.
+     * @default 'children'
+     */
+    childrenColumnName?: keyof TData;
+    /**
+     * Start with all rows expanded.
+     */
+    defaultExpandAllRows?: boolean;
+    /**
+     * Controlled expanded row keys. When provided, expand state is managed externally.
+     */
+    expandedRowKeys?: string[];
+    /**
+     * Called when a row's expand state changes (click on expander or row).
+     */
+    onExpandRow?: (key: string, expanded: boolean) => void;
+    /**
+     * Index of the column where the expand icon is rendered.
+     * Set to -1 to hide the expand icon entirely.
+     * @default 0
+     */
+    expandIconColumnIndex?: number;
+};

package/dist/components/TreeTable/TreeTable.types.js

@@ -0,0 +1 @@
+

package/dist/hooks/useDefaultTexts.js

@@ -4,21 +4,25 @@ const useDefaultTexts = (defaultTexts) => {
   const intl = useIntl();
   return useMemo(() => ({
     infiniteScrollLoading: intl.formatMessage({
-      id: "DS.TABLE.INFINITE-SCROLL-LOADING",
+      id: "DS.TABLE.INFINITE_SCROLL.LOADING",
       defaultMessage: "Loading"
     }),
     infiniteScrollError: intl.formatMessage({
-      id: "DS.TABLE.INFINITE-SCROLL-ERROR",
+      id: "DS.TABLE.INFINITE_SCROLL.ERROR",
       defaultMessage: "An error occurred"
     }),
     infiniteScrollRetry: intl.formatMessage({
-      id: "DS.TABLE.INFINITE-SCROLL-RETRY",
+      id: "DS.TABLE.INFINITE_SCROLL.RETRY",
       defaultMessage: "Retry"
     }),
     infiniteScrollNoMoreData: intl.formatMessage({
-      id: "DS.TABLE.INFINITE-SCROLL-NO-MORE-DATA",
+      id: "DS.TABLE.INFINITE_SCROLL.NO_MORE_DATA",
       defaultMessage: "There are no more items to load"
     }),
+    infiniteScrollBackToTop: intl.formatMessage({
+      id: "DS.TABLE.INFINITE_SCROLL.BACK_TO_TOP",
+      defaultMessage: "Back to top"
+    }),
     columnSortClear: intl.formatMessage({
       id: "DS.TABLE.COLUMN.SORT_CLEAR",
       defaultMessage: "Clear"
@@ -48,43 +52,43 @@ const useDefaultTexts = (defaultTexts) => {
       defaultMessage: "selected"
     }),
     selectAll: intl.formatMessage({
-      id: "DS.TABLE.SELECT-ALL",
+      id: "DS.TABLE.SELECT_ALL",
       defaultMessage: "Select visible"
     }),
     selectAllTooltip: intl.formatMessage({
-      id: "DS.TABLE.SELECT-ALL-TOOLTIP",
+      id: "DS.TABLE.SELECT_ALL_BUTTON_TOOLTIP",
       defaultMessage: "Select all"
     }),
     selectGlobalAll: intl.formatMessage({
-      id: "DS.TABLE.SELECT-GLOBAL-ALL",
+      id: "DS.TABLE.SELECT_GLOBAL_ALL",
       defaultMessage: "Select all"
     }),
     selectInvert: intl.formatMessage({
-      id: "DS.TABLE.SELECT-INVERT",
-      defaultMessage: "Inverse selection"
+      id: "DS.TABLE.SELECT_INVERT",
+      defaultMessage: "Invert selection"
     }),
     selectionLimitWarning: intl.formatMessage({
-      id: "DS.TABLE.SELECTION-LIMIT",
+      id: "DS.TABLE.SELECTION_LIMIT",
       defaultMessage: "You have reached max limit"
     }),
     selectionOptionsTooltip: intl.formatMessage({
-      id: "DS.TABLE.SELECTIONS-MENU-TOOLTIP",
+      id: "DS.TABLE.SELECTIONS_MENU_TOOLTIP",
       defaultMessage: "Batch selection options"
     }),
     unselectAll: intl.formatMessage({
-      id: "DS.TABLE.UNSELECT-ALL",
+      id: "DS.TABLE.UNSELECT_ALL",
       defaultMessage: "Unselect visible"
     }),
     unselectGlobalAll: intl.formatMessage({
-      id: "DS.TABLE.UNSELECT-GLOBAL-ALL",
+      id: "DS.TABLE.UNSELECT_GLOBAL_ALL",
       defaultMessage: "Unselect all"
     }),
     emptyText: intl.formatMessage({
-      id: "DS.TABLE.NO-DATA",
+      id: "DS.TABLE.NO_DATA",
       defaultMessage: "No data"
     }),
     selectRowTooltip: intl.formatMessage({
-      id: "DS.TABLE.SELECT-ROW",
+      id: "DS.TABLE.SELECT_ROW_TOOLTIP",
       defaultMessage: "Select"
     }),
     ...defaultTexts

package/dist/hooks/useTable.d.ts

@@ -1,14 +1,19 @@
 import { MutableRefObject } from 'react';
 import { SharedTableProps, TableProps, VirtualTableProps } from '../Table.types';
-type UseTableProps<TData, TValue> = Pick<VirtualTableProps<TData, TValue>, 'infiniteScroll'> & Pick<TableProps<TData, TValue>, 'pagination'> & Pick<SharedTableProps<TData, TValue>, 'data' | 'selectionConfig' | 'columns' | 'rowKey' | 'onSort' | 'expandable' | 'selectedRowKeys'> & {
+type UseTableProps<TData, TValue> = Pick<VirtualTableProps<TData, TValue>, 'infiniteScroll'> & Pick<TableProps<TData, TValue>, 'pagination'> & Pick<SharedTableProps<TData, TValue>, 'data' | 'selectionConfig' | 'columns' | 'rowKey' | 'onSort' | 'expandable' | 'selectedRowKeys' | 'matchesSearchQuery' | 'filterData' | 'onSearchQueryChange'> & {
     wrapperRef: MutableRefObject<HTMLDivElement | null>;
     requireColumnSizing?: boolean;
 };
-export declare const useTable: <TData, TValue>({ data, selectionConfig, columns, rowKey, wrapperRef, infiniteScroll, pagination, onSort, expandable, selectedRowKeys, requireColumnSizing, }: UseTableProps<TData, TValue>) => {
+export declare const useTable: <TData, TValue>({ data, selectionConfig, columns, rowKey, wrapperRef, infiniteScroll, pagination, onSort, expandable, selectedRowKeys, matchesSearchQuery, filterData, onSearchQueryChange, requireColumnSizing, }: UseTableProps<TData, TValue>) => {
     table: import('@tanstack/react-table').Table<TData>;
     paginationProps: {} | {};
     hasPagination: boolean;
     columnSizing: import('@tanstack/react-table').ColumnSizingState;
     isColumnSizingReady: boolean;
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    handleSearchClear: () => void;
+    hasBuiltInSearch: boolean;
+    totalDataCount: number;
 };
 export {};

package/dist/hooks/useTable.js

@@ -7,6 +7,7 @@ import { getChildrenColumnName } from "../utils/getChildrenColumnName.js";
 import { getPaginationConfig } from "../utils/getPaginationConfig.js";
 import { useColumnSizing } from "./useColumnSizing.js";
 import { useRowKey } from "./useRowKey.js";
+import { useTableSearch } from "./useTableSearch.js";
 const useTable = ({
   data,
   selectionConfig,
@@ -18,6 +19,9 @@ const useTable = ({
   onSort,
   expandable,
   selectedRowKeys,
+  matchesSearchQuery,
+  filterData,
+  onSearchQueryChange,
   requireColumnSizing = true
 }) => {
   const [rowSelection, setRowSelection] = useState({});
@@ -33,6 +37,18 @@ const useTable = ({
   useLayoutEffect(() => {
     dataRef.current = data;
   }, [data]);
+  const {
+    displayData,
+    searchQuery,
+    setSearchQuery,
+    handleClear: handleSearchClear,
+    hasBuiltInSearch
+  } = useTableSearch({
+    data,
+    matchesSearchQuery,
+    filterData,
+    onSearchQueryChange
+  });
   const {
     getRowKey
   } = useRowKey(rowKey);
@@ -117,7 +133,7 @@ const useTable = ({
   const expandedKeys = expandable?.expandedRowKeys ? arrayToTrueMap(expandable?.expandedRowKeys) : void 0;
   const table = useReactTable({
     getRowId: memoizedGetRowKey,
-    data,
+    data: displayData,
     columns,
     getSubRows: childrenColumnName ? getSubRows : void 0,
     getCoreRowModel: getCoreRowModel(),
@@ -160,7 +176,12 @@ const useTable = ({
     paginationProps,
     hasPagination,
     columnSizing,
-    isColumnSizingReady
+    isColumnSizingReady,
+    searchQuery,
+    setSearchQuery,
+    handleSearchClear,
+    hasBuiltInSearch,
+    totalDataCount: data.length
   };
 };
 export {

package/dist/hooks/useTableHighlight.d.ts

@@ -0,0 +1,5 @@
+import { MutableRefObject } from 'react';
+import { HighlightOptions } from '../Table.types';
+export declare const useTableHighlight: (containerRef: MutableRefObject<HTMLElement | null>) => {
+    highlightRow: (rowKey: string, options?: HighlightOptions) => void;
+};

package/dist/hooks/useTableHighlight.js

@@ -0,0 +1,33 @@
+import { useCallback } from "react";
+const HIGHLIGHT_CLASS = "ds-table-row-highlight";
+const DEFAULT_HIGHLIGHT_DURATION = 600;
+const useTableHighlight = (containerRef) => {
+  const highlightRow = useCallback((rowKey, options) => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const escapedKey = CSS.escape(rowKey);
+    const row = container.querySelector(`tr[data-key="${escapedKey}"], tr[data-row-key="${escapedKey}"]`);
+    if (!row) {
+      return;
+    }
+    const duration = options?.duration ?? DEFAULT_HIGHLIGHT_DURATION;
+    const el = row;
+    el.classList.remove(HIGHLIGHT_CLASS);
+    void el.offsetHeight;
+    el.style.setProperty("--ds-highlight-duration", `${duration}ms`);
+    el.classList.add(HIGHLIGHT_CLASS);
+    const onEnd = () => {
+      el.classList.remove(HIGHLIGHT_CLASS);
+      el.removeEventListener("animationend", onEnd);
+    };
+    el.addEventListener("animationend", onEnd);
+  }, [containerRef]);
+  return {
+    highlightRow
+  };
+};
+export {
+  useTableHighlight
+};

package/dist/hooks/useTableSearch.d.ts

@@ -0,0 +1,13 @@
+import { SharedTableProps } from '../Table.types';
+type UseTableSearchProps<TData> = Pick<SharedTableProps<TData, unknown>, 'matchesSearchQuery' | 'filterData' | 'onSearchQueryChange'> & {
+    data: TData[];
+};
+type UseTableSearchResult<TData> = {
+    displayData: TData[];
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    handleClear: () => void;
+    hasBuiltInSearch: boolean;
+};
+export declare const useTableSearch: <TData>({ data, matchesSearchQuery, filterData, onSearchQueryChange, }: UseTableSearchProps<TData>) => UseTableSearchResult<TData>;
+export {};

package/dist/hooks/useTableSearch.js

@@ -0,0 +1,36 @@
+import { useState, useCallback, useMemo } from "react";
+const useTableSearch = ({
+  data,
+  matchesSearchQuery,
+  filterData,
+  onSearchQueryChange
+}) => {
+  const [searchQuery, setSearchQueryState] = useState("");
+  const hasBuiltInSearch = !!matchesSearchQuery;
+  const setSearchQuery = useCallback((query) => {
+    setSearchQueryState(query);
+    onSearchQueryChange?.(query);
+  }, [onSearchQueryChange]);
+  const handleClear = useCallback(() => {
+    setSearchQuery("");
+  }, [setSearchQuery]);
+  const displayData = useMemo(() => {
+    if (matchesSearchQuery && searchQuery) {
+      return data.filter((row) => matchesSearchQuery(searchQuery, row));
+    }
+    if (filterData) {
+      return data.filter(filterData);
+    }
+    return data;
+  }, [data, matchesSearchQuery, searchQuery, filterData]);
+  return {
+    displayData,
+    searchQuery,
+    setSearchQuery,
+    handleClear,
+    hasBuiltInSearch
+  };
+};
+export {
+  useTableSearch
+};

package/dist/index.d.ts

@@ -1,9 +1,11 @@
 export { Table } from './Table';
+export { TreeTable } from './components/TreeTable/TreeTable';
 export { VirtualTable } from './VirtualTable';
 /** @deprecated  */
 export * as TableCell from './components/Cell';
 export * from './components/Cell';
 export * from './Table.types';
+export type { TreeTableProps } from './components/TreeTable/TreeTable.types';
 export * from './Table.const';
 export { legacyColumnConfigAdapter } from './utils/legacyColumnConfigAdapter';
 export { type ColumnDef, type Row, type CellContext, type HeaderContext, } from '@tanstack/react-table';

package/dist/index.js

@@ -1,4 +1,5 @@
 import { Table } from "./Table.js";
+import { TreeTable } from "./components/TreeTable/TreeTable.js";
 import { VirtualTable } from "./VirtualTable.js";
 import * as components_Cell_index from "./components/Cell/index.js";
 import { 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 } from "./Table.const.js";
@@ -45,6 +46,7 @@ export {
   components_Cell_index as TableCell,
   TagIconCell,
   TagsGroupCell,
+  TreeTable,
   VirtualTable,
   legacyColumnConfigAdapter
 };

package/dist/types/table.d.ts

@@ -7,6 +7,7 @@ declare module '@tanstack/react-table' {
     maxWidth?: number | string;
     width?: number | string;
     fixed?: 'left' | 'right';
+    align?: 'left' | 'center' | 'right';
     style?: CSSProperties<HTMLTableHeaderCellElement>;
     sortRender?: 'string' | 'default';
     sortOrder?: 'ascend' | 'descend' | null;

package/dist/utils/legacyColumnConfigAdapter.d.ts

@@ -1,3 +1,3 @@
-import { VirtualColumnType as LegacyColumnType } from '@synerise/ds-table';
 import { ColumnDef } from '@tanstack/react-table';
+import { LegacyColumnType } from '../Table.types';
 export declare const legacyColumnConfigAdapter: <DataType, DataValue>(columns: Array<LegacyColumnType<DataType>>) => ColumnDef<DataType, DataValue>[];

package/dist/utils/legacyColumnConfigAdapter.js

@@ -11,7 +11,6 @@ const getSortStateApiAdapter = (headerContext) => {
   });
   return {
     columnsSortState: legacyColumnSortState,
-    // get sort order for column by key
     getColumnSortOrder: (key) => {
       switch (headerContext.table.getColumn(key)?.getIsSorted()) {
         case "asc":
@@ -48,10 +47,10 @@ const getSortingConfig = (sorter) => {
   if (typeof sorter === "function") {
     sortFn = sorter;
   }
-  if ("compare" in sorter && sorter.compare) {
+  if (typeof sorter === "object" && "compare" in sorter && sorter.compare) {
     sortFn = sorter.compare;
     enableMultiSort = !!sorter.multiple;
-    multiSortOrder = sorter.multiple;
+    multiSortOrder = typeof sorter.multiple === "number" ? sorter.multiple : void 0;
   }
   return {
     sortingFn: sortFn ? (rowA, rowB, _columnId) => {
@@ -77,17 +76,21 @@ const legacyColumnConfigAdapter = (columns) => {
         return typeof column.title === "function" ? column.title({}) : column.title;
       },
       cell: (info) => {
-        return column.render?.(info.getValue(), info.row.original, info.column.getIndex()) || info.getValue();
+        return column.render?.(info.getValue(), info.row.original, info.column.getIndex()) ?? info.getValue();
       },
       meta: {
         minWidth: column.minWidth,
         maxWidth: column.maxWidth,
         width: column.width,
         fixed: column.fixed,
+        align: column.align,
         sortOrder: column.sortOrder,
         sortRender: typeof column.sortRender === "string" ? column.sortRender : void 0,
         renderCustomSortButton: customSortRender,
         multipleSortingOrder: multiSortOrder,
+        getCellTooltipProps: column.getCellTooltipProps,
+        dataIndex: column.dataIndex,
+        title: typeof column.title === "string" ? column.title : void 0,
         childCell: (info) => {
           if (column.childRender) {
             const rowData = {
@@ -97,7 +100,7 @@ const legacyColumnConfigAdapter = (columns) => {
             };
             return column.childRender(info.getValue(), rowData, info.column.getIndex());
           }
-          return column.render?.(info.getValue(), info.row.original, info.column.getIndex()) || info.getValue();
+          return column.render?.(info.getValue(), info.row.original, info.column.getIndex()) ?? info.getValue();
         }
       },
       enablePinning: !!column.fixed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "0.1.0",
+  "version": "1.0.2",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,22 +38,21 @@
     "@synerise/ds-button": "^1.5.20",
     "@synerise/ds-checkbox": "^1.2.23",
     "@synerise/ds-copy-icon": "^1.2.4",
-    "@synerise/ds-dropdown": "^1.3.4",
+    "@synerise/ds-dropdown": "^1.3.5",
     "@synerise/ds-flag": "^1.0.10",
     "@synerise/ds-icon": "^1.15.3",
     "@synerise/ds-inline-alert": "^1.1.17",
     "@synerise/ds-input": "^1.7.0",
     "@synerise/ds-input-number": "^1.2.37",
     "@synerise/ds-loader": "^1.0.15",
-    "@synerise/ds-modal": "^1.4.3",
+    "@synerise/ds-modal": "^1.4.4",
     "@synerise/ds-pagination": "^1.0.55",
     "@synerise/ds-result": "^1.0.51",
     "@synerise/ds-scrollbar": "^1.2.19",
-    "@synerise/ds-search": "^1.5.12",
+    "@synerise/ds-search": "^1.5.13",
     "@synerise/ds-skeleton": "^1.0.47",
-    "@synerise/ds-table": "^1.10.0",
     "@synerise/ds-tag": "^1.4.20",
-    "@synerise/ds-tags": "^1.5.30",
+    "@synerise/ds-tags": "^1.5.31",
     "@synerise/ds-tooltip": "^1.4.12",
     "@synerise/ds-typography": "^1.1.15",
     "@synerise/ds-utils": "^1.8.0",
@@ -72,5 +71,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "ce3c6d75efe8573a2b274853636f959b75a6cd32"
+  "gitHead": "4766ad0a45eea48ac75745bc9e7525f5dccc71e0"
 }