MRT logoMantine React Table

On This Page

    Click to Copy Feature Guide

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

    Relevant Table Options

    1
    boolean
    false
    MRT Click to Copy Docs
    2
    UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonProps
    Mantine UnstyledButton Docs

    Relevant Column Options

    1
    boolean
    MRT Click to Copy Docs
    2
    UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonProps
    Mantine UnstyledButton 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 = useMantineReactTable({
    columns,
    data,
    enableClickToCopy: true,
    });

    Customize Copy Buttons

    The click to copy feature is built on top of the Mantine UnstyledButton and CopyButton components. You can customize the copy button by passing in the mantineCopyButtonProps table or column option.
    const table = useMantineReactTable({
    columns,
    data,
    enableClickToCopy: true,
    mantineCopyButtonProps: {
    sx: { width: '100%' },
    leftIcon: <ContentCopy />,
    },
    });

    Click to Copy Example

    DylanMurray
    RaquelKohler
    ErvinReinger
    BrittanyMcCullough
    BransonFrami
    1-5 of 5
    1
    import { useMemo } from 'react';
    2
    import {
    3
    MantineReactTable,
    4
    useMantineReactTable,
    5
    type MRT_ColumnDef,
    6
    } from 'mantine-react-table';
    7
    import { data, type Person } from './makeData';
    8
    9
    const Example = () => {
    10
    const columns = useMemo<MRT_ColumnDef<Person>[]>(
    11
    () => [
    12
    {
    13
    accessorKey: 'firstName',
    14
    header: 'First Name',
    15
    },
    16
    {
    17
    accessorKey: 'lastName',
    18
    header: 'Last Name',
    19
    },
    20
    {
    21
    accessorKey: 'email',
    22
    header: 'Email',
    23
    enableClickToCopy: true,
    24
    },
    25
    {
    26
    accessorKey: 'city',
    27
    header: 'City',
    28
    enableClickToCopy: true,
    29
    },
    30
    ],
    31
    [],
    32
    );
    33
    34
    const table = useMantineReactTable({
    35
    columns,
    36
    data,
    37
    });
    38
    39
    return <MantineReactTable table={table} />;
    40
    };
    41
    42
    export default Example;
    1
    import { useMemo } from 'react';
    2
    import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
    3
    import { data } from './makeData';
    4
    5
    const Example = () => {
    6
    const columns = useMemo(
    7
    () => [
    8
    {
    9
    accessorKey: 'firstName',
    10
    header: 'First Name',
    11
    },
    12
    {
    13
    accessorKey: 'lastName',
    14
    header: 'Last Name',
    15
    },
    16
    {
    17
    accessorKey: 'email',
    18
    header: 'Email',
    19
    enableClickToCopy: true,
    20
    },
    21
    {
    22
    accessorKey: 'city',
    23
    header: 'City',
    24
    enableClickToCopy: true,
    25
    },
    26
    ],
    27
    [],
    28
    );
    29
    30
    const table = useMantineReactTable({
    31
    columns,
    32
    data,
    33
    });
    34
    35
    return <MantineReactTable table={table} />;
    36
    };
    37
    38
    export default Example;
    View Extra Storybook Examples
    You can help make these docs better! PRs are Welcome
    Using Material-UI instead of Mantine?
    Check out Material React Table