diff --git a/src/components/data/datagrid/datagrid.tsx b/src/components/data/datagrid/datagrid.tsx index 36eaef60..8463bfa5 100644 --- a/src/components/data/datagrid/datagrid.tsx +++ b/src/components/data/datagrid/datagrid.tsx @@ -155,7 +155,7 @@ export type DataGridProps = { /** * Gets called when a row value is filtered. - * This callback is debounced every 300 milliseconds. + * This callback is debounced every 100 milliseconds. */ onFilter?: (rowData: AttributeData) => void; @@ -417,6 +417,7 @@ export const DataGrid: React.FC = ({ sortDirection={sortDirection} sortField={sortField} onFilter={handleFilter} + onPageChange={onPageChange} onSort={handleSort} /> @@ -664,6 +665,7 @@ export type DataGridHeadingProps = { sortDirection: "ASC" | "DESC" | undefined; sortField: string | undefined; onFilter: (data: AttributeData) => void; + onPageChange: DataGridProps["onPageChange"]; onSort: (field: TypedField) => void; }; @@ -677,6 +679,7 @@ export const DataGridHeading: React.FC = ({ id, labelFilterField, onFilter, + onPageChange, onSort, renderableFields, selectable, @@ -685,6 +688,18 @@ export const DataGridHeading: React.FC = ({ sortField, }) => { const intl = useIntl(); + const onFilterTimeoutRef = useRef(); + const [filterState, setFilterState] = useState(); + + // Debounce filter + useEffect(() => { + const handler = () => { + onPageChange?.(1); + onFilter(filterState || {}); + }; + onFilterTimeoutRef.current && clearTimeout(onFilterTimeoutRef.current); + setTimeout(handler, 100); + }, [filterState]); return ( @@ -768,7 +783,9 @@ export const DataGridHeading: React.FC = ({ const _data = filterTransform ? filterTransform(data) : data; - onFilter(_data); + + // Reset page on filter (length of dataset may change). + setFilterState(_data); }} /> )} diff --git a/src/components/data/paginator/paginator.tsx b/src/components/data/paginator/paginator.tsx index 2a1cdb96..a8519ebd 100644 --- a/src/components/data/paginator/paginator.tsx +++ b/src/components/data/paginator/paginator.tsx @@ -32,7 +32,7 @@ export type PaginatorProps = React.HTMLAttributes & { * If a `Promise` is returned and `labelLoading` is set: a spinner will be * shown after during the "pending" state of the returned `Promise`. * - * This callback is debounced every 300 milliseconds. + * This callback is debounced every 100 milliseconds. */ onPageChange?: (page: number) => Promise | void; @@ -143,7 +143,7 @@ export const Paginator: React.FC = ({ onPageChangeTimeoutRef.current && clearTimeout(onPageChangeTimeoutRef.current); - onPageChangeTimeoutRef.current = setTimeout(handler, 300); + onPageChangeTimeoutRef.current = setTimeout(handler, 100); return () => clearTimeout(onPageChangeTimeoutRef.current); }, [pageState]);