Documentation

Column Width

Simple Table provides flexible column width options including fixed widths, auto-sizing with "1fr", and proportional scaling with autoExpandColumns. Choose the approach that best fits your layout needs.

CodeSandbox

Auto-Expand Columns

The autoExpandColumns prop makes your table columns automatically fill the entire container width by scaling all column widths proportionally:

How autoExpandColumns Works

  • width: Used as the base for proportional scaling. All column widths are multiplied by a scale factor to fill the container.
  • minWidth: NOT enforced during initial scaling - columns can be scaled below their minWidth.
  • maxWidth: NOT enforced at all - the property is not checked or used in autoExpandColumns mode.

When to Use

Use autoExpandColumns when you want your table to always fill its container width with no horizontal scrolling. This is perfect for dashboards, reports, and full-width layouts where the table should adapt to any container size.

Note: On mobile devices, it's recommended to set autoExpandColumns={false} as horizontal scrolling typically provides a better user experience than cramped columns on small screens.

Responsive Implementation

Here's how to conditionally enable auto-expand based on screen size:

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
  const checkMobile = () => {
    setIsMobile(window.innerWidth < 768);
  };
  checkMobile();
  window.addEventListener("resize", checkMobile);
  return () => window.removeEventListener("resize", checkMobile);
}, []);

<SimpleTable
  autoExpandColumns={!isMobile}
  defaultHeaders={headers}
  rows={data}
  rowIdAccessor="id"
/>

Width Configuration

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

Column Width Properties

PropertyRequiredDescriptionExample
autoExpandColumns
boolean
Optional
When enabled on the table, all column widths are scaled proportionally to fill the entire container width. The width property of each column is used as the base for proportional distribution. Note: It's recommended to set this to false on mobile devices (< 768px) as horizontal scrolling provides better UX than cramped columns on small screens.
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. Note: When autoExpandColumns is enabled, minWidth is NOT enforced during initial scaling.
HeaderObject.maxWidth
number
Optional
Sets the maximum width constraint for columns. Note: When autoExpandColumns is enabled, maxWidth is NOT enforced - it is completely ignored during proportional scaling.

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.