Custom Component in Material React Table

To use a custom component in Material React Table, you can create a custom cell renderer or editor for your table columns. This allows you to customize the appearance and behavior of cells beyond the default options.

Here’s an example of how you can do this:

muiEditTextFieldProps is a function that returns props for the MUI TextField used in editing mode. It specifies that the TextField should be a dropdown menu (select: true) and populates the dropdown with MenuItem components for each state in usStates.

import React from 'react';
import { MenuItem } from '@mui/material';
import { MaterialReactTable } from 'material-react-table';

const usStates = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California'];

const App = () => {
  const tableData = [
    { firstName: 'John', state: 'California' },
    { firstName: 'Jane', state: 'Alaska' },
  ];

  const handleSaveRow = (rowData) => {
    console.log('Saving row:', rowData);
};
 return (
    <MaterialReactTable
      columns={[
        {
          header: 'First Name',
          accessorKey: 'firstName',
        },
        {
          header: 'State',
          accessorKey: 'state',
          muiEditTextFieldProps: () => ({
            children: usStates.map(state => <MenuItem key={state} value={state}>
              {state}
            </MenuItem>),
            select: true
          })
        },
      ]}
      data={tableData}
      enableRowActions
      enableEditing
      onEditingRowSave={handleSaveRow}
    />
  );
};
export default App;