@@ -5,19 +5,27 @@ import useAppParams from 'lib/hooks/useAppParams';
55import { ClusterName } from 'lib/interfaces/cluster' ;
66import { useNavigate } from 'react-router-dom' ;
77import { clusterConnectorsPath } from 'lib/paths' ;
8- import { createColumnHelper } from '@tanstack/react-table' ;
8+ import { ColumnDef , createColumnHelper } from '@tanstack/react-table' ;
9+ import { useQueryPersister } from 'components/common/NewTable/ColumnFilter' ;
910
1011import ConnectorsCell from './Cells/ConnectorsCell' ;
1112import NameCell from './Cells/NameCell' ;
1213import TasksCell from './Cells/TasksCell' ;
1314
1415const helper = createColumnHelper < Connect > ( ) ;
1516export const columns = [
16- helper . accessor ( 'name' , { cell :NameCell , size :600 } ) ,
17+ helper . accessor ( 'name' , {
18+ cell :NameCell ,
19+ size :600 ,
20+ meta :{ filterVariant :'text' } ,
21+ filterFn :'includesString' ,
22+ } ) ,
1723helper . accessor ( 'version' , {
1824header :'Version' ,
1925cell :( { getValue} ) => getValue ( ) ,
2026enableSorting :true ,
27+ meta :{ filterVariant :'multi-select' } ,
28+ filterFn :'includesSome' ,
2129} ) ,
2230helper . display ( {
2331header :'Connectors' ,
@@ -40,6 +48,7 @@ const List = ({ connects }: Props) => {
4048const navigate = useNavigate ( ) ;
4149const { clusterName} = useAppParams < { clusterName :ClusterName } > ( ) ;
4250
51+ const filterPersister = useQueryPersister ( columns as ColumnDef < Connect > [ ] ) ;
4352return (
4453< Table
4554data = { connects }
@@ -49,6 +58,7 @@ const List = ({ connects }: Props) => {
4958} }
5059emptyMessage = "No kafka connect clusters"
5160enableSorting
61+ filterPersister = { filterPersister }
5262/>
5363) ;
5464} ;