Click to Copy Guide

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

Relevant Table OptionsCopy Anchor Link

Relevant Column OptionsCopy Anchor Link

Enable Click to Copy Per ColumnCopy Anchor Link

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 CellsCopy Anchor Link

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 = useShadcnTable({
  columns,
  data,
  enableClickToCopy: true,
});

Customize Copy ButtonsCopy Anchor Link

The click to copy feature is built on top of the shadcn/ui Button component. You can customize the copy button by passing in the stCopyButtonProps table or column option.

const table = useShadcnTable({
  columns,
  data,
  enableClickToCopy: true,
  stCopyButtonProps: {
    className: 'w-full justify-start',
  },
});

Click to Copy ExampleCopy Anchor Link

View Extra Storybook Examples