Column Resizing Guide

Shadcn Table has a built-in column resizing draggable handle feature.

The Column Size features was recently split into its own Guide. View that guide as a prerequisite to this one.

Relevant Table OptionsCopy Anchor Link

Relevant Column OptionsCopy Anchor Link

Relevant StateCopy Anchor Link

Initial Column SizesCopy Anchor Link

Column sizes will behave differently depending on which layoutMode you have set.

See the Column Size Guide for more information on layout modes and how to set initial column sizes properly for you use case.

Enable Column Resizing FeatureCopy Anchor Link

enableColumnResizing is the boolean table option that enables the column resizing feature.

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

return <ShadcnTable table={table} />;

You can disable specific columns from being resizable by setting the enableResizing column option to false in their respective column definition.

Column Resize ModeCopy Anchor Link

The default columnResizeMode is onChange, which means that the column resizing will occur immediately as the user drags the column resize handle. If you are running into performance issues because of many other enabled features, you might want to set the columnResizeMode to onEnd instead. This will make the column resizing only occur after the user has finished dragging the column resize handle and released their mouse.

const table = useShadcnTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeMode: 'onEnd', //instead of the default "onChange" mode
});

Column GrowingCopy Anchor Link

When column resizing is enabled, by default, a layoutMode of "grid-no-grow" will be applied internally. This means that columns will have an absolute size and they will NOT grow to fill in the remaining space of the table. You can let columns grow to fill in the remaining space by changing the layoutMode back to "grid" or "semantic".

const table = useShadcnTable({
  columns,
  data,
  enableColumnResizing: true,
  layoutMode: 'grid', //instead of the default "grid-no-grow" when column resizing is enabled
});

Alternatively, if you only want certain columns to grow to fill the remaining space, you can set the grow column option to true in their respective column definitions.

const columns = [
  //...
  {
    accessorKey: 'address',
    header: 'Address',
    size: 250,
    grow: true, //allow this column to grow to fill the remaining space
  },
];

This is discussed in more detail in the Column Size Guide.

Column Resize DirectionCopy Anchor Link

If you are displaying your table in a RTL (right-to-left) language, you can set the columnResizeDirection table option to "rtl" to make the column resize handle appear on the left side of the column instead of the right side.

Shadcn Table does not read the document direction, so set this option explicitly when your table is rendered in an RTL layout.

const table = useShadcnTable({
  columns,
  data,
  enableColumnResizing: true,
  columnResizeDirection: 'rtl', //instead of the default "ltr" direction
});

return (
  <div style={{ direction: 'rtl' }}>
    {' '}
    {/* app-wide style? */}
    <ShadcnTable table={table} />
  </div>
);

Enable Resizing on Built-in Display ColumnsCopy Anchor Link

As discussed further in the Display Columns Guide, you can customize the options of the built-in columns that get generated under the hood by ST by enabling certain features.

Here, we can enable column resizing on the built-in row numbers column by setting the enableResizing column option to true in the displayColumnDefOptions table option.

const table = useShadcnTable({
  columns,
  data,
  displayColumnDefOptions: {
    'st-row-numbers': {
      enableResizing: true, //allow the row numbers column to be resized
      size: 40,
      grow: false, //do not fill remaining space using this column
    },
  },
  enableRowNumbers: true,
  layoutMode: 'grid', // `grow` only works in the grid* layout modes
});

return <ShadcnTable table={table} />;

View Extra Storybook Examples