Clipboard JSON Support

Enable clipboard functionality with support for JSON and advanced objects. Easily copy and paste complex data structures within your grid and between applications.

Example

Source code

TypeScript ts

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

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

defineCustomElements();

const grid = document.createElement('revo-grid');
grid.source = createRandomData(100, { json: true });
grid.columns = [
  {
    name: 'Copy JSON',
    prop: 'json',
    size: 320,
    cellParser: (model: any, column: any) => JSON.stringify(model[column.prop]),
    cellTemplate: (h: any, { value: jsonString }: any) => {
      return h('pre', { class: 'bg-gray-200 border border-slate-300 rounded p-1 py-1 mt-2 text-xs text-center inline-block' }, [
        h('code', { class: 'text-gray-900' }, jsonString)
      ]);
    }
  },
  {
    name: 'Paste JSON here',
    prop: 'new',
    cellTemplate: (_: any, data: any) => data.value?.emoji
  }
];
Object.assign(grid, {
  stretch: 'all'
})
grid.plugins = [ClipboardJsonPlugin, ColumnStretchPlugin, RowOddPlugin];
grid.theme = isDark() ? 'darkMaterial' : 'material';
grid.hideAttribution = true;
grid.style.minHeight = '400px';

document.getElementById('demo-wrapper')?.appendChild(grid);

Vue vue

<script setup lang="ts">
import { computed } from 'vue';
import { VGrid } from '@revolist/vue3-datagrid';
import { ClipboardJsonPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentThemeVue } from '../composables/useRandomData';

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

const theme = computed(() => isDark.value ? 'darkMaterial' : 'material');
const source = createRandomData(100, { json: true });

const columns = [
  {
    name: 'Copy JSON',
    prop: 'json',
    size: 320,
    cellParser: (model: any, column: any) => JSON.stringify(model[column.prop]),
    cellTemplate: (h: any, { value: jsonString }: any) => {
      return h('pre', { class: 'bg-gray-200 border border-slate-300 rounded p-1 py-1 mt-2 text-xs text-center inline-block' }, [
        h('code', { class: 'text-gray-900' }, jsonString)
      ]);
    }
  },
  {
    name: 'Paste JSON here',
    prop: 'new',
    cellTemplate: (_: any, data: any) => data.value?.emoji
  }
];

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

<template>
  <v-grid
    :theme="theme"
    :source="source"
    :columns="columns"
    :plugins="plugins"
    stretch="all"
    :hideAttribution="true"
    style="min-height: 400px;"
  />
</template>

React tsx

import React, { useMemo } from 'react';
import { RevoGrid } from '@revolist/react-datagrid';
import { ClipboardJsonPlugin, ColumnStretchPlugin, RowOddPlugin } from '@revolist/revogrid-pro';
import { useRandomData, currentTheme } from '../composables/useRandomData';

const ClipboardJsonDemo: React.FC = () => {
  const { createRandomData } = useRandomData();
  const theme = currentTheme().isDark() ? 'darkMaterial' : 'material';

  const source = useMemo(() => createRandomData(100, { json: true }), []);
  const columns = useMemo(() => [
    {
      name: 'Copy JSON',
      prop: 'json',
      size: 320,
      cellParser: (model: any, column: any) => JSON.stringify(model[column.prop]),
      cellTemplate: (h: any, { value: jsonString }: any) => {
        return h('pre', { className: 'bg-gray-200 border border-slate-300 rounded p-1 py-1 mt-2 text-xs text-center inline-block' }, [
          h('code', { className: 'text-gray-900' }, jsonString)
        ]);
      }
    },
    {
      name: 'Paste JSON here',
      prop: 'new',
      cellTemplate: (_: any, data: any) => data.value?.emoji
    }
  ], []);

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

  return (
    <RevoGrid
      theme={theme}
      source={source}
      columns={columns}
      plugins={plugins}
      stretch="all"
      hideAttribution
      style={{ minHeight: '400px' }}
    />
  );
};

export default ClipboardJsonDemo;

Angular ts

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

@Component({
  selector: 'clipboard-json-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [theme]="theme"
      [source]="source"
      [columns]="columns"
      [plugins]="plugins"
      stretch="all"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
})
export class ClipboardJsonGridComponent {
  theme = currentTheme().isDark() ? 'darkMaterial' : 'material';
  source = useRandomData().createRandomData(100, { json: true });

  columns = [
    {
      name: 'Copy JSON',
      prop: 'json',
      size: 320,
      cellParser: (model: any, column: any) => JSON.stringify(model[column.prop]),
      cellTemplate: (h: any, { value: jsonString }: any) => {
        return h('pre', { class: 'bg-gray-200 border border-slate-300 rounded p-1 py-1 mt-2 text-xs text-center inline-block' }, [
          h('code', { class: 'text-gray-900' }, jsonString)
        ]);
      }
    },
    {
      name: 'Paste JSON here',
      prop: 'new',
      cellTemplate: (_: any, data: any) => data.value?.emoji
    }
  ];

  plugins = [ClipboardJsonPlugin, ColumnStretchPlugin, RowOddPlugin];
}