Toolbar Customization Guide

This guide shows you how to hide, customize, or override the top and bottom toolbars in Shadcn Table.

Relevant Table OptionsCopy Anchor Link

Relevant StateCopy Anchor Link

Hide or Disable ToolbarsCopy Anchor Link

There are enableTopToolbar and enableBottomToolbar table options that you can use to show or hide the toolbars.

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

return <ShadcnTable table={table} />;

Alternatively, you could just use a different ST component that does not have the toolbars built-in. For example, use the <ST_TableContainer /> or <ST_Table /> components instead of the <ShadcnTable /> component.

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

//This ST sub-component does not contain the code for the toolbars. ST_TableLayout and ShadcnTable do.
return <ST_TableContainer table={table} />;

No Toolbars ExampleCopy Anchor Link

Customize Toolbar buttonsCopy Anchor Link

Everything in the toolbars are customizable. You can add your own buttons or change the order of the built-in buttons.

Customize Built-In Internal Toolbar Button AreaCopy Anchor Link

The renderToolbarInternalActions table option allows you to redefine the built-in buttons that usually reside in the top right of the top toolbar. You can reorder the icon buttons or even insert your own custom buttons. All of the built-in buttons are available to be imported from '@/components/ui/shadcn-table'.

import {
  ShadcnTable,
  ST_ShowHideColumnsButton,
  ST_ToggleFullScreenButton,
} from '@/components/ui/shadcn-table';

const table = useShadcnTable({
  data,
  columns,
  renderToolbarInternalActions: ({ table }) => (
    <>
      {/* add your own custom print button or something */}
      <IconButton onClick={() => showPrintPreview(true)}>
        <PrintIcon />
      </IconButton>
      {/* built-in buttons (must pass in table prop for them to work!) */}
      <ST_ShowHideColumnsButton table={table} />
      <ST_ToggleFullScreenButton table={table} />
    </>
  ),
});

return <ShadcnTable table={table} />;

Add Custom Toolbar Buttons/ComponentsCopy Anchor Link

The renderTopToolbarCustomActions and renderBottomToolbarCustomActions table options allow you to add your own custom buttons or components to the top and bottom toolbar areas. These props are functions that return a ReactNode. You can add your own buttons or whatever components you want.

In all of these render... table options, you get access to the table instance that you can use to perform actions or extract data from the table.

const table = useShadcnTable({
  data,
  columns,
  enableRowSelection: true,
  //Simply adding a table title to the top-left of the top toolbar
  renderTopToolbarCustomActions: () => (
    <Typography variant="h3">Customer's Table</Typography>
  ),
  //Adding a custom button to the bottom toolbar
  renderBottomToolbarCustomActions: ({ table }) => (
    <Button
      variant="contained"
      color="lightblue"
      //extract all selected rows from the table instance and do something with them
      onClick={() => handleDownloadRows(table.getSelectedRowModel().rows)}
    >
      Download Selected Rows
    </Button>
  ),
});

return <ShadcnTable table={table} />;

Custom Toolbar Actions ExampleCopy Anchor Link

Position Toolbar AreasCopy Anchor Link

The positionToolbarAlertBanner, positionGlobalFilter, positionPagination, and positionToolbarDropZone table options allow you to swap the default position of certain areas of the toolbars. Experiment moving them around until you find a layout that works for you.

const table = useShadcnTable({
  data,
  columns
  //if rendering top toolbar buttons, sometimes you want alerts to be at the bottom
  positionToolbarAlertBanner: 'bottom',
  positionGlobalFilter: 'left', //move the search box to the left of the top toolbar
  positionPagination: 'top',
  renderTopToolbarCustomActions: () => <span>...</span>,
});

return <ShadcnTable table={table} />;

Customize Toolbar Props and StylesCopy Anchor Link

The stTopToolbarProps, stBottomToolbarProps, stToolbarAlertBannerProps, and stToolbarAlertBannerChipProps table options allow you to customize the props and styles of the underlying shadcn/ui components that make up the toolbar components. Remember that you can pass CSS overrides to their className or style props. Some have found this useful for forcing position: absolute on alerts, etc.

Customize Linear Progress BarsCopy Anchor Link

The progress bars that display in both the top and bottom toolbars become visible when either the isLoading or showProgressBars state options are set to true. You can customize the progress bars by passing in props to the stLinearProgressProps table option. By default, the progress bars have a full animated progress bar, but you can set the value table option to a number between 0 and 100 to show real progress values if your table is doing some complicated long running tasks that you want to show progress for. Visit the shadcn/ui Progress docs to learn more.

const table = useShadcnTable({
  data,
  columns,
  stLinearProgressProps: ({ isTopToolbar }) => ({
    progressComponentProps: {
      className: '[&>[data-slot=progress-indicator]]:bg-amber-500',
      style: { display: isTopToolbar ? 'block' : 'none' }, //only show top toolbar progress bar
      value: fetchProgress, //show precise real progress value if you so desire
    },
  }),
  state: {
    isLoading,
    showProgressBars,
  },
});

return <ShadcnTable table={table} />;

Customize Toolbar Alert BannerCopy Anchor Link

The toolbar alert banner is an internal component used to display alerts to the user. By default, it will automatically show messages around the number of selected rows or grouping state.

However, you can repurpose this alert banner to show your own custom messages too. You can force the alert banner to show by setting the showAlertBanner state option to true. You can then customize the messages and other stylings using the stToolbarAlertBannerProps to create your custom message. You probably saw this in the Remote Data or React Query examples.

const table = useShadcnTable({
  data,
  columns,
  //show a custom error message if there was an error fetching data in the top toolbar
  stToolbarAlertBannerProps: isError
    ? {
        className: 'border-destructive text-destructive',
        children: 'Network Error. Could not fetch data.',
      }
    : undefined,
  state: {
    showAlertBanner: isError,
    showProgressBars: isFetching,
  },
});

return <ShadcnTable table={table} />;

Override with Custom Toolbar ComponentsCopy Anchor Link

If you want to completely override the default toolbar components, you can do so by passing in your own custom components to the renderTopToolbar and renderBottomToolbar props.

The drawback to this approach is that you will not get all the automatic features of the default toolbar components, such as the automatic alert banner, progress bars, etc. You will have to implement all of that yourself if you still want those features. Though you can also just import those ST components and use them in your custom toolbar.

import {
  ST_GlobalFilterTextInput, //import ST sub components!
  ST_TablePagination,
  ShadcnTable,
  useShadcnTable,
} from '@/components/ui/shadcn-table';

const table = useShadcnTable({
  data,
  columns,
  renderTopToolbar: ({ table }) => (
    <span className="flex items-center justify-between">
      <ST_GlobalFilterTextInput table={table} />
      <ST_TablePagination table={table} />
    </span>
  ),
  renderBottomToolbar: ({ table }) => (
    <span>
      <Button>Download</Button>
    </span>
  ),
});

return <ShadcnTable table={table} />;

Build Your Own ToolbarCopy Anchor Link

Instead of overriding the toolbar components up above, you may want 100% control over the layout and styling of your table controls and where they are on the page. You can do this by just using a ST sub component such as <ST_TableContainer /> for the table component, which does not have the internal toolbar components built-in. Optionally, build your own custom toolbar components using the other ST sub components.