Header (Advanced)

Sophisticated Row Header Example based on RowHeaderPlugin. This is advance example on row header customization:

• Use column configuration templates
• Focus whole row when click on row header
• Customize template usage for your advantage, user full power of events

---

Source code

TypeScript ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { rowHeaders, RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

defineCustomElements();

const grid = document.createElement('revo-grid');
grid.source = createRandomData(100);
grid.columns = [
  {
    name: '🍎 Fruit',
    prop: 'name',
    size: 180,
  },
  {
    name: '💰 Price',
    prop: 'price',
  },
];
grid.plugins = [RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin];
grid.rowHeaders = rowHeaders({ showHeaderFocusBtn: true });
Object.assign(grid, {
  stretch: 'all',
})
grid.theme = isDark() ? 'darkMaterial' : 'material';
grid.hideAttribution = true;
grid.style.minHeight = '400px';

document.getElementById('demo-wrapper')?.appendChild(grid);

Vue vue

<script setup lang="ts">
import { computed } from 'vue';
import { VGrid } from '@revolist/vue3-datagrid';
import { rowHeaders, RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';

const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const theme = computed(() => isDark.value ? 'darkMaterial' : 'material');
const source = createRandomData(100);
const columns = [
  {
    name: '🍎 Fruit',
    prop: 'name',
    size: 180,
  },
  {
    name: '💰 Price',
    prop: 'price',
  },
];

const plugins = [RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin];
const rdHeaders = rowHeaders({ showHeaderFocusBtn: true });
</script>

<template>
  <v-grid
    :theme="theme"
    :source="source"
    :columns="columns"
    :plugins="plugins"
    :rowHeaders="rdHeaders"
    stretch="all"
    :hideAttribution="true"
    style="min-height: 400px;"
  />
</template>

React tsx

import React, { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { rowHeaders, RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

const RowHeaderDemo: React.FC = () => {
  const { createRandomData } = useRandomData();
  const theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

  const source = useMemo(() => createRandomData(100), []);
  const columns = useMemo(() => [
    {
      name: '🍎 Fruit',
      prop: 'name',
      size: 180,
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ], []);

  const plugins = useMemo(() => [RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin], []);
  const rdHeaders = useMemo(() => rowHeaders({ showHeaderFocusBtn: true }), []);

  return (
    <RevoGrid
      theme={theme}
      source={source}
      columns={columns}
      plugins={plugins}
      rowHeaders={rdHeaders}
      stretch="all"
      hideAttribution
      style={{ minHeight: '400px' }}
    />
  );
};

export default RowHeaderDemo;

Angular ts

import { Component } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { rowHeaders, RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

@Component({
  selector: 'row-header-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [theme]="theme"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [rowHeaders]="rdHeaders"
      stretch="all"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
})
export class RowHeaderGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  source = useRandomData().createRandomData(100);
  columns = [
    {
      name: '🍎 Fruit',
      prop: 'name',
      size: 180,
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];

  plugins = [RowHeaderPlugin, ColumnStretchPlugin, RowOddPlugin];
  rdHeaders = rowHeaders({ showHeaderFocusBtn: true });
}