@synerise/ds-table-new 1.1.3 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.1.4...@synerise/ds-table-new@1.2.0) (2026-05-13)
+
+### Features
+
+- **table-new:** add classes to table dom ([5464544](https://github.com/Synerise/synerise-design/commit/5464544507462afa30d2d02c7f736873fa389782))
+
+## [1.1.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.1.3...@synerise/ds-table-new@1.1.4) (2026-05-11)
+
+**Note:** Version bump only for package @synerise/ds-table-new
+
 ## [1.1.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.1.2...@synerise/ds-table-new@1.1.3) (2026-05-06)
 
 **Note:** Version bump only for package @synerise/ds-table-new

package/dist/components/BaseTable/BaseTable.js

@@ -96,14 +96,14 @@ const BaseTable = ({
   const tableBodyContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
     tableBodyWrapperRef.current = element;
     addNode(element);
-  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", children: [
+  }, 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 && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
   ] }) });
   const unifiedTableContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
     tableBodyWrapperRef.current = element;
     addNode(element);
-  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", children: [
+  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-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, getRowProps, getRowTooltipProps }, "table-body"),
     !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
@@ -112,7 +112,7 @@ const BaseTable = ({
     /* @__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 ? withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: unifiedTableContent }) : 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 }) }) }),
+        !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", className: "ds-table", children: /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }) }) }),
         withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: tableBodyContent }) : tableBodyContent
       ] }),
       hasPagination && /* @__PURE__ */ jsx(TablePagination, { ...paginationProps })

package/dist/components/TableBody/TableBody.js

@@ -36,7 +36,7 @@ const TableBody = ({
     return true;
   }) : flatRows;
   const allRows = rowVirtualizer ? flatRows : nonVirtualRows;
-  return allRows.length ? /* @__PURE__ */ jsx(TBody, { "data-testid": "ds-table-body", role: "rowgroup", "data-popup-container": true, style: rowVirtualizer && virtualItems.length ? {
+  return allRows.length ? /* @__PURE__ */ jsx(TBody, { className: "ds-table-body", "data-testid": "ds-table-body", role: "rowgroup", "data-popup-container": true, style: rowVirtualizer && virtualItems.length ? {
     height: `${rowVirtualizer.getTotalSize()}px`,
     position: "relative"
   } : void 0, children: rowVirtualizer && virtualItems.length ? (

package/dist/components/TableBody/TableBodySkeleton/TableBodySkeleton.js

@@ -31,11 +31,11 @@ const TableBodySkeleton = ({
   const skeletonRows = useMemo(() => {
     return Array.from({
       length: rowCount
-    }, (_, rowIndex) => headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", children: headerGroup.headers.map((header, columnIndex) => {
+    }, (_, rowIndex) => headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", className: "ds-table-row", children: headerGroup.headers.map((header, columnIndex) => {
       return /* @__PURE__ */ jsx(TableCell, { isSorted: !!header.column.getIsSorted(), headerIndex: columnIndex, width: header.column.getSize(), height: cellHeight, isPinned: header.column.getIsPinned(), rightOffset: header.column.getAfter("right"), leftOffset: header.column.getStart("left"), children: header.column.columnDef.meta?.skeletonCell ? header.column.columnDef.meta?.skeletonCell() : /* @__PURE__ */ jsx(TableSkeletonCell, { children: /* @__PURE__ */ jsx(Skeleton, { numberOfSkeletons: 1, size: "M" }) }) }, header.id);
     }) }, `${headerGroup.id}-${rowIndex}`)));
   }, [cellHeight, headerGroups, rowCount]);
-  return /* @__PURE__ */ jsx(TBody, { role: "rowgroup", children: skeletonRows });
+  return /* @__PURE__ */ jsx(TBody, { role: "rowgroup", className: "ds-table-body", children: skeletonRows });
 };
 export {
   TableBodySkeleton

package/dist/components/TableBody/TableCell/TableCell.js

@@ -14,7 +14,7 @@ const TableCell = memo(({
   cellKey,
   align,
   ...rest
-}) => /* @__PURE__ */ jsx(Td, { $height: height, $width: width, $align: align, isSorted, role: "cell", colSpan, isPinned, rightOffset, leftOffset, headerIndex, ...rest, children: /* @__PURE__ */ jsx(CellWrapper, { children }) }, cellKey));
+}) => /* @__PURE__ */ jsx(Td, { $height: height, $width: width, $align: align, isSorted, role: "cell", colSpan, isPinned, rightOffset, leftOffset, headerIndex, ...rest, className: rest.className ? `ds-table-cell ${rest.className}` : "ds-table-cell", children: /* @__PURE__ */ jsx(CellWrapper, { children }) }, cellKey));
 export {
   TableCell
 };

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

@@ -11,7 +11,7 @@ const TableEmptyBody = ({
     table
   } = useTableContext();
   const colSpan = table.getAllLeafColumns().length;
-  return /* @__PURE__ */ jsx(TBody, { children: /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan, 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", noSearchResults: true }) }) }) }) });
 };
 export {
   TableEmptyBody

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

@@ -34,7 +34,7 @@ const InfiniteLoaderRow = ({
   }, [loadMore, autoLoadMore, hasError, hasMore, rowVirtualizer, isLoading]);
   return /* @__PURE__ */ jsxs(Tr, { style, role: "row", children: [
     /* @__PURE__ */ jsxs(TableCell, { style: {
-      zIndex: 11
+      zIndex: 12
     }, isPinned: "left", leftOffset: 0, width: 400, children: [
       isLoading && /* @__PURE__ */ jsx(LoadingItem, { texts }),
       !isLoading && !hasMore && /* @__PURE__ */ jsx(NoMoreItem, { texts }),

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

@@ -22,7 +22,7 @@ const TableRow = ({
       onRowClick(row.original, event);
     }
   } : void 0;
-  const rowContent = /* @__PURE__ */ jsx(Tr, { "data-key": row.id, "data-row-depth": row.depth, "data-row-index": row.index, "data-index": row.index, role: "row", ...restCustomRowProps, onClick: mergedOnClick, children: row.getVisibleCells().map((cell, columnIndex) => {
+  const rowContent = /* @__PURE__ */ jsx(Tr, { "data-key": row.id, "data-row-depth": row.depth, "data-row-index": row.index, "data-index": row.index, role: "row", ...restCustomRowProps, className: restCustomRowProps.className ? `ds-table-row ${restCustomRowProps.className}` : "ds-table-row", onClick: mergedOnClick, children: row.getVisibleCells().map((cell, columnIndex) => {
     const cellId = `cell-${cell.column.id}-${cell.row.id}`;
     const isColumnSorted = isSorted(cell.column);
     const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());

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

@@ -81,7 +81,7 @@ const TableRowVirtualInner = ({
   } : void 0;
   const virtualRowContent = /* @__PURE__ */ jsx(VirtualRow, { "data-key": row.id, "data-row-depth": row.depth, "data-row-ischild": isChild, "data-row-index": virtual.index, "data-index": virtual.index, ...isChild ? {
     "data-row-expanded": isChildExpanded
-  } : {}, ...restCustomRowProps, ref: rowVirtualizer?.measureElement, style: {
+  } : {}, ...restCustomRowProps, className: restCustomRowProps.className ? `ds-table-row ${restCustomRowProps.className}` : "ds-table-row", ref: rowVirtualizer?.measureElement, style: {
     ...customStyle,
     position: "absolute",
     top: `${top}px`,

package/dist/components/TableColumns/TableColumnSorter/TableColumnSorter.styles.d.ts

@@ -1,19 +1,12 @@
-export declare const ToggleButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<Partial<{
-    href: string;
-    target?: string;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-} & import('antd/lib/button/button').BaseButtonProps & Omit<import('react').AnchorHTMLAttributes<any>, "type" | "onClick"> & {
-    htmlType?: import('antd/lib/button/button').ButtonHTMLType;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-} & Omit<import('react').ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
-    type?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonType>;
-    mode?: import('@synerise/ds-utils').LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
+export declare const ToggleButton: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<Omit<import('@synerise/ds-button/dist/BaseButton.types').BaseButtonProps, "type"> & {
+    type?: import('@synerise/ds-button').ButtonType;
+    mode?: import('@synerise/ds-utils').LiteralStringUnion<import('@synerise/ds-button/dist/Button.types').ButtonMode>;
     color?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     groupVariant?: import('@synerise/ds-utils').LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
-    justifyContent?: string;
     loading?: boolean | {
         delay?: number;
     };
+    icon?: import('react').ReactNode;
     onClick?: (event: import('react').MouseEvent<HTMLElement>) => void;
     iconColor?: import('@synerise/ds-utils').LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
     error?: boolean;

package/dist/components/TableColumns/TableColumns.js

@@ -12,13 +12,13 @@ const TableColumns = ({
     table
   } = useTableContext();
   const headerGroups = table.getHeaderGroups();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(THead, { role: "rowgroup", "data-testid": "ds-table-columns", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", children: headerGroup.headers.map((header, columnIndex) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(THead, { className: "ds-table-head", role: "rowgroup", "data-testid": "ds-table-columns", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", className: "ds-table-row", children: headerGroup.headers.map((header, columnIndex) => {
     const id = header.id;
     const isSticky = header.column.getIsPinned();
     const hasSorter = header.column.getCanSort();
     const isColumnSorted = isSorted(header.column);
     const align = header.column.columnDef.meta?.align;
-    return /* @__PURE__ */ jsx(Th, { headerIndex: columnIndex, colSpan: header.colSpan, style: header.column.columnDef.meta?.style, isPinned: header.column.getIsPinned(), leftOffset: header.column.getStart("left"), rightOffset: header.column.getAfter("right"), isSorted: isColumnSorted, hasSorter, $align: align, "data-sticky": isSticky ? "true" : void 0, role: "columnheader", children: /* @__PURE__ */ jsxs(HeaderWrapper, { $align: align, children: [
+    return /* @__PURE__ */ jsx(Th, { className: "ds-table-header-cell", headerIndex: columnIndex, colSpan: header.colSpan, style: header.column.columnDef.meta?.style, isPinned: header.column.getIsPinned(), leftOffset: header.column.getStart("left"), rightOffset: header.column.getAfter("right"), isSorted: isColumnSorted, hasSorter, $align: align, "data-sticky": isSticky ? "true" : void 0, role: "columnheader", children: /* @__PURE__ */ jsxs(HeaderWrapper, { $align: align, children: [
       /* @__PURE__ */ jsx(Label, { disableColumnNamesLineBreak, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
       hasSorter && (header.column.columnDef.meta?.renderCustomSortButton?.(header.getContext()) || /* @__PURE__ */ jsx(TableColumnSorter, { texts, column: header.column }))
     ] }) }, id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -43,27 +43,27 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-badge": "^1.0.52",
-    "@synerise/ds-button": "^1.5.26",
-    "@synerise/ds-checkbox": "^1.2.29",
-    "@synerise/ds-copy-icon": "^1.2.10",
-    "@synerise/ds-dropdown": "^1.3.11",
+    "@synerise/ds-badge": "^1.0.53",
+    "@synerise/ds-button": "^1.5.28",
+    "@synerise/ds-checkbox": "^1.2.30",
+    "@synerise/ds-copy-icon": "^1.2.11",
+    "@synerise/ds-dropdown": "^1.3.12",
     "@synerise/ds-flag": "^1.0.11",
-    "@synerise/ds-icon": "^1.17.3",
-    "@synerise/ds-inline-alert": "^1.1.22",
-    "@synerise/ds-input": "^1.7.6",
-    "@synerise/ds-input-number": "^1.2.43",
+    "@synerise/ds-icon": "^1.18.0",
+    "@synerise/ds-inline-alert": "^1.1.23",
+    "@synerise/ds-input": "^1.7.7",
+    "@synerise/ds-input-number": "^1.2.44",
     "@synerise/ds-loader": "^1.0.16",
-    "@synerise/ds-modal": "^1.4.11",
-    "@synerise/ds-pagination": "^1.0.61",
-    "@synerise/ds-result": "^1.0.57",
-    "@synerise/ds-scrollbar": "^1.3.4",
-    "@synerise/ds-search": "^1.5.21",
-    "@synerise/ds-skeleton": "^1.0.53",
-    "@synerise/ds-tag": "^1.4.26",
-    "@synerise/ds-tags": "^1.5.38",
-    "@synerise/ds-tooltip": "^1.4.18",
-    "@synerise/ds-typography": "^1.1.21",
+    "@synerise/ds-modal": "^1.4.13",
+    "@synerise/ds-pagination": "^1.0.63",
+    "@synerise/ds-result": "^1.0.59",
+    "@synerise/ds-scrollbar": "^1.3.5",
+    "@synerise/ds-search": "^1.5.23",
+    "@synerise/ds-skeleton": "^1.0.54",
+    "@synerise/ds-tag": "^1.4.27",
+    "@synerise/ds-tags": "^1.5.40",
+    "@synerise/ds-tooltip": "^1.4.19",
+    "@synerise/ds-typography": "^1.1.22",
     "@synerise/ds-utils": "^1.8.1",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
@@ -80,5 +80,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "2e8759a5466a0631229e764b0a1f73de963fc83b"
+  "gitHead": "1132c21afce924c3e3b8e75e2ebd5e7b5db69bd2"
 }