diff --git a/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx b/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx index 7820a10..a7b2b8c 100644 --- a/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx +++ b/src/components/TableSettings/__stories__/stories/TableSettingsColumnStory.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import type {ColumnDef, ColumnPinningState} from '@tanstack/react-table'; +import type {ColumnDef, ColumnPinningState, RowSelectionState} from '@tanstack/react-table'; -import {SETTINGS_COLUMN_ID, getSettingsColumn} from '../../../../constants'; +import {SETTINGS_COLUMN_ID, getSettingsColumn, selectionColumn} from '../../../../constants'; import {useTable} from '../../../../hooks'; import {Table} from '../../../Table/Table'; import type {TableSettingsOptions} from '../../TableSettings'; @@ -97,17 +97,21 @@ const columns: ColumnDef[] = [ ]; export const TableSettingsColumnStory = (options: TableSettingsOptions) => { + const [rowSelection, setRowSelection] = React.useState({}); const settingsColumn = getSettingsColumn(SETTINGS_COLUMN_ID, options); const [columnPinning, setColumnPinning] = React.useState({ - left: [], + left: ['_select'], right: [SETTINGS_COLUMN_ID], }); const table = useTable({ - columns: [...columns, settingsColumn], + columns: [selectionColumn as ColumnDef, ...columns, settingsColumn], data, enableColumnPinning: true, - state: {columnPinning}, + state: {rowSelection, columnPinning}, onColumnPinningChange: setColumnPinning, + enableRowSelection: true, + enableMultiRowSelection: true, + onRowSelectionChange: setRowSelection, }); return ( diff --git a/src/constants/selectionColumn.tsx b/src/constants/selectionColumn.tsx index b7c3820..e492026 100644 --- a/src/constants/selectionColumn.tsx +++ b/src/constants/selectionColumn.tsx @@ -22,6 +22,9 @@ export const selectionColumn: ColumnDef = { onChange={row.getToggleSelectedHandler()} /> ), + meta: { + hideInSettings: true, + }, size: 32, minSize: 32, };