diff --git a/src/components/BaseHeaderCell/BaseHeaderCell.tsx b/src/components/BaseHeaderCell/BaseHeaderCell.tsx index 14c3259..d3bd4ca 100644 --- a/src/components/BaseHeaderCell/BaseHeaderCell.tsx +++ b/src/components/BaseHeaderCell/BaseHeaderCell.tsx @@ -11,6 +11,7 @@ import { } from '../../utils'; import type {BaseResizeHandleProps} from '../BaseResizeHandle'; import {BaseResizeHandle} from '../BaseResizeHandle'; +import {BaseSort} from '../BaseSort'; import type {BaseSortIndicatorProps} from '../BaseSortIndicator'; import {BaseSortIndicator} from '../BaseSortIndicator'; import {b} from '../BaseTable/BaseTable.classname'; @@ -58,25 +59,29 @@ export const BaseHeaderCell = ({ className={b('header-cell', getHeaderCellClassModes(header), className)} colSpan={header.colSpan > 1 ? header.colSpan : undefined} rowSpan={rowSpan > 1 ? rowSpan : undefined} - onClick={header.column.getToggleSortingHandler()} aria-sort={getAriaSort(header.column.getIsSorted())} aria-colindex={getHeaderCellAriaColIndex(header)} {...attributes} style={getCellStyles(header, attributes?.style)} > - {flexRender(header.column.columnDef.header, header.getContext())}{' '} - {header.column.getCanSort() && - (renderSortIndicator ? ( - renderSortIndicator({ - className: b('sort-indicator', sortIndicatorClassName), - header, - }) - ) : ( - - ))} + {header.column.getCanSort() ? ( + + {flexRender(header.column.columnDef.header, header.getContext())}{' '} + {renderSortIndicator ? ( + renderSortIndicator({ + className: b('sort-indicator', sortIndicatorClassName), + header, + }) + ) : ( + + )} + + ) : ( + flexRender(header.column.columnDef.header, header.getContext()) + )} {header.column.getCanResize() && (renderResizeHandle ? ( renderResizeHandle({ diff --git a/src/components/BaseSort/BaseSort.tsx b/src/components/BaseSort/BaseSort.tsx new file mode 100644 index 0000000..51a08c8 --- /dev/null +++ b/src/components/BaseSort/BaseSort.tsx @@ -0,0 +1,35 @@ +import React from 'react'; + +import {useActionHandlers} from '@gravity-ui/uikit'; +import type {Header} from '@tanstack/react-table'; + +import {b} from '../BaseTable/BaseTable.classname'; + +export interface BaseSortProps + extends Omit, 'className' | 'onClick'> { + className?: string; + header: Header; +} + +export const BaseSort = ({ + header, + className, + children, + ...restProps +}: BaseSortProps) => { + const handleKeyDown = header.column.getToggleSortingHandler(); + const {onKeyDown} = useActionHandlers(handleKeyDown); + + return ( + + {children} + + ); +}; diff --git a/src/components/BaseSort/index.ts b/src/components/BaseSort/index.ts new file mode 100644 index 0000000..dd7cf0b --- /dev/null +++ b/src/components/BaseSort/index.ts @@ -0,0 +1 @@ +export * from './BaseSort'; diff --git a/src/components/BaseTable/BaseTable.scss b/src/components/BaseTable/BaseTable.scss index 17ed209..dd34519 100644 --- a/src/components/BaseTable/BaseTable.scss +++ b/src/components/BaseTable/BaseTable.scss @@ -41,13 +41,6 @@ $block: '.#{variables.$ns}table'; font-weight: 500; } - &__header-cell { - &_sortable { - cursor: pointer; - user-select: none; - } - } - &__cell, &__header-cell, &__footer-cell { @@ -63,6 +56,11 @@ $block: '.#{variables.$ns}table'; } } + &__sort { + cursor: pointer; + user-select: none; + } + &_with-row-virtualization { display: grid;