Odd Rows

Apply different styles to odd rows for better readability and data distinction with the help of the RowOddPlugin.

Source code

TypeScript

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

defineCustomElements();

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

  grid.source = [
    { id: 1, name: 'Apple', price: 100 },
    { id: 2, name: 'Banana', price: 200 },
    { id: 3, name: 'Cherry', price: 300 },
    { id: 4, name: 'Date', price: 400 },
    { id: 5, name: 'Elderberry', price: 500 },
    { id: 6, name: 'Fig', price: 600 },
    { id: 7, name: 'Grape', price: 700 },
    { id: 8, name: 'Honeydew', price: 800 },
  ];
  grid.columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name', size: 350 },
    { name: '💰 Price', prop: 'price' },
  ];
  grid.plugins = [RowOddPlugin];
  grid.theme = isDark() ? 'darkCompact' : 'compact';

  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue

<template>
  <RevoGrid
    class="rounded-lg overflow-hidden cell-border"
    :columns="columns"
    :source="source"
    :plugins="plugins"
    :theme="isDark ? 'darkMaterial' : 'material'"
    hide-attribution
  />
</template>

<script setup lang="ts">
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
import { RowOddPlugin } from '@revolist/revogrid-pro';
import { ref } from 'vue';
import { useRandomData, currentThemeVue } from '../composables/useRandomData';

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

const source = ref(createRandomData(100));

const columns: ColumnRegular[] = [
  { name: '#', prop: 'id', size: 40 },
  { name: '🍎 Fruit', prop: 'name', size: 350 },
  { name: '💰 Price', prop: 'price' },
];

const plugins = [RowOddPlugin];
</script>

React

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

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

function RowOdd() {
  const source = createRandomData(100);

  const columns: ColumnRegular[] = useMemo(
    () => [
      { name: '🆔 ID', prop: 'id' },
      { name: '🍎 Fruit', prop: 'name', size: 350 },
      { name: '💰 Price', prop: 'price' },
    ],
    []
  );

  const plugins = [RowOddPlugin];

  return (
    <RevoGrid
      source={source}
      columns={columns}
      plugins={plugins}
      theme={isDark() ? 'darkCompact' : 'compact'}
      hideAttribution
    />
  );
}

export default RowOdd;

Angular

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

@Component({
  selector: 'row-odd-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      [hideAttribution]="true"
      style="height: 400px;"
    ></revo-grid>
  `
})
export class RowOddGridComponent implements OnInit {
  source = useRandomData().createRandomData(100);

  columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name', size: 350 },
    { name: '💰 Price', prop: 'price' },
  ];

  plugins = [RowOddPlugin];
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';

  ngOnInit() {
    // Any additional initialization logic
  }
}

Why it matters

It is a simple yet fundamental plugin that serves as an excellent introduction to RevoGrid’s plugin architecture.

1. Simplicity as a Learning Tool: The RowOddPlugin’s minimal implementation makes it perfect for newcomers, demonstrating how to hook into the grid rendering process and apply custom row styling with very little code.
2. Core Plugin Concepts: It introduces essential concepts such as event registration, dynamic class application, and basic DOM manipulation—all of which are foundational for developing more advanced plugins.
3. Foundation for Expansion: Understanding this plugin provides a solid base that can be extended or modified, paving the way for building more complex and feature-rich plugins in the future.
4. Immediate Visual Feedback: The plugin’s straightforward functionality—styling odd rows differently—offers clear, immediate visual results, helping developers quickly grasp the impact of their changes.