diff --git a/src/components/TableSettings/TableSettings.tsx b/src/components/TableSettings/TableSettings.tsx index 4258514..d522e18 100644 --- 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 { +export interface TableSettingsOptions { + sortable?: boolean; + filterable?: boolean; +} + +interface Props extends TableSettingsOptions { table: Table; column?: Column; } const POPUP_PLACEMENT: PopperPlacement = ['bottom-end', 'bottom', 'top-end', 'top', 'auto']; -export const TableSettings = ({table, column}: Props) => { +export const TableSettings = ({ + table, + sortable = true, + filterable = true, + column, +}: Props) => { const anchorRef = React.useRef(null); const [open, setOpen] = React.useState(false); const columns = table.getAllColumns(); @@ -63,6 +73,8 @@ export const TableSettings = ({table, column}: Props diff --git a/src/components/TableSettings/__stories__/TableSettings.stories.tsx b/src/components/TableSettings/__stories__/TableSettings.stories.tsx index 1158653..87cc2bb 100644 --- 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 = { +const meta: Meta = { title: 'Table settings', - component: TableSettingsStory, + argTypes: { + sortable: { + control: 'boolean', + }, + filterable: { + control: 'boolean', + }, + }, }; export default meta; -export const TableSettings: StoryObj = { - render: TableSettingsStory, -}; +export const TableSettings = { + render: (args) => , +} as StoryObj; -export const TableSettingsColumn: StoryObj = { - render: TableSettingsColumnStory, -}; +export const TableSettingsColumn = { + render: (args) => , +} as StoryObj; diff --git a/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx b/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx index 626e0a4..5e2e121 100644 --- 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[] = [ }, ], }, - settingsColumn as ColumnDef, ]; -export const TableSettingsColumnStory = () => { +export const TableSettingsColumnStory = (options: TableSettingsOptions) => { + const settingsColumn = getSettingsColumn(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 index b0b9045..b5f8ab5 100644 --- 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[] = [ { @@ -65,7 +66,7 @@ const columns: ColumnDef[] = [ }, ]; -export const TableSettingsStory = () => { +export const TableSettingsStory = (options: TableSettingsOptions) => { const [flatColumnVisibility, onFlatColumnVisibilityChange] = React.useState({ third: false, fourth: false, @@ -121,7 +122,7 @@ export const TableSettingsStory = () => {
Flat table
- +
{displayOrderingModel(flatColumnOrder)}
{displayVisibilityModel(flatColumnVisibility)}
@@ -130,7 +131,7 @@ export const TableSettingsStory = () => {
Grouped table
- +
{displayOrderingModel(columnOrder)}
{displayVisibilityModel(columnVisibility)}
diff --git a/src/components/TableSettingsColumn/TableSettingsColumn.tsx b/src/components/TableSettingsColumn/TableSettingsColumn.tsx index 35202b0..f817b6d 100644 --- 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 extends TableSettingsOptions { + column: Column; + header: Header; + visibilityState: VisibilityState; + showDivider: boolean; + onVisibilityToggle: (updater: Updater) => void; +} + export const TableSettingsColumn = ({ column, header, children, visibilityState, showDivider, + filterable, + sortable, onVisibilityToggle, -}: React.PropsWithChildren<{ - column: Column; - header: Header; - visibilityState: VisibilityState; - showDivider: boolean; - onVisibilityToggle: (updater: Updater) => void; -}>) => { +}: React.PropsWithChildren>) => { const innerColumns = column.getLeafColumns(); const isVisible = React.useMemo( () => innerColumns.some((innerColumn) => getIsVisible(innerColumn, visibilityState)), @@ -88,15 +94,19 @@ export const TableSettingsColumn = ({ data-role="drag-handle" >
- - - - + {sortable ? ( + + + + ) : null} + {filterable ? ( + + ) : null} {renderSpacers()} {columnHeader}
diff --git a/src/constants/settingsColumn.tsx b/src/constants/settingsColumn.tsx index 26380db..2db8d9b 100644 --- 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 = { id: '_settings', @@ -9,3 +12,15 @@ export const settingsColumn: ColumnDef = { size: 32, minSize: 32, }; + +export const getSettingsColumn = ( + options: TableSettingsOptions, +): ColumnDef => { + return { + id: '_settings', + accessorKey: '_settings', + header: (context) => , + size: 32, + minSize: 32, + }; +};