CODEWITHSUNDEEP
reactjsdatatablefocusprimereact
Maggie
Maggie

Reputation: 8101

Prime React Datatable: keep focus on filter input

I am using Prime React Datatable. I would love to keep built-in controls for filtering and pagination, but make filtering and pagination server side. This all works as expected, except for one thing: when the user inputs something in the filtering input, a new request is made to the server, which reloads the table data. When that happens, the focus from the input field is lost, leading to a very poor user experience. Is there a simple way to keep focus on the filter inputs, without writing my own controls?

Simplified code:

const [filters, setFilters] = useState(initFilterValues);
const [values, setValues] = useState([]);

const onFilter = (e: DataTableStateEvent) => {
    const newFilters = { ...filters, ...e.filters };
    setFilters(newFilters);
};

useEffect(() => {
   // fetch data from server
   // const data = await response.json();
   setValues(data);
}, [filters]);

return(
<DataTable
          values={values}
          filters={filters}
          onFilter={onFilter}
          filterDisplay="row"
          lazy
>
  <Column field="col1" filter={true} />
  <Column field="col2" filter={true} />
  <Column field="col3" filter={true} />
</DataTable>
);

Upvotes: 0

Views: 108

Answers (0)

Related Questions