MRT logoMaterial 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 Props

    #
    Prop Name
    Type
    Default Value
    More Info Links
    1
    boolean
    false

    No Description Provided... Yet...

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

    No Description Provided... Yet...

    Relevant Column Options

    #
    Column Option
    Type
    Default Value
    More Info Links
    1
    boolean
    MRT Click to Copy Docs

    Enable the click to copy feature for this column.

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

    No Description Provided... Yet...

    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,
    },
    //...
    ];
    return <MaterialReactTable columns={columns} data={data} />;

    Enable Click to Copy For All Cells

    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 />

    Customize Copy Buttons

    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 />,
    }}
    />

    Click to Copy Example


    Demo

    Open Code SandboxOpen on GitHub
    First Name
    Last Name
    Email
    City
    DylanMurray
    RaquelKohler
    ErvinReinger
    BrittanyMcCullough
    BransonFrami

    Rows per page

    1-5 of 5

    Source Code

    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