fix: use getFilteredRowModel when filtering is enabled

Author: beliarh

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

@@ -3,6 +3,7 @@ import type {Meta, StoryObj} from '@storybook/react';
 import {Table} from '../index';
 
 import {DefaultStory} from './stories/DefaultStory';
+import {FilteringStory} from './stories/FilteringStory';
 import {GroupingStory} from './stories/GroupingStory';
 import {GroupingWithSelectionStory} from './stories/GroupingWithSelectionStory';
 import {ReorderingStory} from './stories/ReorderingStory';
@@ -62,6 +63,10 @@ export const Sorting: StoryObj<typeof SortingStory> = {
     render: SortingStory,
 };
 
+export const Filtering: StoryObj<typeof FilteringStory> = {
+    render: FilteringStory,
+};
+
 export const Reordering: StoryObj<typeof ReorderingStory> = {
     render: ReorderingStory,
 };

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

@@ -0,0 +1,135 @@
+import * as React from 'react';
+
+import {Select, TextInput} from '@gravity-ui/uikit';
+import type {SelectOption} from '@gravity-ui/uikit';
+import type {ColumnDef, ColumnFiltersState} from '@tanstack/react-table';
+
+import {useTable} from '../../../../hooks';
+import type {Item} from '../../../BaseTable/__stories__/types';
+import {Table} from '../../Table';
+
+const filterableData: Item[] = [
+    {id: '1', name: 'John Doe', age: 23, status: 'free'},
+    {id: '2', name: 'Jane Smith', age: 27, status: 'busy'},
+    {id: '3', name: 'Bob Johnson', age: 22, status: 'free'},
+    {id: '4', name: 'Alice Brown', age: 21, status: 'unknown'},
+    {id: '5', name: 'Mike Wasowsky', age: 28, status: 'busy'},
+    {id: '6', name: 'Sarah Connor', age: 25, status: 'free'},
+    {id: '7', name: 'Tom Hardy', age: 30, status: 'busy'},
+    {id: '8', name: 'Emma Watson', age: 24, status: 'unknown'},
+    {id: '9', name: 'Chris Evans', age: 26, status: 'free'},
+    {id: '10', name: 'Scarlett Johansson', age: 29, status: 'busy'},
+];
+
+const statusOptions: SelectOption[] = [
+    {value: '', content: 'All'},
+    {value: 'free', content: 'Free'},
+    {value: 'busy', content: 'Busy'},
+    {value: 'unknown', content: 'Unknown'},
+];
+
+const filterableColumns: ColumnDef<Item>[] = [
+    {
+        id: 'name',
+        header: ({column}) => (
+            <div>
+                <div style={{marginBottom: '8px', fontWeight: 'bold'}}>Name</div>
+                <TextInput
+                    value={(column.getFilterValue() as string) || ''}
+                    onUpdate={(value) => column.setFilterValue(value)}
+                    placeholder="Filter by name..."
+                    size="s"
+                />
+            </div>
+        ),
+        accessorKey: 'name',
+        filterFn: 'includesString',
+        size: 200,
+    },
+    {
+        id: 'age',
+        header: 'Age',
+        accessorKey: 'age',
+        size: 100,
+    },
+    {
+        id: 'status',
+        header: ({column}) => (
+            <div>
+                <div style={{marginBottom: '8px', fontWeight: 'bold'}}>Status</div>
+                <Select
+                    value={[(column.getFilterValue() as string) || '']}
+                    onUpdate={(values) => column.setFilterValue(values[0] || undefined)}
+                    options={statusOptions}
+                    size="s"
+                    width="max"
+                />
+            </div>
+        ),
+        accessorKey: 'status',
+        filterFn: (row, columnId, filterValue) => {
+            if (!filterValue) return true;
+            return row.getValue(columnId) === filterValue;
+        },
+        size: 150,
+    },
+];
+
+export const FilteringStory = () => {
+    const [globalFilter, setGlobalFilter] = React.useState('');
+    const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
+
+    const table = useTable({
+        data: filterableData,
+        columns: filterableColumns,
+        enableGlobalFilter: true,
+        enableColumnFilters: true,
+        state: {
+            globalFilter,
+            columnFilters,
+        },
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnFiltersChange: setColumnFilters,
+        getRowId: (row) => row.id,
+    });
+
+    return (
+        <div>
+            <div style={{marginBottom: '16px'}}>
+                <h3 style={{marginBottom: '8px'}}>Global Search</h3>
+                <TextInput
+                    placeholder="Search all columns..."
+                    value={globalFilter}
+                    onUpdate={setGlobalFilter}
+                    size="m"
+                    style={{maxWidth: '400px'}}
+                />
+                <div style={{marginTop: '8px', fontSize: '13px', opacity: 0.7}}>
+                    Showing {table.getFilteredRowModel().rows.length} of {filterableData.length}{' '}
+                    rows
+                </div>
+            </div>
+
+            <div style={{marginBottom: '16px'}}>
+                <button
+                    onClick={() => {
+                        setGlobalFilter('');
+                        setColumnFilters([]);
+                    }}
+                    style={{
+                        padding: '8px 16px',
+                        border: '1px solid var(--g-color-line-generic)',
+                        borderRadius: '6px',
+                        cursor: 'pointer',
+                        backgroundColor: 'var(--g-color-base-background)',
+                        color: 'var(--g-color-text-primary)',
+                    }}
+                >
+                    Clear All Filters
+                </button>
+            </div>
+
+            <Table table={table} />
+        </div>
+    );
+};

src/hooks/useTable.ts

@@ -2,6 +2,7 @@ import type {TableOptions} from '@tanstack/react-table';
 import {
     getCoreRowModel,
     getExpandedRowModel,
+    getFilteredRowModel,
     getGroupedRowModel,
     getSortedRowModel,
     useReactTable,
@@ -19,6 +20,8 @@ export const useTable = <TData>(options: UseTableOptions<TData>) => {
         enableMultiRowSelection: options.enableMultiRowSelection ?? false,
         enableRowSelection: options.enableRowSelection ?? false,
         enableSorting: options.enableSorting ?? false,
+        enableColumnFilters: options.enableColumnFilters ?? false,
+        enableGlobalFilter: options.enableGlobalFilter ?? false,
         getCoreRowModel: options.getCoreRowModel ?? getCoreRowModel(),
         getExpandedRowModel: options.enableExpanding
             ? (options.getExpandedRowModel ?? getExpandedRowModel())
@@ -29,8 +32,13 @@ export const useTable = <TData>(options: UseTableOptions<TData>) => {
         getSortedRowModel: options.enableSorting
             ? (options.getSortedRowModel ?? getSortedRowModel())
             : undefined,
+        getFilteredRowModel:
+            options.enableColumnFilters || options.enableGlobalFilter
+                ? (options.getFilteredRowModel ?? getFilteredRowModel())
+                : undefined,
         manualGrouping: options.manualGrouping ?? false,
         manualSorting: options.manualSorting ?? false,
+        manualFiltering: options.manualFiltering ?? false,
     };
 
     return useReactTable(tableOptions);