feat(Table): styled SortIndicator added (#49)

src/components/BaseTable/__stories__/stories/DefaultStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

src/components/BaseTable/__stories__/stories/EmptyContentStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 
 import {cnEmptyContentStory} from './EmptyContentStory.classname';

src/components/BaseTable/__stories__/stories/GroupingStory.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import type {GroupOrItem} from '../constants/grouping';
 import {columns, data} from '../constants/grouping';
 

src/components/BaseTable/__stories__/stories/GroupingStory2.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import type {Item} from '../types';
 import {generateData} from '../utils';

src/components/BaseTable/__stories__/stories/GroupingWithSelectionStory.tsx

@@ -4,7 +4,7 @@ import type {ColumnDef, ExpandedState, Row, RowSelectionState} from '@tanstack/r
 
 import {selectionColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import type {GroupOrItem} from '../constants/grouping';
 import {data, columns as originalColumns} from '../constants/grouping';
 

src/components/BaseTable/__stories__/stories/HeaderGroupsStory.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {ColumnDef} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns as nestedColumns} from '../constants/columns';
 import {data} from '../constants/data';
 import type {Item} from '../types';

src/components/BaseTable/__stories__/stories/ReorderingStory.tsx

@@ -4,9 +4,9 @@ import type {ColumnDef} from '@tanstack/react-table';
 
 import {dragHandleColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
 import {ReorderingProvider} from '../../../ReorderingProvider';
 import type {ReorderingProviderProps} from '../../../ReorderingProvider';
+import {BaseTable} from '../../BaseTable';
 import {columns as originalColumns} from '../constants/columns';
 import {data as originalData} from '../constants/data';
 import type {Item} from '../types';

src/components/BaseTable/__stories__/stories/ReorderingWithVirtualizationStory.tsx

@@ -5,9 +5,9 @@ import type {ColumnDef} from '@tanstack/react-table';
 import {dragHandleColumn} from '../../../../constants';
 import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
 import {getVirtualRowRangeExtractor} from '../../../../utils';
-import {BaseTable} from '../../../BaseTable';
 import {ReorderingProvider} from '../../../ReorderingProvider';
 import type {ReorderingProviderProps} from '../../../ReorderingProvider';
+import {BaseTable} from '../../BaseTable';
 import {columns as originalColumns} from '../constants/columns';
 import type {Item} from '../types';
 import {generateData} from '../utils';

src/components/BaseTable/__stories__/stories/ResizingStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

src/components/BaseTable/__stories__/stories/SortingStory.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {SortingState} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

src/components/BaseTable/__stories__/stories/StickyHeaderStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {generateData} from '../utils';
 

src/components/BaseTable/__stories__/stories/TreeStory.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns, data} from '../constants/tree';
 
 export const TreeStory = () => {

src/components/BaseTable/__stories__/stories/TreeWithGroupsStory.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import type {ExpandedState, Row} from '@tanstack/react-table';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import type {TreeGroupItem} from '../constants/tree';
 import {groupsColumns, groupsData} from '../constants/tree';
 

src/components/BaseTable/__stories__/stories/VirtualizationStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useRowVirtualizer, useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {generateData} from '../utils';
 

src/components/BaseTable/__stories__/stories/WindowVirtualizationStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable, useWindowRowVirtualizer} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {generateData} from '../utils';
 

src/components/BaseTable/__stories__/stories/WithSelectionStory.tsx

@@ -4,7 +4,7 @@ import type {ColumnDef, RowSelectionState} from '@tanstack/react-table';
 
 import {selectionColumn} from '../../../../constants';
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns as originalColumns} from '../constants/columns';
 import {data} from '../constants/data';
 import type {Item} from '../types';

src/components/BaseTable/__stories__/stories/WithoutHeaderStory.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {useTable} from '../../../../hooks';
-import {BaseTable} from '../../../BaseTable';
+import {BaseTable} from '../../BaseTable';
 import {columns} from '../constants/columns';
 import {data} from '../constants/data';
 

src/components/SortIndicator/SortIndicator.classname.ts

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

src/components/SortIndicator/SortIndicator.scss

@@ -0,0 +1,15 @@
+@use '../variables';
+
+$block: '.#{variables.$ns}styled-sort-indicator';
+
+#{$block} {
+    display: inline-flex;
+    padding-block: 1px;
+
+    color: var(--g-color-text-hint);
+
+    &_order_asc,
+    &_order_desc {
+        color: var(--g-color-text-primary);
+    }
+}

src/components/SortIndicator/SortIndicator.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {Icon} from '@gravity-ui/uikit';
+
+import {getSortIndicatorIcon} from '../../utils';
+import type {BaseSortIndicatorProps} from '../BaseSortIndicator';
+
+import {b} from './SortIndicator.classname';
+
+import './SortIndicator.scss';
+
+export interface SortIndicatorProps<TData, TValue> extends BaseSortIndicatorProps<TData, TValue> {}
+
+export const SortIndicator = <TData, TValue>({
+    className,
+    header,
+}: SortIndicatorProps<TData, TValue>) => {
+    const order = header.column.getIsSorted();
+
+    return (
+        <span className={b({order}, className)}>
+            <Icon data={getSortIndicatorIcon(order)} size={16} />
+        </span>
+    );
+};

src/components/SortIndicator/index.ts

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

src/components/Table/__stories__/Table.stories.tsx

@@ -6,6 +6,7 @@ import {DefaultStory} from './stories/DefaultStory';
 import {ReorderingStory} from './stories/ReorderingStory';
 import {ReorderingWithVirtualizationStory} from './stories/ReorderingWithVirtualizationStory';
 import {SizeSStory} from './stories/SizeSStory';
+import {SortingStory} from './stories/SortingStory';
 import {StickyHeaderStory} from './stories/StickyHeaderStory';
 import {VirtualizationStory} from './stories/VirtualizationStory';
 import {WindowVirtualizationStory} from './stories/WindowVirtualizationStory';
@@ -30,6 +31,10 @@ export const WithSelection: StoryObj<typeof WithSelectionStory> = {
     render: WithSelectionStory,
 };
 
+export const Sorting: StoryObj<typeof SortingStory> = {
+    render: SortingStory,
+};
+
 export const Reordering: StoryObj<typeof ReorderingStory> = {
     render: ReorderingStory,
 };

src/components/Table/__stories__/stories/SortingStory.classname.ts

@@ -0,0 +1,3 @@
+import {cn} from '../../../../utils';
+
+export const cnSortingStory = cn('sorting-story');

src/components/Table/__stories__/stories/SortingStory.scss

@@ -0,0 +1,6 @@
+.sorting-story {
+    &__sort-indicator {
+        margin-inline-start: var(--g-spacing-1);
+        vertical-align: top;
+    }
+}

src/components/Table/__stories__/stories/SortingStory.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import type {SortingState} from '@tanstack/react-table';
+
+import {useTable} from '../../../../hooks';
+import {columns} from '../../../BaseTable/__stories__/constants/columns';
+import {data} from '../../../BaseTable/__stories__/constants/data';
+import {SortIndicator} from '../../../SortIndicator';
+import {Table} from '../../Table';
+
+import {cnSortingStory} from './SortingStory.classname';
+
+import './SortingStory.scss';
+
+export const SortingStory = () => {
+    const [sorting, setSorting] = React.useState<SortingState>([]);
+
+    const table = useTable({
+        columns,
+        data,
+        enableSorting: true,
+        getRowId: (item) => item.id,
+        onSortingChange: setSorting,
+        state: {
+            sorting,
+        },
+    });
+
+    return (
+        <Table
+            table={table}
+            className={cnSortingStory()}
+            renderSortIndicator={(sortIndicatorProps) => <SortIndicator {...sortIndicatorProps} />}
+            sortIndicatorClassName={cnSortingStory('sort-indicator')}
+        />
+    );
+};

src/utils/getSortIndicatorIcon.ts

@@ -0,0 +1,18 @@
+import {
+    ArrowDown as ArrowDownIcon,
+    ArrowUpArrowDown as ArrowUpArrowDownIcon,
+    ArrowUp as ArrowUpIcon,
+} from '@gravity-ui/icons';
+import type {SortDirection} from '@tanstack/react-table';
+
+export const getSortIndicatorIcon = (sortDirection: SortDirection | false) => {
+    if (sortDirection === 'asc') {
+        return ArrowUpIcon;
+    }
+
+    if (sortDirection === 'desc') {
+        return ArrowDownIcon;
+    }
+
+    return ArrowUpArrowDownIcon;
+};

src/utils/index.ts

@@ -7,6 +7,7 @@ export * from './getCellStyles';
 export * from './getColumnPinningClassModes';
 export * from './getHeaderCellAriaColIndex';
 export * from './getHeaderCellClassModes';
+export * from './getSortIndicatorIcon';
 export * from './getVirtualRowRangeExtractor';
 export * from './shouldRenderFooterCell';
 export * from './shouldRenderFooterRow';