CODEWITHSUNDEEP
reactjstypescriptmaterial-uimaterial-tablematerial-react-table
Prashant Patel
Prashant Patel

Reputation: 272

Add custom material UI checkbox in column using material react table

As a beginner in React, I am implementing Material React Table v2 in my project. I aim to integrate a Material UI checkbox that reflects the 'Is Active' data in a disabled state. Despite numerous attempts, I have yet to find a solution.

    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;
}
//end

const data = [
  {
    Id: '1',
    firstName: 'Raj',
    lastName: 'Happy',
    email: '[email protected]',
    isActive: true,
  },
  {
    Id: '2',
    firstName: 'Jay',
    lastName: 'Home',
    email: '[email protected]',
    isActive: false,
  },
  //end
];

const ReactTableWithoutCheckbox = () => {
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
    //column definitions...
    () => [
      {
        accessorKey: 'firstName',
        header: 'First Name',
      },
      {
        accessorKey: 'lastName',
        header: 'Last Name',
      },
      {
        accessorKey: 'email',
        header: 'Email',
      },
      {
        accessorKey: 'isActive',
        header: 'Is Active',   
      },
      
    ],
    [],
    //end
  );

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

  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;

Current Result

enter image description here

I want to insert a checkbox under the "Is Active" cell.

Expected Result

enter image description here

Upvotes: 0

Views: 427

Answers (1)

Konul Memmedova
Konul Memmedova

Reputation: 140

You have to import the Checkbox from Material UI and use it in your "isActive" column like this :

{
    accessorKey: 'isActive',
    header: 'Is Active',
    // Custom cell 
    Cell: ({ cell }) => (
      <Checkbox label="checkbox"/>
    ),
  },

You can use Material UI checkbox props to handle its value, hope this helps. Material UI checkbox

Upvotes: 2

Related Questions