在Material React Table列中添加自定义禁用Material UI复选框

你只需要在isActive列的配置里添加自定义单元格渲染逻辑，用Material UI的Checkbox组件替换默认的布尔值显示，同时设置disabled属性即可。以下是修改后的完整代码：

import { useMemo, useState } from 'react';
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
  type MRT_RowSelectionState,
} from 'material-react-table';
import { Checkbox } from "@mui/material"


interface Person {
  Id: string;
  firstName: string;
  lastName: string;
  email: string;
  isActive: boolean;
}

const data = [
  {
    Id: '1',
    firstName: 'Raj',
    lastName: 'Happy',
    email: 'raj@gmail.com',
    isActive: true,
  },
  {
    Id: '2',
    firstName: 'Jay',
    lastName: 'Home',
    email: 'jay@gmail.com',
    isActive: false,
  },
];

const ReactTableWithoutCheckbox = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'isActive',
        header: 'Is Active',
        // 自定义单元格渲染，显示禁用的复选框
        Cell: ({ row }) => (
          <Checkbox 
            checked={row.original.isActive} 
            disabled 
          />
        ),
      },
      
    ],
    [],
  );

  const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});

  const table = useMaterialReactTable({
    columns,
    data,
    getRowId: (row) => row.Id,
    muiTableBodyRowProps: ({ row }) => ({
      onClick: row.getToggleSelectedHandler(),
      sx: { cursor: 'pointer' },
    }),
    onRowSelectionChange: setRowSelection,
    state: { rowSelection },
    enableColumnFilters:false,
    enableHiding:false,
    enableDensityToggle: false,
    enableFullScreenToggle:false,
    enableMultiRowSelection:false,
    enableRowSelection: true,
    enableSorting:false,    
  });

  return <MaterialReactTable table={table} />;
};

export default ReactTableWithoutCheckbox;

关键修改点说明： #

• 在isActive列的配置中新增了Cell属性，这是Material React Table提供的自定义单元格渲染入口。
• 通过row.original.isActive直接获取当前行数据的激活状态，绑定到复选框的checked属性上。
• 添加disabled属性，让复选框处于不可点击的禁用状态，仅做状态展示。
• 移除了原本无用的isChecked状态变量，直接复用数据源里的状态即可。

内容的提问来源于stack exchange，提问作者Prashant Patel