diff --git a/README.md b/README.md index dfacfa7..35f0b68 100644 --- a/README.md +++ b/README.md @@ -49,11 +49,11 @@ There are two Table components that you can use: ### Row selection ```tsx -import {defaultSelectionColumn} from '@gravity-ui/table'; +import {selectionColumn} from '@gravity-ui/table'; import type {RowSelectionState} from '@tanstack/react-table'; const columns: ColumnDef[] = [ - defaultSelectionColumn as ColumnDef, + selectionColumn as ColumnDef, // ...other columns ]; diff --git a/src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx b/src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx index 0d69a22..af6e072 100644 --- a/src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx +++ b/src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type {ColumnDef, ExpandedState, Row, RowSelectionState} from '@tanstack/react-table'; -import {defaultSelectionColumn} from '../../../../constants'; +import {selectionColumn} from '../../../../constants'; import {useTable} from '../../../../hooks'; import {BaseTable} from '../../../BaseTable'; import type {GroupOrItem} from '../constants/grouping'; @@ -12,7 +12,7 @@ import {cnGroupingStory} from './GroupingStory.classname'; import './GroupingStory.scss'; const columns: ColumnDef[] = [ - defaultSelectionColumn as ColumnDef, + selectionColumn as ColumnDef, ...originalColumns, ]; diff --git a/src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx b/src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx index f1dabb2..074ce07 100644 --- a/src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx +++ b/src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx @@ -2,14 +2,14 @@ import React from 'react'; import type {ColumnDef, RowSelectionState} from '@tanstack/react-table'; -import {defaultSelectionColumn} from '../../../../constants'; +import {selectionColumn} from '../../../../constants'; import {useTable} from '../../../../hooks'; import {BaseTable} from '../../../BaseTable'; import {columns as originalColumns} from '../constants/columns'; import {data} from '../constants/data'; import type {Item} from '../types'; -const columns: ColumnDef[] = [defaultSelectionColumn as ColumnDef, ...originalColumns]; +const columns: ColumnDef[] = [selectionColumn as ColumnDef, ...originalColumns]; export const WithSelectionStory = () => { const [rowSelection, setRowSelection] = React.useState({}); diff --git a/src/components/SelectionCheckbox/SelectionCheckbox.classname.ts b/src/components/SelectionCheckbox/SelectionCheckbox.classname.ts new file mode 100644 index 0000000..b48816c --- /dev/null +++ b/src/components/SelectionCheckbox/SelectionCheckbox.classname.ts @@ -0,0 +1,3 @@ +import {block} from '../../utils'; + +export const b = block('selection-checkbox'); diff --git a/src/components/SelectionCheckbox/SelectionCheckbox.tsx b/src/components/SelectionCheckbox/SelectionCheckbox.tsx new file mode 100644 index 0000000..14683f6 --- /dev/null +++ b/src/components/SelectionCheckbox/SelectionCheckbox.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import type {CheckboxProps} from '@gravity-ui/uikit'; +import {Checkbox} from '@gravity-ui/uikit'; + +import {b} from './SelectionCheckbox.classname'; + +export const SelectionCheckbox = React.forwardRef( + ({className, ...restProps}: CheckboxProps, ref: React.Ref) => { + return ; + }, +); + +SelectionCheckbox.displayName = 'SelectionCheckbox'; diff --git a/src/components/SelectionCheckbox/index.ts b/src/components/SelectionCheckbox/index.ts new file mode 100644 index 0000000..391c246 --- /dev/null +++ b/src/components/SelectionCheckbox/index.ts @@ -0,0 +1 @@ +export * from './SelectionCheckbox'; diff --git a/src/components/Table/__stories__/Table.stories.tsx b/src/components/Table/__stories__/Table.stories.tsx index 83a1161..d904737 100644 --- a/src/components/Table/__stories__/Table.stories.tsx +++ b/src/components/Table/__stories__/Table.stories.tsx @@ -6,6 +6,7 @@ import {DefaultStory} from './stories/DefaultStory'; import {StickyHeaderStory} from './stories/StickyHeaderStory'; import {VirtualizationStory} from './stories/VirtualizationStory'; import {WindowVirtualizationStory} from './stories/WindowVirtualizationStory'; +import {WithSelectionStory} from './stories/WithSelectionStory'; const meta: Meta = { title: 'Table', @@ -18,6 +19,10 @@ export const Default: StoryObj = { render: DefaultStory, }; +export const WithSelection: StoryObj = { + render: WithSelectionStory, +}; + export const Virtualization: StoryObj = { render: VirtualizationStory, }; diff --git a/src/components/Table/__stories__/stories/WithSelectionStory.tsx b/src/components/Table/__stories__/stories/WithSelectionStory.tsx new file mode 100644 index 0000000..8698222 --- /dev/null +++ b/src/components/Table/__stories__/stories/WithSelectionStory.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +import type {ColumnDef, RowSelectionState} from '@tanstack/react-table'; + +import {selectionColumn} from '../../../../constants'; +import {useTable} from '../../../../hooks'; +import {columns as originalColumns} from '../../../BaseTable/__stories__/constants/columns'; +import {data} from '../../../BaseTable/__stories__/constants/data'; +import type {Item} from '../../../BaseTable/__stories__/types'; +import {Table} from '../../Table'; + +const columns: ColumnDef[] = [selectionColumn as ColumnDef, ...originalColumns]; + +export const WithSelectionStory = () => { + const [rowSelection, setRowSelection] = React.useState({}); + + const table = useTable({ + columns, + data, + enableRowSelection: true, + enableMultiRowSelection: true, + onRowSelectionChange: setRowSelection, + state: { + rowSelection, + }, + }); + + return ; +}; diff --git a/src/components/index.ts b/src/components/index.ts index 7d61c68..b0dc63c 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -10,6 +10,7 @@ export * from './ReorderingProvider'; export * from './BaseResizeHandle'; export * from './BaseRow'; export * from './BaseSortIndicator'; +export * from './SelectionCheckbox'; export * from './SortableList'; export * from './SortableListContext'; export * from './SortableListDndContext'; diff --git a/src/constants/index.ts b/src/constants/index.ts index 8ebbb4e..a7a7a4c 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -1,2 +1,2 @@ export * from './defaultDragHandleColumn'; -export * from './defaultSelectionColumn'; +export * from './selectionColumn'; diff --git a/src/constants/defaultSelectionColumn.tsx b/src/constants/selectionColumn.tsx similarity index 74% rename from src/constants/defaultSelectionColumn.tsx rename to src/constants/selectionColumn.tsx index 1462236..b7c3820 100644 --- a/src/constants/defaultSelectionColumn.tsx +++ b/src/constants/selectionColumn.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import {Checkbox} from '@gravity-ui/uikit'; import type {ColumnDef} from '@tanstack/react-table'; -export const defaultSelectionColumn: ColumnDef = { +import {SelectionCheckbox} from '../components'; + +export const selectionColumn: ColumnDef = { id: '_select', header: ({table}) => ( - = { /> ), cell: ({row}) => ( - ), - size: 41, - minSize: 41, + size: 32, + minSize: 32, }; diff --git a/src/index.ts b/src/index.ts index 1337ca7..f2c876d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ export {BaseTable, ReorderingProvider, Table} from './components'; export type {BaseTableProps, ReorderingProviderProps, TableProps} from './components'; -export {defaultDragHandleColumn, defaultSelectionColumn} from './constants'; +export {defaultDragHandleColumn, selectionColumn} from './constants'; export {useDraggableRowDepth, useRowVirtualizer, useTable, useWindowRowVirtualizer} from './hooks';