how to hide a row in MUI X Data Grid

Question

I have MUI X Data Grid. I want to hide a few rows and not display them based on a given condition and if a particular value exists in a column. How do I hide it? There seems to be props such as

hide

for columns but there is nothing for rows. EDIT The code is as follows I want to hide the row from being displayed if a value exists in the 4th column (field: 'recvDistLocId') and I want to hide the rows only when I press a button in the toolbar. So basically, its like a filter. Initially, all the data should be displayed and if I click the button, all rows with a value in the 4th column should disappear.

const columns = []
columns.push({
      field: 'code',
      headerName: nowrapHeader(appLanguages.serialCode[lang]),
      flex: 1,
      getApplyQuickFilterFn: getApplyFilterFnSameYear
    });

    columns.push({
      field: 'brandId',
      headerName: nowrapHeader(appLanguages.brand[lang]),
      renderCell: (params) =>
        getSelectCustomBodyRender(this.getBrandOptionMap(), params.row.brandId),
      flex: 1,
    });

    columns.push({
      field: 'slip',
      headerName: nowrapHeader(appLanguages.slipNum[lang]),

      renderCell: (params) => this.getSlipText(params.row.slip),

      flex: 1,
    });
columns.push({
      field: 'recvDistLocId',
      headerName: 'RecvDistLocId',
      flex: 1,
      hide: true,
    });


/////This is the main data grid element code in the render()

<div style={{ height: 640, width: '100%' }}>
            <DataGrid
              sx={{
                '& .MuiDataGrid-columnHeaderCheckbox .MuiDataGrid-columnHeaderTitleContainer': {
                  display: 'none',
                },
              }}
              rows={serialsList || []}
              columns={columns}
              rowsPerPageOptions={[25, 50, 100]}
              checkboxSelection={this.state.cancelShipFlag ? true : false}
              disableSelectionOnClick={false}
              components={{
                Toolbar: NewToolbar,
              }}
              onSelectionModelChange={(ids) => {
                const selectedIDs = new Set(ids);
                const selectedRows = rowData.filter((row) => selectedIDs.has(row.id));

                this.setState({ rowinfo: selectedRows });
                this.setState({ selectedrows: ids });
                //console.log('Selected rows: ' + this.state.selectedrows);
              }}
              selectionModel={this.state.selectedrows}
            />
          </div>

filter them out in your data based on that condition. Instead of hiding the rows just do not include them in the data you pass to the data grid. — Junius L
– Junius L, Commented Sep 14, 2022 at 8:20

Junius L · Accepted Answer · 2022-09-14 08:39:56Z

1

filter the data based on the condition

// use setFilterValue to set the value of the clicked column e.g. recvDistLocId
const [filterValue, setFilterValue] = React.useState()

// assuming serialsList is array of strings
// use same case for comparing values
// use row.toLowerCase() !== filterValue.toLowerCase()
const rows = (serialsList || []).filter(row => row !== filterValue)

Then pass rows to the data grid

<DataGrid
  rows={rows}
  ....

edited Sep 14, 2022 at 8:39

answered Sep 14, 2022 at 8:30

Junius L

16.2k6 gold badges61 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

freedoggy · Accepted Answer · 2024-08-07 14:27:42Z

1

The approach of filtering outside of the DataGrid and then passing in new rows will cause the entire table to re-render every time which is problematic for use cases that involve high-frequency updates. If you receive frequent updates, this approach will fail you:

const [rows, setRows] = useState([])

useEffect(() => {
  // code that updates `rows`
}, [])

<DataGrid
 rows={rows}
 />

To fix this, you will need to use apiRef to manage the data you provide the DataGrid. More details can be found in their docs under high frequency updates

Update to this: This approach can open other challenges, such as "how do I hide or unhide rows if there is a filter action outside of the DataGrid". Consider this approach when moving to apiRef

edited Aug 7, 2024 at 14:27

answered Jul 9, 2024 at 15:22

freedoggy

811 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

how to hide a row in MUI X Data Grid

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related