La búsqueda no funciona con React material-table usando datos remotos

Solución:

El objeto de consulta contiene un campo de búsqueda, que es el valor de búsqueda actual. Debe pasar eso a su consulta en línea y filtrarlo dentro del backend o filtrarlo dentro del frontend de esta manera:

 resolve({
       data: result._embedded.publications.filter(pub => pub.firstAuthor.contains(query.search)),
       page: result.page.number,
       totalCount: result.page.totalElements,
 })

si lo filtra en la interfaz, debe escribir su función de filtro personalizado para filtrar todos los campos relevantes como nombre, identificación, etc.

Para cualquiera que haya venido aquí en busca de una solución, cómo hacer una búsqueda de servidor en la tabla de materiales usando ganchos.

Hubo un error (https://github.com/mbrn/material-table/pull/1611 que estaba rompiendo el campo de búsqueda, así que asegúrese de tener [email protected]

codesandbox.io/s/material-table-server-search-on-hooks-tnniz

import React, { useEffect, useState } from "react";
import MaterialTable from "material-table";
import useAxios from "axios-hooks";

const MaterialTableSearchDemo = () => {
  const [query, setQuery] = useState("");
  const [items, setItems] = useState([]);
  const [{ data = {}, loading }, runSearch] = useAxios(
    `https://api.github.com/search/repositories?q=${query}&sort=stars&order=desc&type=Repositories`,
    { manual: true }
  );

  const columns = [
    { title: "Name", field: "name" },
    { title: "Stars", field: "stargazers_count" }
  ];

  useEffect(() => {
    if (query) {
      runSearch();
    } else {
      setItems([]);
    }
  }, [query, runSearch]);

  useEffect(() => {
    if (!loading && Array.isArray(data.items)) {
      setItems(data.items);
    }
  }, [loading, setItems, data.items]);

  return (
    <MaterialTable
      title="Github repositories"
      data={items}
      columns={columns}
      onSearchChange={setQuery}
      options={{
        debounceInterval: 500,
        paging: false,
        //searchAutoFocus: true
      }}
      localization={{
        toolbar: {
          searchPlaceholder: "e.g. React"
        }
      }}
      isLoading={loading}
    />
  );
};

export default MaterialTableSearchDemo;

---

---

Utiliza Nuestro Buscador