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.

Source code

TypeScript

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

defineCustomElements();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  grid.range = true;

  grid.source = [
    { name: 'John Doe', isProgrammer: true },
    { name: 'Jane Smith', isProgrammer: false },
  ];

  grid.columns = [
    { prop: 'name' },
    {
      name: 'Editor',
      prop: 'isProgrammer',
      cellTemplate: editorCheckbox,
      readonly: true,
    },
    {
      name: 'Raw value',
      prop: 'isProgrammer',
      readonly: true,
    },
  ];

  const { isDark } = currentTheme();
  grid.theme = isDark() ? 'darkCompact' : 'compact';

  grid.hideAttribution = true;

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

Vue

<template>
  <RevoGrid
    class="rounded-lg overflow-hidden"
    range
    :columns="columns"
    :source="source"
    :theme="isDark ? 'darkCompact' : 'compact'"
    hide-attribution
    style="min-height: 300px;"
  />
</template>

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

const { isDark } = currentThemeVue();

const source = ref([
  { avatar: 'https://i.pravatar.cc/300?img=1', name: 'John Doe', isProgrammer: true },
  { avatar: 'https://i.pravatar.cc/300?img=2', name: 'Jane Smith', isProgrammer: false },
  { avatar: 'https://i.pravatar.cc/300?img=3', name: 'John Doe', isProgrammer: false },
  { avatar: 'https://i.pravatar.cc/300?img=4', name: 'Jane Smith', isProgrammer: false },
  { avatar: 'https://i.pravatar.cc/300?img=5', name: 'John Doe', isProgrammer: false },
]);

const columns: ColumnRegular[] = [
  { prop: 'avatar', size: 40, cellTemplate: avatarRenderer, rectangular: true },
  { prop: 'name', size: 150 },
  {
    name: 'Editor',
    prop: 'isProgrammer',
    cellTemplate: editorCheckbox,
  },
  {
    name: 'Raw value',
    prop: 'isProgrammer',
    readonly: true,
  },
];
</script>

React

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

const { isDark } = currentTheme();

function EditorCheckbox() {
  const source = [
    { name: 'John Doe', isProgrammer: true },
    { name: 'Jane Smith', isProgrammer: false },
  ];

  const columns: ColumnRegular[] = useMemo(
    () => [
      { prop: 'name' },
      {
        name: 'Editor',
        prop: 'isProgrammer',
        cellTemplate: editorCheckbox,
        readonly: true,
      },
      {
        name: 'Raw value',
        prop: 'isProgrammer',
        readonly: true,
      },
    ],
    []
  );

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

export default EditorCheckbox;

Angular

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { 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"
      [theme]="theme"
      [hideAttribution]="true"
      style="height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorCheckboxGridComponent implements OnInit {
  source = [
    { name: 'John Doe', isProgrammer: true },
    { name: 'Jane Smith', isProgrammer: false },
  ];

  columns = [
    { prop: 'name' },
    {
      name: 'Editor',
      prop: 'isProgrammer',
      cellTemplate: editorCheckbox,
      readonly: true,
    },
    {
      name: 'Raw value',
      prop: 'isProgrammer',
      readonly: true,
    },
  ];

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

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