Documentation

Column Resizing

Column resizing allows users to adjust column widths to better view and interact with data according to their preferences.

Interactive Demo

Try resizing columns by dragging the dividers or double-clicking them to auto-fit. Your column widths are automatically saved to localStorage and will persist when you refresh the page!

CodeSandbox

Basic Implementation

Column resizing is enabled by adding the columnResizing prop to the SimpleTable component. Users can resize columns by dragging the column dividers in the header row.

Column Resizing Configuration

Property	Required	Description

`columnResizing` boolean	Optional	Enables column resizing functionality. When true, users can resize columns by dragging the column dividers in the header row. Users can also double-click resize handles to automatically fit columns to their content width.
`onColumnWidthChange` (headers: HeaderObject[]) => void	Optional	Callback triggered when column widths change through user resizing or double-click auto-sizing. Receives the updated headers array with new width values. Perfect for persisting user column width preferences.

Double-Click Auto-Size

When column resizing is enabled, users can double-click on any resize handle to automatically fit that column to its content width. This provides a quick way to optimize column sizes without manual dragging.

Tip

The auto-size feature calculates the optimal width based on the column's content, including both the header text and cell values. This is especially useful for columns with varying content lengths.

Persisting Column Widths

Use the onColumnWidthChange callback to save user column width preferences. This callback is triggered whenever columns are resized (either by dragging or double-clicking) and receives the updated headers array with new width values.

Note

When autoExpandColumns is enabled, the resize handle is removed from the last column since all columns scale proportionally to fill the container width.