Obtenez des données filtrées dans Bootstrap DataTable à l'aide de React.js en saisissant des mots-clés de recherche

Question

J'utilise des tables de données bootstrap dans mon application React

function MyApp(){

const tableRef = useRef(null);
const [tableSave, setTableSave] = useState(null)
const [dataFromAPI, setDataFromAPI] = useState([])

useEffect(()=> {
      axios.get("url").then(response=>setDataFromAPI(response.data))
},[])
 
useEffect(() => {
    
   setTableSave($(tableRef.current).DataTable(
      {
        bSort: false,
        scrollY: "200px",
        scrollCollapse: true,
        info: true,
        paging: false
      }
    ));
   
  }, [dataFromAPI]);
return (
<>
 <table className="table" ref={tableRef}>
            <thead>
              <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
              </tr>
            </thead>
            <tbody>
              {tableData.map((_value, i) => {
                return (
                  <tr key={i}>
                    <td key={i}>{_value['A']}</td>
                    <td key={i}>{_value['B']}</td>
                    <td key={i}>{_value['C']}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
</>
)
}

Maintenant, les données s'affichent correctement et la recherche fonctionne parfaitement, mais je veux le tableau lorsque l'utilisateur entre dans la recherche et filtre les enregistrements de la table. Je ne sais pas quelle méthode appeler dans Bootstrap Datatable lorsque je travaille sur l'application React. Par exemple, lorsque l'utilisateur saisit « A » dans la zone de recherche, la méthode doit être appelée et renvoyer un tableau contenant des objets avec une valeur « A » dans n'importe quelle colonne. Comment puis-je y parvenir en conservant la fonctionnalité datatable ?

Answer 1

Je viens de recevoir la réponse

if(tableSave){
  tableSave.on("search.dt", function() {
      //filtered rows data as an arrays

      let data = tableSave.rows({ filter: "applied" }).data();

}

}

Cette fonction sera appelée à chaque fois que vous cliquerez sur une entrée dans la barre de recherche, et les données filtrées seront renvoyées