feat(table): table filter support object data type

src/components/table/FilterPopover.tsx

@@ -1,16 +1,18 @@
 /* eslint-disable react/jsx-wrap-multilines */
 import React, { useState, useContext } from 'react';
+import { isObject } from 'lodash';
 import Button from '../button';
 import Popover from '../popover';
 import FilterList from './FilterList';
 import SearchBar from '../search-bar';
 import { TableContext } from './Table';
+import { filterType } from './interface';
 
 interface FilterPopoverProps {
   prefixCls: string;
   children: React.ReactElement;
   onClick: (newFilterState: string[]) => void;
-  filters?: string[];
+  filters?: filterType[];
   values: string[];
 }
 
@@ -38,8 +40,19 @@ const FilterPopover = (props: FilterPopoverProps): React.ReactElement => {
             value={selectFilterKeys}
             onChange={setSelectFilterKeys}
             dataSource={filters
-              .filter((item: string | number) => item.toString().includes(seachValue))
-              .map((item: string | number) => ({ key: item.toString(), value: item.toString() }))}
+              .filter((item) => {
+                if(isObject(item)) {
+                  return item.label.includes(seachValue);
+                }
+                return item.toString().includes(seachValue);
+              })
+              .map((item) => {
+                if(isObject(item)) {
+                  return ({ key: item.value, value: item.label });
+                }
+                return ({ key: item.toString(), value: item.toString() });
+              })
+            }
           />
           <div className={`${prefixCls}-filter-popover-footer`}>
             <Button

src/components/table/__test__/TableFilter.test.js

@@ -1,6 +1,9 @@
+import React from 'react';
 import { renderHook, act } from '@testing-library/react-hooks';
+import { render, fireEvent } from '@testing-library/react';
 import { isEqual, cloneDeep } from 'lodash';
 import useFilter, { collectFilterStates } from '../hook/useFilter';
+import FilterPopover from '../FilterPopover';
 
 const columns = [
   {
@@ -84,7 +87,7 @@ describe('Testing Table Filter', () => {
 
   test('useFilter hook', () => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    const { result, rerender } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {
+    const { result } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {
       initialProps: { columns, dataSource },
     });
     const [filterStates, updateFilterStates] = result.current;
@@ -109,6 +112,25 @@ describe('Testing Table Filter', () => {
     expect(result.current[2].length).toBe(1);
   });
 
+
+  test('object data type', () => {
+    const onClick = jest.fn();
+    const { getByText, getAllByRole } = render(
+      <FilterPopover 
+        prefixCls='gio-table'
+        values={[]}
+        onClick={onClick}
+        filters={[{ label: '第一项', value: '1'}, { label: '第二项', value: '2'}]}
+      >
+        <span>trigger</span>
+      </FilterPopover>
+    );
+    fireEvent.click(getByText('trigger'));
+    fireEvent.click(getAllByRole('option')[0]);
+    fireEvent.click(getByText('确 定'));
+    expect(onClick).toBeCalledWith(['1']);
+  });
+
   it('should re-collect states, after columns update', () => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
     const { result, rerender } = renderHook(({ columns, dataSource }) => useFilter(columns, dataSource), {

src/components/table/demo/Base.stories.tsx

@@ -44,13 +44,13 @@ const columns = [
     title: '列标题2',
     dataIndex: 'age',
     key: 'age',
-    filters: ['名字四个字', '名字不是四个字'],
+    filters: [{label:'名字四个字', value: '4'}, { label: '名字不是四个字', value: '3'}],
     ellipsis: true,
     onFilter: (value: string, record: ExampleData) => {
-      if (value === '名字四个字') {
+      if (value === '4') {
         return record.name.length === 4;
       }
-      if (value === '名字不是四个字') {
+      if (value === '3') {
         return record.name.length !== 4;
       }
       return false;

src/components/table/interface.ts

@@ -8,6 +8,8 @@ export type SortOrder = 'descend' | 'ascend' | null;
 
 export type GetComponentProps<DataType> = (data: DataType, index?: number) => React.HTMLAttributes<HTMLElement>;
 
+export type filterType = (string | { label: string; value: string });
+
 export interface ColumnType<RecordType> {
   key?: string;
   title?: React.ReactNode;
@@ -28,7 +30,7 @@ export interface ColumnType<RecordType> {
   defaultSortOrder?: SortOrder;
   // filter
   defaultFilteredValue?: string[];
-  filters?: string[];
+  filters?: filterType[];
   onFilter?: (value: string, record: RecordType) => boolean;
   filterDropdown?: React.ReactNode;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -64,7 +66,7 @@ export interface FilterState<RecordType> {
   key: string;
   filteredKeys: string[];
   onFilter?: (value: string, record: RecordType) => boolean;
-  filters?: string[];
+  filters?: filterType[];
 }
 
 export interface PaginationState {