Material React Table

Material React Table tries to get the basics of data grid accessibility right out of the box. But since you can easily add event handlers to just about any interaction inside of the table, you can heavily customize the accessibility of your table to your needs too.

boolean

true

New in v3

Material React Table V3 introduces a new table option that is true by default: enableKeyboardShortcuts

This option enables the following keyboard shortcuts:

• Tab - Moves the focus to the next cell or element in the table (standard browser behavior)

• Arrow Up - Moves the focus 1 cell up

• Arrow Down - Moves the focus 1 cell down

• Arrow Left - Moves the focus 1 cell left

• Arrow Right - Moves the focus 1 cell right

• Home - Moves the focus to the first cell in the current row

• End - Moves the focus to the last cell in the current row

• Page Up - Moves the focus to the first cell in the current column

• Page Down - Moves the focus to the last cell in the current column

• Ctrl/Cmd + Home - Moves the focus to the first cell in the table (top left in left-to-right languages)

• Ctrl/Cmd + End - Moves the focus to the last cell in the table (bottom right in left-to-right languages)

• Enter - Performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.

• Space - Also performs certain actions in the currently focused cell such as sorting, row selection, row expansion, row pinning, etc.

• Ctrl/Cmd + Enter - Opens column actions menu on a header

• Escape - Exits full screen mode

A tabIndex={0} is also automatically added to all cells, headers, and footers when enableKeyboardShortcuts is enabled to allow for keyboard focus.

You do not have to use the provided keyboard shortcuts. You can turn off enableKeyboardShortcuts and add your own keyboard shortcuts using the onKeyDown event handler on all of the table cells (or any other element).

You can also add custom focus styles to any element using the sx prop.

const table = useMaterialReactTable({
  columns,
  data,
  //add custom keyboard shortcuts
  defaultColumn: {
    //header
    muiTableHeadCellProps: {
      onKeyDown: (event) => {
        if (event.key === 't' && event.metaKey) {
          alert('You pressed the custom shortcut!');
        }
      },
      tabIndex: 0, //allow for keyboard focus
    },
    //body
    muiTableBodyCellProps: {
      onKeyDown: (event) => {
        if (event.key === 't' && event.metaKey) {
          alert('You pressed the custom shortcut!');
        }
      },
      //add custom focus styles
      sx: {
        '&:focus-visible': {
          //or just `&:focus` if you want all focus events to be visible
          outline: '2px solid red',
          outlineOffset: '-2px',
        },
      },
      tabIndex: 0, //allow for keyboard focus
    },
  },
  enableKeyboardShortcuts: false, //turn off default keyboard shortcuts from MRT
});

An outline is automatically added to all elements when they are focused. You can easily customize the color of the outline by setting cellNavigationOutlineColor property in the mrtTheme table option.

const table = useMaterialReactTable({
  columns,
  data,
  mrtTheme: {
    cellNavigationOutlineColor 'limegreen'
  }
});

Or, of course, you can just use the sx props to override any styles you want, just like any other style override in MRT.

const table = useMaterialReactTable({
  columns,
  data,
  defaultColumn: {
    muiTableBodyCellProps: {
      sx: {
        '&:focus-visible': {
          outline: '4px solid red',
          outlineOffset: '-4px',
        },
      },
    },
  },
});

Now in V3, a focus trap is applied to the table when in full screen mode. This is to prevent the user from navigating outside of the table when using the arrow keys.

The user can exit full screen mode by pressing Escape.