Sticky Cells

Sticky Cells keep important checkpoint cells visible while users scroll through a virtualized grid. Mark cells with cellProperties; when the row crosses the top visibility edge, the marked cells render in an extra header row until the next sticky row replaces them.

Source code

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import type { CellTemplateProp, ColumnGrouping, ColumnRegular } from '@revolist/revogrid';
3
import {
4
  AdvanceFilterPlugin,
5
  ColumnStretchPlugin,
6
  FilterHeaderPlugin,
7
  StickyCellsPlugin,
8
} from '@revolist/revogrid-pro';
9
import { currentTheme } from '../composables/useRandomData';
10

11
defineCustomElements();
12

13
const { isDark } = currentTheme();
14

15
const stickyCellProperties = (props: CellTemplateProp) => {
16
  if (props.rowIndex % 10 !== 0) {
17
    return undefined;
18
  }
19

20
  return {
21
    'sticky-cell': true,
22
    class: {
23
      'sticky-source-cell': true,
24
    },
25
  };
26
};
27

28
const columns: (ColumnRegular | ColumnGrouping)[] = [
29
  {
30
    name: 'Pinned Identity',
31
    children: [
32
      {
33
        name: 'Account',
34
        prop: 'account',
35
        pin: 'colPinStart',
36
        size: 150,
37
        filter: true,
38
        cellProperties: stickyCellProperties,
39
      },
40
    ],
41
  },
42
  {
43
    name: 'Opportunity Workflow',
44
    children: [
45
      {
46
        name: 'Stage',
47
        prop: 'stage',
48
        size: 130,
49
        filter: ['selection'],
50
        cellProperties: stickyCellProperties,
51
      },
52
      {
53
        name: 'Status',
54
        prop: 'status',
55
        size: 140,
56
        filter: ['selection'],
57
        cellProperties: stickyCellProperties,
58
        cellTemplate: (h, props) => h('span', { class: 'sticky-status' }, props.value),
59
      },
60
      {
61
        name: 'Owner',
62
        prop: 'owner',
63
        size: 130,
64
        filter: ['selection'],
65
      },
66
      {
67
        name: 'Amount',
68
        prop: 'amount',
69
        size: 120,
70
        filter: true,
71
      },
72
    ],
73
  },
74
  {
75
    name: 'Pinned Market',
76
    children: [
77
      {
78
        name: 'Pinned End',
79
        prop: 'region',
80
        pin: 'colPinEnd',
81
        size: 130,
82
        filter: ['selection'],
83
        cellProperties: stickyCellProperties,
84
      },
85
    ],
86
  },
87
];
88

89
const rows = Array.from({ length: 120 }, (_, index) => ({
90
  account: `Account ${index}`,
91
  stage: index % 10 === 0 ? `Milestone ${index / 10 + 1}` : `Stage ${(index % 4) + 1}`,
92
  status: index % 10 === 0 ? 'Sticky checkpoint' : index % 3 === 0 ? 'Blocked' : 'In progress',
93
  owner: ['Ada', 'Grace', 'Linus', 'Margaret'][index % 4],
94
  amount: `$${(1250 + index * 175).toLocaleString()}`,
95
  region: ['North', 'South', 'West'][index % 3],
96
}));
97

98
export function load(parentSelector: string) {
99
  const parent = document.querySelector(parentSelector);
100
  if (!parent) {
101
    return;
102
  }
103

104
  const grid = document.createElement('revo-grid');
105
  grid.className = 'sticky-cells-demo';
106
  grid.style.height = '420px';
107
  grid.theme = isDark() ? 'darkMaterial' : 'material';
108
  grid.columns = columns;
109
  grid.plugins = [AdvanceFilterPlugin, FilterHeaderPlugin, StickyCellsPlugin, ColumnStretchPlugin];
110
  grid.additionalData = {
111
    stretch: 'all',
112
  };
113
  grid.filter = {};
114
  grid.hideAttribution = true;
115

116
  parent.appendChild(grid);
117
  grid.source = rows;
118

119
  return () => grid.remove();
120
}

1
<template>
2
  <VGrid
3
    class="sticky-cells-demo"
4
    :theme="isDark ? 'darkMaterial' : 'material'"
5
    :columns="columns"
6
    :source="rows"
7
    :plugins="plugins"
8
    :additional-data="additionalData"
9
    :filter="filter"
10
    hide-attribution
11
  />
12
</template>
13

14
<script setup lang="ts">
15
import { computed, ref } from 'vue';
16
import { VGrid } from '@revolist/vue3-datagrid';
17
import type { CellTemplateProp, ColumnGrouping, ColumnRegular } from '@revolist/revogrid';
18
import {
19
  AdvanceFilterPlugin,
20
  ColumnStretchPlugin,
21
  FilterHeaderPlugin,
22
  StickyCellsPlugin,
23
} from '@revolist/revogrid-pro';
24
import { currentThemeVue } from '../composables/useRandomData';
25

26
const { isDark } = currentThemeVue();
27

28
const plugins = [AdvanceFilterPlugin, FilterHeaderPlugin, StickyCellsPlugin, ColumnStretchPlugin];
29
const filter = ref({});
30

31
const stickyCellProperties = (props: CellTemplateProp) => {
32
  if (props.rowIndex % 10 !== 0) {
33
    return undefined;
34
  }
35

36
  return {
37
    'sticky-cell': true,
38
    class: {
39
      'sticky-source-cell': true,
40
    },
41
  };
42
};
43

44
const columns = ref<(ColumnRegular | ColumnGrouping)[]>([
45
  {
46
    name: 'Pinned Identity',
47
    children: [
48
      {
49
        name: 'Account',
50
        prop: 'account',
51
        pin: 'colPinStart',
52
        size: 150,
53
        filter: true,
54
        cellProperties: stickyCellProperties,
55
      },
56
    ],
57
  },
58
  {
59
    name: 'Opportunity Workflow',
60
    children: [
61
      {
62
        name: 'Stage',
63
        prop: 'stage',
64
        size: 130,
65
        filter: ['selection'],
66
        cellProperties: stickyCellProperties,
67
      },
68
      {
69
        name: 'Status',
70
        prop: 'status',
71
        size: 140,
72
        filter: ['selection'],
73
        cellProperties: stickyCellProperties,
74
        cellTemplate: (h, props) =>
75
          h('span', { class: 'sticky-status' }, props.value),
76
      },
77
      {
78
        name: 'Owner',
79
        prop: 'owner',
80
        filter: ['selection'],
81
      },
82
      {
83
        name: 'Amount',
84
        prop: 'amount',
85
        filter: true,
86
      },
87
    ],
88
  },
89
  {
90
    name: 'Pinned Market',
91
    children: [
92
      {
93
        name: 'Pinned End',
94
        prop: 'region',
95
        pin: 'colPinEnd',
96
        size: 130,
97
        filter: ['selection'],
98
        cellProperties: stickyCellProperties,
99
      },
100
    ],
101
  },
102
]);
103

104
const rows = ref(
105
  Array.from({ length: 120 }, (_, index) => ({
106
    account: `Account ${index}`,
107
    stage: index % 10 === 0 ? `Milestone ${index / 10 + 1}` : `Stage ${(index % 4) + 1}`,
108
    status: index % 10 === 0 ? 'Sticky checkpoint' : index % 3 === 0 ? 'Blocked' : 'In progress',
109
    owner: ['Ada', 'Grace', 'Linus', 'Margaret'][index % 4],
110
    amount: `$${(1250 + index * 175).toLocaleString()}`,
111
    region: ['North', 'South', 'West'][index % 3],
112
  })),
113
);
114

115
const additionalData = computed(() => ({
116
  stretch: 'all',
117
}));
118
</script>
119

120
<style scoped>
121
.sticky-cells-demo {
122
  display: block;
123
  height: 420px;
124
}
125

126
:global(.sticky-cells-demo .sticky-status) {
127
  display: inline-flex;
128
  align-items: center;
129
  height: 100%;
130
  font-weight: 600;
131
}
132

133
:global(.sticky-cells-demo .rgCell[sticky-cell-overlay]) {
134
  font-weight: 600;
135
}
136
</style>

1
import React, { useMemo } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import type { CellTemplateProp, ColumnGrouping, ColumnRegular } from '@revolist/revogrid';
4
import {
5
  AdvanceFilterPlugin,
6
  ColumnStretchPlugin,
7
  FilterHeaderPlugin,
8
  StickyCellsPlugin,
9
} from '@revolist/revogrid-pro';
10
import { currentTheme } from '../composables/useRandomData';
11

12
const { isDark } = currentTheme();
13

14
function createRows() {
15
  return Array.from({ length: 120 }, (_, index) => ({
16
    account: `Account ${index}`,
17
    stage: index % 10 === 0 ? `Milestone ${index / 10 + 1}` : `Stage ${(index % 4) + 1}`,
18
    status: index % 10 === 0 ? 'Sticky checkpoint' : index % 3 === 0 ? 'Blocked' : 'In progress',
19
    owner: ['Ada', 'Grace', 'Linus', 'Margaret'][index % 4],
20
    amount: `$${(1250 + index * 175).toLocaleString()}`,
21
    region: ['North', 'South', 'West'][index % 3],
22
  }));
23
}
24

25
export default function StickyCells() {
26
  const plugins = useMemo(
27
    () => [AdvanceFilterPlugin, FilterHeaderPlugin, StickyCellsPlugin, ColumnStretchPlugin],
28
    [],
29
  );
30
  const additionalData = useMemo(() => ({ stretch: 'all' }), []);
31
  const filter = useMemo(() => ({}), []);
32
  const rows = useMemo(createRows, []);
33

34
  const columns = useMemo<(ColumnRegular | ColumnGrouping)[]>(() => {
35
    const stickyCellProperties = (props: CellTemplateProp) => {
36
      if (props.rowIndex % 10 !== 0) {
37
        return undefined;
38
      }
39

40
      return {
41
        'sticky-cell': true,
42
        class: {
43
          'sticky-source-cell': true,
44
        },
45
      };
46
    };
47

48
    return [
49
      {
50
        name: 'Pinned Identity',
51
        children: [
52
          {
53
            name: 'Account',
54
            prop: 'account',
55
            pin: 'colPinStart',
56
            size: 150,
57
            filter: true,
58
            cellProperties: stickyCellProperties,
59
          },
60
        ],
61
      },
62
      {
63
        name: 'Opportunity Workflow',
64
        children: [
65
          {
66
            name: 'Stage',
67
            prop: 'stage',
68
            size: 130,
69
            filter: ['selection'],
70
            cellProperties: stickyCellProperties,
71
          },
72
          {
73
            name: 'Status',
74
            prop: 'status',
75
            size: 140,
76
            filter: ['selection'],
77
            cellProperties: stickyCellProperties,
78
            cellTemplate: (h, props) => h('span', { class: 'sticky-status' }, props.value),
79
          },
80
          {
81
            name: 'Owner',
82
            prop: 'owner',
83
            size: 130,
84
            filter: ['selection'],
85
          },
86
          {
87
            name: 'Amount',
88
            prop: 'amount',
89
            size: 120,
90
            filter: true,
91
          },
92
        ],
93
      },
94
      {
95
        name: 'Pinned Market',
96
        children: [
97
          {
98
            name: 'Pinned End',
99
            prop: 'region',
100
            pin: 'colPinEnd',
101
            size: 130,
102
            filter: ['selection'],
103
            cellProperties: stickyCellProperties,
104
          },
105
        ],
106
      },
107
    ];
108
  }, []);
109

110
  return (
111
    <RevoGrid
112
      className="sticky-cells-demo"
113
      theme={isDark() ? 'darkMaterial' : 'material'}
114
      columns={columns}
115
      source={rows}
116
      plugins={plugins}
117
      additionalData={additionalData}
118
      filter={filter}
119
      hideAttribution
120
      style={{ height: 420 }}
121
    />
122
  );
123
}

1
import { CommonModule } from '@angular/common';
2
import { Component, ViewEncapsulation } from '@angular/core';
3
import { RevoGrid } from '@revolist/angular-datagrid';
4
import type { CellTemplateProp, ColumnGrouping, ColumnRegular } from '@revolist/revogrid';
5
import {
6
  AdvanceFilterPlugin,
7
  ColumnStretchPlugin,
8
  FilterHeaderPlugin,
9
  StickyCellsPlugin,
10
} from '@revolist/revogrid-pro';
11
import { currentTheme } from '../composables/useRandomData';
12

13
const { isDark } = currentTheme();
14

15
const stickyCellProperties = (props: CellTemplateProp) => {
16
  if (props.rowIndex % 10 !== 0) {
17
    return undefined;
18
  }
19

20
  return {
21
    'sticky-cell': true,
22
    class: {
23
      'sticky-source-cell': true,
24
    },
25
  };
26
};
27

28
@Component({
29
  selector: 'sticky-cells-grid',
30
  standalone: true,
31
  imports: [CommonModule, RevoGrid],
32
  encapsulation: ViewEncapsulation.None,
33
  template: `
34
    <revo-grid
35
      class="sticky-cells-demo"
36
      [theme]="theme"
37
      [columns]="columns"
38
      [source]="rows"
39
      [plugins]="plugins"
40
      [additionalData]="additionalData"
41
      [filter]="filter"
42
      [hideAttribution]="true"
43
      style="height: 420px;"
44
    ></revo-grid>
45
  `,
46
})
47
export class StickyCellsGridComponent {
48
  readonly theme = isDark() ? 'darkMaterial' : 'material';
49
  readonly plugins = [AdvanceFilterPlugin, FilterHeaderPlugin, StickyCellsPlugin, ColumnStretchPlugin];
50
  readonly additionalData = {
51
    stretch: 'all',
52
  };
53
  readonly filter = {};
54

55
  readonly columns: (ColumnRegular | ColumnGrouping)[] = [
56
    {
57
      name: 'Pinned Identity',
58
      children: [
59
        {
60
          name: 'Account',
61
          prop: 'account',
62
          pin: 'colPinStart',
63
          size: 150,
64
          filter: true,
65
          cellProperties: stickyCellProperties,
66
        },
67
      ],
68
    },
69
    {
70
      name: 'Opportunity Workflow',
71
      children: [
72
        {
73
          name: 'Stage',
74
          prop: 'stage',
75
          size: 130,
76
          filter: ['selection'],
77
          cellProperties: stickyCellProperties,
78
        },
79
        {
80
          name: 'Status',
81
          prop: 'status',
82
          size: 140,
83
          filter: ['selection'],
84
          cellProperties: stickyCellProperties,
85
          cellTemplate: (h, props) => h('span', { class: 'sticky-status' }, props.value),
86
        },
87
        {
88
          name: 'Owner',
89
          prop: 'owner',
90
          size: 130,
91
          filter: ['selection'],
92
        },
93
        {
94
          name: 'Amount',
95
          prop: 'amount',
96
          size: 120,
97
          filter: true,
98
        },
99
      ],
100
    },
101
    {
102
      name: 'Pinned Market',
103
      children: [
104
        {
105
          name: 'Pinned End',
106
          prop: 'region',
107
          pin: 'colPinEnd',
108
          size: 130,
109
          filter: ['selection'],
110
          cellProperties: stickyCellProperties,
111
        },
112
      ],
113
    },
114
  ];
115

116
  readonly rows = Array.from({ length: 120 }, (_, index) => ({
117
    account: `Account ${index}`,
118
    stage: index % 10 === 0 ? `Milestone ${index / 10 + 1}` : `Stage ${(index % 4) + 1}`,
119
    status: index % 10 === 0 ? 'Sticky checkpoint' : index % 3 === 0 ? 'Blocked' : 'In progress',
120
    owner: ['Ada', 'Grace', 'Linus', 'Margaret'][index % 4],
121
    amount: `$${(1250 + index * 175).toLocaleString()}`,
122
    region: ['North', 'South', 'West'][index % 3],
123
  }));
124
}

Usage

Add StickyCellsPlugin to the grid and return { 'sticky-cell': true } from a column cellProperties callback.

1
import { StickyCellsPlugin } from '@revolist/revogrid-pro';
2

3
const stickyCellProperties = (props) => {
4
  return props.rowIndex % 10 === 0
5
    ? { 'sticky-cell': true }
6
    : undefined;
7
};
8

9
const columns = [
10
  {
11
    name: 'Account',
12
    prop: 'account',
13
    cellProperties: stickyCellProperties,
14
  },
15
  {
16
    name: 'Status',
17
    prop: 'status',
18
    cellProperties: stickyCellProperties,
19
  },
20
];
21

22
grid.plugins = [StickyCellsPlugin];

If any cell in a row is marked as sticky, that row can become the active sticky row. The sticky header renders only the cells whose own cellProperties returned 'sticky-cell': true.

With Other Header Plugins

Sticky Cells render through the header layer, so the plugin can be combined with grouped headers and filter headers. When using the filter header plugin, register filtering before sticky cells so Sticky Cells wraps the final header content:

1
import {
2
  AdvanceFilterPlugin,
3
  FilterHeaderPlugin,
4
  StickyCellsPlugin,
5
  ColumnStretchPlugin,
6
} from '@revolist/revogrid-pro';
7

8
grid.plugins = [
9
  AdvanceFilterPlugin,
10
  FilterHeaderPlugin,
11
  StickyCellsPlugin,
12
  ColumnStretchPlugin,
13
];
14

15
grid.filter = {};
16
grid.additionalData = {
17
  stretch: 'all',
18
};

Behavior

One sticky row is active at a time.
A marked row becomes sticky only after the bottom edge of that source row scrolls above the viewport top.
Sticky cells work across colPinStart, rgCol, and colPinEnd.
Custom cellTemplate output is reused in the sticky header row.
The original marked cells are hidden only while their sticky overlay is active.