Implement global search to search whole data base records in react

Question

I have a custom data table using primeReact. I have a global search. I implemented the global search as follows

 handleGlobalSearch = () => {
const { globalSearch } = this.state;
const { data } = this.props;

if (globalSearch) {
  const filteredData = data.filter((row) =>
    Object.values(row).some((value) =>
      (value as any).toString().toLowerCase().includes(globalSearch.toLowerCase())
    )
  );

  this.setState({
    dataToDisplay: filteredData,
    currentPage: 1,
  });
} else {
  this.setState({
    dataToDisplay: data,
    currentPage: 1,
  });
}};

It will only search for the data table records. But I want it to be a callback function so that it can search the whole data base records of the API that I am calling for getting the data in the table. The API's will differ from table to table as this custom data table will be used with different API's and different data. How can I achieve this. Can someone help me with this! Thanks in advance!

Answer 1

@January to use PrimeReact in a callback mode where it is looking at your Database live you need to use "lazy" mode like in this example: https://primereact.org/datatable/#lazy_load

I have a full working demo which use PostGresDB on the backend and shows you how to wire it up to REST services to make your PrimeReact Datatable fully lazy: https://github.com/melloware/quarkus-primereact