Table Event Listeners Guide

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.

Add Event Listeners to any of the Material UI Components

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.

Add an onClick to a Table Row

<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
    },
  })}
/>

Add an onDoubleClick to a Table Cell

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

Add an onBlur to an Edit TextField

//add to every edit text field
<MaterialReactTable
  muiTableBodyCellEditTextFieldProps={({ 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',
    muiTableBodyCellEditTextFieldProps: ({ cell }) => ({
      onBlur: (event) => {
        console.info(event);
      },
    }),
  },
];

Add an onChange to an Edit TextField

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
  muiTableBodyCellEditTextFieldProps={({ 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',
    muiTableBodyCellEditTextFieldProps: ({ cell }) => ({
      onChange: (event) => {
        console.info(event);
      },
    }),
  },
];