Table Event Listeners Guide

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

You can do this by passing props to any of the mantine...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 Mantine Components

In the customize components docs, we explained how to pass any prop you need to pass to any exposed Mantine component that is in the table. The list of props that you can pass to Mantine 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

const table = useMantineReactTable({
  mantineTableBodyRowProps: ({ 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

const table = useMantineReactTable({
  mantineTableBodyCellProps: ({ cell }) => ({
    onDoubleClick: (event) => {
      console.info(event, cell.id);
    },
  }),
});

Add an onBlur to an Edit TextField

//add to every edit text field
const table = useMantineReactTable({
  mantineEditTextInputProps: ({ 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',
    mantineEditTextInputProps: ({ 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
const table = useMantineReactTable({
  mantineEditTextInputProps: ({ 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',
    mantineEditTextInputProps: ({ cell }) => ({
      onChange: (event) => {
        console.info(event);
      },
    }),
  },
];