Skip to content
RevoGrid [Pro]

Checkbox Editor

The editorCheckbox is a custom cell editor for RevoGrid that provides a checkbox input to edit boolean values directly within the grid cells.

  • Features:
  • Renders a checkbox input element for cells, allowing users to toggle boolean values (true/false) with a simple click.
  • Automatically dispatches a celledit event upon change, updating the grid’s data model with the new value.
  • Ensures seamless integration with RevoGrid by providing row and column details in the event payload.
  • The demo combines checkbox editing with RowOddPlugin zebra striping and the material/darkMaterial themes.
Source code
TypeScript ts 
import { defineCustomElements } from '@revolist/revogrid/loader';
import { RowOddPlugin, editorCheckbox } 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.range = true;
  grid.columns = [
    { name: 'ID', prop: 'id', size: 80 },
    { name: 'Name', prop: 'name', size: 160 },
    { name: 'Role', prop: 'role', size: 180 },
    {
      name: 'Editor',
      prop: 'isProgrammer',
      cellTemplate: editorCheckbox,
      size: 120,
    },
    {
      name: 'Raw value',
      prop: 'isProgrammer',
      readonly: true,
      size: 120,
    },
  ];
  grid.plugins = [RowOddPlugin];
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.hideAttribution = true;

  document.querySelector(parentSelector)?.appendChild(grid);
  grid.source = [
    { id: 1, name: 'Mia Harper', role: 'Frontend Engineer', isProgrammer: true },
    { id: 2, name: 'Noah Brooks', role: 'Product Manager', isProgrammer: false },
    { id: 3, name: 'Ava Chen', role: 'Data Engineer', isProgrammer: true },
    { id: 4, name: 'Liam Foster', role: 'Designer', isProgrammer: false },
    { id: 5, name: 'Sophia Patel', role: 'QA Automation', isProgrammer: true },
    { id: 6, name: 'Ethan Reed', role: 'Support Lead', isProgrammer: false },
    { id: 7, name: 'Olivia Stone', role: 'Platform Engineer', isProgrammer: true },
    { id: 8, name: 'Lucas Martin', role: 'Sales Engineer', isProgrammer: true },
    { id: 9, name: 'Isabella Kim', role: 'Technical Writer', isProgrammer: false },
    { id: 10, name: 'Mason Clark', role: 'Backend Engineer', isProgrammer: true },
    { id: 11, name: 'Amelia Wright', role: 'Customer Success', isProgrammer: false },
    { id: 12, name: 'James Wilson', role: 'DevOps Engineer', isProgrammer: true },
  ];

  return () => grid.remove();
}
Vue vue 
<template>
  <RevoGrid
    class="rounded-lg overflow-hidden cell-border"
    range
    :columns="columns"
    :source="source"
    :plugins="plugins"
    :theme="isDark ? 'darkMaterial' : 'material'"
    hide-attribution
    style="min-height: 400px;"
  />
</template>

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

const { isDark } = currentThemeVue();

const source = ref([
  { id: 1, name: 'Mia Harper', role: 'Frontend Engineer', isProgrammer: true },
  { id: 2, name: 'Noah Brooks', role: 'Product Manager', isProgrammer: false },
  { id: 3, name: 'Ava Chen', role: 'Data Engineer', isProgrammer: true },
  { id: 4, name: 'Liam Foster', role: 'Designer', isProgrammer: false },
  { id: 5, name: 'Sophia Patel', role: 'QA Automation', isProgrammer: true },
  { id: 6, name: 'Ethan Reed', role: 'Support Lead', isProgrammer: false },
  { id: 7, name: 'Olivia Stone', role: 'Platform Engineer', isProgrammer: true },
  { id: 8, name: 'Lucas Martin', role: 'Sales Engineer', isProgrammer: true },
  { id: 9, name: 'Isabella Kim', role: 'Technical Writer', isProgrammer: false },
  { id: 10, name: 'Mason Clark', role: 'Backend Engineer', isProgrammer: true },
  { id: 11, name: 'Amelia Wright', role: 'Customer Success', isProgrammer: false },
  { id: 12, name: 'James Wilson', role: 'DevOps Engineer', isProgrammer: true },
]);

const columns: ColumnRegular[] = [
  { name: 'ID', prop: 'id', size: 80 },
  { name: 'Name', prop: 'name', size: 160 },
  { name: 'Role', prop: 'role', size: 180 },
  {
    name: 'Editor',
    prop: 'isProgrammer',
    cellTemplate: editorCheckbox,
    size: 120,
  },
  {
    name: 'Raw value',
    prop: 'isProgrammer',
    readonly: true,
    size: 120,
  },
];

const plugins = [RowOddPlugin];
</script>
React tsx 
import React, { useMemo } from 'react';
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
import { RowOddPlugin, editorCheckbox } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

const { isDark } = currentTheme();

function EditorCheckbox() {
  const source = useMemo(
    () => [
      { id: 1, name: 'Mia Harper', role: 'Frontend Engineer', isProgrammer: true },
      { id: 2, name: 'Noah Brooks', role: 'Product Manager', isProgrammer: false },
      { id: 3, name: 'Ava Chen', role: 'Data Engineer', isProgrammer: true },
      { id: 4, name: 'Liam Foster', role: 'Designer', isProgrammer: false },
      { id: 5, name: 'Sophia Patel', role: 'QA Automation', isProgrammer: true },
      { id: 6, name: 'Ethan Reed', role: 'Support Lead', isProgrammer: false },
      { id: 7, name: 'Olivia Stone', role: 'Platform Engineer', isProgrammer: true },
      { id: 8, name: 'Lucas Martin', role: 'Sales Engineer', isProgrammer: true },
      { id: 9, name: 'Isabella Kim', role: 'Technical Writer', isProgrammer: false },
      { id: 10, name: 'Mason Clark', role: 'Backend Engineer', isProgrammer: true },
      { id: 11, name: 'Amelia Wright', role: 'Customer Success', isProgrammer: false },
      { id: 12, name: 'James Wilson', role: 'DevOps Engineer', isProgrammer: true },
    ],
    []
  );

  const columns: ColumnRegular[] = useMemo(
    () => [
      { name: 'ID', prop: 'id', size: 80 },
      { name: 'Name', prop: 'name', size: 160 },
      { name: 'Role', prop: 'role', size: 180 },
      {
        name: 'Editor',
        prop: 'isProgrammer',
        cellTemplate: editorCheckbox,
        size: 120,
      },
      {
        name: 'Raw value',
        prop: 'isProgrammer',
        readonly: true,
        size: 120,
      },
    ],
    []
  );
  const plugins = useMemo(() => [RowOddPlugin], []);

  return (
    <div style={{ minHeight: 400 }}>
      <RevoGrid
        range
        source={source}
        columns={columns}
        plugins={plugins}
        hideAttribution
        theme={isDark() ? 'darkMaterial' : 'material'}
      />
    </div>
  );
}

export default EditorCheckbox;
Angular ts 
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { RowOddPlugin, editorCheckbox } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

@Component({
  selector: 'editor-checkbox-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [range]="true"
      [theme]="theme"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorCheckboxGridComponent implements OnInit {
  source = [
    { id: 1, name: 'Mia Harper', role: 'Frontend Engineer', isProgrammer: true },
    { id: 2, name: 'Noah Brooks', role: 'Product Manager', isProgrammer: false },
    { id: 3, name: 'Ava Chen', role: 'Data Engineer', isProgrammer: true },
    { id: 4, name: 'Liam Foster', role: 'Designer', isProgrammer: false },
    { id: 5, name: 'Sophia Patel', role: 'QA Automation', isProgrammer: true },
    { id: 6, name: 'Ethan Reed', role: 'Support Lead', isProgrammer: false },
    { id: 7, name: 'Olivia Stone', role: 'Platform Engineer', isProgrammer: true },
    { id: 8, name: 'Lucas Martin', role: 'Sales Engineer', isProgrammer: true },
    { id: 9, name: 'Isabella Kim', role: 'Technical Writer', isProgrammer: false },
    { id: 10, name: 'Mason Clark', role: 'Backend Engineer', isProgrammer: true },
    { id: 11, name: 'Amelia Wright', role: 'Customer Success', isProgrammer: false },
    { id: 12, name: 'James Wilson', role: 'DevOps Engineer', isProgrammer: true },
  ];

  columns = [
    { name: 'ID', prop: 'id', size: 80 },
    { name: 'Name', prop: 'name', size: 160 },
    { name: 'Role', prop: 'role', size: 180 },
    {
      name: 'Editor',
      prop: 'isProgrammer',
      cellTemplate: editorCheckbox,
      size: 120,
    },
    {
      name: 'Raw value',
      prop: 'isProgrammer',
      readonly: true,
      size: 120,
    },
  ];

  plugins = [RowOddPlugin];
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

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