@snack-uikit/table 0.37.10 → 0.37.12

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.37.12 (2025-10-24)</small>
+
+* feat(FF-7464): add getRowBackgroundColor into table ([1854275](https://github.com/cloud-ru-tech/snack-uikit/commit/1854275))
+
+
+
+
+
+## <small>0.37.11 (2025-09-25)</small>
+
+* fix(FF-7134): update ft-request-payload-transform ([4f95098](https://github.com/cloud-ru-tech/snack-uikit/commit/4f95098))
+
+
+
+
+
 ## <small>0.37.10 (2025-09-25)</small>
 
 * fix(FF-7134): table requestPayload offset calculation ([d36ad78](https://github.com/cloud-ru-tech/snack-uikit/commit/d36ad78))

package/README.md

@@ -155,6 +155,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| getRowBackgroundColor | `(data: TData) => TableRowColor` | - | Функция для определения цвета фона строки на основе данных строки @param data - данные строки таблицы @returns цвет фона строки или undefined, если цвет не должен применяться |
 | pagination | `{ state?: PaginationState; options?: number[]; optionsLabel?: string; onChange?(state: PaginationState): void; optionsRender?(value: string \| number, idx: number): string \| number; }` | 'Rows volume: ' <br> <strong>onChange</strong>: Колбэк на изменение пагинации | Параметры отвечают за пагинацию в таблице <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>options</strong>: Варианты в выпадающем селекторе для установки кол-ва строк на страницу <br> <strong>optionsLabel</strong>: Текст для селектора кол-ва строк на страницу |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | pageCount | `number` | - | Кол-во страниц (используется для внешнего управления) |
@@ -221,6 +222,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; filterQueryKey?: string; resize?: boolean; columnSettings?: boolean; }` | - | Конфиг для сохранения состояния в localStorage и queryParams. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
+| getRowBackgroundColor | `(data: TData) => TableRowColor` | - | Функция для определения цвета фона строки на основе данных строки @param data - данные строки таблицы @returns цвет фона строки или undefined, если цвет не должен применяться |
 | autoResetPageIndex | `boolean` | - | Автоматический сброс пагинации к первой странице при изменении данных или состояния (e.g фильтры, сортировки, и т.д) |
 | suppressPagination | `boolean` | - | Отключение пагинации |
 | manualPagination | `boolean` | true |  |

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

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

package/dist/cjs/components/Table/Table.js

@@ -84,9 +84,10 @@ function Table(_a) {
       expanding,
       bulkActions: bulkActionsProp,
       rowAutoHeight,
-      columnsSettings: columnsSettingsProp
+      columnsSettings: columnsSettingsProp,
+      getRowBackgroundColor
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight", "columnsSettings"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight", "columnsSettings", "getRowBackgroundColor"]);
   const [globalFilter, onGlobalFilterChange] = (0, hooks_1.useStateControl)(search, '');
   const [rowSelection, onRowSelectionChange] = (0, hooks_1.useStateControl)(rowSelectionProp, constants_1.DEFAULT_ROW_SELECTION);
   const defaultPaginationState = (0, react_1.useMemo)(() => ({
@@ -445,7 +446,8 @@ function Table(_a) {
           children: (0, jsx_runtime_1.jsx)(core_1.DndContext, Object.assign({}, dndContextProps, {
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
               value: {
-                table
+                table,
+                getRowBackgroundColor
               },
               children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
                 loading: true,

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

@@ -2,9 +2,11 @@ import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectio
 import { ReactNode, RefObject } from 'react';
 import { FiltersState } from '@snack-uikit/chips';
 import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
 import { ColumnDefinition, ExpandedState } from '../types';
+export type TableRowColor = ValueOf<typeof TABLE_ROW_COLOR>;
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
@@ -138,6 +140,12 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         resize?: boolean;
         columnSettings?: boolean;
     };
+    /**
+     * Функция для определения цвета фона строки на основе данных строки
+     * @param data - данные строки таблицы
+     * @returns цвет фона строки или undefined, если цвет не должен применяться
+     */
+    getRowBackgroundColor?: (data: TData) => TableRowColor | undefined;
 }>;
 export type InfiniteTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {
     pagination?: never;

package/dist/cjs/constants.d.ts

@@ -50,3 +50,13 @@ export declare enum DefaultColumns {
     RowActions = "rowActions"
 }
 export declare const DEFAULT_COLUMNS: DefaultColumns[];
+export declare const TABLE_ROW_COLOR: {
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly Neutral: "neutral";
+};

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DEFAULT_COLUMNS = exports.DefaultColumns = exports.DEFAULT_EXPANDED = exports.DEFAULT_ROW_SELECTION = exports.DEFAULT_FILTER_VISIBILITY = exports.DEFAULT_SORTING = exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_SETTINGS_MODE = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
+exports.TABLE_ROW_COLOR = exports.DEFAULT_COLUMNS = exports.DefaultColumns = exports.DEFAULT_EXPANDED = exports.DEFAULT_ROW_SELECTION = exports.DEFAULT_FILTER_VISIBILITY = exports.DEFAULT_SORTING = exports.DEFAULT_PAGE_SIZE = exports.SORT_FN = exports.TEST_IDS = exports.COLUMN_SETTINGS_MODE = exports.COLUMN_ALIGN = exports.COLUMN_PIN_POSITION = void 0;
 exports.COLUMN_PIN_POSITION = {
   Left: 'left',
   Right: 'right'
@@ -57,4 +57,14 @@ var DefaultColumns;
   DefaultColumns["Selection"] = "selectionCell";
   DefaultColumns["RowActions"] = "rowActions";
 })(DefaultColumns || (exports.DefaultColumns = DefaultColumns = {}));
-exports.DEFAULT_COLUMNS = [DefaultColumns.Status, DefaultColumns.Selection, DefaultColumns.RowActions];
+exports.DEFAULT_COLUMNS = [DefaultColumns.Status, DefaultColumns.Selection, DefaultColumns.RowActions];
+exports.TABLE_ROW_COLOR = {
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+  Neutral: 'neutral'
+};

package/dist/cjs/helperComponents/Rows/BodyRow.js

@@ -34,6 +34,9 @@ function BodyRow(_ref) {
   } = (0, hooks_1.useRowCells)(row);
   const [dropListOpened, setDropListOpen] = (0, react_1.useState)(false);
   const disabled = !row.getCanSelect();
+  const {
+    getRowBackgroundColor
+  } = (0, contexts_1.useTableContext)();
   const handleRowClick = e => {
     if (disabled) return;
     onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(e, {
@@ -43,6 +46,8 @@ function BodyRow(_ref) {
       toggleSelected: row.toggleSelected
     });
   };
+  const isSelected = row.getIsSelected() || row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded();
+  const rowBackgroundColor = getRowBackgroundColor === null || getRowBackgroundColor === void 0 ? void 0 : getRowBackgroundColor(row.original);
   return (0, jsx_runtime_1.jsx)(contexts_1.RowContext.Provider, {
     value: {
       dropListOpened,
@@ -52,10 +57,11 @@ function BodyRow(_ref) {
       onClick: handleRowClick,
       "data-clickable": Boolean(onRowClick) || undefined,
       "data-disabled": disabled || undefined,
-      "data-selected": row.getIsSelected() || row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded() || undefined,
+      "data-selected": isSelected || undefined,
       "data-actions-opened": dropListOpened || undefined,
       "data-test-id": constants_1.TEST_IDS.bodyRow,
       "data-row-id": row.id,
+      "data-row-bg-appearance": rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined,
       className: styles_module_scss_1.default.bodyRow,
       rowAutoHeight: rowAutoHeight,
       children: [leftPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {

package/dist/cjs/helperComponents/Rows/Row.d.ts

@@ -1,9 +1,10 @@
-import { MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { DataAttributes } from '../types';
 export type RowProps = {
     children: ReactNode;
     onClick?(e: MouseEvent<HTMLDivElement>): void;
     className?: string;
     rowAutoHeight?: boolean;
+    style?: CSSProperties;
 } & DataAttributes;
-export declare function Row({ onClick, children, className, rowAutoHeight, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ onClick, children, className, rowAutoHeight, style, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Rows/Row.js

@@ -25,16 +25,18 @@ function Row(_a) {
       onClick,
       children,
       className,
-      rowAutoHeight
+      rowAutoHeight,
+      style
     } = _a,
-    attributes = __rest(_a, ["onClick", "children", "className", "rowAutoHeight"]);
+    attributes = __rest(_a, ["onClick", "children", "className", "rowAutoHeight", "style"]);
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     (0, jsx_runtime_1.jsx)("div", Object.assign({
       onClick: onClick,
       className: (0, classnames_1.default)(styles_module_scss_1.default.tableRow, className),
       "data-auto-height": rowAutoHeight || undefined,
-      role: 'row'
+      role: 'row',
+      style: style
     }, attributes, {
       children: children
     }))

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

@@ -61,6 +61,27 @@
   height:var(--border-width-table-line, 0.5px);
   background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }
+.bodyRow[data-row-bg-appearance=red]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-red-accent-default, #cb3f3e), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=orange]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-orange-accent-default, #fb8e42), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=yellow]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-yellow-accent-default, #e2b134), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=green]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-green-accent-default, #57b762), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=blue]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-blue-accent-default, #5388d1), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=violet]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-violet-accent-default, #aa6cc1), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=pink]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-pink-accent-default, #d1668e), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
 .bodyRow[data-disabled]{
   cursor:not-allowed;
   background-color:var(--sys-neutral-background, #eeeff3);

package/dist/cjs/helperComponents/contexts.d.ts

@@ -1,5 +1,7 @@
 import { Table } from '@tanstack/react-table';
 import { Dispatch, SetStateAction } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { TABLE_ROW_COLOR } from '../constants';
 type RowContext = {
     dropListOpened: boolean;
     setDropListOpen: Dispatch<SetStateAction<boolean>>;
@@ -8,6 +10,7 @@ export declare const RowContext: import("react").Context<RowContext>;
 export declare const useRowContext: () => RowContext;
 type TableContext<TData> = {
     table: Table<TData>;
+    getRowBackgroundColor?: (data: TData) => ValueOf<typeof TABLE_ROW_COLOR> | undefined;
 };
 export declare const TableContext: import("react").Context<TableContext<any>>;
 export declare const useTableContext: () => TableContext<any>;

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

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

package/dist/esm/components/Table/Table.js

@@ -33,7 +33,7 @@ import { validateFilter, validatePaging, validateSorting } from './utils/saveTab
 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, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, columnsSettings: columnsSettingsProp } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight", "columnsSettings"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, columnsSettings: columnsSettingsProp, getRowBackgroundColor } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight", "columnsSettings", "getRowBackgroundColor"]);
     const [globalFilter, onGlobalFilterChange] = useStateControl(search, '');
     const [rowSelection, onRowSelectionChange] = useStateControl(rowSelectionProp, DEFAULT_ROW_SELECTION);
     const defaultPaginationState = useMemo(() => ({
@@ -299,7 +299,7 @@ export function Table(_a) {
                                 }
                             },
                         }
-                        : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, 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 })] }), !infiniteLoading && !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 }))] })));
+                        : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, 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 })] }), !infiniteLoading && !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/esm/components/types.d.ts

@@ -2,9 +2,11 @@ import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectio
 import { ReactNode, RefObject } from 'react';
 import { FiltersState } from '@snack-uikit/chips';
 import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
 import { ColumnDefinition, ExpandedState } from '../types';
+export type TableRowColor = ValueOf<typeof TABLE_ROW_COLOR>;
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
@@ -138,6 +140,12 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         resize?: boolean;
         columnSettings?: boolean;
     };
+    /**
+     * Функция для определения цвета фона строки на основе данных строки
+     * @param data - данные строки таблицы
+     * @returns цвет фона строки или undefined, если цвет не должен применяться
+     */
+    getRowBackgroundColor?: (data: TData) => TableRowColor | undefined;
 }>;
 export type InfiniteTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = BaseTableProps<TData, TFilters> & {
     pagination?: never;

package/dist/esm/constants.d.ts

@@ -50,3 +50,13 @@ export declare enum DefaultColumns {
     RowActions = "rowActions"
 }
 export declare const DEFAULT_COLUMNS: DefaultColumns[];
+export declare const TABLE_ROW_COLOR: {
+    readonly Red: "red";
+    readonly Orange: "orange";
+    readonly Yellow: "yellow";
+    readonly Green: "green";
+    readonly Blue: "blue";
+    readonly Violet: "violet";
+    readonly Pink: "pink";
+    readonly Neutral: "neutral";
+};

package/dist/esm/constants.js

@@ -52,3 +52,13 @@ export var DefaultColumns;
     DefaultColumns["RowActions"] = "rowActions";
 })(DefaultColumns || (DefaultColumns = {}));
 export const DEFAULT_COLUMNS = [DefaultColumns.Status, DefaultColumns.Selection, DefaultColumns.RowActions];
+export const TABLE_ROW_COLOR = {
+    Red: 'red',
+    Orange: 'orange',
+    Yellow: 'yellow',
+    Green: 'green',
+    Blue: 'blue',
+    Violet: 'violet',
+    Pink: 'pink',
+    Neutral: 'neutral',
+};

package/dist/esm/helperComponents/Rows/BodyRow.js

@@ -3,7 +3,7 @@ import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortabl
 import { useState } from 'react';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
-import { RowContext } from '../contexts';
+import { RowContext, useTableContext } from '../contexts';
 import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
@@ -12,6 +12,7 @@ export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableCol
     const { leftPinned, rightPinned, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
+    const { getRowBackgroundColor } = useTableContext();
     const handleRowClick = (e) => {
         if (disabled)
             return;
@@ -22,7 +23,7 @@ export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableCol
             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() ||
-                (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded()) ||
-                undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
+    const isSelected = row.getIsSelected() || (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded());
+    const rowBackgroundColor = getRowBackgroundColor === null || getRowBackgroundColor === void 0 ? void 0 : getRowBackgroundColor(row.original);
+    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": isSelected || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, "data-row-bg-appearance": rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
 }

package/dist/esm/helperComponents/Rows/Row.d.ts

@@ -1,9 +1,10 @@
-import { MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { DataAttributes } from '../types';
 export type RowProps = {
     children: ReactNode;
     onClick?(e: MouseEvent<HTMLDivElement>): void;
     className?: string;
     rowAutoHeight?: boolean;
+    style?: CSSProperties;
 } & DataAttributes;
-export declare function Row({ onClick, children, className, rowAutoHeight, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Row({ onClick, children, className, rowAutoHeight, style, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/Rows/Row.js

@@ -13,8 +13,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import styles from './styles.module.css';
 export function Row(_a) {
-    var { onClick, children, className, rowAutoHeight } = _a, attributes = __rest(_a, ["onClick", "children", "className", "rowAutoHeight"]);
+    var { onClick, children, className, rowAutoHeight, style } = _a, attributes = __rest(_a, ["onClick", "children", "className", "rowAutoHeight", "style"]);
     return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-    _jsx("div", Object.assign({ onClick: onClick, className: cn(styles.tableRow, className), "data-auto-height": rowAutoHeight || undefined, role: 'row' }, attributes, { children: children })));
+    _jsx("div", Object.assign({ onClick: onClick, className: cn(styles.tableRow, className), "data-auto-height": rowAutoHeight || undefined, role: 'row', style: style }, attributes, { children: children })));
 }

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

@@ -61,6 +61,27 @@
   height:var(--border-width-table-line, 0.5px);
   background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }
+.bodyRow[data-row-bg-appearance=red]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-red-accent-default, #cb3f3e), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=orange]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-orange-accent-default, #fb8e42), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=yellow]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-yellow-accent-default, #e2b134), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=green]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-green-accent-default, #57b762), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=blue]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-blue-accent-default, #5388d1), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=violet]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-violet-accent-default, #aa6cc1), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
+.bodyRow[data-row-bg-appearance=pink]{
+  --snack-ui-table-row-background:color-mix(in srgb, var(--sys-pink-accent-default, #d1668e), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
+}
 .bodyRow[data-disabled]{
   cursor:not-allowed;
   background-color:var(--sys-neutral-background, #eeeff3);

package/dist/esm/helperComponents/contexts.d.ts

@@ -1,5 +1,7 @@
 import { Table } from '@tanstack/react-table';
 import { Dispatch, SetStateAction } from 'react';
+import { ValueOf } from '@snack-uikit/utils';
+import { TABLE_ROW_COLOR } from '../constants';
 type RowContext = {
     dropListOpened: boolean;
     setDropListOpen: Dispatch<SetStateAction<boolean>>;
@@ -8,6 +10,7 @@ export declare const RowContext: import("react").Context<RowContext>;
 export declare const useRowContext: () => RowContext;
 type TableContext<TData> = {
     table: Table<TData>;
+    getRowBackgroundColor?: (data: TData) => ValueOf<typeof TABLE_ROW_COLOR> | undefined;
 };
 export declare const TableContext: import("react").Context<TableContext<any>>;
 export declare const useTableContext: () => TableContext<any>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.10",
+  "version": "0.37.12",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,7 +36,7 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/ft-request-payload-transform": "0.2.1",
+    "@cloud-ru/ft-request-payload-transform": "0.2.2",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/modifiers": "9.0.0",
     "@dnd-kit/sortable": "10.0.0",
@@ -51,7 +51,7 @@
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/toggles": "0.13.22",
-    "@snack-uikit/toolbar": "0.14.6",
+    "@snack-uikit/toolbar": "0.14.7",
     "@snack-uikit/truncate-string": "0.7.2",
     "@snack-uikit/typography": "0.8.11",
     "@snack-uikit/utils": "4.0.0",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "bb8ad6098f57ca731f128b2ea9d03504127ad12c"
+  "gitHead": "38414de2cd0a54526b6202a8bfe3ed10b3cd85a8"
 }

package/src/components/Table/Table.tsx

@@ -123,6 +123,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   bulkActions: bulkActionsProp,
   rowAutoHeight,
   columnsSettings: columnsSettingsProp,
+  getRowBackgroundColor,
   ...rest
 }: TableProps<TData, TFilters>) {
   const [globalFilter, onGlobalFilterChange] = useStateControl<string>(search, '');
@@ -524,7 +525,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         <div className={styles.tableContent} style={columnSizes.vars}>
           <CellAutoResizeContext.Provider value={{ updateCellMap }}>
             <DndContext {...dndContextProps}>
-              <TableContext.Provider value={{ table }}>
+              <TableContext.Provider value={{ table, getRowBackgroundColor }}>
                 {(!infiniteLoading || !data.length) && loading ? (
                   <SkeletonContextProvider loading>
                     <HeaderRow rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />

package/src/components/types.ts

@@ -10,11 +10,14 @@ import { ReactNode, RefObject } from 'react';
 
 import { FiltersState } from '@snack-uikit/chips';
 import { FilterRow, ToolbarProps } from '@snack-uikit/toolbar';
-import { WithSupportProps } from '@snack-uikit/utils';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
+import { TABLE_ROW_COLOR } from '../constants';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler, TreeColumnDefinitionProps } from '../helperComponents';
 import { ColumnDefinition, ExpandedState } from '../types';
 
+export type TableRowColor = ValueOf<typeof TABLE_ROW_COLOR>;
+
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
   onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
@@ -168,6 +171,13 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     resize?: boolean;
     columnSettings?: boolean;
   };
+
+  /**
+   * Функция для определения цвета фона строки на основе данных строки
+   * @param data - данные строки таблицы
+   * @returns цвет фона строки или undefined, если цвет не должен применяться
+   */
+  getRowBackgroundColor?: (data: TData) => TableRowColor | undefined;
 }>;
 
 export type InfiniteTableProps<

package/src/constants.ts

@@ -57,3 +57,14 @@ export enum DefaultColumns {
   RowActions = 'rowActions',
 }
 export const DEFAULT_COLUMNS = [DefaultColumns.Status, DefaultColumns.Selection, DefaultColumns.RowActions];
+
+export const TABLE_ROW_COLOR = {
+  Red: 'red',
+  Orange: 'orange',
+  Yellow: 'yellow',
+  Green: 'green',
+  Blue: 'blue',
+  Violet: 'violet',
+  Pink: 'pink',
+  Neutral: 'neutral',
+} as const;

package/src/helperComponents/Rows/BodyRow.tsx

@@ -5,7 +5,7 @@ import { MouseEvent, useState } from 'react';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { ColumnOrder } from '../../types';
 import { BodyCell } from '../Cells';
-import { RowContext } from '../contexts';
+import { RowContext, useTableContext } from '../contexts';
 import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row, RowProps } from './Row';
@@ -40,6 +40,8 @@ export function BodyRow<TData>({
 
   const disabled = !row.getCanSelect();
 
+  const { getRowBackgroundColor } = useTableContext();
+
   const handleRowClick = (e: MouseEvent<HTMLDivElement>) => {
     if (disabled) return;
 
@@ -51,20 +53,22 @@ export function BodyRow<TData>({
     });
   };
 
+  const isSelected =
+    row.getIsSelected() || (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded());
+
+  const rowBackgroundColor = getRowBackgroundColor?.(row.original);
+
   return (
     <RowContext.Provider value={{ dropListOpened, setDropListOpen }}>
       <Row
         onClick={handleRowClick}
         data-clickable={Boolean(onRowClick) || undefined}
         data-disabled={disabled || undefined}
-        data-selected={
-          row.getIsSelected() ||
-          (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded()) ||
-          undefined
-        }
+        data-selected={isSelected || undefined}
         data-actions-opened={dropListOpened || undefined}
         data-test-id={TEST_IDS.bodyRow}
         data-row-id={row.id}
+        data-row-bg-appearance={rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined}
         className={styles.bodyRow}
         rowAutoHeight={rowAutoHeight}
       >

package/src/helperComponents/Rows/Row.tsx

@@ -1,5 +1,5 @@
 import cn from 'classnames';
-import { MouseEvent, ReactNode } from 'react';
+import { CSSProperties, MouseEvent, ReactNode } from 'react';
 
 import { DataAttributes } from '../types';
 import styles from './styles.module.scss';
@@ -9,9 +9,10 @@ export type RowProps = {
   onClick?(e: MouseEvent<HTMLDivElement>): void;
   className?: string;
   rowAutoHeight?: boolean;
+  style?: CSSProperties;
 } & DataAttributes;
 
-export function Row({ onClick, children, className, rowAutoHeight, ...attributes }: RowProps) {
+export function Row({ onClick, children, className, rowAutoHeight, style, ...attributes }: RowProps) {
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
@@ -19,6 +20,7 @@ export function Row({ onClick, children, className, rowAutoHeight, ...attributes
       className={cn(styles.tableRow, className)}
       data-auto-height={rowAutoHeight || undefined}
       role='row'
+      style={style}
       {...attributes}
     >
       {children}

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

@@ -1,6 +1,8 @@
 @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-table';
 @use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
 
+$appearances: 'red', 'orange', 'yellow', 'green', 'blue', 'violet', 'pink';
+
 $snack-ui-table-row-background: var(--snack-ui-table-row-background);
 
 @function color-with-opacity-local($color, $opacity) {
@@ -53,7 +55,6 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     width: styles-tokens-table.$border-width-table;
   }
 
-
   &[data-position='left'] {
     left: 0;
 
@@ -83,7 +84,6 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
 }
 
 .bodyRow {
-
   & ~ &:before {
     content: '';
 
@@ -99,6 +99,16 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     background-color: styles-tokens-table.$sys-neutral-decor-disabled;
   }
 
+  @each $appearance in $appearances {
+    &[data-row-bg-appearance='#{$appearance}'] {
+      --snack-ui-table-row-background: #{styles-tokens-table.color-on-background-with-opacity(
+          styles-tokens-table.simple-var(styles-tokens-table.$theme-variables, 'sys', $appearance, 'accent-default'),
+          styles-tokens-table.$sys-neutral-background1-level,
+          styles-tokens-table.$opacity-a008
+        )};
+    }
+  }
+
   &[data-disabled] {
     cursor: not-allowed;
     background-color: styles-tokens-table.$sys-neutral-background;
@@ -109,19 +119,32 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
   }
 
   &[data-selected] {
-    background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
+    background-color: color-with-opacity-local(
+      styles-tokens-table.$sys-primary-accent-default,
+      styles-tokens-table.$opacity-a008
+    );
 
     .rowPinnedCells {
-      background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a008);
+      background-color: color-with-opacity-local(
+        styles-tokens-table.$sys-primary-accent-default,
+        styles-tokens-table.$opacity-a008
+      );
       border-color: styles-tokens-table.$sys-primary-decor-activated;
     }
 
-    &:hover, &[data-actions-opened] {
-      background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a016);
+    &:hover,
+    &[data-actions-opened] {
+      background-color: color-with-opacity-local(
+        styles-tokens-table.$sys-primary-accent-default,
+        styles-tokens-table.$opacity-a016
+      );
       border-color: styles-tokens-table.$sys-primary-decor-hovered;
 
       .rowPinnedCells {
-        background-color: color-with-opacity-local(styles-tokens-table.$sys-primary-accent-default, styles-tokens-table.$opacity-a016);
+        background-color: color-with-opacity-local(
+          styles-tokens-table.$sys-primary-accent-default,
+          styles-tokens-table.$opacity-a016
+        );
         border-color: styles-tokens-table.$sys-primary-decor-activated;
       }
     }
@@ -139,12 +162,19 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     }
 
     &:not([data-selected]) {
-      &:hover, &[data-actions-opened] {
-        background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
+      &:hover,
+      &[data-actions-opened] {
+        background-color: color-with-opacity-local(
+          styles-tokens-table.$sys-neutral-accent-default,
+          styles-tokens-table.$opacity-a008
+        );
         border-color: styles-tokens-table.$sys-neutral-decor-hovered;
 
         .rowPinnedCells {
-          background-color: color-with-opacity-local(styles-tokens-table.$sys-neutral-accent-default, styles-tokens-table.$opacity-a008);
+          background-color: color-with-opacity-local(
+            styles-tokens-table.$sys-neutral-accent-default,
+            styles-tokens-table.$opacity-a008
+          );
           border-color: inherit;
         }
       }

package/src/helperComponents/contexts.ts

@@ -1,6 +1,10 @@
 import { Table } from '@tanstack/react-table';
 import { createContext, Dispatch, SetStateAction, useContext } from 'react';
 
+import { ValueOf } from '@snack-uikit/utils';
+
+import { TABLE_ROW_COLOR } from '../constants';
+
 type RowContext = {
   dropListOpened: boolean;
   setDropListOpen: Dispatch<SetStateAction<boolean>>;
@@ -15,6 +19,7 @@ export const useRowContext = () => useContext(RowContext);
 
 type TableContext<TData> = {
   table: Table<TData>;
+  getRowBackgroundColor?: (data: TData) => ValueOf<typeof TABLE_ROW_COLOR> | undefined;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any