Column Actions Guide

By default, Shadcn Table renders a column actions button for each column header. It contains a drop-down menu to help your users use the other features of the table. All of these actions can be triggered in some other way other than from this drop-down menu, so this serves as a UI/UX alternative to make sure your users can find many of the table features easily.

Relevant Table OptionsCopy Anchor Link

Relevant Column OptionsCopy Anchor Link

Disable or Hide Column Actions ButtonsCopy Anchor Link

You can set the enableColumnActions table option to false in the table to disable this feature and hide the button in each column header completely.

const table = useShadcnTable({
  data,
  columns,
  enableColumnActions: false,
});

return <ShadcnTable table={table} />;

Alternatively, if you only want to hide the column actions button in specific columns, you can set the enableColumnActions option for the desired column definition to false instead.

In this demo, we disable the column actions button for the 'ID' column.

Custom Column Actions MenuCopy Anchor Link

If you do not like the default column actions menu items that Shadcn Table generates, you can provide your own custom menu items with the renderColumnActionsMenuItems table or column option. You can choose whether or not to include the internal menu items by using the internalColumnMenuItems parameter.

const table = useShadcnTable({
  data,
  columns,
  renderColumnActionsMenuItems: ({ internalColumnMenuItems }) => {
    return [
      ...internalColumnMenuItems, //optionally include the internal menu items above or below your custom menu items
      <MenuItem key="custom-menu-item-1">Custom Menu Item 1</MenuItem>,
      <MenuItem key="custom-menu-item-2">Custom Menu Item 2</MenuItem>,
    ];
  },
});

return <ShadcnTable table={table} />;

Justify Column Actions ButtonCopy Anchor Link

By default, the column actions button is left aligned directly after the column header text and any sort or filter labels that may be present. If you want to change this, you can use a CSS selector in stTableHeadCellProps to change the justify-content property of the column header container.

View Extra Storybook Examples