diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx index 05e8518..626cec2 100644 --- a/src/components/Table/index.tsx +++ b/src/components/Table/index.tsx @@ -223,16 +223,20 @@ export default function Table({ filterable: true, filterOperators: [ { - label: 'contains', - value: 'contains', + label: 'equals', + value: 'value', getApplyFilterFn: (filterItem) => { return (params) => { if (!filterItem.value) return true - return params.value?.toLowerCase().includes(filterItem.value.toLowerCase()) + const ids = filterItem.value.split(',').map((id: string) => id.trim()) + return ids.includes(params.value) } }, InputComponent: GridFilterInputValue, - InputComponentProps: { type: 'text' } + InputComponentProps: { + type: 'text', + placeholder: 'Enter ID(s), comma separated' + } } ] }, diff --git a/src/context/DataContext.tsx b/src/context/DataContext.tsx index 6e6f497..cdc245c 100644 --- a/src/context/DataContext.tsx +++ b/src/context/DataContext.tsx @@ -103,6 +103,10 @@ export const DataProvider: React.FC = ({ children }) => { return Object.entries(filters) .filter(([_, filterData]) => filterData?.value && filterData?.operator) .map(([field, filterData]) => { + if (field === 'id') { + const ids = filterData.value.split(',').map((id: string) => id.trim()) + return `filters[${field}][value]=${ids.join(',')}` + } return `filters[${field}][${filterData.operator}]=${filterData.value}` }) .join('&') diff --git a/src/types/filters.ts b/src/types/filters.ts index b445f5a..c5283c4 100644 --- a/src/types/filters.ts +++ b/src/types/filters.ts @@ -1,4 +1,4 @@ -export type StringFilterOperator = 'contains' | 'eq' +export type StringFilterOperator = 'contains' | 'eq' | 'value' export type NumberFilterOperator = 'eq' | 'gt' | 'lt' export type FilterOperator = StringFilterOperator | NumberFilterOperator