Skip to content
RevoGrid [Pro]

Column Stretch

RevoGrid provides the ability to automatically adjust the width of columns to fit the table’s width. This is particularly useful when you have fewer columns than needed to enable the horizontal scrollbar, and you want to distribute the available space evenly or according to specific criteria.

Source code
import { renderPreactInto } from '@revolist/ui/preact-mount';
import { SegmentedSwitch } from '@revolist/ui/segmented-switch/index';
import { h as preactH } from 'preact';


import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();


import { currentTheme, useRandomData } from '../composables/useRandomData';
const { createRandomData } = useRandomData();
const { isDark } = currentTheme();


import { ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';


const stretchOptions = [
  { value: 'all', label: 'All' },
  { value: 'last', label: 'Last' },
  { value: '2nd', label: '2nd' },
  { value: 'none', label: 'None' },
];


function createGrid() {
  const grid = document.createElement('revo-grid');
  grid.classList.add('grow');
  grid.setAttribute('hide-attribution', '');
  grid.style.minHeight = '250px';
  return grid;
}


export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;


  const grid = createGrid();


  const switchHost = document.createElement('div');
  switchHost.className = 'mb-2 self-start';
  parent.appendChild(switchHost);


  const renderSwitch = (value: string) => {
    renderPreactInto(
      switchHost,
      preactH(SegmentedSwitch<string>, {
        value,
        options: stretchOptions,
        ariaLabel: 'Column stretch',
        role: 'radiogroup',
        onChange: (mode) => {
          grid.stretch = mode === '2nd' ? 1 : mode;
          renderSwitch(mode);
        },
      }),
    );
  };
  renderSwitch('all');
  parent.appendChild(grid);


  // Configure grid before assigning source so the initial render uses final sizing.
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: 'đź’° Price',
      prop: 'price',
    },
  ];
  grid.resize = true;
  grid.stretch = 'all';
  grid.plugins = [ColumnStretchPlugin, RowOddPlugin] as any;
  grid.rowHeaders = true;
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.hideAttribution = true;
  grid.source = createRandomData(100);


  return () => {
    renderPreactInto(switchHost, null);
    switchHost.remove();
    grid.remove();
  };
}

In this article, we’ll walk you through the process of implementing column stretching in RevoGrid using the ColumnStretchPlugin. We’ll also explore the different configurations available for stretching the columns.

What is it?

Section titled “What is it?”

Column stretching is a feature which allows you to automatically adjust the width of columns to fit the entire width of the table. The width of each column is calculated based on the number of columns and their respective sizes, ensuring the grid’s width is fully utilized. This feature is especially useful when working with a small number of columns.

Stretch Configurations

Section titled “Stretch Configurations”

Sizing behavior

Columns marked with autoSize: true participate in stretching. Measured content widths are lower bounds, and remaining space is distributed up to each column’s maxSize. Disabling stretch restores the measured widths.

Columns with an explicit size and no autoSize remain fixed in all mode. If the combined content widths exceed the grid, columns retain their measured widths and the grid scrolls horizontally.

RevoGrid supports different types of stretch configurations through the StretchConfig type:

  • 'none': No column stretching will be applied. Columns retain their default width.

  • 'last': Only the last column will stretch to fill the remaining width.

  • 'all': All columns will stretch evenly to fill the table’s width.

  • number: A specific column (by index) will stretch to fill the remaining width.

  • To stretch only the last column:

    grid.additionalData = { stretch: 'last' };

  • To stretch a specific column by index (e.g., the second column):

    grid.additionalData = { stretch: 1 };

  • To stretch all columns evenly:

    grid.additionalData = { stretch: 'all' };

By using the ColumnStretchPlugin, you can easily manage the width of columns in RevoGrid, making sure your table layout looks clean and is fully utilized. Whether you want to stretch all columns evenly or just the last one, this plugin offers flexibility to suit your needs.

Experiment with the different stretch configurations to see which works best for your data grid!

Pinned-end column placement

Section titled “Pinned-end column placement”

Core places colPinEnd columns at the right edge of the grid. When fixed-width columns leave unused space, you can keep the pinned-end columns directly after the regular columns with a scoped CSS rule:

revo-grid.adjacent-pinned-end
  .viewports
  > revogr-viewport-scroll.rgCol:not([row-header]) {
  flex-grow: 0;
}

Add class="adjacent-pinned-end" to that grid. ColumnStretchPlugin uses the grid’s available width, so this layout also supports stretching flexible columns and repeated grid resizes. Explicitly sized pinned columns retain their configured width.