Load multiple data grids based on the row values
@kapa.ai , in my list component, i am rendering a datagrid, in which there is a field named isNew, now based on this i want to divide and store values in 2 separate grids, one with the data of isNew with false and another with isNew = true.
this is my code:
export const QaList: React.FC = () => {
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "name",
headerName: "Name",
minWidth: 120,
filterable: true,
flex: 1,
},
{
field: "isNew",
headerName: "Is New",
type: "string",
minWidth: 200,
filterable: true,
flex: 1,
// hideable: true,
},
],
[]
);
const navigate = useNavigate();
const routeChange = () => {
const path =
navigate(path);
};
return (
<List
title={"Company List"}
headerButtons={<CreateButton onClick={routeChange} />}
>
<Box height={"40px"}></Box>
<DataGrid
{...restDataGridProps}
getRowId={(row) => row._id}
columns={columns}
autoHeight
filterMode={filterMode}
filterModel={undefined}
onFilterModelChange={onFilterModelChange}
paginationMode={paginationMode}
paginationModel={paginationModel}
onPaginationModelChange={onPaginationModelChange}
// autoPageSize
// rowsPerPageOptions={[10, 20, 30, 50, 100]}
pageSizeOptions={[10, 20, 50, 100]}
disableColumnFilter
style={{
position: "relative",
bottom: "40px",
}}
/>
</List>
);
};
this is my code:
export const QaList: React.FC = () => {
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "name",
headerName: "Name",
minWidth: 120,
filterable: true,
flex: 1,
},
{
field: "isNew",
headerName: "Is New",
type: "string",
minWidth: 200,
filterable: true,
flex: 1,
// hideable: true,
},
],
[]
);
const navigate = useNavigate();
const routeChange = () => {
const path =
/createCompany;navigate(path);
};
return (
<List
title={"Company List"}
headerButtons={<CreateButton onClick={routeChange} />}
>
<Box height={"40px"}></Box>
<DataGrid
{...restDataGridProps}
getRowId={(row) => row._id}
columns={columns}
autoHeight
filterMode={filterMode}
filterModel={undefined}
onFilterModelChange={onFilterModelChange}
paginationMode={paginationMode}
paginationModel={paginationModel}
onPaginationModelChange={onPaginationModelChange}
// autoPageSize
// rowsPerPageOptions={[10, 20, 30, 50, 100]}
pageSizeOptions={[10, 20, 50, 100]}
disableColumnFilter
style={{
position: "relative",
bottom: "40px",
}}
/>
</List>
);
};
