diff --git a/README-ru.md b/README-ru.md index faf6fb5..3d513f6 100644 --- a/README-ru.md +++ b/README-ru.md @@ -726,6 +726,13 @@ const ResizingDemo = () => { ### Настройки столбцов +Кнопка «Сбросить» в настройках восстанавливает видимость и порядок столбцов из +`initialState` таблицы. Изменения применяются после нажатия «Применить». Если +`initialState` не задан, все столбцы становятся видимыми и возвращаются к порядку из +определения. +Необязательный обработчик `onSettingsReset` получает восстановленные видимость и порядок +столбцов при нажатии «Сбросить», до применения изменений. + ```tsx const columns: ColumnDef[] = [ // ...other columns diff --git a/README.md b/README.md index 9783129..26d2d13 100644 --- a/README.md +++ b/README.md @@ -724,6 +724,12 @@ const ResizingDemo = () => { #### Column settings +The settings popup's Reset button restores column visibility and order from the table's +`initialState`. Reset changes the popup draft; press Apply to save it. Without an +`initialState`, Reset shows all columns in their definition order. +The optional `onSettingsReset` callback receives that restored visibility and column order +when Reset is clicked, before the draft is applied. + ```tsx const columns: ColumnDef[] = [ // ...other columns diff --git a/src/components/TableSettings/TableSettings.tsx b/src/components/TableSettings/TableSettings.tsx index ed0677a..ec92c25 100644 --- a/src/components/TableSettings/TableSettings.tsx +++ b/src/components/TableSettings/TableSettings.tsx @@ -32,15 +32,15 @@ export interface TableSettingsOptions { searchPlaceholder?: string; } +interface TableSettingsState { + visibilityState: VisibilityState; + columnOrder: string[]; +} + export interface TableSettingsProps extends TableSettingsOptions { table: Table; - onSettingsApply?: ({ - visibilityState, - columnOrder, - }: { - visibilityState: VisibilityState; - columnOrder: string[]; - }) => void; + onSettingsApply?: (settings: TableSettingsState) => void; + onSettingsReset?: (settings: TableSettingsState) => void; } const POPUP_PLACEMENT: PopupPlacement = ['bottom-end', 'bottom', 'top-end', 'top', 'left', 'right']; @@ -54,6 +54,7 @@ export const TableSettings = ({ enableSearch = false, searchPlaceholder = '', onSettingsApply, + onSettingsReset, }: TableSettingsProps) => { const anchorRef = React.useRef(null); const [open, setOpen] = React.useState(false); @@ -159,6 +160,21 @@ export const TableSettings = ({ setSearch(''); }; + const resetToInitial = () => { + const initialVisibility = table.initialState.columnVisibility ?? {}; + const initialOrder = getInitialOrderItems( + filteredColumns, + table.initialState.columnOrder ?? [], + ); + + setVisibilityState(initialVisibility); + setOrderState(initialOrder); + onSettingsReset?.({ + visibilityState: initialVisibility, + columnOrder: orderStateToColumnOrder(initialOrder), + }); + }; + const cancelEditing = () => { setOpen(false); resetSettings(); @@ -248,11 +264,14 @@ export const TableSettings = ({ {!emptyResult && ( -
- + -
+ )}