Documentation

Column Auto-Sizing

Simple Table provides flexible column width options with both fixed widths and auto-sizing capabilities. Use width: "1fr" for columns that automatically adapt to available space.

CodeSandbox

Width Configuration

The width property is required for every column and accepts two types of values:

Column Width Properties

PropertyRequiredDescriptionExample
HeaderObject.width
number | '1fr'
Required
Defines the width of the column. Can be a fixed pixel value (number) or '1fr' for auto-sizing columns that share available space proportionally.
HeaderObject.minWidth
number
Optional
Sets the minimum width constraint for auto-sizing columns (those using '1fr'). Prevents columns from becoming too narrow when space is limited.

Understanding Auto-Sizing

When you set width: "1fr", the column becomes flexible and shares the available space with other auto-sizing columns:

How "1fr" Works

  • The table calculates total available space after subtracting all fixed-width columns
  • Remaining space is divided equally among all columns with width: "1fr"
  • Each auto-sizing column gets an equal share of the available space
  • The minWidth property ensures columns don't shrink below a specified size

Example Calculation

If your table is 1000px wide with:

  • Column A: width: 100 (fixed)
  • Column B: width: "1fr" (auto)
  • Column C: width: "1fr" (auto)
  • Column D: width: 150 (fixed)

Columns B and C each get: (1000px - 100px - 150px) / 2 = 375px each

Responsive Behavior

Auto-sizing columns automatically adapt when:

  • The table container is resized
  • Columns are hidden or shown
  • Columns are reordered
  • The viewport size changes

Pro Tip

Auto-sizing works great with column resizing! When users manually resize a column, the other auto-sizing columns automatically adjust to fill or use the freed space. Try it in the demo above by enabling column resizing.