Mantine DataTable

'use client';
// 👆 Since 'useContextMenu' is a hook, don't forget to add the 'use client' directive
//    at the top of your file if you're using it in a RSC context

import { useMediaQuery } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
import { IconEdit, IconEye, IconTrash } from '@tabler/icons-react';
import { DataTable } from 'mantine-datatable';
import { useContextMenu } from 'mantine-contextmenu';
import companies from '~/data/companies.json';

export function RowContextMenuExample() {
  const { showContextMenu } = useContextMenu();
  const isTouch = useMediaQuery('(pointer: coarse)');

  return (
    <DataTable
      withTableBorder
      withColumnBorders
      textSelectionDisabled={isTouch} // 👈 disable text selection on touch devices
      columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
      records={companies}
      onRowContextMenu={({ record, event }) =>
        showContextMenu([
          {
            key: 'view-company-details',
            icon: <IconEye size={16} />,
            onClick: () =>
              showNotification({
                message: `Clicked on view context-menu action for ${record.name} company`,
                withBorder: true,
              }),
          },
          {
            key: 'edit-company-information',
            icon: <IconEdit size={16} />,
            onClick: () =>
              showNotification({
                message: `Clicked on edit context-menu action for ${record.name} company`,
                withBorder: true,
              }),
          },
          { key: 'divider' },
          {
            key: 'delete-company',
            icon: <IconTrash size={16} />,
            color: 'red',
            onClick: () =>
              showNotification({
                color: 'red',
                message: `Clicked on delete context-menu action for ${record.name} company`,
                withBorder: true,
              }),
          },
        ])(event)
      }
    />
  );
}

const { showContextMenu, hideContextMenu } = useContextMenu();
const isTouch = useMediaQuery('(pointer: coarse)');

return (
  <DataTable
    height={300}
    withTableBorder
    withColumnBorders
    textSelectionDisabled={isTouch} // 👈 disable text selection on touch devices
    columns={[{ accessor: 'firstName' }, { accessor: 'lastName' }, { accessor: 'email' }]}
    records={employees}
    onRowContextMenu={({ record, event }) =>
      showContextMenu([
        // context menu items...
      ])(event)
    }
    // 👇 make sure the context-menu is closed when the user scrolls the table
    onScroll={hideContextMenu}
  />
);

const { showContextMenu } = useContextMenu();
const isTouch = useMediaQuery('(pointer: coarse)');

return (
  <DataTable
    withTableBorder
    withColumnBorders
    textSelectionDisabled={isTouch} // 👈 disable text selection on touch devices
    columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={companies}
    onCellContextMenu={({ record, column, event }) => {
      if (column.accessor === 'name') {
        return showContextMenu([
          // context menu items...
        ])(event);
      }
    }}
  />
);

const { showContextMenu } = useContextMenu();
const isTouch = useMediaQuery('(pointer: coarse)');

return (
  <DataTable
    withTableBorder
    withColumnBorders
    textSelectionDisabled={isTouch} // 👈 disable text selection on touch devices
    columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={companies}
    onRowContextMenu={({ record, event }) =>
      showContextMenu([
        // row context menu items...
      ])(event)
    }
    onCellContextMenu={({ record, column, event }) => {
      if (column.accessor === 'name') {
        return showContextMenu([
          // 'name' cell context menu items...
        ])(event);
      }
    }}
  />
);

const { showContextMenu } = useContextMenu();
const isTouch = useMediaQuery('(pointer: coarse)');

return (
  <DataTable
    withTableBorder
    withColumnBorders
    textSelectionDisabled={isTouch} // 👈 disable text selection on touch devices
    columns={[{ accessor: 'name' }, { accessor: 'streetAddress' }, { accessor: 'city' }, { accessor: 'state' }]}
    records={companies}
    // 👇 use `onRowClick` instead of `onRowContextMenu` to
    //    show context-menu when the user clicks on a row
    onRowClick={({ record, event }) =>
      showContextMenu([
        // context menu items...
      ])(event)
    }
  />
);

const { showContextMenu } = useContextMenu();
const isTouch = useMediaQuery('(pointer: coarse)');

return (
  <Button
    leftSection={<IconAppWindow size={16} />}
    onClick={() =>
      modals.open({
        centered: true,
        title: 'Right-click on a row',
        children: (
          <DataTable
            borderRadius="sm"
            height={260}
            withTableBorder
            withColumnBorders
            textSelectionDisabled={isTouch} // 👈 disable text selection on touch devices
            columns={[{ accessor: 'name' }, { accessor: 'city' }, { accessor: 'state', textAlign: 'right' }]}
            records={companies}
            onRowContextMenu={({ record, event }) =>
              showContextMenu([
                // context menu items...
              ])(event)
            }
          />
        ),
      })
    }
  >
    Open modal
  </Button>
);