Material React Table

Material React Table has an easy-to-implement feature that allows a user to copy a cell's value to the clipboard.

boolean

false

ButtonProps | ({ cell, column, row, table }) => ButtonProps

boolean

ButtonProps | ({ cell, column, row, table }) => ButtonProps

Most likely, there will just be a couple columns that you want to enable click to copy for. You can do this by setting the enableClickToCopy option to true per column on the column definition.

const columns = [
  //...
  {
    accessorKey: 'email',
    header: 'Email',
    enableClickToCopy: true,
  },
  //...
];

return <MaterialReactTable columns={columns} data={data} />;

Alternatively, you can enable click to copy globally by setting the enableClickToCopy prop to true. You could then opt out per column by setting the enableClickToCopy option to false on the column definition.

<MaterialReactTable columns={columns} data={data} enableClickToCopy />

The click to copy feature is built on top of the Material UI Button component. You can customize the copy button by passing in the muiTableBodyCellCopyButtonProps prop or as a column option in a column definition.

<MaterialReactTable
  columns={columns}
  data={data}
  enableClickToCopy
  muiTableBodyCellCopyButtonProps={{
    sx: { width: '100%' },
    startIcon: <ContentCopy />,
  }}
/>

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3import { ContentCopy } from '@mui/icons-material';
4import { data, Person } from './makeData';
5
6const Example: FC = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    () => [
9      {
10        accessorKey: 'firstName',
11        header: 'First Name',
12      },
13      {
14        accessorKey: 'lastName',
15        header: 'Last Name',
16      },
17      {
18        accessorKey: 'email',
19        header: 'Email',
20        enableClickToCopy: true,
21        muiTableBodyCellCopyButtonProps: {
22          fullWidth: true,
23          startIcon: <ContentCopy />,
24          sx: { justifyContent: 'flex-start' },
25        },
26      },
27      {
28        accessorKey: 'city',
29        header: 'City',
30        enableClickToCopy: true,
31      },
32    ],
33    [],
34  );
35
36  return <MaterialReactTable columns={columns} data={data} />;
37};
38
39export default Example;
40

View Extra Storybook Examples