Skip to content
RevoGrid [Pro]

Row Odd

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

Source code
TypeScript ts 
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 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 tsx 
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 ts 
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="min-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
  }
}