Oye, he implementado mui-datatable en mi proyecto. Todo funciona bien, pero la barra de búsqueda no funciona cuando habilito serverSide: true en opciones.
const options = { filter: true, count: state.count, rowsPerPage: state.rowsPerPage, serverSide: true, }Si desea alguna aclaración con respecto a este problema, no dude en preguntar.
Por favor, ayúdame.
Saludos
Aquí proporciono algo de código para que quede conceptualmente claro.
Aquí declaro algunos states para que podamos usarlos para paging or data loading
const [data, setData] = useState(carStocks); const [page, setPage] = useState(0); const [total, setTotal] = useState(0); Defina su método que llamará a api y establecerá datos usando setData
function changePage(newTableState) { let state = { ...tableState, ...newTableState, pageNo: newTableState.page + 1, pageSize: newTableState.rowsPerPage, searchText: newTableState.searchText }; setTableState(state); // CALL API with state parameter // setData(data); // setPage(page); // setTotal(total); } Aquí declaras tus columns
const columns = [ { name: 'name', label: 'Name', options: { filter: false, sort: false, viewColumns: true } }, { name: 'title', label: 'TITLE', options: { filter: false, sort: false, viewColumns: true } }, ]; Aquí usted declara sus options . En las opciones, debe usar serverSide: true y si usa serverSide: true , debe vincular el recuento, la página, las filas por página con el valor basado en el tamaño de los datos encontrado en la API.
const options = { serverSide: true, count: total, page: page, rowsPerPage: tableState.pageSize, selectableRows: 'multiple', searchText: tableState.searchText, searchPlaceholder: 'Type Car Title to Search', textLabels: { body: { noMatch: loading ? <CircularProgress color='secondary' size={40} /> : 'SORRY_THERE_IS_NO_MATCHING_DATA_TO_DISPLAY' } }, onTableChange: (action, newTableState) => { switch (action) { case 'changePage': case 'changeRowsPerPage': changePage(newTableState); break; case 'search': changePage(newTableState); break; case 'filterChange': handleFilterSubmit(newTableState.filterList); break; } } }; Finalmente puedes usar data , columns y options
<MUIDataTable data={data} columns={columns} options={options} />