Master Rows

The Master Row Plugin enhances the RevoGrid grid component by enabling the creation and management of master-detail rows. It is an extremely complex and advanced feature, despite its seemingly simple nature. Read more below.

Source code

1
import { defineCustomElements } from '@revolist/revogrid/loader';
2
import { EXPAND_COLUMN, MasterRowPlugin, CellColumnFocusVerifyPlugin, ColumnStretchPlugin, OverlayPlugin, type RowMasterConfig } from '@revolist/revogrid-pro';
3
import { makeData, type Person } from '../composables/makeData';
4
import { currentTheme } from '../composables/useRandomData';
5

6
defineCustomElements();
7

8
export function load(parentSelector: string) {
9
  const grid = document.createElement('revo-grid');
10
  const { isDark } = currentTheme();
11

12
  grid.theme = isDark() ? 'darkCompact' : 'compact';
13
  grid.source = makeData(500, 20);
14
  grid.columns = [
15
    { prop: 'expand', focus: () => false, ...EXPAND_COLUMN },
16
    { name: 'First Name', prop: 'firstName', size: 180 },
17
    { name: 'Last Name', prop: 'lastName' },
18
  ];
19

20
  grid.plugins = [
21
    MasterRowPlugin,
22
    OverlayPlugin,
23
    CellColumnFocusVerifyPlugin,
24
    ColumnStretchPlugin,
25
  ];
26

27
  const masterRow: RowMasterConfig = {
28
    rowHeight: 60,
29
    template: (h, data) => {
30
      const subItems = data.model.subRows?.map((subRow: Person) =>
31
        h('span', { class: { 'master-row': true } }, [subRow.firstName + ' ' + subRow.lastName, ', ']),
32
      );
33
      return h('div', null, [h('strong', {}, 'Team: '), subItems]);
34
    },
35
  };
36

37
  grid.additionalData = {
38
    masterRow,
39
    stretch: 'last',
40
  };
41

42
  document.querySelector(parentSelector)?.appendChild(grid);
43
}

1
<template>
2
  <RevoGrid
3
    class="rounded-lg overflow-hidden"
4
    :theme="isDark ? 'darkCompact' : 'compact'"
5
    :source="source"
6
    :columns="columns"
7
    :plugins="plugins"
8
    :additionalData="additionalData"
9
    hide-attribution
10
  />
11
</template>
12

13
<script setup lang="ts">
14
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
15
import {
16
  EXPAND_COLUMN,
17
  MasterRowPlugin,
18
  CellColumnFocusVerifyPlugin,
19
  ColumnStretchPlugin,
20
  OverlayPlugin,
21
  RowOddPlugin,
22
  RowSelectPlugin,
23
  type RowMasterConfig,
24
} from '@revolist/revogrid-pro';
25
import { ref } from 'vue';
26
import { currentThemeVue } from '../composables/useRandomData';
27
import { makeData, allColumns, type Person } from '../composables/makeData';
28

29
const { isDark } = currentThemeVue();
30

31
const source = ref(makeData(100, 5));
32

33
const columns: ColumnRegular[] = [
34
  { prop: 'expand', focus: () => false, ...EXPAND_COLUMN },
35
  ...allColumns(),
36
];
37
columns[1].pin = 'colPinStart';
38
columns[2].rowSelect = true;
39
columns[5].pin = 'colPinEnd';
40

41
const plugins = [
42
  MasterRowPlugin,
43
  OverlayPlugin,
44
  CellColumnFocusVerifyPlugin,
45
  ColumnStretchPlugin,
46
  RowOddPlugin,
47
  RowSelectPlugin,
48
];
49

50
const masterRow: RowMasterConfig = {
51
  rowHeight: 250,
52
  template: (h, data) => {
53
    const subItems = data.model.subRows?.map((subRow: Person) =>
54
      h('li', { class: { 'master-row flex gap-2 items-center': true } }, [
55
        h('img', { class: 'rounded-lg', src: subRow.avatar, width: 20, height: 20 }),
56
        subRow.fullName,
57
      ]),
58
    );
59
    return h('div', { class: 'flex gap-5 items-center my-2 p-2' }, [
60
      h('img', { class: 'rounded-lg self-start', src: data.model.avatar }),
61
      h('div', { class: 'flex flex-col gap-2' }, [
62
        h('span', { class: 'font-bold' }, [data.model.fullName, ' | ', data.model.age, ' years old']),
63
        h('span', { class: 'text-sm text-gray-500' }, data.model.email),
64
        h('span', { class: 'font-bold' }, 'Relatives:'),
65
        h('ul', { class: 'list-disc list-inside px-0' }, subItems),
66
      ]),
67
    ]);
68
  },
69
};
70

71
const additionalData = {
72
  masterRow,
73
  stretch: 'last',
74
};
75
</script>
76

77
<style scoped>
78
:deep(.revo-master-row) {
79
  background-color: var(--revo-grid-background);
80
  box-shadow: 0 1px 0 var(--revo-grid-cell-border), 0 2px 5px rgba(0, 0, 0, 0.1) inset;
81
}
82
</style>

1
import React, { useMemo } from 'react';
2
import { RevoGrid } from '@revolist/react-datagrid';
3
import {
4
  EXPAND_COLUMN,
5
  MasterRowPlugin,
6
  CellColumnFocusVerifyPlugin,
7
  ColumnStretchPlugin,
8
  OverlayPlugin,
9
  type RowMasterConfig,
10
} from '@revolist/revogrid-pro';
11
import { makeData, type Person } from '../composables/makeData';
12
import { currentTheme } from '../composables/useRandomData';
13

14
const { isDark } = currentTheme();
15

16
function RowMaster() {
17
  const source = makeData(500, 20);
18

19
  const columns = useMemo(
20
    () => [
21
      { prop: 'expand', focus: () => false, ...EXPAND_COLUMN },
22
      { name: 'First Name', prop: 'firstName', size: 180 },
23
      { name: 'Last Name', prop: 'lastName' },
24
    ],
25
    [],
26
  );
27

28
  const plugins = [
29
    MasterRowPlugin,
30
    OverlayPlugin,
31
    CellColumnFocusVerifyPlugin,
32
    ColumnStretchPlugin,
33
  ];
34

35
  const masterRow: RowMasterConfig = useMemo(
36
    () => ({
37
      rowHeight: 60,
38
      template: (h: any, data: any) => {
39
        const subItems = data.model.subRows?.map((subRow: Person) =>
40
          h(
41
            'span',
42
            { className: 'master-row' },
43
            `${subRow.firstName} ${subRow.lastName}, `,
44
          ),
45
        );
46
        return h('div', null, [h('strong', {}, 'Team: '), subItems]);
47
      },
48
    }),
49
    [],
50
  );
51

52
  const additionalData = {
53
    masterRow,
54
    stretch: 'last',
55
  };
56

57
  return (
58
    <RevoGrid
59
      theme={isDark() ? 'darkCompact' : 'compact'}
60
      source={source}
61
      columns={columns}
62
      plugins={plugins}
63
      additionalData={additionalData}
64
      hideAttribution
65
    />
66
  );
67
}
68

69
export default RowMaster;

1
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import {
4
  EXPAND_COLUMN,
5
  MasterRowPlugin,
6
  CellColumnFocusVerifyPlugin,
7
  ColumnStretchPlugin,
8
  OverlayPlugin,
9
} from '@revolist/revogrid-pro';
10
import { makeData, type Person } from '../composables/makeData';
11
import { currentTheme } from '../composables/useRandomData';
12

13
@Component({
14
  selector: 'row-master-grid',
15
  standalone: true,
16
  imports: [RevoGrid],
17
  template: `
18
    <revo-grid
19
      [source]="source"
20
      [columns]="columns"
21
      [plugins]="plugins"
22
      [theme]="theme"
23
      [additionalData]="additionalData"
24
      [hideAttribution]="true"
25
      style="height: 400px;"
26
    ></revo-grid>
27
  `,
28
  encapsulation: ViewEncapsulation.None,
29
})
30
export class RowMasterGridComponent implements OnInit {
31
  source = makeData(500, 20);
32

33
  columns = [
34
    { prop: 'expand', focus: () => false, ...EXPAND_COLUMN },
35
    { name: 'First Name', prop: 'firstName', size: 180 },
36
    { name: 'Last Name', prop: 'lastName' },
37
  ];
38

39
  plugins = [
40
    MasterRowPlugin,
41
    OverlayPlugin,
42
    CellColumnFocusVerifyPlugin,
43
    ColumnStretchPlugin,
44
  ];
45

46
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
47

48
  additionalData = {
49
    masterRow: {
50
      rowHeight: 60,
51
      template: (h: any, data: any) => {
52
        const subItems = data.model.subRows?.map((subRow: Person) =>
53
          h(
54
            'span',
55
            { class: 'master-row' },
56
            `${subRow.firstName} ${subRow.lastName}, `,
57
          ),
58
        );
59
        return h('div', null, [h('strong', {}, 'Team: '), subItems]);
60
      },
61
    },
62
    stretch: 'last',
63
  };
64

65
  ngOnInit() {}
66
}

Dynamic Overlay Synchronization: The Master Row Plugin creates a dynamic overlay that tracks grid scrolling. This ensures that master-detail information remains perfectly aligned and visible as you navigate through large datasets.
Expansive Master Detail Context: Unlike tree view, group view, or merge cell approaches, this plugin uniquely expands the master row context into the pinned area, allowing it to fill the entire grid. This capability provides a richer, more immersive data presentation and is exceptionally challenging to achieve.
Virtualized Performance: Despite the complexity of rendering an overlay that spans the grid, the layer remains virtualized. This ensures high performance and responsiveness, even when handling extensive and detailed master row content.

Features
Installation
Usage
API Reference

Features

Expandable Rows: Easily expand rows to reveal additional details.
Custom Templates: Define how master rows are rendered using customizable templates.

Basic Setup

Import Necessary Plugins and Utilities:

1
import { EXPAND_COLUMN, MasterRowPlugin, OverlayPlugin, CellColumnFocusVerifyPlugin } from '@revolist/revogrid-pro';
2
import type { RowMasterConfig } from '@revolist/revogrid';
3
import './row-master.style.css';

Define Columns:

1
const columns: HTMLRevoGridElement['columns'] = [
2
  {
3
    prop: 'expand',
4
    ...EXPAND_COLUMN,
5
  },
6
  // ...
7
];

Initialize the Grid with Plugins:

1
const grid = document.querySelector('revo-grid');
2
  grid.source = makeData(10, 20);
3
  grid.columns = columns;
4

5
  // Define plugin
6
  grid.plugins = [
7
    MasterRowPlugin, // required
8
    OverlayPlugin, // required
9
  ];
10

11
  const masterRow: RowMasterConfig = {
12
    template: (h, data) => {
13
      return data.model.subRows?.map((subRow: Person) =>
14
        h('span', { class: { 'master-row': true } }, [
15
          h('img', { src: subRow.avatar, width: '20', height: '20' }),
16
          `${subRow.firstName} ${subRow.lastName} `,
17
        ]),
18
      );
19
    },
20
  };
21

22
  grid.additionalData = {
23
    masterRow,
24
    rowHeight: 100,
25
  };
26
}

Configuration

The Master Row Plugin can be customized using the RowMasterConfig interface. The primary configuration option is the template function, which defines how the master row content is rendered.

RowMasterConfig

Property	Type	Description
`template`	`(h: Function, data: any) => JSX.Element`	A function that returns the JSX structure for the master row. It receives a rendering function `h` and the data context `data`.

Custom Templates

Customize the master row by defining a template function that returns the desired JSX structure. This allows for flexible and dynamic rendering based on the row data.

1
const masterRow: RowMasterConfig = {
2
  template: (h, data) => {
3
    return data.model.subRows?.map((subRow: Person) =>
4
      h('div', { class: { 'custom-master-row': true } }, [
5
        h('img', { src: subRow.avatar, width: '30', height: '30' }),
6
        `${subRow.firstName} ${subRow.lastName}`,
7
      ]),
8
    );
9
  },
10
};

API Reference

MasterRowPlugin

A plugin class that manages master-detail rows within the RevoGrid component.

Methods

constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders)

Initializes the plugin with the RevoGrid instance and plugin providers.
expandRow(type: DimensionRows, virtRowIndex: number)

Expands a specific row to show its master details.
collapseRow(type: DimensionRows, rowVIndexes: number[])

Collapses one or more rows, hiding their master details.
destroy()

Cleans up event listeners and other resources when the plugin is destroyed.

Events

The plugin listens to various RevoGrid events to manage the state of master rows, including:

AFTER_GRID_RENDER_EVENT
BEFORE_ROW_RENDER_EVENT
ROW_MASTER
OVERLAY_NODE
…and more.