Mantine DataTable: the React table component for Mantine

Mantine doesn’t have a context-menu component, but the DataTable does allow you to create this useful functionality for your data-rich desktop applications by providing a property called rowContextMenu to describe the menu actions and behavior.

Name	Street address	City	State
Sipes Inc	280 Rigoberto Divide	Twin Falls	MT
Runolfsdottir - Cummerata	102 Konopelski Greens	Missouri City	KY
Johnston LLC	230 Julie Lake	Hartford	KY
Crist and Sons	3387 Blick Turnpike	Attleboro	WV
Schmidt and Sons	286 Leif Lock	Collierville	AL
Nicolas Group	09622 Marcel Place	Highland	OR
Kub and Sons	8699 Upton Fords	East Providence	IN
Jakubowski - Rolfson	191 O'Connell Greens	San Rafael	MA
Welch - Tremblay	31622 Isobel Fall	Olathe	AR
Mueller, Hodkiewicz and Beahan	21751 Elisa Village	Grand Prairie	WA

No records

<DataTable
  withBorder
  columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
  records={companies}
  rowContextMenu={{
    items: (record) => [
      {
        key: 'edit',
        onClick: () => showNotification({ message: `Should edit company ${record.name}` }),
      },
      {
        key: 'delete',
        color: 'red',
        title: `Delete company ${record.name}`,
        onClick: () => showNotification({ color: 'red', message: `Should delete company ${record.name}` }),
      },
      {
        key: 'sendMessage',
        title: 'Send message to company HQ',
        onClick: () => {
          showNotification({ message: 'Should send a message to this company' });
        },
      },
    ],
  }}
/>

When using a row context menu triggered by click instead of right-click, you might want to disable text selection. If you need to combine context menus triggered by click instead of right-click with links, buttons, row action cells or any kind of clickable components inside cells, make sure to intercept the click event on those components and invoke its .stopPropagation() method.
See this example for more information.

If you’re interested in using context menus in other places in your application’s UI, have a look at Mantine ContextMenu.

Using row context menus inside modals

When using row context menus on data tables inside modals, you need to make sure that the context menu is rendered above the modal. To do so, you need to set its zIndex property to a value higher than the modal’s zIndex:

<Button
  leftIcon={<IconAppWindow size={16} />}
  onClick={() =>
    modals.open({
      title: 'Right-click on a row',
      children: (
        <DataTable
          height={300}
          withBorder
          borderRadius="sm"
          columns={[
            { accessor: 'name', title: 'Company name' },
            { accessor: 'city', textAlignment: 'right' },
          ]}
          records={companies}
          rowContextMenu={{
            zIndex: 202, // 👈 make sure the context menu is above the modal
            // items...
        />
      ),
    })
  }
>
  Open modal
</Button>

Mantine DataTable

Examples › Row context menu

Using row context menus inside modals

Mantine DataTable is trusted by