Click to Copy Guide - Material React Table V2 Docs

Material React Table

Click to Copy Feature Guide

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

Relevant Table Options

#	Type	Default Value	More Info Links
1	boolean \| 'context-menu' \| ((cell: MRT_Cell<TData>) => 'context-menu' \| boolean)	false	MRT Click to Copy Docs

2	ButtonProps \| ({ cell, column, row, table }) => ButtonProps		Material UI Button Props

Relevant Column Options

#	Type	More Info Links
1	boolean \| 'context-menu' \| ((cell: MRT_Cell<TData>) => 'context-menu' \| boolean)	MRT Click to Copy Docs

2	ButtonProps \| ({ cell, column, row, table }) => ButtonProps	Material UI Button API

Enable Click to Copy Per Column

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,
  },
  //...
];

Enable Click to Copy For All Cells

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

const table = useMaterialReactTable({
  columns,
  data,
  enableClickToCopy: true,
});

Customize Copy Buttons

The click to copy feature is built on top of the Material UnstyledButton and CopyButton components. You can customize the copy button by passing in the muiCopyButtonProps table or column option.

const table = useMaterialReactTable({
  columns,
  data,
  enableClickToCopy: true,
  muiCopyButtonProps: {
    sx: { width: '100%' },
    startIcon: <ContentCopy />,
  },
});

Click to Copy Example

Demo

Open Stackblitz Open Code Sandbox Open on GitHub

Primary

Secondary

Drop to group by

First Name	Last Name	Email	City
Dylan	Murray
Raquel	Kohler
Ervin	Reinger
Brittany	McCullough
Branson	Frami

Rows per page

1-5 of 5

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

Source Code

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { ContentCopy } from '@mui/icons-material';
4import { data, type Person } from './makeData';
5
6const Example = () => {
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        muiCopyButtonProps: {
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