feat(Table): table settings component added

README.md

@@ -349,4 +349,46 @@ const ResizingDemo = () => {
 };
 ```
 
+### Column settings
+
+```tsx
+const columns: ColumnDef<Person>[] = [
+  // ...other columns
+  {
+    id: 'settings_column_id',
+    header: (context) => <TableSettings {...context} columnId="settings_column_id" />,
+  }, // or u can use function getSettingsColumn
+];
+
+const data: Person[] = [
+  /* ... */
+];
+
+const TableSettingsDemo = () => {
+  const [columnVisibility, onColumnVisibilityChange] = React.useState<VisibilityState>({
+    // for outside control and initial state
+    column_id: false, // for hidding by default
+  });
+  const [columnOrder, onColumnOrderChange] = React.useState<string[]>([
+    /* leaf columns ids */
+  ]); // for outside control and initial state
+
+  // Alternative variant to get state, callbacks, and set on setting apply callbacks - using useTableSettings hook:
+  // const {state, callbacks} = useTableSettings({initialVisibility: {}, initialOrder: []})
+
+  const table = useTable({
+    columns,
+    data,
+    state: {
+      columnVisibility,
+      columnOrder,
+    },
+    onColumnVisibilityChange,
+    onColumnOrderChange,
+  });
+
+  return <Table table={table} />;
+};
+```
+
 Learn more about the table and the column resizing properties in the react-table [docs](https://tanstack.com/table/v8/docs/api/features/column-sizing)

package.json

@@ -52,6 +52,7 @@
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@gravity-ui/eslint-config": "^3.2.0",
+    "@gravity-ui/i18n": "^1.6.0",
     "@gravity-ui/icons": "^2.11.0",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
@@ -99,6 +100,7 @@
   "peerDependencies": {
     "@dnd-kit/core": "^6.0.0",
     "@dnd-kit/sortable": "^8.0.0",
+    "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/icons": "^2.0.0",
     "@gravity-ui/uikit": "^6.0.0",
     "react": "^17.0.0 || ^18.0.0",

src/components/TableSettings/TableSettings.classname.ts

@@ -0,0 +1,3 @@
+import {block} from '../../utils';
+
+export const b = block('table-settings');

src/components/TableSettings/TableSettings.scss

@@ -0,0 +1,21 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}table-settings';
+
+#{$block} {
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+
+    &__popover-content {
+        padding: var(--g-spacing-1);
+        margin-block-end: calc(-1 * calc(var(--g-spacing-2) + var(--g-spacing-half)));
+        overflow: auto;
+    }
+
+    &__popover-actions {
+        position: relative;
+        padding: var(--g-spacing-2);
+        background-color: var(--g-color-base-background);
+    }
+}

src/components/TableSettings/TableSettings.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+
+import {DndContext, MouseSensor, TouchSensor, useSensor, useSensors} from '@dnd-kit/core';
+import {SortableContext, verticalListSortingStrategy} from '@dnd-kit/sortable';
+import {Gear} from '@gravity-ui/icons';
+import {Button, Divider, Icon, Popup} from '@gravity-ui/uikit';
+import type {PopperPlacement} from '@gravity-ui/uikit/build/esm/hooks/private';
+import type {Column, Header, Table, VisibilityState} from '@tanstack/react-table';
+
+import {TableSettingsColumn} from '../TableSettingsColumn/TableSettingsColumn';
+
+import {b} from './TableSettings.classname';
+import {
+    getInitialOrderItems,
+    orderStateToColumnOrder,
+    useOrderedItems,
+} from './TableSettings.utils';
+import i18n from './i18n';
+
+import './TableSettings.scss';
+
+export interface TableSettingsOptions {
+    sortable?: boolean;
+    filterable?: boolean;
+}
+
+export interface TableSettingsProps<TData> extends TableSettingsOptions {
+    table: Table<TData>;
+    columnId?: string;
+    onSettingsApply?: ({
+        visibilityState,
+        columnOrder,
+    }: {
+        visibilityState: VisibilityState;
+        columnOrder: string[];
+    }) => void;
+}
+
+const POPUP_PLACEMENT: PopperPlacement = ['bottom-end', 'bottom', 'top-end', 'top', 'auto'];
+
+export const TableSettings = <TData extends unknown>({
+    table,
+    sortable = true,
+    filterable = true,
+    columnId,
+    onSettingsApply,
+}: TableSettingsProps<TData>) => {
+    const anchorRef = React.useRef<HTMLButtonElement>(null);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const columns = table.getAllColumns();
+    const filteredColumns = React.useMemo(
+        () => (columnId ? columns.filter((otherColumn) => otherColumn.id !== columnId) : columns),
+        [columnId, columns],
+    );
+    const headers = table.getFlatHeaders();
+    const headersById = React.useMemo(() => {
+        return headers.reduce<Record<string, Header<TData, unknown>>>((acc, header) => {
+            const result = {...acc};
+            result[header.column.id] = header;
+            return acc;
+        }, {});
+    }, [headers]);
+
+    const [visibilityState, setVisibilityState] = React.useState(
+        () => table.getState().columnVisibility,
+    );
+    const [orderState, setOrderState] = React.useState(() => getInitialOrderItems(filteredColumns));
+
+    const applyNewSettings = () => {
+        const columnOrder = orderStateToColumnOrder(orderState);
+
+        if (onSettingsApply) onSettingsApply({visibilityState, columnOrder});
+
+        if (filterable) table.setColumnVisibility(visibilityState);
+        if (sortable) table.setColumnOrder(columnOrder);
+
+        setOpen(false);
+    };
+
+    const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
+
+    const {orderedItems, activeDepth, handleDragEnd, handleDragStart, handleDragCancel} =
+        useOrderedItems(filteredColumns, orderState, setOrderState);
+
+    const renderColumns = (renderedColumns: Column<TData>[]) => {
+        return renderedColumns.map((innerColumn) => {
+            const children = renderColumns(innerColumn.columns);
+            const header = headersById[innerColumn.id];
+
+            return (
+                <TableSettingsColumn
+                    key={innerColumn.id}
+                    column={innerColumn}
+                    header={header}
+                    visibilityState={visibilityState}
+                    sortable={sortable}
+                    filterable={filterable}
+                    activeDepth={activeDepth}
+                    onVisibilityToggle={setVisibilityState}
+                >
+                    {children}
+                </TableSettingsColumn>
+            );
+        });
+    };
+
+    return (
+        <React.Fragment>
+            <Popup
+                open={open}
+                onClose={() => setOpen(false)}
+                anchorRef={anchorRef}
+                placement={POPUP_PLACEMENT}
+                contentClassName={b()}
+            >
+                <div className={b('popover-content')}>
+                    <DndContext
+                        onDragEnd={handleDragEnd}
+                        onDragStart={handleDragStart}
+                        onDragCancel={handleDragCancel}
+                        sensors={sensors}
+                    >
+                        <SortableContext
+                            items={orderedItems.map(({id}) => id)}
+                            strategy={verticalListSortingStrategy}
+                        >
+                            {renderColumns(orderedItems)}
+                        </SortableContext>
+                    </DndContext>
+                </div>
+                <Divider />
+                <div className={b('popover-actions')}>
+                    <Button view="action" size="m" onClick={applyNewSettings} width="max">
+                        {i18n('button_apply')}
+                    </Button>
+                </div>
+            </Popup>
+            <Button view="flat-secondary" size="m" ref={anchorRef} onClick={() => setOpen(!open)}>
+                <Icon data={Gear} />
+            </Button>
+        </React.Fragment>
+    );
+};

src/components/TableSettings/TableSettings.utils.ts

@@ -0,0 +1,113 @@
+import React from 'react';
+
+import type {DragEndEvent, DragStartEvent, UniqueIdentifier} from '@dnd-kit/core';
+import {arrayMove} from '@dnd-kit/sortable';
+import type {Column} from '@tanstack/react-table';
+
+const filterColumns = <TData extends unknown>(
+    column: Column<TData> | undefined,
+): column is Column<TData> => Boolean(column);
+
+const orderItem = <TData extends unknown>(
+    item: Column<TData>,
+    state: Record<string, string[]>,
+): Column<TData> => {
+    const childrenOrder = state[item.id] ?? [];
+    const orderedChildren = childrenOrder
+        .map((orderId) => item.columns?.find(({id}) => id === orderId))
+        .filter(filterColumns);
+    return {
+        ...item,
+        columns: orderedChildren?.map((child) => orderItem(child, state)) ?? [],
+    };
+};
+
+export const findContainer = (itemsMap: Record<string, string[]>, id?: UniqueIdentifier) => {
+    if (!id) return undefined;
+    return Object.keys(itemsMap).find((key) => itemsMap[key].includes(id.toString()));
+};
+
+export const useOrderedItems = <TData extends unknown>(
+    items: Column<TData>[],
+    orderState: Record<string, string[]>,
+    setOrderState: React.Dispatch<React.SetStateAction<Record<string, string[]>>>,
+) => {
+    const [activeDepth, setActiveDepth] = React.useState<number | undefined>();
+
+    const depthMap = React.useMemo(() => {
+        const stack = [...items];
+        const result: Record<string, number> = {};
+
+        while (stack.length) {
+            const item = stack.pop();
+            if (!item) continue;
+            result[item.id] = item.depth;
+            if (item.columns) stack.push(...item.columns);
+        }
+
+        return result;
+    }, [items]);
+
+    const orderedItems = React.useMemo(() => {
+        return (
+            orderState['root']
+                .map((orderId) => items.find(({id}) => id === orderId))
+                .filter(filterColumns)
+                .map((item) => orderItem(item, orderState)) ?? []
+        );
+    }, [orderState, items]);
+
+    const handleDragEnd = ({active, over}: DragEndEvent) => {
+        setActiveDepth(undefined);
+        const activeContainer = findContainer(orderState, active.id);
+        const overContainer = findContainer(orderState, over?.id);
+        if (!activeContainer || !overContainer || activeContainer !== overContainer) return;
+        const activeIndex = orderState[activeContainer].indexOf(active.id.toString());
+        const overIndex = over ? orderState[overContainer].indexOf(over?.id.toString()) : -1;
+        if (activeIndex !== overIndex) {
+            setOrderState((prevState) => ({
+                ...prevState,
+                [overContainer]: arrayMove(orderState[overContainer], activeIndex, overIndex),
+            }));
+        }
+    };
+
+    const handleDragStart = ({active}: DragStartEvent) => {
+        setActiveDepth(depthMap[active.id]);
+    };
+
+    const handleDragCancel = () => {
+        setActiveDepth(undefined);
+    };
+
+    return {orderedItems, activeDepth, handleDragEnd, handleDragStart, handleDragCancel};
+};
+
+export const orderStateToColumnOrder = (state: Record<string, string[]>) => {
+    const result = [];
+    const stack = [...state['root']];
+
+    while (stack.length) {
+        const item = stack.shift();
+        if (!item) continue;
+        const children = state[item];
+
+        if (children.length) stack.unshift(...children);
+        else result.push(item);
+    }
+    return result;
+};
+
+export const getInitialOrderItems = <TData extends unknown>(treeItems: Column<TData>[]) => {
+    const stack = [...treeItems];
+    const result: Record<string, string[]> = {root: treeItems.map(({id}) => id)};
+
+    while (stack.length) {
+        const item = stack.shift();
+        if (!item) continue;
+        result[item.id] = item?.columns?.map(({id}) => id) ?? [];
+        if (item.columns) stack.push(...item.columns);
+    }
+
+    return result;
+};