@synerise/ds-table-new 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/Table.types.d.ts +13 -4
- package/dist/VirtualTable.js +1 -1
- package/dist/components/BaseTable/BaseTable.d.ts +1 -1
- package/dist/components/BaseTable/BaseTable.js +3 -2
- package/dist/components/BaseTable/BaseTable.styles.js +1 -1
- package/dist/components/TableBody/TableBody.d.ts +1 -1
- package/dist/components/TableBody/TableBody.js +4 -3
- package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.d.ts +1 -1
- package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.js +7 -2
- package/dist/components/TableBody/TableRow/TableRow.d.ts +1 -1
- package/dist/components/TableBody/TableRow/TableRow.js +14 -4
- package/dist/components/TableBody/TableRow/TableRowVirtual.d.ts +1 -1
- package/dist/components/TableBody/TableRow/TableRowVirtual.js +17 -5
- package/dist/components/TableBody/TableRowSelection/TableRowSelection.d.ts +1 -1
- package/dist/components/TableBody/TableRowSelection/TableRowSelection.js +6 -0
- package/dist/components/TableHeader/TableHeaderSelection/TableHeaderSelection.js +2 -2
- package/dist/hooks/useTable.js +1 -1
- package/package.json +19 -19
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.4...@synerise/ds-table-new@1.0.5) (2026-04-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-table-new
|
|
9
|
+
|
|
10
|
+
## [1.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.3...@synerise/ds-table-new@1.0.4) (2026-04-22)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- **table-new:** row selection status & row props/styles ([d730118](https://github.com/Synerise/synerise-design/commit/d730118303bfe0679ae08a249d5984735e2f55c9))
|
|
15
|
+
|
|
6
16
|
## [1.0.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.2...@synerise/ds-table-new@1.0.3) (2026-04-21)
|
|
7
17
|
|
|
8
18
|
**Note:** Version bump only for package @synerise/ds-table-new
|
package/dist/Table.types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PaginationProps } from 'antd/lib/pagination';
|
|
2
|
-
import { MouseEvent, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
|
|
2
|
+
import { HTMLAttributes, MouseEvent, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
|
|
3
3
|
import { SearchInputProps } from '@synerise/ds-search';
|
|
4
4
|
import { TooltipProps } from '@synerise/ds-tooltip';
|
|
5
5
|
import { Column, ColumnDef, ColumnMeta, Row, RowData } from '@tanstack/react-table';
|
|
@@ -75,6 +75,15 @@ export type SharedTableProps<TData, TValue> = {
|
|
|
75
75
|
dataSourceTotalCount?: number;
|
|
76
76
|
expandable?: Expandable<TData>;
|
|
77
77
|
onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;
|
|
78
|
+
/**
|
|
79
|
+
* Returns arbitrary HTML attributes (style, className, data-*, event handlers, etc.)
|
|
80
|
+
* to apply to a row's <tr> element. Use this for per-row styling or custom events
|
|
81
|
+
* beyond simple click handling.
|
|
82
|
+
*
|
|
83
|
+
* If the returned attributes include `onClick`, it fires BEFORE `onRowClick`. Call
|
|
84
|
+
* `event.preventDefault()` inside `getRowProps`'s onClick to suppress `onRowClick`.
|
|
85
|
+
*/
|
|
86
|
+
getRowProps?: (row: TData) => HTMLAttributes<HTMLTableRowElement>;
|
|
78
87
|
/**
|
|
79
88
|
* Returns tooltip props for a given row, or false to disable tooltip.
|
|
80
89
|
* When provided, the entire row is wrapped in a Tooltip component.
|
|
@@ -433,13 +442,13 @@ export type CustomCounterArgs = {
|
|
|
433
442
|
content: ReactNode;
|
|
434
443
|
};
|
|
435
444
|
export type CustomCounterFn = (props: CustomCounterArgs) => ReactNode;
|
|
436
|
-
export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowTooltipProps'> & {
|
|
445
|
+
export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps'> & {
|
|
437
446
|
texts: TableBodyTexts;
|
|
438
447
|
withBodyScroll?: boolean;
|
|
439
448
|
tableBodyScrollRef?: React.MutableRefObject<HTMLElement | null>;
|
|
440
449
|
maxHeight?: number;
|
|
441
450
|
};
|
|
442
|
-
export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent'> & {
|
|
451
|
+
export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent' | 'tableBodyScrollRef'> & {
|
|
443
452
|
texts: TableEmptyBodyTexts;
|
|
444
453
|
};
|
|
445
454
|
export type TableCounterProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'renderCustomCounter' | 'isCounterLoading'> & {
|
|
@@ -501,7 +510,7 @@ export type TableRowProps<TData> = {
|
|
|
501
510
|
isSelected?: boolean;
|
|
502
511
|
isExpanded?: boolean;
|
|
503
512
|
isParentExpanded?: boolean;
|
|
504
|
-
} & Pick<SharedTableProps<TData, unknown>, 'onRowClick' | 'getRowTooltipProps'>;
|
|
513
|
+
} & Pick<SharedTableProps<TData, unknown>, 'onRowClick' | 'getRowProps' | 'getRowTooltipProps'>;
|
|
505
514
|
export type TableRowVirtualProps<TData> = TableRowProps<TData> & {
|
|
506
515
|
cellHeight: number;
|
|
507
516
|
virtual: VirtualItem;
|
package/dist/VirtualTable.js
CHANGED
|
@@ -243,7 +243,7 @@ const VirtualTable = ({
|
|
|
243
243
|
rowVirtualizer.scrollToOffset(0);
|
|
244
244
|
}, [onBackToTop, rowVirtualizer]);
|
|
245
245
|
return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, children: /* @__PURE__ */ jsxs(SelectionContext.Provider, { value: selectionConfig, children: [
|
|
246
|
-
/* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, ...props }),
|
|
246
|
+
/* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, cellHeight, ...props }),
|
|
247
247
|
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) })
|
|
248
248
|
] }) }) });
|
|
249
249
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { BaseTableProps, TableInternalProps } from '../../Table.types';
|
|
3
|
-
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;
|
|
3
|
+
export declare const BaseTable: <TData extends object, TValue>({ infiniteScroll, cellHeight, className, itemsMenu, texts, isCounterLoading, isLoading, rowKey, title, hideTitleBar, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerWithBorderTop, emptyDataComponent, headerButton, hideColumnNames, expandable, columnSizing, isColumnSizingReady, paginationProps, hasPagination, disableColumnNamesLineBreak, dataSourceTotalCount, cardStyles, tableOuterRef, withScroll, withBodyScroll, maxHeight, tableBodyScrollRef, onRowClick, getRowProps, getRowTooltipProps, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;
|
|
@@ -46,6 +46,7 @@ const BaseTable = ({
|
|
|
46
46
|
maxHeight,
|
|
47
47
|
tableBodyScrollRef,
|
|
48
48
|
onRowClick,
|
|
49
|
+
getRowProps,
|
|
49
50
|
getRowTooltipProps,
|
|
50
51
|
searchQuery,
|
|
51
52
|
setSearchQuery,
|
|
@@ -94,13 +95,13 @@ const BaseTable = ({
|
|
|
94
95
|
const tableBodyContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
|
|
95
96
|
tableBodyWrapperRef.current = element;
|
|
96
97
|
addNode(element);
|
|
97
|
-
}, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowTooltipProps }, "table-body") }) });
|
|
98
|
+
}, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body") }) });
|
|
98
99
|
const unifiedTableContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
|
|
99
100
|
tableBodyWrapperRef.current = element;
|
|
100
101
|
addNode(element);
|
|
101
102
|
}, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", children: [
|
|
102
103
|
!hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }),
|
|
103
|
-
isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { withBodyScroll, tableBodyScrollRef, maxHeight, cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowTooltipProps }, "table-body")
|
|
104
|
+
isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { withBodyScroll, tableBodyScrollRef, maxHeight, cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body")
|
|
104
105
|
] }) });
|
|
105
106
|
return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: size, children: [
|
|
106
107
|
/* @__PURE__ */ jsxs(TableContainer, { ref: tableOuterRef, className, withBorderTop: headerWithBorderTop, cardStyles, withScroll, $maxHeight: maxHeight, "data-testid": "ds-table-container", children: [
|
|
@@ -20,7 +20,7 @@ const TableSkeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
|
|
|
20
20
|
const StyledTable = /* @__PURE__ */ styled.table.withConfig({
|
|
21
21
|
displayName: "BaseTablestyles__StyledTable",
|
|
22
22
|
componentId: "sc-1oa5lc2-4"
|
|
23
|
-
})(["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"]);
|
|
23
|
+
})(["width:var(--table-size);min-width:100%;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"]);
|
|
24
24
|
const TableColumnsHorizontalScroll = /* @__PURE__ */ styled(TableHorizontalScroll).withConfig({
|
|
25
25
|
displayName: "BaseTablestyles__TableColumnsHorizontalScroll",
|
|
26
26
|
componentId: "sc-1oa5lc2-5"
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TableBodyProps } from '../../Table.types';
|
|
3
|
-
export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowTooltipProps, withBodyScroll, tableBodyScrollRef, maxHeight, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;
|
|
3
|
+
export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowProps, getRowTooltipProps, withBodyScroll, tableBodyScrollRef, maxHeight, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;
|
|
@@ -9,6 +9,7 @@ const TableBody = ({
|
|
|
9
9
|
cellHeight = DEFAULT_CELL_HEIGHT,
|
|
10
10
|
infiniteScroll,
|
|
11
11
|
onRowClick,
|
|
12
|
+
getRowProps,
|
|
12
13
|
getRowTooltipProps,
|
|
13
14
|
withBodyScroll,
|
|
14
15
|
tableBodyScrollRef,
|
|
@@ -49,12 +50,12 @@ const TableBody = ({
|
|
|
49
50
|
// Virtualized: place spacer and absolutely-positioned rows
|
|
50
51
|
virtualItems.map((virtual) => {
|
|
51
52
|
const row = allRows[virtual.index];
|
|
52
|
-
return /* @__PURE__ */ jsx(TableRowVirtual, { virtual, cellHeight, row, texts, onRowClick, getRowTooltipProps, rowIndex: virtual.index, infiniteScroll, isLast: virtual.index === allRows.length - 1, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id);
|
|
53
|
+
return /* @__PURE__ */ jsx(TableRowVirtual, { virtual, cellHeight, row, texts, onRowClick, getRowProps, getRowTooltipProps, rowIndex: virtual.index, infiniteScroll, isLast: virtual.index === allRows.length - 1, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id);
|
|
53
54
|
})
|
|
54
55
|
) : (
|
|
55
56
|
// Non-virtualized: render all rows in the normal flow
|
|
56
|
-
allRows.map((row) => /* @__PURE__ */ jsx(TableRow, { onRowClick, getRowTooltipProps, row, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id))
|
|
57
|
-
) }, "virtual-table-body") : /* @__PURE__ */ jsx(TableEmptyBody, { emptyDataComponent, texts });
|
|
57
|
+
allRows.map((row) => /* @__PURE__ */ jsx(TableRow, { onRowClick, getRowProps, getRowTooltipProps, row, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id))
|
|
58
|
+
) }, "virtual-table-body") : /* @__PURE__ */ jsx(TableEmptyBody, { emptyDataComponent, texts, tableBodyScrollRef });
|
|
58
59
|
};
|
|
59
60
|
export {
|
|
60
61
|
TableBody
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TableEmptyBodyProps } from '../../../Table.types';
|
|
3
|
-
export declare const TableEmptyBody: <TData, TValue>({ emptyDataComponent, texts, }: TableEmptyBodyProps<TData, TValue>) => React.JSX.Element;
|
|
3
|
+
export declare const TableEmptyBody: <TData, TValue>({ emptyDataComponent, texts, tableBodyScrollRef, }: TableEmptyBodyProps<TData, TValue>) => React.JSX.Element;
|
|
@@ -5,13 +5,18 @@ import { useTableContext } from "../../../contexts/TableContext.js";
|
|
|
5
5
|
import { TBody, Tr, Td, TableEmptyBodyWrapper } from "./TableEmptyBody.styles.js";
|
|
6
6
|
const TableEmptyBody = ({
|
|
7
7
|
emptyDataComponent,
|
|
8
|
-
texts
|
|
8
|
+
texts,
|
|
9
|
+
tableBodyScrollRef
|
|
9
10
|
}) => {
|
|
10
11
|
const {
|
|
11
12
|
table
|
|
12
13
|
} = useTableContext();
|
|
13
14
|
const colSpan = table.getAllLeafColumns().length;
|
|
14
|
-
return /* @__PURE__ */ jsx(TBody, {
|
|
15
|
+
return /* @__PURE__ */ jsx(TBody, { ref: (node) => {
|
|
16
|
+
if (tableBodyScrollRef) {
|
|
17
|
+
tableBodyScrollRef.current = node;
|
|
18
|
+
}
|
|
19
|
+
}, 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 }) }) }) }) });
|
|
15
20
|
};
|
|
16
21
|
export {
|
|
17
22
|
TableEmptyBody
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TableRowProps } from '../../../Table.types';
|
|
3
|
-
export declare const TableRow: <TData extends object>({ row, onRowClick, getRowTooltipProps, }: TableRowProps<TData>) => React.JSX.Element;
|
|
3
|
+
export declare const TableRow: <TData extends object>({ row, onRowClick, getRowProps, getRowTooltipProps, }: TableRowProps<TData>) => React.JSX.Element;
|
|
@@ -7,12 +7,22 @@ import { Tr } from "./TableRow.styles.js";
|
|
|
7
7
|
const TableRow = ({
|
|
8
8
|
row,
|
|
9
9
|
onRowClick,
|
|
10
|
+
getRowProps,
|
|
10
11
|
getRowTooltipProps
|
|
11
12
|
}) => {
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const customRowProps = getRowProps?.(row.original) ?? {};
|
|
14
|
+
const {
|
|
15
|
+
onClick: customOnClick,
|
|
16
|
+
...restCustomRowProps
|
|
17
|
+
} = customRowProps;
|
|
18
|
+
const mergedOnClick = onRowClick || customOnClick ? (event) => {
|
|
19
|
+
customOnClick?.(event);
|
|
20
|
+
if (onRowClick && !event.isDefaultPrevented()) {
|
|
21
|
+
event.stopPropagation();
|
|
22
|
+
onRowClick(row.original, event);
|
|
23
|
+
}
|
|
24
|
+
} : void 0;
|
|
25
|
+
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) => {
|
|
16
26
|
const cellId = `cell-${cell.column.id}-${cell.row.id}`;
|
|
17
27
|
const isColumnSorted = isSorted(cell.column);
|
|
18
28
|
const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TableRowVirtualProps } from '../../../Table.types';
|
|
3
|
-
declare const TableRowVirtualInner: <TData extends object>({ cellHeight, rowIndex, virtual, infiniteScroll, texts, row, isLast, onRowClick, getRowTooltipProps, isExpanded: _isExpanded, isParentExpanded, }: TableRowVirtualProps<TData>) => React.JSX.Element;
|
|
3
|
+
declare const TableRowVirtualInner: <TData extends object>({ cellHeight, rowIndex, virtual, infiniteScroll, texts, row, isLast, onRowClick, getRowProps, getRowTooltipProps, isExpanded: _isExpanded, isParentExpanded, }: TableRowVirtualProps<TData>) => React.JSX.Element;
|
|
4
4
|
export declare const TableRowVirtual: typeof TableRowVirtualInner;
|
|
5
5
|
export {};
|
|
@@ -17,6 +17,7 @@ const TableRowVirtualInner = ({
|
|
|
17
17
|
row,
|
|
18
18
|
isLast,
|
|
19
19
|
onRowClick,
|
|
20
|
+
getRowProps,
|
|
20
21
|
getRowTooltipProps,
|
|
21
22
|
isExpanded: _isExpanded,
|
|
22
23
|
isParentExpanded
|
|
@@ -65,18 +66,29 @@ const TableRowVirtualInner = ({
|
|
|
65
66
|
});
|
|
66
67
|
}, [cellHeight, isChild]);
|
|
67
68
|
const rowTooltipProps = getRowTooltipProps?.(row.original);
|
|
69
|
+
const customRowProps = getRowProps?.(row.original) ?? {};
|
|
70
|
+
const {
|
|
71
|
+
onClick: customOnClick,
|
|
72
|
+
style: customStyle,
|
|
73
|
+
...restCustomRowProps
|
|
74
|
+
} = customRowProps;
|
|
75
|
+
const mergedOnClick = onRowClick || customOnClick ? (event) => {
|
|
76
|
+
customOnClick?.(event);
|
|
77
|
+
if (onRowClick && !event.isDefaultPrevented()) {
|
|
78
|
+
event.stopPropagation();
|
|
79
|
+
onRowClick(row.original, event);
|
|
80
|
+
}
|
|
81
|
+
} : void 0;
|
|
68
82
|
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 ? {
|
|
69
83
|
"data-row-expanded": isChildExpanded
|
|
70
|
-
} : {}, ref: rowVirtualizer?.measureElement, style: {
|
|
84
|
+
} : {}, ...restCustomRowProps, ref: rowVirtualizer?.measureElement, style: {
|
|
85
|
+
...customStyle,
|
|
71
86
|
position: "absolute",
|
|
72
87
|
top: `${top}px`,
|
|
73
88
|
height: `${isVisible ? virtual.size : 0}px`,
|
|
74
89
|
left: 0,
|
|
75
90
|
right: 0
|
|
76
|
-
}, isVisible, isChild, onClick:
|
|
77
|
-
event.stopPropagation();
|
|
78
|
-
onRowClick && onRowClick(row.original, event);
|
|
79
|
-
} : void 0, children: renderRow(row) }, row.id);
|
|
91
|
+
}, isVisible, isChild, onClick: mergedOnClick, children: renderRow(row) }, row.id);
|
|
80
92
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
81
93
|
isFirst && renderLoaderRow("TOP"),
|
|
82
94
|
rowTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...rowTooltipProps, children: virtualRowContent }) : virtualRowContent,
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { TableRowSelectionProps } from '../../../Table.types';
|
|
3
|
-
export declare const TableRowSelection: <TData extends object>({ texts, row, }: TableRowSelectionProps<TData>) => React.JSX.Element;
|
|
3
|
+
export declare const TableRowSelection: <TData extends object>({ texts, row, }: TableRowSelectionProps<TData>) => React.JSX.Element | null;
|
|
@@ -18,6 +18,12 @@ const TableRowSelection = ({
|
|
|
18
18
|
globalSelected,
|
|
19
19
|
limit
|
|
20
20
|
} = selection || {};
|
|
21
|
+
const {
|
|
22
|
+
unavailable
|
|
23
|
+
} = selection?.checkRowSelectionStatus?.(row.original) ?? {};
|
|
24
|
+
if (unavailable) {
|
|
25
|
+
return null;
|
|
26
|
+
}
|
|
21
27
|
const isGlobalAllSelected = globalSelectionOnChange !== void 0 && globalSelected;
|
|
22
28
|
const isSelected = row.getIsSelected();
|
|
23
29
|
const totalSelectedCount = Object.keys(table.getState().rowSelection).length;
|
|
@@ -23,11 +23,11 @@ const TableHeaderSelection = ({
|
|
|
23
23
|
const totalSelectedCount = Object.keys(table.getState().rowSelection).length;
|
|
24
24
|
const visibleRowCount = table.getRowModel().rows.length;
|
|
25
25
|
const visibleSelectedCount = table.getFilteredSelectedRowModel().rows.length;
|
|
26
|
-
const isAllVisibleSelected = visibleRowCount > 0 && visibleSelectedCount === visibleRowCount;
|
|
27
|
-
const isAnySelected = visibleSelectedCount > 0 && !isAllVisibleSelected;
|
|
28
26
|
const allRecordsCount = visibleRowCount;
|
|
29
27
|
const selectedRecordsCount = totalSelectedCount;
|
|
30
28
|
const selectableRecordsCount = table.getRowModel().rows.filter((row) => row.getCanSelect()).length;
|
|
29
|
+
const isAllVisibleSelected = selectableRecordsCount > 0 && visibleSelectedCount === selectableRecordsCount;
|
|
30
|
+
const isAnySelected = visibleSelectedCount > 0 && !isAllVisibleSelected;
|
|
31
31
|
const disabledBulkSelection = Boolean(allRecordsCount === 0 || selectableRecordsCount === 0 || hasSelectionLimit && selectedRecordsCount === 0);
|
|
32
32
|
const selectionTooltipTitle = useMemo(() => {
|
|
33
33
|
if (hasGlobalSelection) {
|
package/dist/hooks/useTable.js
CHANGED
|
@@ -101,7 +101,7 @@ const useTable = ({
|
|
|
101
101
|
} = useColumnSizing({
|
|
102
102
|
columnWidths,
|
|
103
103
|
wrapperRef,
|
|
104
|
-
enabled: requireColumnSizing || hasAnyColumnWidth
|
|
104
|
+
enabled: columnWidths.length > 0 && (requireColumnSizing || hasAnyColumnWidth)
|
|
105
105
|
});
|
|
106
106
|
const {
|
|
107
107
|
rightPinnedColumns,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-table-new",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "TableNew UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -34,27 +34,27 @@
|
|
|
34
34
|
"types": "dist/index.d.ts",
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@floating-ui/react": "^0.27.16",
|
|
37
|
-
"@synerise/ds-badge": "^1.0.
|
|
38
|
-
"@synerise/ds-button": "^1.5.
|
|
39
|
-
"@synerise/ds-checkbox": "^1.2.
|
|
40
|
-
"@synerise/ds-copy-icon": "^1.2.
|
|
41
|
-
"@synerise/ds-dropdown": "^1.3.
|
|
37
|
+
"@synerise/ds-badge": "^1.0.48",
|
|
38
|
+
"@synerise/ds-button": "^1.5.22",
|
|
39
|
+
"@synerise/ds-checkbox": "^1.2.25",
|
|
40
|
+
"@synerise/ds-copy-icon": "^1.2.6",
|
|
41
|
+
"@synerise/ds-dropdown": "^1.3.7",
|
|
42
42
|
"@synerise/ds-flag": "^1.0.10",
|
|
43
43
|
"@synerise/ds-icon": "^1.16.0",
|
|
44
44
|
"@synerise/ds-inline-alert": "^1.1.18",
|
|
45
|
-
"@synerise/ds-input": "^1.7.
|
|
46
|
-
"@synerise/ds-input-number": "^1.2.
|
|
45
|
+
"@synerise/ds-input": "^1.7.2",
|
|
46
|
+
"@synerise/ds-input-number": "^1.2.39",
|
|
47
47
|
"@synerise/ds-loader": "^1.0.15",
|
|
48
|
-
"@synerise/ds-modal": "^1.4.
|
|
49
|
-
"@synerise/ds-pagination": "^1.0.
|
|
50
|
-
"@synerise/ds-result": "^1.0.
|
|
51
|
-
"@synerise/ds-scrollbar": "^1.
|
|
52
|
-
"@synerise/ds-search": "^1.5.
|
|
53
|
-
"@synerise/ds-skeleton": "^1.0.
|
|
54
|
-
"@synerise/ds-tag": "^1.4.
|
|
55
|
-
"@synerise/ds-tags": "^1.5.
|
|
56
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
57
|
-
"@synerise/ds-typography": "^1.1.
|
|
48
|
+
"@synerise/ds-modal": "^1.4.6",
|
|
49
|
+
"@synerise/ds-pagination": "^1.0.57",
|
|
50
|
+
"@synerise/ds-result": "^1.0.53",
|
|
51
|
+
"@synerise/ds-scrollbar": "^1.3.0",
|
|
52
|
+
"@synerise/ds-search": "^1.5.16",
|
|
53
|
+
"@synerise/ds-skeleton": "^1.0.49",
|
|
54
|
+
"@synerise/ds-tag": "^1.4.22",
|
|
55
|
+
"@synerise/ds-tags": "^1.5.33",
|
|
56
|
+
"@synerise/ds-tooltip": "^1.4.14",
|
|
57
|
+
"@synerise/ds-typography": "^1.1.17",
|
|
58
58
|
"@synerise/ds-utils": "^1.8.0",
|
|
59
59
|
"@tanstack/react-table": "^8.21.3",
|
|
60
60
|
"@tanstack/react-virtual": "^3.13.12",
|
|
@@ -71,5 +71,5 @@
|
|
|
71
71
|
"react-intl": ">= 3.12.0 <= 6.8",
|
|
72
72
|
"styled-components": "^5.3.3"
|
|
73
73
|
},
|
|
74
|
-
"gitHead": "
|
|
74
|
+
"gitHead": "6d4f42c9a899ff73f582a7405a5a2470a4b07083"
|
|
75
75
|
}
|