feat(Table): added options to complex disable sorting or filtration

gravity-ui · Sep 24, 2024 · ed328cc · ed328cc
1 parent e60315f
commit ed328cc
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 33 deletions.
diff --git a/src/components/TableSettings/TableSettings.tsx b/src/components/TableSettings/TableSettings.tsx
@@ -19,14 +19,24 @@ import i18n from './i18n';
 
 import './TableSettings.scss';
 
-interface Props<TData> {
+export interface TableSettingsOptions {
+    sortable?: boolean;
+    filterable?: boolean;
+}
+
+interface Props<TData> extends TableSettingsOptions {
     table: Table<TData>;
     column?: Column<TData, unknown>;
 }
 
 const POPUP_PLACEMENT: PopperPlacement = ['bottom-end', 'bottom', 'top-end', 'top', 'auto'];
 
-export const TableSettings = <TData extends unknown>({table, column}: Props<TData>) => {
+export const TableSettings = <TData extends unknown>({
+    table,
+    sortable = true,
+    filterable = true,
+    column,
+}: Props<TData>) => {
     const anchorRef = React.useRef<HTMLButtonElement>(null);
     const [open, setOpen] = React.useState<boolean>(false);
     const columns = table.getAllColumns();
@@ -63,6 +73,8 @@ export const TableSettings = <TData extends unknown>({table, column}: Props<TDat
                         column={innerColumn}
                         header={header}
                         visibilityState={visibilityState}
+                        sortable={sortable}
+                        filterable={filterable}
                         onVisibilityToggle={setVisibilityState}
                         showDivider={rootNode && !lastInGroup}
                     >

diff --git a/src/components/TableSettings/__stories__/TableSettings.stories.tsx b/src/components/TableSettings/__stories__/TableSettings.stories.tsx
@@ -1,19 +1,30 @@
+import React from 'react';
+
 import type {Meta, StoryObj} from '@storybook/react';
 
+import type {TableSettingsOptions} from '../TableSettings';
+
 import {TableSettingsColumnStory} from './stories/TableSettingsColumnStory';
 import {TableSettingsStory} from './stories/TableSettingsStory';
 
-const meta: Meta<typeof TableSettings> = {
+const meta: Meta<TableSettingsOptions> = {
     title: 'Table settings',
-    component: TableSettingsStory,
+    argTypes: {
+        sortable: {
+            control: 'boolean',
+        },
+        filterable: {
+            control: 'boolean',
+        },
+    },
 };
 
 export default meta;
 
-export const TableSettings: StoryObj<typeof TableSettingsStory> = {
-    render: TableSettingsStory,
-};
+export const TableSettings = {
+    render: (args) => <TableSettingsStory {...args} />,
+} as StoryObj<typeof TableSettingsStory>;
 
-export const TableSettingsColumn: StoryObj<typeof TableSettingsColumnStory> = {
-    render: TableSettingsColumnStory,
-};
+export const TableSettingsColumn = {
+    render: (args) => <TableSettingsColumnStory {...args} />,
+} as StoryObj<typeof TableSettingsColumnStory>;
diff --git a/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx b/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 
 import type {ColumnDef} from '@tanstack/react-table';
 
-import {settingsColumn} from '../../../../constants';
+import {getSettingsColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
 import {Table} from '../../../Table/Table';
+import type {TableSettingsOptions} from '../../TableSettings';
 
 type Item = {
     id: string;
@@ -89,12 +90,12 @@ const columns: ColumnDef<Item>[] = [
             },
         ],
     },
-    settingsColumn as ColumnDef<Item>,
 ];
 
-export const TableSettingsColumnStory = () => {
+export const TableSettingsColumnStory = (options: TableSettingsOptions) => {
+    const settingsColumn = getSettingsColumn<Item>(options);
     const table = useTable({
-        columns: columns,
+        columns: [...columns, settingsColumn],
         data,
     });
 

diff --git a/src/components/TableSettings/__stories__/stories/TableSettingsStory.tsx b/src/components/TableSettings/__stories__/stories/TableSettingsStory.tsx
@@ -5,6 +5,7 @@ import type {ColumnDef, VisibilityState} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
 import {TableSettings} from '../../TableSettings';
+import type {TableSettingsOptions} from '../../TableSettings';
 
 const flatColumns: ColumnDef<unknown>[] = [
     {
@@ -65,7 +66,7 @@ const columns: ColumnDef<unknown>[] = [
     },
 ];
 
-export const TableSettingsStory = () => {
+export const TableSettingsStory = (options: TableSettingsOptions) => {
     const [flatColumnVisibility, onFlatColumnVisibilityChange] = React.useState<VisibilityState>({
         third: false,
         fourth: false,
@@ -121,7 +122,7 @@ export const TableSettingsStory = () => {
                 <div>
                     <Text variant="header-2">Flat table</Text>
                 </div>
-                <TableSettings table={flatTable} />
+                <TableSettings table={flatTable} {...options} />
                 <div>{displayOrderingModel(flatColumnOrder)}</div>
                 <div>{displayVisibilityModel(flatColumnVisibility)}</div>
             </div>
@@ -130,7 +131,7 @@ export const TableSettingsStory = () => {
                 <div>
                     <Text variant="header-2">Grouped table</Text>
                 </div>
-                <TableSettings table={table} />
+                <TableSettings table={table} {...options} />
 
                 <div>{displayOrderingModel(columnOrder)}</div>
                 <div>{displayVisibilityModel(columnVisibility)}</div>

diff --git a/src/components/TableSettingsColumn/TableSettingsColumn.tsx b/src/components/TableSettingsColumn/TableSettingsColumn.tsx
@@ -6,25 +6,31 @@ import {Grip} from '@gravity-ui/icons';
 import {Checkbox, Divider, Icon} from '@gravity-ui/uikit';
 import type {Column, Header, Updater, VisibilityState} from '@tanstack/react-table';
 
+import type {TableSettingsOptions} from '../TableSettings/TableSettings';
+
 import {b} from './TableSettingsColumn.classname';
 import {getIsVisible, isEnabledHidding} from './TableSettingsColumn.utils';
 
 import './TableSettingsColumn.scss';
 
+interface Props<TData> extends TableSettingsOptions {
+    column: Column<TData, unknown>;
+    header: Header<TData, unknown>;
+    visibilityState: VisibilityState;
+    showDivider: boolean;
+    onVisibilityToggle: (updater: Updater<VisibilityState>) => void;
+}
+
 export const TableSettingsColumn = <TData extends unknown>({
     column,
     header,
     children,
     visibilityState,
     showDivider,
+    filterable,
+    sortable,
     onVisibilityToggle,
-}: React.PropsWithChildren<{
-    column: Column<TData, unknown>;
-    header: Header<TData, unknown>;
-    visibilityState: VisibilityState;
-    showDivider: boolean;
-    onVisibilityToggle: (updater: Updater<VisibilityState>) => void;
-}>) => {
+}: React.PropsWithChildren<Props<TData>>) => {
     const innerColumns = column.getLeafColumns();
     const isVisible = React.useMemo(
         () => innerColumns.some((innerColumn) => getIsVisible(innerColumn, visibilityState)),
@@ -88,15 +94,19 @@ export const TableSettingsColumn = <TData extends unknown>({
                 data-role="drag-handle"
             >
                 <div className={b('content')}>
-                    <span className={b('drag-handle', {dragging: isDragging})} {...listeners}>
-                        <Icon data={Grip} size={16} />
-                    </span>
-                    <Checkbox
-                        checked={isVisible}
-                        disabled={!isEnabledHidding(column)}
-                        onChange={toggle}
-                        indeterminate={isIndeterminate}
-                    />
+                    {sortable ? (
+                        <span className={b('drag-handle', {dragging: isDragging})} {...listeners}>
+                            <Icon data={Grip} size={16} />
+                        </span>
+                    ) : null}
+                    {filterable ? (
+                        <Checkbox
+                            checked={isVisible}
+                            disabled={!isEnabledHidding(column)}
+                            onChange={toggle}
+                            indeterminate={isIndeterminate}
+                        />
+                    ) : null}
                     {renderSpacers()}
                     {columnHeader}
                 </div>

diff --git a/src/constants/settingsColumn.tsx b/src/constants/settingsColumn.tsx
@@ -1,6 +1,9 @@
+import React from 'react';
+
 import type {ColumnDef} from '@tanstack/react-table';
 
 import {TableSettings} from '../components/TableSettings/TableSettings';
+import type {TableSettingsOptions} from '../components/TableSettings/TableSettings';
 
 export const settingsColumn: ColumnDef<unknown> = {
     id: '_settings',
@@ -9,3 +12,15 @@ export const settingsColumn: ColumnDef<unknown> = {
     size: 32,
     minSize: 32,
 };
+
+export const getSettingsColumn = <TData extends unknown>(
+    options: TableSettingsOptions,
+): ColumnDef<TData> => {
+    return {
+        id: '_settings',
+        accessorKey: '_settings',
+        header: (context) => <TableSettings {...context} {...options} />,
+        size: 32,
+        minSize: 32,
+    };
+};