@snack-uikit/table 0.37.15 → 0.37.16-preview-7979881e.0

package/README.md

@@ -126,7 +126,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |
-| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
+| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: "disabled" \| "hide-check"; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Внешний вид недоступной для выбора строки (по дефолту = disabled) <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | rowAutoHeight | `boolean` | - |  |
@@ -200,7 +200,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |
-| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
+| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: "disabled" \| "hide-check"; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Внешний вид недоступной для выбора строки (по дефолту = disabled) <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | rowAutoHeight | `boolean` | - |  |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |

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

@@ -457,7 +457,8 @@ function Table(_a) {
                 }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   rowAutoHeight: rowAutoHeight,
-                  columnOrder: columnOrder
+                  columnOrder: columnOrder,
+                  disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                 }, row.id))]
               }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
                 children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
@@ -471,20 +472,23 @@ function Table(_a) {
                     onRowClick: onRowClick,
                     rowAutoHeight: rowAutoHeight,
                     columnOrder: columnOrder,
-                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
+                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                   }, row.id))
                 }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   onRowClick: onRowClick,
                   rowAutoHeight: rowAutoHeight,
                   columnOrder: columnOrder,
-                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
+                  disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                 }, row.id)), data.length > 0 && infiniteLoading && loading && !dataError && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
                   loading: true,
                   children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                     row: row,
                     columnOrder: columnOrder,
-                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
+                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                   }, row.id))
                 }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
                   emptyStates: emptyStates,

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

@@ -55,6 +55,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      * <strong>initialState</strong>: Начальное состояние выбора строк <br>
      * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
      * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
+     * <strong>appearance</strong>: Внешний вид недоступной для выбора строки (по дефолту = disabled) <br>
      * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
      * <strong>onChange</strong>: Колбэк на выбор строк
      *  */
@@ -64,6 +65,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         enable?: RowSelectionOptions<TData>['enableRowSelection'];
         multiRow?: boolean;
         onChange?(state: RowSelectionState): void;
+        appearance?: 'disabled' | 'hide-check';
     };
     /** Параметры отвечают за глобальный поиск в таблице <br>
      * <strong>initialState</strong>: Начальное состояние строки поиска <br>

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

@@ -14,5 +14,6 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     onRowClick?: RowClickHandler<TData>;
     columnOrder: ColumnOrder;
     enableColumnsOrderSortByDrag?: boolean;
+    disabledRowAppearance?: 'disabled' | 'hide-check';
 };
-export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -25,7 +25,8 @@ function BodyRow(_ref) {
     onRowClick,
     rowAutoHeight,
     columnOrder,
-    enableColumnsOrderSortByDrag
+    enableColumnsOrderSortByDrag,
+    disabledRowAppearance = 'disabled'
   } = _ref;
   const {
     leftPinned,
@@ -57,6 +58,7 @@ function BodyRow(_ref) {
       onClick: handleRowClick,
       "data-clickable": Boolean(onRowClick) || undefined,
       "data-disabled": disabled || undefined,
+      "data-disabled-row-appearance": disabled ? disabledRowAppearance : undefined,
       "data-selected": isSelected || undefined,
       "data-actions-opened": dropListOpened || undefined,
       "data-test-id": constants_1.TEST_IDS.bodyRow,

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

@@ -84,9 +84,11 @@
 }
 .bodyRow[data-disabled]{
   cursor:not-allowed;
+}
+.bodyRow[data-disabled-row-appearance=disabled]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
-.bodyRow[data-disabled] .rowPinnedCells{
+.bodyRow[data-disabled-row-appearance=disabled] .rowPinnedCells{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 .bodyRow[data-selected]{

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

@@ -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, 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 }))] })));
+                        : 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, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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

@@ -55,6 +55,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      * <strong>initialState</strong>: Начальное состояние выбора строк <br>
      * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
      * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
+     * <strong>appearance</strong>: Внешний вид недоступной для выбора строки (по дефолту = disabled) <br>
      * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
      * <strong>onChange</strong>: Колбэк на выбор строк
      *  */
@@ -64,6 +65,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         enable?: RowSelectionOptions<TData>['enableRowSelection'];
         multiRow?: boolean;
         onChange?(state: RowSelectionState): void;
+        appearance?: 'disabled' | 'hide-check';
     };
     /** Параметры отвечают за глобальный поиск в таблице <br>
      * <strong>initialState</strong>: Начальное состояние строки поиска <br>

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

@@ -14,5 +14,6 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     onRowClick?: RowClickHandler<TData>;
     columnOrder: ColumnOrder;
     enableColumnsOrderSortByDrag?: boolean;
+    disabledRowAppearance?: 'disabled' | 'hide-check';
 };
-export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,7 @@ import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }) {
+export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance = 'disabled', }) {
     const { leftPinned, rightPinned, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
@@ -25,5 +25,5 @@ export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableCol
     };
     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))) }))] }) }));
+    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-disabled-row-appearance": disabled ? disabledRowAppearance : 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/styles.module.css

@@ -84,9 +84,11 @@
 }
 .bodyRow[data-disabled]{
   cursor:not-allowed;
+}
+.bodyRow[data-disabled-row-appearance=disabled]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
-.bodyRow[data-disabled] .rowPinnedCells{
+.bodyRow[data-disabled-row-appearance=disabled] .rowPinnedCells{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 .bodyRow[data-selected]{

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.15",
+  "version": "0.37.16-preview-7979881e.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "fc6ef99551b60c7b9d2f8cacc87cfb0fd35030bf"
+  "gitHead": "c6486b320e4fb2a2f2cbc22f615007b4c76c57a5"
 }

package/src/components/Table/Table.tsx

@@ -530,7 +530,13 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                   <SkeletonContextProvider loading>
                     <HeaderRow rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />
                     {loadingTableRows.map(row => (
-                      <BodyRow key={row.id} row={row} rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />
+                      <BodyRow
+                        key={row.id}
+                        row={row}
+                        rowAutoHeight={rowAutoHeight}
+                        columnOrder={columnOrder}
+                        disabledRowAppearance={rowSelectionProp?.appearance}
+                      />
                     ))}
                   </SkeletonContextProvider>
                 ) : (
@@ -553,6 +559,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             rowAutoHeight={rowAutoHeight}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                            disabledRowAppearance={rowSelectionProp?.appearance}
                           />
                         ))}
                       </div>
@@ -566,6 +573,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                         rowAutoHeight={rowAutoHeight}
                         columnOrder={columnOrder}
                         enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                        disabledRowAppearance={rowSelectionProp?.appearance}
                       />
                     ))}
 
@@ -577,6 +585,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             row={row}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                            disabledRowAppearance={rowSelectionProp?.appearance}
                           />
                         ))}
                       </SkeletonContextProvider>

package/src/components/types.ts

@@ -69,6 +69,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
    * <strong>initialState</strong>: Начальное состояние выбора строк <br>
    * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
    * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
+   * <strong>appearance</strong>: Внешний вид недоступной для выбора строки (по дефолту = disabled) <br>
    * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
    * <strong>onChange</strong>: Колбэк на выбор строк
    *  */
@@ -78,6 +79,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     enable?: RowSelectionOptions<TData>['enableRowSelection'];
     multiRow?: boolean;
     onChange?(state: RowSelectionState): void;
+    appearance?: 'disabled' | 'hide-check';
   };
   /** Параметры отвечают за глобальный поиск в таблице <br>
    * <strong>initialState</strong>: Начальное состояние строки поиска <br>

package/src/helperComponents/Rows/BodyRow.tsx

@@ -25,6 +25,7 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
   onRowClick?: RowClickHandler<TData>;
   columnOrder: ColumnOrder;
   enableColumnsOrderSortByDrag?: boolean;
+  disabledRowAppearance?: 'disabled' | 'hide-check';
 };
 
 export function BodyRow<TData>({
@@ -33,6 +34,7 @@ export function BodyRow<TData>({
   rowAutoHeight,
   columnOrder,
   enableColumnsOrderSortByDrag,
+  disabledRowAppearance = 'disabled',
 }: BodyRowProps<TData>) {
   const { leftPinned, rightPinned, unpinned } = useRowCells(row);
 
@@ -64,6 +66,7 @@ export function BodyRow<TData>({
         onClick={handleRowClick}
         data-clickable={Boolean(onRowClick) || undefined}
         data-disabled={disabled || undefined}
+        data-disabled-row-appearance={disabled ? disabledRowAppearance : undefined}
         data-selected={isSelected || undefined}
         data-actions-opened={dropListOpened || undefined}
         data-test-id={TEST_IDS.bodyRow}

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

@@ -108,9 +108,11 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
         )};
     }
   }
-
   &[data-disabled] {
     cursor: not-allowed;
+  }
+
+  &[data-disabled-row-appearance='disabled'] {
     background-color: styles-tokens-table.$sys-neutral-background;
 
     .rowPinnedCells {