How to disable row of mui table in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To disable row of mui table in React js, you can use mui table isRowSelectable props. It will disable row of mui table.

Today, I am going to show you, how to disable row of mui table in react js.

Table of contents

• Install Material UI
• Import the required Material-UI components.
• Disable row selection based on a condition.

Step 1: Install Material-UI

Install the following packages to use mui table in react js.

npm

npm install @mui/material @emotion/react @emotion/styled

yarn

yarn add @mui/material @emotion/react @emotion/styled

After installing mui material package, use the following command to install the data grid package:

npm install @mui/x-data-grid

npm install @mui/x-data-grid-generator

npm install @mui/x-data-grid-pro

Step 2: Import the required Material-UI components.

To disable row of mui table in React, first, you have to import the table. then you have to import the @mui/x-data-grid and @mui/x-data-grid-generator components from the @mui/material library.

import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

Step 3: Disable row selection based on a condition.

You can use the isRowSelectable prop of the DataGrid component. Here, I have disabled those rows which have a quantity of more than 50000.

    <DataGrid
    {...data}
    isRowSelectable={(params) => params.row.quantity > 50000}
    checkboxSelection
    />

MUI material disable row of mui table example.

The below code is an example of a Material UI table. You have to import @mui material table. To disable row selection based on a condition, you can use the isRowSelectable prop of the DataGrid component. Here, I have disabled those rows which have a quantity of more than 50000.

App.js

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function DisableRowSelection() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100,
    maxColumns: 6,
  });

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        {...data}
        isRowSelectable={(params) => params.row.quantity > 50000}
        checkboxSelection
      />
    </div>
  );
}

In the above code example, I have used the @mui/material component and a disabled row of mui table.

Check the output of the above code example.

Here, we are provided code sandbox links for the above program disable row of mui table. Then you can use whenever you went and do the changes as per your requirements.

Try it Yourself

All the best 👍