feat(Table): selection column added

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<Person>[] = [
-  defaultSelectionColumn as ColumnDef<Person>,
+  selectionColumn as ColumnDef<Person>,
   // ...other columns
 ];
 

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<GroupOrItem>[] = [
-    defaultSelectionColumn as ColumnDef<GroupOrItem>,
+    selectionColumn as ColumnDef<GroupOrItem>,
     ...originalColumns,
 ];
 

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<Item>[] = [defaultSelectionColumn as ColumnDef<Item>, ...originalColumns];
+const columns: ColumnDef<Item>[] = [selectionColumn as ColumnDef<Item>, ...originalColumns];
 
 export const WithSelectionStory = () => {
     const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});

src/components/SelectionCheckbox/SelectionCheckbox.classname.ts

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

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<HTMLLabelElement>) => {
+        return <Checkbox ref={ref} className={b(null, className)} {...restProps} />;
+    },
+);
+
+SelectionCheckbox.displayName = 'SelectionCheckbox';

src/components/SelectionCheckbox/index.ts

@@ -0,0 +1 @@
+export * from './SelectionCheckbox';

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<typeof Table> = {
     title: 'Table',
@@ -18,6 +19,10 @@ export const Default: StoryObj<typeof DefaultStory> = {
     render: DefaultStory,
 };
 
+export const WithSelection: StoryObj<typeof WithSelectionStory> = {
+    render: WithSelectionStory,
+};
+
 export const Virtualization: StoryObj<typeof VirtualizationStory> = {
     render: VirtualizationStory,
 };

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<Item>[] = [selectionColumn as ColumnDef<Item>, ...originalColumns];
+
+export const WithSelectionStory = () => {
+    const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+
+    const table = useTable({
+        columns,
+        data,
+        enableRowSelection: true,
+        enableMultiRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            rowSelection,
+        },
+    });
+
+    return <Table table={table} />;
+};

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';

src/constants/index.ts

@@ -1,2 +1,2 @@
 export * from './defaultDragHandleColumn';
-export * from './defaultSelectionColumn';
+export * from './selectionColumn';

src/constants/defaultSelectionColumn.tsx → src/constants/selectionColumn.tsx

@@ -1,28 +1,27 @@
 import React from 'react';
 
-import {Checkbox} from '@gravity-ui/uikit';
 import type {ColumnDef} from '@tanstack/react-table';
 
-export const defaultSelectionColumn: ColumnDef<unknown> = {
+import {SelectionCheckbox} from '../components';
+
+export const selectionColumn: ColumnDef<unknown> = {
     id: '_select',
     header: ({table}) => (
-        <Checkbox
-            size="l"
+        <SelectionCheckbox
             checked={table.getIsAllRowsSelected()}
             disabled={!table.options.enableRowSelection}
             indeterminate={table.getIsSomeRowsSelected()}
             onChange={table.getToggleAllRowsSelectedHandler()}
         />
     ),
     cell: ({row}) => (
-        <Checkbox
-            size="l"
+        <SelectionCheckbox
             checked={row.getIsSelected()}
             disabled={!row.getCanSelect()}
             indeterminate={row.getIsSomeSelected()}
             onChange={row.getToggleSelectedHandler()}
         />
     ),
-    size: 41,
-    minSize: 41,
+    size: 32,
+    minSize: 32,
 };

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';