I'm using bootstrap data tables in my React app
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> </> ) }
Now the data is displayed correctly and the search works perfectly, but I want the array when the user enters the search and filters the table records. I don't know which method to call in Bootstrap Datatable while working on react app. For example, when the user enters "A" in the search box, the method should be called and return an array containing objects with an "A" value in any column. How can I achieve this by retaining the datatable functionality?
Just got the answer
This function will be called every time an input is clicked in the search bar, and the filtered data will be returned