Material React Table

You can pretty much add ANY event listener to ANY component in Material React Table.

You can do this by passing props to any of the mui...Props props. This guide gives a few examples of the most common use cases, but there are limitless possibilities.

In the customize components docs, we explained how to pass any prop you need to pass to any exposed Material UI component that is in the table. The list of props that you can pass to Material UI components includes any event listener.

Here are a few common examples of some useful event listeners you might want to add to the table, although the possibilities are countless.

<MaterialReactTable
  muiTableBodyRowProps={({ row }) => ({
    onClick: (event) => {
      console.info(event, row.id);
    },
    sx: {
      cursor: 'pointer', //you might want to change the cursor too when adding an onClick
    },
  })}
/>

<MaterialReactTable
  muiTableBodyCellProps={({ cell }) => ({
    onDoubleClick: (event) => {
      console.info(event, cell.id);
    },
  })}
/>

//add to every edit text field
<MaterialReactTable
  muiEditTextFieldProps={({ cell }) => ({
    onBlur: (event) => {
      console.info(event, cell.id);
    },
  })}
/>

//or add to just edit text fields in a specific column
const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    muiEditTextFieldProps: ({ cell }) => ({
      onBlur: (event) => {
        console.info(event);
      },
    }),
  },
];

Warning: Be careful when using onChange, as it can trigger re-renders with every keystroke, which can lead to performance issues

//add to every edit text field
<MaterialReactTable
  muiEditTextFieldProps={({ cell }) => ({
    onChange: (event) => {
      console.info(event, cell.id);
    },
  })}
/>

//or add to just edit text fields in a specific column
const columns = [
  {
    accessorKey: 'name',
    header: 'Name',
    muiEditTextFieldProps: ({ cell }) => ({
      onChange: (event) => {
        console.info(event);
      },
    }),
  },
];