I am using ag-grid for displaying data in Reactjs.
The data are getting sorted and filtered from the backend, I just need to display data in the table.
The problem I am facing is on grid load it loads the data correctly but does not load the data after applying the filter.
function DashboardServerSideTable(props: AgGridTableProps) {
const { columns } = props;
// states
const [gridApi, setGridApi] = React.useState<GridApi>();
const { state, dispatch } = useContext(DashboardContext);
// Query & Mutation
const [getDashboardTableData, { data, refetch, loading }] = useLazyQuery(GET_DASHBOARD_TABLE_DATA, {
notifyOnNetworkStatusChange: true, // This will send the network status
fetchPolicy: 'no-cache',
});
const handleGridReady = useCallback((params) => {
let { filterModel}: IServerSideGetRowsRequest = params;
const dataSource = {
rowCount: 1000,
getRows: function (params: IServerSideGetRowsParams) {
getDashboardTableData({
variables: {
tab: state.tab,
headerFilter: state.card,
filtergroup: JSON.stringify(filterModel),
},
}).then(res => JSON.parse(res.data.lpapqpprojectsumm.body)).then(({ datarows, size, total }) => {
params.successCallback(datarows, total);
}).catch(err => params.fail());
}
};
params?.api?.setServerSideDatasource(dataSource);
}, []);
return (
<div className={clsx(styles.table, 'ag-theme-alpine')}>
<AgGridReact
pagination
paginationAutoPageSize
onGridReady={handleGridReady}
defaultColDef={defaultColDef}
rowModelType="serverSide"
serverSideStoreType="partial"
cacheBlockSize={1000}
>
{columns.map((col) => (
<AgGridColumn {...col} key={col.field} />
))}
</AgGridReact>
</div>
)
}