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

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
import { editorSlider } 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', rating: 85, progress: 45 },
    { name: 'Jane Smith', rating: 92, progress: 78 },
    { name: 'Bob Johnson', rating: 78, progress: 60 },
    { name: 'Alice Brown', rating: 95, progress: 89 },
    { name: 'Charlie Wilson', rating: 88, progress: 72 },
  ];

  grid.columns = [
    { prop: 'name', size: 150 },
    {
      name: 'Rating (0-100)',
      prop: 'rating',
      cellTemplate: editorSlider,
      min: 0,
      max: 100,
      step: 1,
    },
    {
      name: 'Progress (%)',
      prop: 'progress',
      cellTemplate: editorSlider,
      min: 0,
      max: 100,
      step: 5,
    },
  ];

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

  grid.hideAttribution = true;

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

Vue

<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>

React

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

const { isDark } = currentTheme();

function EditorSlider() {
  const source = [
    { name: 'John Doe', rating: 85, progress: 45 },
    { name: 'Jane Smith', rating: 92, progress: 78 },
    { name: 'Bob Johnson', rating: 78, progress: 60 },
    { name: 'Alice Brown', rating: 95, progress: 89 },
    { name: 'Charlie Wilson', rating: 88, progress: 72 },
  ];

  const columns: ColumnRegular[] = useMemo(
    () => [
      { prop: 'name', size: 150 },
      {
        name: 'Rating (0-100)',
        prop: 'rating',
        cellTemplate: editorSlider,
        min: 0,
        max: 100,
        step: 1,
      },
      {
        name: 'Progress (%)',
        prop: 'progress',
        cellTemplate: editorSlider,
        min: 0,
        max: 100,
        step: 5,
      },
    ],
    []
  );

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

export default EditorSlider;

Angular

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

@Component({
  selector: 'editor-slider-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 EditorSliderGridComponent implements OnInit {
  source = [
    { name: 'John Doe', rating: 85, progress: 45 },
    { name: 'Jane Smith', rating: 92, progress: 78 },
    { name: 'Bob Johnson', rating: 78, progress: 60 },
    { name: 'Alice Brown', rating: 95, progress: 89 },
    { name: 'Charlie Wilson', rating: 88, progress: 72 },
  ];

  columns = [
    { prop: 'name', size: 150 },
    {
      name: 'Rating (0-100)',
      prop: 'rating',
      cellTemplate: editorSlider,
      min: 0,
      max: 100,
      step: 1,
    },
    {
      name: 'Progress (%)',
      prop: 'progress',
      cellTemplate: editorSlider,
      min: 0,
      max: 100,
      step: 5,
    },
  ];

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

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

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