diff --git a/apps/www/src/components/datatable-demo.tsx b/apps/www/src/components/datatable-demo.tsx index d23cdf8f6..b56516ad0 100644 --- a/apps/www/src/components/datatable-demo.tsx +++ b/apps/www/src/components/datatable-demo.tsx @@ -72,9 +72,15 @@ export const columns: DataTableColumnDef[] = [ value: 'failed' } ], - filterType: 'multiselect', + filterType: 'select', enableColumnFilter: true, - enableHiding: true + enableHiding: true, + defaultFilterValue: '', + filterProps: { + select: { + autocomplete: true + } + } }, { accessorKey: 'email', diff --git a/packages/raystack/components/data-table/data-table.types.tsx b/packages/raystack/components/data-table/data-table.types.tsx index b1ea82154..649236403 100644 --- a/packages/raystack/components/data-table/data-table.types.tsx +++ b/packages/raystack/components/data-table/data-table.types.tsx @@ -81,6 +81,7 @@ export type DataTableColumnDef = ColumnDef & { enableHiding?: boolean; defaultHidden?: boolean; filterOptions?: FilterSelectOption[]; + defaultFilterValue?: unknown; filterProps?: { select?: BaseSelectProps; }; diff --git a/packages/raystack/components/data-table/hooks/useFilters.tsx b/packages/raystack/components/data-table/hooks/useFilters.tsx index 25621052a..e3ab44aed 100644 --- a/packages/raystack/components/data-table/hooks/useFilters.tsx +++ b/packages/raystack/components/data-table/hooks/useFilters.tsx @@ -18,11 +18,12 @@ export function useFilters() { const dataType = getDataType({ filterType, dataType: columnDef.dataType }); const defaultFilter = filterOperators[filterType][0]; const defaultValue = - filterType === FilterType.date + columnDef.defaultFilterValue ?? + (filterType === FilterType.date ? new Date() : filterType === FilterType.select ? options[0].value - : ''; + : ''); updateTableQuery(query => { return {