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

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

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

8
import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
9

10
function createForm(container: HTMLElement, onStretchChange: (value: string) => void) {
11
  const form = document.createElement('form');
12
  form.id = 'stretch';
13

14
  const options = [
15
    { value: 'all', label: 'All', checked: true },
16
    { value: 'last', label: 'Last' },
17
    { value: '2nd', label: '2nd' },
18
    { value: 'none', label: 'None' }
19
  ];
20

21
  options.forEach(option => {
22
    const label = document.createElement('label');
23
    const input = document.createElement('input');
24
    input.type = 'radio';
25
    input.name = 'stretch';
26
    input.value = option.value;
27
    input.checked = option.checked || false;
28
    input.addEventListener('change', () => onStretchChange(option.value));
29

30
    label.appendChild(input);
31
    label.appendChild(document.createTextNode(' ' + option.label));
32
    form.appendChild(label);
33
  });
34

35
  container.appendChild(form);
36
}
37

38
function createGrid(container: HTMLElement) {
39
  const grid = document.createElement('revo-grid');
40
  grid.setAttribute('resize', '');
41
  grid.setAttribute('hide-attribution', '');
42
  grid.style.minHeight = '250px';
43
  container.appendChild(grid);
44
  return grid;
45
}
46

47
const container = document.querySelector('.not-content') as HTMLElement;
48
if (container) {
49
  // Create form and grid elements
50
  const grid = createGrid(container);
51
  createForm(container, (value) => {
52
    grid.additionalData = {
53
      stretch: value === '2nd' ? 1 : value
54
    };
55
  });
56

57
  // Configure grid
58
  grid.source = createRandomData(100);
59
  grid.columns = [
60
    {
61
      name: '🆔 ID',
62
      prop: 'id',
63
    },
64
    {
65
      name: '🍎 Fruit',
66
      prop: 'name',
67
    },
68
    {
69
      name: '💰 Price',
70
      prop: 'price',
71
    },
72
  ];
73

74
  grid.additionalData = {
75
    stretch: 'all'
76
  };
77

78
  grid.plugins = [ColumnStretchPlugin] as any;
79
  grid.theme = isDark() ? 'darkCompact' : 'compact';
80
}

1
<template>
2
  <div>
3
    <form id="stretch" class="flex gap-0 mb-2">
4
      <div class="inline-flex rounded-lg border border-solid border-gray-200 dark:border-gray-700">
5
        <label class="relative inline-flex">
6
          <input
7
            type="radio"
8
            name="stretch"
9
            value="all"
10
            v-model="stretchMode"
11
            class="peer absolute opacity-0"
12
          />
13
          <div class="px-4 py-1 cursor-pointer rounded-l-lg peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-100 dark:hover:bg-gray-700">All</div>
14
        </label>
15
        <label class="relative inline-flex border-l border-gray-200 dark:border-gray-700">
16
          <input
17
            type="radio"
18
            name="stretch"
19
            value="last"
20
            v-model="stretchMode"
21
            class="peer absolute opacity-0"
22
          />
23
          <div class="px-4 py-1 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-100 dark:hover:bg-gray-700">Last</div>
24
        </label>
25
        <label class="relative inline-flex border-l border-gray-200 dark:border-gray-700">
26
          <input
27
            type="radio"
28
            name="stretch"
29
            value="2nd"
30
            v-model="stretchMode"
31
            class="peer absolute opacity-0"
32
          />
33
          <div class="px-4 py-1 cursor-pointer peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-100 dark:hover:bg-gray-700">2nd</div>
34
        </label>
35
        <label class="relative inline-flex border-l border-gray-200 dark:border-gray-700">
36
          <input
37
            type="radio"
38
            name="stretch"
39
            value="none"
40
            v-model="stretchMode"
41
            class="peer absolute opacity-0"
42
          />
43
          <div class="px-4 py-1 cursor-pointer rounded-r-lg peer-checked:bg-blue-500 peer-checked:text-white hover:bg-gray-100 dark:hover:bg-gray-700">None</div>
44
        </label>
45
      </div>
46
    </form>
47

48
    <RevoGrid
49
      class="cell-border"
50
      :theme="isDark ? 'darkCompact' : 'compact'"
51
      :columns="columns"
52
      :source="source"
53
      :plugins="plugins"
54
      :additionalData="additionalData"
55
      resize
56
      hide-attribution
57
      style="min-height: 250px;"
58
    />
59
  </div>
60
</template>
61

62
<script setup lang="ts">
63
import { ref, computed } from 'vue';
64
import RevoGrid from '@revolist/vue3-datagrid';
65
import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
66
import { useRandomData, currentThemeVue } from '../composables/useRandomData';
67

68
const { createRandomData } = useRandomData();
69
const { isDark } = currentThemeVue();
70

71
const stretchMode = ref('all');
72
const source = ref(createRandomData(100));
73

74
const columns = [
75
  {
76
    name: '🆔 ID',
77
    prop: 'id',
78
  },
79
  {
80
    name: '🍎 Fruit',
81
    prop: 'name',
82
  },
83
  {
84
    name: '💰 Price',
85
    prop: 'price',
86
  },
87
];
88

89
const plugins = [ColumnStretchPlugin];
90

91
const additionalData = computed(() => ({
92
  stretch: stretchMode.value === '2nd' ? 1 : stretchMode.value
93
}));
94
</script>

1
import React, { useState } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
4
import { useRandomData, currentTheme } from '../composables/useRandomData';
5

6
const { createRandomData } = useRandomData();
7
const { isDark } = currentTheme();
8

9
export const ColumnStretchExample = () => {
10
  const [stretchMode, setStretchMode] = useState('all');
11
  const [source] = useState(() => createRandomData(100));
12

13
  const columns = [
14
    {
15
      name: '🆔 ID',
16
      prop: 'id',
17
    },
18
    {
19
      name: '🍎 Fruit',
20
      prop: 'name',
21
    },
22
    {
23
      name: '💰 Price',
24
      prop: 'price',
25
    },
26
  ];
27

28
  const handleStretchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
29
    setStretchMode(e.target.value);
30
  };
31

32
  return (
33
    <div>
34
      <form id="stretch">
35
        <label>
36
          <input
37
            type="radio"
38
            name="stretch"
39
            value="all"
40
            checked={stretchMode === 'all'}
41
            onChange={handleStretchChange}
42
          />{' '}
43
          All
44
        </label>
45
        <label>
46
          <input
47
            type="radio"
48
            name="stretch"
49
            value="last"
50
            checked={stretchMode === 'last'}
51
            onChange={handleStretchChange}
52
          />{' '}
53
          Last
54
        </label>
55
        <label>
56
          <input
57
            type="radio"
58
            name="stretch"
59
            value="2nd"
60
            checked={stretchMode === '2nd'}
61
            onChange={handleStretchChange}
62
          />{' '}
63
          2nd
64
        </label>
65
        <label>
66
          <input
67
            type="radio"
68
            name="stretch"
69
            value="none"
70
            checked={stretchMode === 'none'}
71
            onChange={handleStretchChange}
72
          />{' '}
73
          None
74
        </label>
75
      </form>
76

77
      <RevoGrid
78
        columns={columns}
79
        source={source}
80
        theme={isDark() ? 'darkCompact' : 'compact'}
81
        plugins={[ColumnStretchPlugin] as any}
82
        additionalData={{
83
          stretch: stretchMode === '2nd' ? 1 : stretchMode
84
        }}
85
        resize
86
        hideAttribution
87
        style={{ minHeight: '250px' }}
88
      />
89
    </div>
90
  );
91
};

1
import { Component, OnInit } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import { ColumnStretchPlugin } from '@revolist/revogrid-pro';
4
import { useRandomData, currentTheme } from '../composables/useRandomData';
5

6
const { createRandomData } = useRandomData();
7
const { isDark } = currentTheme();
8

9
@Component({
10
  selector: 'column-stretch-grid',
11
  standalone: true,
12
  imports: [RevoGrid],
13
  template: `
14
    <form id="stretch">
15
      <label>
16
        <input
17
          type="radio"
18
          name="stretch"
19
          value="all"
20
          [checked]="stretchMode === 'all'"
21
          (change)="onStretchChange($event)"
22
        /> All
23
      </label>
24
      <label>
25
        <input
26
          type="radio"
27
          name="stretch"
28
          value="last"
29
          [checked]="stretchMode === 'last'"
30
          (change)="onStretchChange($event)"
31
        /> Last
32
      </label>
33
      <label>
34
        <input
35
          type="radio"
36
          name="stretch"
37
          value="2nd"
38
          [checked]="stretchMode === '2nd'"
39
          (change)="onStretchChange($event)"
40
        /> 2nd
41
      </label>
42
      <label>
43
        <input
44
          type="radio"
45
          name="stretch"
46
          value="none"
47
          [checked]="stretchMode === 'none'"
48
          (change)="onStretchChange($event)"
49
        /> None
50
      </label>
51
    </form>
52

53
    <revo-grid
54
      [source]="source"
55
      [columns]="columns"
56
      [plugins]="plugins"
57
      [additionalData]="additionalData"
58
      [theme]="theme"
59
      [hideAttribution]="true"
60
      style="min-height: 250px;"
61
      resize
62
    ></revo-grid>
63
  `,
64
})
65
export class ColumnStretchGridComponent implements OnInit {
66
  stretchMode: string = 'all';
67
  source = createRandomData(100);
68
  theme = isDark() ? 'darkCompact' : 'compact';
69
  plugins = [ColumnStretchPlugin] as any;
70

71
  columns = [
72
    {
73
      name: '🆔 ID',
74
      prop: 'id',
75
    },
76
    {
77
      name: '🍎 Fruit',
78
      prop: 'name',
79
    },
80
    {
81
      name: '💰 Price',
82
      prop: 'price',
83
    },
84
  ];
85

86
  additionalData: { stretch: string | number } = {
87
    stretch: this.stretchMode
88
  };
89

90
  ngOnInit() {
91
    // Any initialization if needed
92
  }
93

94
  onStretchChange(event: Event) {
95
    const target = event.target as HTMLInputElement;
96
    this.stretchMode = target.value;
97
    this.additionalData = {
98
      stretch: this.stretchMode === '2nd' ? 1 : this.stretchMode
99
    };
100
  }
101
}

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?

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

Important Note

The Column Stretch plugin may conflict with other column size configurations. The following cases will prevent column stretching:

Columns with explicit size property set
Columns with autoSize enabled
When the total width of all columns exceeds the available space (negative remaining width)

In these cases, the stretch configuration will be ignored for those specific columns to preserve their intended sizing behavior.

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:

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

To stretch a specific column by index (e.g., the second column):
```
1
grid.additionalData = { stretch: 1 };
```

To stretch all columns evenly:

1
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!