stormy-gold•2y ago

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 = /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> ); };

8 Replies

kapa.ai•2y ago

Hi @jenish7822. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the extracts, you can use the useDataGrid hook provided by refine to manage the state of your DataGrid. However, the extracts do not provide a direct solution to dividing and storing values in two separate grids based on the isNew field. You might need to filter your data based on the isNew field and create two separate DataGrid components for each set of data. However, this approach is not directly covered in the provided extracts. Here is a general idea of how you might approach this:

const { dataGridProps } = useDataGrid();

const newData = dataGridProps.rows.filter(row => row.isNew === true);
const oldData = dataGridProps.rows.filter(row => row.isNew === false);

return (
  <List>
    <DataGrid
      {...dataGridProps}
      rows={newData}
      columns={columns}
      autoHeight
    />
    <DataGrid
      {...dataGridProps}
      rows={oldData}
      columns={columns}
      autoHeight
    />
  </List>
);

const { dataGridProps } = useDataGrid();

const newData = dataGridProps.rows.filter(row => row.isNew === true);
const oldData = dataGridProps.rows.filter(row => row.isNew === false);

return (
  <List>
    <DataGrid
      {...dataGridProps}
      rows={newData}
      columns={columns}
      autoHeight
    />
    <DataGrid
      {...dataGridProps}
      rows={oldData}
      columns={columns}
      autoHeight
    />
  </List>
);

Please note that this is a general approach and might need adjustments based on your specific use case. For more detailed information, you might want to refer to the refine documentation (https://refine.dev/docs) or blogs (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@713646363425898567> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai should i provide with the simillar datagridProps or should it be different for both the fields?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The dataGridProps returned by the useDataGrid hook contains properties needed by the <DataGrid> component. These properties include sorting and filtering configurations, pagination settings, and more. In your case, if both of your DataGrid components (one for isNew = true and one for isNew = false) are supposed to have the same configurations (like sorting, filtering, pagination), you can use the same dataGridProps for both. However, if you want different configurations for each DataGrid (for example, different sorting or filtering settings), you might need to use separate useDataGrid hooks and thus have different dataGridProps for each DataGrid. Here's an example of using the same dataGridProps for both DataGrid components:

const { dataGridProps } = useDataGrid();

const newData = dataGridProps.rows.filter(row => row.isNew === true);
const oldData = dataGridProps.rows.filter(row => row.isNew === false);

return (
  <List>
    <DataGrid
      {...dataGridProps}
      rows={newData}
      columns={columns}
      autoHeight
    />
    <DataGrid
      {...dataGridProps}
      rows={oldData}
      columns={columns}
      autoHeight
    />
  </List>
);

const { dataGridProps } = useDataGrid();

const newData = dataGridProps.rows.filter(row => row.isNew === true);
const oldData = dataGridProps.rows.filter(row => row.isNew === false);

return (
  <List>
    <DataGrid
      {...dataGridProps}
      rows={newData}
      columns={columns}
      autoHeight
    />
    <DataGrid
      {...dataGridProps}
      rows={oldData}
      columns={columns}
      autoHeight
    />
  </List>
);

Remember to adjust this code according to your specific use case and requirements. For more detailed information, you might want to refer to the refine documentation (https://refine.dev/docs) or blogs (https://refine.dev/blog). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@713646363425898567> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-goldOP•2y ago

@kapa.ai , in my case how can i use multiple useDatagrid hook?

kapa.ai•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The useDataGrid hook is used to manage the state of a DataGrid component. If you want to use multiple useDataGrid hooks, you would typically use one for each DataGrid component that you have in your component. However, the extracts provided do not contain specific examples or instructions on how to use multiple useDataGrid hooks in a single component. In general, you would use them like any other hooks in your component, each with its own separate state and functions. Here's a general idea:

const {{ dataGridProps1 }} = useDataGrid();
const {{ dataGridProps2 }} = useDataGrid();

// ... rest of your component

return (
  <List>
    <DataGrid
      {{...dataGridProps1}}
      // other props
    />
    <DataGrid
      {{...dataGridProps2}}
      // other props
    />
  </List>
);

const {{ dataGridProps1 }} = useDataGrid();
const {{ dataGridProps2 }} = useDataGrid();

// ... rest of your component

return (
  <List>
    <DataGrid
      {{...dataGridProps1}}
      // other props
    />
    <DataGrid
      {{...dataGridProps2}}
      // other props
    />
  </List>
);

kapa.ai•2y ago

<@713646363425898567> kapa.ai is still learning and improving, please let us know how it did by reacting below

Load multiple data grids based on the row values

Did you find this page helpful?