@snack-uikit/table 0.22.2 → 0.22.3-preview-5d095019.0

package/README.md

@@ -144,6 +144,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | manualPagination | `boolean` | - |  |
 | manualFiltering | `boolean` | - |  |
 | getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
+| getRowClassName | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения className для любой заданной строки |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
@@ -204,6 +205,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | manualPagination | `boolean` | true |  |
 | manualFiltering | `boolean` | true |  |
 | getRowId | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения уникального идентификатора для любой заданной строки |
+| getRowClassName | `(originalRow: TData, index: number, parent?: Row<TData>) => string` | - | Дополнительная функция используется для получения className для любой заданной строки |
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |

package/dist/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, getRowClassName, enableFuzzySearch, savedState, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/components/Table/Table.js

@@ -30,7 +30,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSiz
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, getRowClassName, enableFuzzySearch, savedState } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "getRowClassName", "enableFuzzySearch", "savedState"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -222,7 +222,7 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, getRowClassName: getRowClassName }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, getRowClassName: getRowClassName }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/components/types.d.ts

@@ -115,6 +115,8 @@ export type TableProps<TData extends object> = WithSupportProps<{
     manualFiltering?: boolean;
     /** Дополнительная функция используется для получения уникального идентификатора для любой заданной строки */
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+    /** Дополнительная функция используется для получения className для любой заданной строки */
+    getRowClassName?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
     /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
     scrollRef?: RefObject<HTMLElement>;
     /** Ссылка на контейнер, который скроллится */

package/dist/helperComponents/Rows/BodyRow.d.ts

@@ -1,5 +1,6 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
+import { TableProps } from '../../components';
 export type RowInfo<TData> = {
     id: string;
     data: TData;
@@ -7,9 +8,10 @@ export type RowInfo<TData> = {
     toggleSelected(value?: boolean): void;
 };
 export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInfo<TData>) => void;
-type BodyRowProps<TData> = {
+type BodyRowProps<TData extends object> = {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
+    getRowClassName?: TableProps<TData>['getRowClassName'];
 };
-export declare function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData extends object>({ row, onRowClick, getRowClassName }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/helperComponents/Rows/BodyRow.js

@@ -7,7 +7,7 @@ import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function BodyRow({ row, onRowClick }) {
+export function BodyRow({ row, onRowClick, getRowClassName = () => '' }) {
     const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
@@ -21,5 +21,5 @@ export function BodyRow({ row, onRowClick }) {
             toggleSelected: row.toggleSelected,
         });
     };
-    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
+    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": row.getIsSelected() || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: `${styles.bodyRow} ${getRowClassName(row.original, row.index, row.getParentRow())}`, children: [pinnedLeft && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: pinnedLeft.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) })), unpinned.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))), pinnedRight && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: pinnedRight.map(cell => (_jsx(BodyCell, { cell: cell }, cell.id))) }))] }) }));
 }

package/dist/helperComponents/Rows/styles.module.css

@@ -16,7 +16,6 @@
   z-index:1;
   display:flex;
   box-sizing:border-box;
-  background-color:var(--snack-ui-table-row-background);
   border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .rowPinnedCells::after{

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.22.2",
+  "version": "0.22.3-preview-5d095019.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "f238fd8b9d363de790ebcfd189aa17cbe101f3eb"
+  "gitHead": "ba02c0bf7bd0ef43b5de11b5493ea9417a81267d"
 }

package/src/components/Table/Table.tsx

@@ -89,6 +89,7 @@ export function Table<TData extends object>({
   scrollRef,
   scrollContainerRef,
   getRowId,
+  getRowClassName,
   enableFuzzySearch,
   savedState,
 
@@ -391,13 +392,13 @@ export function Table<TData extends object>({
                     {filteredTopRows.length ? (
                       <div className={styles.topRowWrapper}>
                         {filteredTopRows.map(row => (
-                          <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
+                          <BodyRow key={row.id} row={row} onRowClick={onRowClick} getRowClassName={getRowClassName} />
                         ))}
                       </div>
                     ) : null}
 
                     {centerRows.map(row => (
-                      <BodyRow key={row.id} row={row} onRowClick={onRowClick} />
+                      <BodyRow key={row.id} row={row} onRowClick={onRowClick} getRowClassName={getRowClassName} />
                     ))}
 
                     <TableEmptyState

package/src/components/types.ts

@@ -146,6 +146,9 @@ export type TableProps<TData extends object> = WithSupportProps<{
   /** Дополнительная функция используется для получения уникального идентификатора для любой заданной строки */
   getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
 
+  /** Дополнительная функция используется для получения className для любой заданной строки */
+  getRowClassName?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
+
   /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
   scrollRef?: RefObject<HTMLElement>;
   /** Ссылка на контейнер, который скроллится */

package/src/helperComponents/Rows/BodyRow.tsx

@@ -1,6 +1,7 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent, useState } from 'react';
 
+import { TableProps } from '../../components';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
 import { RowContext } from '../contexts';
@@ -18,12 +19,13 @@ export type RowInfo<TData> = {
 
 export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInfo<TData>) => void;
 
-type BodyRowProps<TData> = {
+type BodyRowProps<TData extends object> = {
   row: TableRow<TData>;
   onRowClick?: RowClickHandler<TData>;
+  getRowClassName?: TableProps<TData>['getRowClassName'];
 };
 
-export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
+export function BodyRow<TData extends object>({ row, onRowClick, getRowClassName = () => '' }: BodyRowProps<TData>) {
   const { pinnedLeft, pinnedRight, unpinned } = useRowCells(row);
 
   const [dropListOpened, setDropListOpen] = useState(false);
@@ -51,7 +53,7 @@ export function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>) {
         data-actions-opened={dropListOpened || undefined}
         data-test-id={TEST_IDS.bodyRow}
         data-row-id={row.id}
-        className={styles.bodyRow}
+        className={`${styles.bodyRow} ${getRowClassName(row.original, row.index, row.getParentRow())}`}
       >
         {pinnedLeft && (
           <PinnedCells position={COLUMN_PIN_POSITION.Left}>

package/src/helperComponents/Rows/styles.module.scss

@@ -31,7 +31,6 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
 
   box-sizing: border-box;
 
-  background-color: $snack-ui-table-row-background;
   border-color: $sys-neutral-decor-default;
 
   &::after {