Column Selection

Enable column selection functionality, allowing users to select entire columns easily.

Source code

TypeScript ts

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import { currentTheme, useRandomData } from '../composables/useRandomData';
import {
  ColumnSelectionPlugin,
  ColumnStretchPlugin,
  RowOddPlugin,
} from '@revolist/revogrid-pro';

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

export function load(parentSelector: string) {
  const parent = document.querySelector(parentSelector);
  if (!parent) return;

  const grid = document.createElement('revo-grid');
  grid.source = createRandomData(100);
  grid.columns = [
    { name: '#', prop: 'id', size: 50 },
    { name: '🍎 Fruit', prop: 'name', sortable: true, order: 'asc' },
    { name: '💰 Price', prop: 'price', sortable: true },
  ];
  grid.plugins = [ColumnSelectionPlugin, ColumnStretchPlugin, RowOddPlugin];
  Object.assign(grid, {
    stretch: 'all',
  })

  grid.theme = isDark() ? 'darkMaterial' : 'material';
  grid.hideAttribution = true;
  grid.range = true;
  grid.resize = true;
  grid.style.minHeight = '320px';

  parent.appendChild(grid);
}

Vue vue

<template>
  <RevoGrid
    :theme="isDark ? 'darkMaterial' : 'material'"
    :columns="columns"
    :source="source"
    :plugins="plugins"
    stretch="all"
    hide-attribution
    range
    resize
    style="min-height: 320px;"
  />
</template>

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

const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const source = ref(createRandomData(100));
const columns = ref<ColumnRegular[]>([
  { name: '#', prop: 'id', size: 50 },
  { name: '🍎 Fruit', prop: 'name', sortable: true, order: 'asc' },
  { name: '💰 Price', prop: 'price', sortable: true },
]);

const plugins = [ColumnSelectionPlugin, ColumnStretchPlugin, RowOddPlugin];
</script>

React tsx

// src/components/column-selection/ColumnSelection.tsx

import { useState, useMemo } from 'react';
import { RevoGrid, type ColumnRegular, type DataType } from '@revolist/react-datagrid';
import {
  ColumnSelectionPlugin,
  ColumnStretchPlugin,
  RowOddPlugin,
} from '@revolist/revogrid-pro';

import { useRandomData, currentTheme } from '../composables/useRandomData';

const { isDark } = currentTheme();
const { createRandomData } = useRandomData();

function ColumnSelection() {
  const [source] = useState<DataType[]>(createRandomData(100));

  const columns = useMemo<ColumnRegular[]>(
    () => [
      { name: '#', prop: 'id', size: 50 },
      { name: '🍎 Fruit', prop: 'name', sortable: true, order: 'asc' },
      { name: '💰 Price', prop: 'price', sortable: true },
    ],
    [],
  );

  return (
    <div>
      <RevoGrid
        columns={columns}
        source={source}
        range
        stretch="all"
        hide-attribution
        theme={isDark() ? 'darkMaterial' : 'material'}
        plugins={[ColumnSelectionPlugin, ColumnStretchPlugin, RowOddPlugin]}
        resize
        style={{ minHeight: '320px' }}
      />
    </div>
  );
}

export default ColumnSelection;

Angular ts

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

const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

@Component({
  selector: 'column-selection-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      stretch="all"
      [theme]="theme"
      [hideAttribution]="true"
      range
      resize
      style="min-height: 320px;"
    ></revo-grid>
  `,
})
export class ColumnSelectionGridComponent {
  source = createRandomData(100);
  theme = isDark() ? 'darkMaterial' : 'material';
  plugins = [ColumnSelectionPlugin, ColumnStretchPlugin, RowOddPlugin];

  columns = [
    { name: '#', prop: 'id', size: 50 },
    { name: '🍎 Fruit', prop: 'name', sortable: true, order: 'asc' },
    { name: '💰 Price', prop: 'price', sortable: true },
  ];
}