Slider Editor

The editorSlider is a custom cell editor for RevoGrid that provides a slider input to edit numeric values within a specified range directly within the grid cells.

Source code

import { defineCustomElements } from '@revolist/revogrid/loader';
import { editorSlider, avatarRenderer, RowOddPlugin } 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.className = 'rounded-lg overflow-hidden cell-border';
  grid.style.minHeight = '300px';

  grid.source = [
    { avatar: 'https://i.pravatar.cc/300?img=1', name: 'John Doe', rating: 85, progress: 45 },
    { avatar: 'https://i.pravatar.cc/300?img=2', name: 'Jane Smith', rating: 92, progress: 78 },
    { avatar: 'https://i.pravatar.cc/300?img=3', name: 'Bob Johnson', rating: 78, progress: 60 },
    { avatar: 'https://i.pravatar.cc/300?img=4', name: 'Alice Brown', rating: 95, progress: 89 },
    { avatar: 'https://i.pravatar.cc/300?img=5', name: 'Charlie Wilson', rating: 88, progress: 72 },
  ];

  grid.columns = [
    { prop: 'avatar', size: 60, cellTemplate: avatarRenderer, rectangular: true },
    { prop: 'name', size: 150 },
    {
      name: 'Rating (0-100)',
      prop: 'rating',
      size: 200,
      cellTemplate: editorSlider,
      thresholds: [
        { value: 70, className: 'high' },
        { value: 30, className: 'medium' },
        { value: 0, className: 'low' },
      ],
      min: 0,
      max: 100,
      step: 1,
    },
    {
      name: 'Progress (%)',
      prop: 'progress',
      size: 200,
      cellTemplate: editorSlider,
      min: 0,
      max: 100,
      step: 5,
    },
  ];

  grid.plugins = [RowOddPlugin];

  const { isDark } = currentTheme();
  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.hideAttribution = true;

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

<template>
  <RevoGrid
    class="rounded-lg overflow-hidden cell-border"
    range
    :columns="columns"
    :source="source"
    :theme="isDark ? 'darkMaterial' : 'material'"
    :plugins="[RowOddPlugin]"
    hide-attribution
    style="min-height: 300px;"
  />
</template>

<script setup lang="ts">
import RevoGrid, { type ColumnRegular } from '@revolist/vue3-datagrid';
import { editorSlider, avatarRenderer, RowOddPlugin } 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', rating: 85, progress: 45 },
  { avatar: 'https://i.pravatar.cc/300?img=2', name: 'Jane Smith', rating: 92, progress: 78 },
  { avatar: 'https://i.pravatar.cc/300?img=3', name: 'Bob Johnson', rating: 78, progress: 60 },
  { avatar: 'https://i.pravatar.cc/300?img=4', name: 'Alice Brown', rating: 95, progress: 89 },
  { avatar: 'https://i.pravatar.cc/300?img=5', name: 'Charlie Wilson', rating: 88, progress: 72 },
]);

const columns: ColumnRegular[] = [
  { prop: 'avatar', size: 60, cellTemplate: avatarRenderer, rectangular: true },
  { prop: 'name', size: 150 },
  {
    name: 'Rating (0-100)',
    prop: 'rating',
    size: 200,
    cellTemplate: editorSlider,
    thresholds: [
      { value: 70, className: 'high' },
      { value: 30, className: 'medium' },
      { value: 0, className: 'low' }
    ],
    min: 0,
    max: 100,
    step: 1,
  },
  {
    name: 'Progress (%)',
    prop: 'progress',
    size: 200,
    cellTemplate: editorSlider,
    min: 0,
    max: 100,
    step: 5,
  },
];
</script>

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

function EditorSlider() {
  const { isDark } = currentTheme();

  const source = useMemo(() => [
    { avatar: 'https://i.pravatar.cc/300?img=1', name: 'John Doe', rating: 85, progress: 45 },
    { avatar: 'https://i.pravatar.cc/300?img=2', name: 'Jane Smith', rating: 92, progress: 78 },
    { avatar: 'https://i.pravatar.cc/300?img=3', name: 'Bob Johnson', rating: 78, progress: 60 },
    { avatar: 'https://i.pravatar.cc/300?img=4', name: 'Alice Brown', rating: 95, progress: 89 },
    { avatar: 'https://i.pravatar.cc/300?img=5', name: 'Charlie Wilson', rating: 88, progress: 72 },
  ], []);

  const columns: ColumnRegular[] = useMemo(
    () => [
      { prop: 'avatar', size: 60, cellTemplate: avatarRenderer, rectangular: true },
      { prop: 'name', size: 150 },
      {
        name: 'Rating (0-100)',
        prop: 'rating',
        size: 200,
        cellTemplate: editorSlider,
        thresholds: [
          { value: 70, className: 'high' },
          { value: 30, className: 'medium' },
          { value: 0, className: 'low' },
        ],
        min: 0,
        max: 100,
        step: 1,
      },
      {
        name: 'Progress (%)',
        prop: 'progress',
        size: 200,
        cellTemplate: editorSlider,
        min: 0,
        max: 100,
        step: 5,
      },
    ],
    []
  );

  const plugins = useMemo(() => [RowOddPlugin], []);

  return (
    <RevoGrid
      className="rounded-lg overflow-hidden cell-border"
      range
      source={source}
      columns={columns}
      plugins={plugins}
      theme={isDark() ? 'darkMaterial' : 'material'}
      hideAttribution
      style={{ minHeight: '300px' }}
    />
  );
}

export default EditorSlider;

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

@Component({
  selector: 'editor-slider-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      class="rounded-lg overflow-hidden cell-border"
      [range]="true"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      [theme]="theme"
      [hideAttribution]="true"
      style="min-height: 300px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorSliderGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

  source = [
    { avatar: 'https://i.pravatar.cc/300?img=1', name: 'John Doe', rating: 85, progress: 45 },
    { avatar: 'https://i.pravatar.cc/300?img=2', name: 'Jane Smith', rating: 92, progress: 78 },
    { avatar: 'https://i.pravatar.cc/300?img=3', name: 'Bob Johnson', rating: 78, progress: 60 },
    { avatar: 'https://i.pravatar.cc/300?img=4', name: 'Alice Brown', rating: 95, progress: 89 },
    { avatar: 'https://i.pravatar.cc/300?img=5', name: 'Charlie Wilson', rating: 88, progress: 72 },
  ];

  columns = [
    { prop: 'avatar', size: 60, cellTemplate: avatarRenderer, rectangular: true },
    { prop: 'name', size: 150 },
    {
      name: 'Rating (0-100)',
      prop: 'rating',
      size: 200,
      cellTemplate: editorSlider,
      thresholds: [
        { value: 70, className: 'high' },
        { value: 30, className: 'medium' },
        { value: 0, className: 'low' },
      ],
      min: 0,
      max: 100,
      step: 1,
    },
    {
      name: 'Progress (%)',
      prop: 'progress',
      size: 200,
      cellTemplate: editorSlider,
      min: 0,
      max: 100,
      step: 5,
    },
  ];

  plugins = [RowOddPlugin];
}

Features:

Renders a slider input element for cells, allowing users to select numeric values by dragging a slider handle
Supports customizable minimum and maximum values through column properties
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