@cloud-ru/uikit-product-mobile-table 2.2.13 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +22 -0
- package/dist/cjs/components/MobileTable/MobileTable.d.ts +1 -1
- package/dist/cjs/components/MobileTable/MobileTable.js +2 -2
- package/dist/cjs/components/MobileTable/types.d.ts +1 -1
- package/dist/cjs/helperComponents/TableCard/TableCard.d.ts +2 -1
- package/dist/cjs/helperComponents/TableCard/TableCard.js +2 -2
- package/dist/esm/components/MobileTable/MobileTable.d.ts +1 -1
- package/dist/esm/components/MobileTable/MobileTable.js +2 -2
- package/dist/esm/components/MobileTable/types.d.ts +1 -1
- package/dist/esm/helperComponents/TableCard/TableCard.d.ts +2 -1
- package/dist/esm/helperComponents/TableCard/TableCard.js +2 -2
- package/package.json +6 -6
- package/src/components/MobileTable/MobileTable.tsx +10 -1
- package/src/components/MobileTable/types.ts +1 -0
- package/src/helperComponents/TableCard/TableCard.tsx +5 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,28 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# 2.3.0 (2026-05-04)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* **PDS-3785:** added suppress header prop ([df11674](https://github.com/cloud-ru-tech/uikit-product/commit/df116741e1b44844fba7cb1cd0e43da75c6868e2))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## 2.2.14 (2026-04-30)
|
|
18
|
+
|
|
19
|
+
### Only dependencies have been changed
|
|
20
|
+
* [@cloud-ru/uikit-product-mobile-chips@2.0.16]($PUBLIC_PROJECT_URL/blob/master/packages/mobile-chips/CHANGELOG.md)
|
|
21
|
+
* [@cloud-ru/uikit-product-mobile-dropdown@2.1.13]($PUBLIC_PROJECT_URL/blob/master/packages/mobile-dropdown/CHANGELOG.md)
|
|
22
|
+
* [@cloud-ru/uikit-product-mobile-toolbar@2.0.17]($PUBLIC_PROJECT_URL/blob/master/packages/mobile-toolbar/CHANGELOG.md)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## 2.2.13 (2026-04-27)
|
|
7
29
|
|
|
8
30
|
### Only dependencies have been changed
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
|
|
2
2
|
import { MobileTableProps } from './types';
|
|
3
|
-
export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressHeader, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare namespace MobileTable {
|
|
5
5
|
var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
|
|
6
6
|
var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
|
|
@@ -30,7 +30,7 @@ const hooks_1 = require("./hooks");
|
|
|
30
30
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
31
31
|
const utils_1 = require("./utils");
|
|
32
32
|
function MobileTable(_a) {
|
|
33
|
-
var { data, columnDefinitions, headlineId, suppressPagination = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "getRowId", "rowSelection", "bulkActions", "columnsSettings", "savedState", "toolbarCheckBoxMode"]);
|
|
33
|
+
var { data, columnDefinitions, headlineId, suppressPagination = false, suppressHeader = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressHeader", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "getRowId", "rowSelection", "bulkActions", "columnsSettings", "savedState", "toolbarCheckBoxMode"]);
|
|
34
34
|
const defaultPaginationState = (0, react_1.useMemo)(() => ({ pageIndex: 0, pageSize: constants_1.DEFAULT_PAGE_SIZE }), []);
|
|
35
35
|
const { state: sorting, onStateChange: onSortingChange } = (0, hooks_1.useStateControl)(sortingProp, []);
|
|
36
36
|
const { state: globalFilter, onStateChange: onGlobalFilterChange } = (0, hooks_1.useStateControl)(search, '');
|
|
@@ -216,7 +216,7 @@ function MobileTable(_a) {
|
|
|
216
216
|
}
|
|
217
217
|
},
|
|
218
218
|
}
|
|
219
|
-
: undefined }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none' }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
|
|
219
|
+
: undefined }) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.table, children: loading ? ((0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none', suppressHeader: suppressHeader }, index))) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [tableRows.map((row, index) => ((0, jsx_runtime_1.jsx)(helperComponents_1.TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none', suppressHeader: suppressHeader }, index))), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, { table: table })] })));
|
|
220
220
|
}
|
|
221
221
|
MobileTable.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;
|
|
222
222
|
MobileTable.getStatusColumnDef = helperComponents_1.getStatusColumnDef;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
|
|
2
2
|
import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
|
|
3
3
|
import { TableProps } from '@snack-uikit/table';
|
|
4
|
-
export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions' | 'columnsSettings' | 'savedState' | 'autoResetPageIndex' | 'toolbarAfter' | 'toolbarCheckBoxMode'> & WithSupportProps<{
|
|
4
|
+
export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressHeader' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions' | 'columnsSettings' | 'savedState' | 'autoResetPageIndex' | 'toolbarAfter' | 'toolbarCheckBoxMode'> & WithSupportProps<{
|
|
5
5
|
headlineId?: string;
|
|
6
6
|
headerBackground?: 'default' | '1-level' | '2-level';
|
|
7
7
|
/** Фильтры */
|
|
@@ -6,6 +6,7 @@ type TableCardProps<TData extends object> = {
|
|
|
6
6
|
table: Table<TData>;
|
|
7
7
|
selection: 'multiple' | 'single' | 'none';
|
|
8
8
|
selectionAppearance?: RowAppearance;
|
|
9
|
+
suppressHeader?: boolean;
|
|
9
10
|
};
|
|
10
|
-
export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, suppressHeader, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -11,7 +11,7 @@ const table_1 = require("@snack-uikit/table");
|
|
|
11
11
|
const toggles_1 = require("@snack-uikit/toggles");
|
|
12
12
|
const constants_1 = require("../../constants");
|
|
13
13
|
const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
|
|
14
|
-
function TableCard({ headlineId, table, row, selection, selectionAppearance = table_1.RowAppearance.Disabled, }) {
|
|
14
|
+
function TableCard({ headlineId, table, row, selection, selectionAppearance = table_1.RowAppearance.Disabled, suppressHeader = false, }) {
|
|
15
15
|
const headerGroups = table.getHeaderGroups();
|
|
16
16
|
const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
|
|
17
17
|
const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
|
|
@@ -36,7 +36,7 @@ function TableCard({ headlineId, table, row, selection, selectionAppearance = ta
|
|
|
36
36
|
}
|
|
37
37
|
const column = header.column.columnDef;
|
|
38
38
|
const cell = row._getAllCellsByColumnId()[header.column.id];
|
|
39
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardRow, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowHeader, children: (0, react_table_1.flexRender)(column.header, header.getContext()) }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowContent, children: (0, react_table_1.flexRender)(column.cell, cell.getContext()) })] }, header.id || index));
|
|
39
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.cardRow, children: [!suppressHeader && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowHeader, children: (0, react_table_1.flexRender)(column.header, header.getContext()) })), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.cardRowContent, children: (0, react_table_1.flexRender)(column.cell, cell.getContext()) })] }, header.id || index));
|
|
40
40
|
})) })] }), selection === 'single' &&
|
|
41
41
|
(isDisabled && selectionAppearance === table_1.RowAppearance.HideToggler ? null : ((0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected, disabled: isDisabled }))), selection === 'multiple' &&
|
|
42
42
|
(isDisabled && selectionAppearance === table_1.RowAppearance.HideToggler ? null : ((0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'm', className: styles_module_scss_1.default.selectionController, checked: isSelected, disabled: isDisabled }))), actionsCell && actionsColumn && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.button, children: (0, react_table_1.flexRender)(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { FiltersState } from '@cloud-ru/uikit-product-mobile-chips';
|
|
2
2
|
import { MobileTableProps } from './types';
|
|
3
|
-
export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare function MobileTable<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, columnDefinitions, headlineId, suppressPagination, suppressHeader, suppressToolbar, suppressSearch, enableFuzzySearch, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground, noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode, ...rest }: MobileTableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare namespace MobileTable {
|
|
5
5
|
var getRowActionsColumnDef: typeof import("../../helperComponents").getRowActionsColumnDef;
|
|
6
6
|
var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
|
|
@@ -24,7 +24,7 @@ import { useFilters, useLoadingTable, useStateControl } from './hooks';
|
|
|
24
24
|
import styles from './styles.module.css';
|
|
25
25
|
import { fuzzyFilter, getPersistedStateValidator, mapPaginationToRequestPayload, mapPaginationToTableState, mapSortToRequestPayload, mapSortToTableState, } from './utils';
|
|
26
26
|
export function MobileTable(_a) {
|
|
27
|
-
var { data, columnDefinitions, headlineId, suppressPagination = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "getRowId", "rowSelection", "bulkActions", "columnsSettings", "savedState", "toolbarCheckBoxMode"]);
|
|
27
|
+
var { data, columnDefinitions, headlineId, suppressPagination = false, suppressHeader = false, suppressToolbar = false, suppressSearch = false, enableFuzzySearch = false, search, onRefresh, toolbarAfter, moreActions, columnFilters, className, headerBackground = 'default', noDataState, noResultsState, errorDataState, loading, dataError, dataFiltered, pagination: paginationProp, pageCount, sorting: sortingProp, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, getRowId, rowSelection: rowSelectionProp, bulkActions: bulkActionsProp, columnsSettings: columnsSettingsProp, savedState, toolbarCheckBoxMode } = _a, rest = __rest(_a, ["data", "columnDefinitions", "headlineId", "suppressPagination", "suppressHeader", "suppressToolbar", "suppressSearch", "enableFuzzySearch", "search", "onRefresh", "toolbarAfter", "moreActions", "columnFilters", "className", "headerBackground", "noDataState", "noResultsState", "errorDataState", "loading", "dataError", "dataFiltered", "pagination", "pageCount", "sorting", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "getRowId", "rowSelection", "bulkActions", "columnsSettings", "savedState", "toolbarCheckBoxMode"]);
|
|
28
28
|
const defaultPaginationState = useMemo(() => ({ pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE }), []);
|
|
29
29
|
const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
|
|
30
30
|
const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
|
|
@@ -210,7 +210,7 @@ export function MobileTable(_a) {
|
|
|
210
210
|
}
|
|
211
211
|
},
|
|
212
212
|
}
|
|
213
|
-
: undefined }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none' }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none' }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
|
|
213
|
+
: undefined }) })), _jsx("div", { className: styles.table, children: loading ? (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: loadingTable, selection: 'none', suppressHeader: suppressHeader }, index))) })) : (_jsxs(_Fragment, { children: [tableRows.map((row, index) => (_jsx(TableCard, { headlineId: headlineId, row: row, table: table, selectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance, selection: enableSelection ? selectionMode : 'none', suppressHeader: suppressHeader }, index))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length })] })) }), !suppressPagination && _jsx(TablePagination, { table: table })] })));
|
|
214
214
|
}
|
|
215
215
|
MobileTable.getRowActionsColumnDef = getRowActionsColumnDef;
|
|
216
216
|
MobileTable.getStatusColumnDef = getStatusColumnDef;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FiltersState, MobileChipChoiceRowProps } from '@cloud-ru/uikit-product-mobile-chips';
|
|
2
2
|
import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
|
|
3
3
|
import { TableProps } from '@snack-uikit/table';
|
|
4
|
-
export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions' | 'columnsSettings' | 'savedState' | 'autoResetPageIndex' | 'toolbarAfter' | 'toolbarCheckBoxMode'> & WithSupportProps<{
|
|
4
|
+
export type MobileTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = Pick<TableProps<TData, TFilters>, 'data' | 'columnDefinitions' | 'suppressHeader' | 'suppressPagination' | 'suppressToolbar' | 'suppressSearch' | 'search' | 'onRefresh' | 'moreActions' | 'className' | 'enableFuzzySearch' | 'loading' | 'dataError' | 'dataFiltered' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'sorting' | 'pagination' | 'pageCount' | 'manualFiltering' | 'manualPagination' | 'manualSorting' | 'getRowId' | 'rowSelection' | 'bulkActions' | 'columnsSettings' | 'savedState' | 'autoResetPageIndex' | 'toolbarAfter' | 'toolbarCheckBoxMode'> & WithSupportProps<{
|
|
5
5
|
headlineId?: string;
|
|
6
6
|
headerBackground?: 'default' | '1-level' | '2-level';
|
|
7
7
|
/** Фильтры */
|
|
@@ -6,6 +6,7 @@ type TableCardProps<TData extends object> = {
|
|
|
6
6
|
table: Table<TData>;
|
|
7
7
|
selection: 'multiple' | 'single' | 'none';
|
|
8
8
|
selectionAppearance?: RowAppearance;
|
|
9
|
+
suppressHeader?: boolean;
|
|
9
10
|
};
|
|
10
|
-
export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare function TableCard<TData extends object>({ headlineId, table, row, selection, selectionAppearance, suppressHeader, }: TableCardProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
11
12
|
export {};
|
|
@@ -5,7 +5,7 @@ import { RowAppearance } from '@snack-uikit/table';
|
|
|
5
5
|
import { Checkbox, Radio } from '@snack-uikit/toggles';
|
|
6
6
|
import { ROW_ACTIONS_COLUMN_ID } from '../../constants';
|
|
7
7
|
import styles from './styles.module.css';
|
|
8
|
-
export function TableCard({ headlineId, table, row, selection, selectionAppearance = RowAppearance.Disabled, }) {
|
|
8
|
+
export function TableCard({ headlineId, table, row, selection, selectionAppearance = RowAppearance.Disabled, suppressHeader = false, }) {
|
|
9
9
|
const headerGroups = table.getHeaderGroups();
|
|
10
10
|
const headerCell = row._getAllCellsByColumnId()[headlineId !== null && headlineId !== void 0 ? headlineId : ''];
|
|
11
11
|
const headerColumn = table.getFlatHeaders().find(header => header.id === headlineId);
|
|
@@ -30,7 +30,7 @@ export function TableCard({ headlineId, table, row, selection, selectionAppearan
|
|
|
30
30
|
}
|
|
31
31
|
const column = header.column.columnDef;
|
|
32
32
|
const cell = row._getAllCellsByColumnId()[header.column.id];
|
|
33
|
-
return (_jsxs("div", { className: styles.cardRow, children: [_jsx("div", { className: styles.cardRowHeader, children: flexRender(column.header, header.getContext()) }), _jsx("div", { className: styles.cardRowContent, children: flexRender(column.cell, cell.getContext()) })] }, header.id || index));
|
|
33
|
+
return (_jsxs("div", { className: styles.cardRow, children: [!suppressHeader && (_jsx("div", { className: styles.cardRowHeader, children: flexRender(column.header, header.getContext()) })), _jsx("div", { className: styles.cardRowContent, children: flexRender(column.cell, cell.getContext()) })] }, header.id || index));
|
|
34
34
|
})) })] }), selection === 'single' &&
|
|
35
35
|
(isDisabled && selectionAppearance === RowAppearance.HideToggler ? null : (_jsx(Radio, { size: 'm', className: styles.selectionController, checked: isSelected, disabled: isDisabled }))), selection === 'multiple' &&
|
|
36
36
|
(isDisabled && selectionAppearance === RowAppearance.HideToggler ? null : (_jsx(Checkbox, { size: 'm', className: styles.selectionController, checked: isSelected, disabled: isDisabled }))), actionsCell && actionsColumn && (_jsx("div", { className: styles.button, children: flexRender(actionsColumn.column.columnDef.cell, actionsCell.getContext()) }))] }));
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloud-ru/uikit-product-mobile-table",
|
|
3
3
|
"title": "Mobile Table",
|
|
4
|
-
"version": "2.
|
|
4
|
+
"version": "2.3.0",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"*.css",
|
|
7
7
|
"*.woff",
|
|
@@ -38,9 +38,9 @@
|
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@cloud-ru/ft-request-payload-transform": "0.3.0",
|
|
40
40
|
"@cloud-ru/uikit-product-icons": "17.3.0",
|
|
41
|
-
"@cloud-ru/uikit-product-mobile-chips": "2.0.
|
|
42
|
-
"@cloud-ru/uikit-product-mobile-dropdown": "2.1.
|
|
43
|
-
"@cloud-ru/uikit-product-mobile-toolbar": "2.0.
|
|
41
|
+
"@cloud-ru/uikit-product-mobile-chips": "2.0.16",
|
|
42
|
+
"@cloud-ru/uikit-product-mobile-dropdown": "2.1.13",
|
|
43
|
+
"@cloud-ru/uikit-product-mobile-toolbar": "2.0.17",
|
|
44
44
|
"@cloud-ru/uikit-product-utils": "9.1.0",
|
|
45
45
|
"@snack-uikit/button": "0.19.16",
|
|
46
46
|
"@snack-uikit/chips": "0.29.0",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"@snack-uikit/pagination": "0.10.24",
|
|
52
52
|
"@snack-uikit/skeleton": "0.6.9",
|
|
53
53
|
"@snack-uikit/status": "0.10.12",
|
|
54
|
-
"@snack-uikit/table": "0.
|
|
54
|
+
"@snack-uikit/table": "0.39.0",
|
|
55
55
|
"@snack-uikit/toggles": "0.13.26",
|
|
56
56
|
"@snack-uikit/toolbar": "0.14.22",
|
|
57
57
|
"@snack-uikit/utils": "4.0.1",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"devDependencies": {
|
|
68
68
|
"@types/lodash.debounce": "4.0.9"
|
|
69
69
|
},
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "430a072c695d216d9e6666cd157bb630efd20198"
|
|
71
71
|
}
|
|
@@ -53,6 +53,7 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
|
|
|
53
53
|
columnDefinitions,
|
|
54
54
|
headlineId,
|
|
55
55
|
suppressPagination = false,
|
|
56
|
+
suppressHeader = false,
|
|
56
57
|
suppressToolbar = false,
|
|
57
58
|
suppressSearch = false,
|
|
58
59
|
enableFuzzySearch = false,
|
|
@@ -381,7 +382,14 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
|
|
|
381
382
|
{loading ? (
|
|
382
383
|
<SkeletonContextProvider loading>
|
|
383
384
|
{loadingTableRows.map((row, index) => (
|
|
384
|
-
<TableCard
|
|
385
|
+
<TableCard
|
|
386
|
+
key={index}
|
|
387
|
+
headlineId={headlineId}
|
|
388
|
+
row={row}
|
|
389
|
+
table={loadingTable}
|
|
390
|
+
selection='none'
|
|
391
|
+
suppressHeader={suppressHeader}
|
|
392
|
+
/>
|
|
385
393
|
))}
|
|
386
394
|
</SkeletonContextProvider>
|
|
387
395
|
) : (
|
|
@@ -394,6 +402,7 @@ export function MobileTable<TData extends object, TFilters extends FiltersState
|
|
|
394
402
|
table={table}
|
|
395
403
|
selectionAppearance={rowSelectionProp?.appearance}
|
|
396
404
|
selection={enableSelection ? selectionMode : 'none'}
|
|
405
|
+
suppressHeader={suppressHeader}
|
|
397
406
|
/>
|
|
398
407
|
))}
|
|
399
408
|
|
|
@@ -13,6 +13,7 @@ type TableCardProps<TData extends object> = {
|
|
|
13
13
|
table: Table<TData>;
|
|
14
14
|
selection: 'multiple' | 'single' | 'none';
|
|
15
15
|
selectionAppearance?: RowAppearance;
|
|
16
|
+
suppressHeader?: boolean;
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
export function TableCard<TData extends object>({
|
|
@@ -21,6 +22,7 @@ export function TableCard<TData extends object>({
|
|
|
21
22
|
row,
|
|
22
23
|
selection,
|
|
23
24
|
selectionAppearance = RowAppearance.Disabled,
|
|
25
|
+
suppressHeader = false,
|
|
24
26
|
}: TableCardProps<TData>) {
|
|
25
27
|
const headerGroups = table.getHeaderGroups();
|
|
26
28
|
|
|
@@ -67,7 +69,9 @@ export function TableCard<TData extends object>({
|
|
|
67
69
|
|
|
68
70
|
return (
|
|
69
71
|
<div className={styles.cardRow} key={header.id || index}>
|
|
70
|
-
|
|
72
|
+
{!suppressHeader && (
|
|
73
|
+
<div className={styles.cardRowHeader}>{flexRender(column.header, header.getContext())}</div>
|
|
74
|
+
)}
|
|
71
75
|
<div className={styles.cardRowContent}>{flexRender(column.cell, cell.getContext())}</div>
|
|
72
76
|
</div>
|
|
73
77
|
);
|