feat(TableSettings): reset to initial settings

README-ru.md

@@ -726,6 +726,13 @@ const ResizingDemo = () => {
 
 ### Настройки столбцов
 
+Кнопка «Сбросить» в настройках восстанавливает видимость и порядок столбцов из
+`initialState` таблицы. Изменения применяются после нажатия «Применить». Если
+`initialState` не задан, все столбцы становятся видимыми и возвращаются к порядку из
+определения.
+Необязательный обработчик `onSettingsReset` получает восстановленные видимость и порядок
+столбцов при нажатии «Сбросить», до применения изменений.
+
 ```tsx
 const columns: ColumnDef<Person>[] = [
   // ...other columns

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<Person>[] = [
   // ...other columns

src/components/TableSettings/TableSettings.tsx

@@ -32,15 +32,15 @@
     searchPlaceholder?: string;
 }
 
+interface TableSettingsState {
+    visibilityState: VisibilityState;
+    columnOrder: string[];
+}
+
 export interface TableSettingsProps<TData> extends TableSettingsOptions {
     table: Table<TData>;
-    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,12 +54,13 @@
     enableSearch = false,
     searchPlaceholder = '',
     onSettingsApply,
+    onSettingsReset,
 }: TableSettingsProps<TData>) => {
     const anchorRef = React.useRef<HTMLButtonElement>(null);
     const [open, setOpen] = React.useState<boolean>(false);
     const [search, setSearch] = React.useState('');
     const [expandNestedColumns, setExpandNestedColumns] = React.useState(false);
     const allColumns = React.useMemo(table.getAllColumns, [table]);
     const filteredColumns = React.useMemo(() => allColumns.filter(isDisplayedColumn), [allColumns]);
 
     const headers = table.getFlatHeaders();
@@ -126,7 +127,7 @@
             );
         }
 
         return displayedColumns.map((innerColumn) => {
             const children = innerColumn.columns.length
                 ? renderColumns(innerColumn.columns.filter(isDisplayedColumn), innerColumn)
                 : null;
@@ -159,6 +160,21 @@
         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 @@
                 </div>
                 <Divider />
                 {!emptyResult && (
-                    <div className={b('popover-actions')}>
-                        <Button view="action" size="m" onClick={applyNewSettings} width="max">
+                    <Flex gap="2" className={b('popover-actions')}>
+                        <Button view="normal" size="l" onClick={resetToInitial} width="max">
+                            {i18n('button_reset')}
+                        </Button>
+                        <Button view="action" size="l" onClick={applyNewSettings} width="max">
                             {i18n('button_apply')}
                         </Button>
-                    </div>
+                    </Flex>
                 )}
             </Popup>
             <Button view="flat-secondary" size="m" ref={anchorRef} onClick={togglePopup}>

src/components/TableSettings/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "button_apply": "Apply",
+  "button_reset": "Reset",
   "expand_button": "Expand all",
   "collapse_button": "Collapse all",
   "not_found": "Your search returned no results. Try to change your request.",

src/components/TableSettings/i18n/ru.json

@@ -1,5 +1,6 @@
 {
   "button_apply": "Применить",
+  "button_reset": "Сбросить",
   "expand_button": "Развернуть всё",
   "collapse_button": "Свернуть всё",
   "not_found": "Поиск не дал результатов. Попробуйте сформулировать запрос иначе.",