Textarea Editor

This editor is a custom cell editor for RevoGrid that allows users to handle multi-line text input, making it suitable for applications requiring rich text editing capabilities within grid cells.

To move to the next line within the TextAreaEditor, the user should press Shift + Enter.

Source code

TypeScript ts

import { defineCustomElements } from '@revolist/revogrid/loader';
import { TextAreaEditor, ColumnStretchPlugin } from '@revolist/revogrid-pro';

defineCustomElements();

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

  grid.source = [
    {
      name: `John
  Doe
  `,
    },
  ];

  grid.columns = [
    {
      name: 'Text area',
      prop: 'name',
      editor: 'textarea',
      cellProperties: () => ({ style: { 'white-space': 'pre', 'line-height': '24px' } }),
    },
  ];

  grid.editors = {
    textarea: TextAreaEditor,
  };

  grid.plugins = [ColumnStretchPlugin] as any;
  grid.stretch = 'all';

  grid.theme = 'material';
  grid.hideAttribution = true;

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

Vue vue

<template>
  <div class="not-content">
    <RevoGrid
      hide-attribution
      range
      :editors="editors"
      :rowSize="60"
      :source="source"
      :columns="columns"
      :plugins="[ColumnStretchPlugin]"
      stretch="all"
      :theme="isDark ? 'darkCompact' : 'compact'"
    />
  </div>
</template>

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

const { isDark } = currentThemeVue();

const source = ref([
  {
    name: `John
  Doe
  `,
  },
]);

const editors: Editors = {
  textarea: TextAreaEditor,
};
const columns: ColumnRegular[] = [
  {
    name: 'Text area',
    prop: 'name',
    editor: 'textarea',
    cellProperties: () => ({ style: { 'white-space': 'pre', 'line-height': '24px' } }),
  },
];
</script>

React tsx

// src/components/editor-textarea/EditorTextarea.tsx
import React, { useMemo } from 'react';
import { RevoGrid, type ColumnRegular } from '@revolist/react-datagrid';
import { TextAreaEditor, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

const { isDark } = currentTheme();

function EditorTextarea() {
  const source = [
    {
      name: `John
Doe
`,
    },
  ];

  const columns: ColumnRegular[] = useMemo(
    () => [
      {
        name: 'Text area',
        prop: 'name',
        editor: 'textarea',
        cellProperties: () => ({ style: { 'white-space': 'pre', 'line-height': '24px' } }),
      },
    ],
    [],
  );

  const editors = {
    textarea: TextAreaEditor,
  };

  const plugins = useMemo(() => [ColumnStretchPlugin], []);
  return (
    <div>
      <RevoGrid
        range
        rowSize={60}
        columns={columns}
        source={source}
        editors={editors}
        plugins={plugins}
        stretch="all"
        theme={isDark() ? 'darkCompact' : 'compact'}
        hideAttribution
      />
    </div>
  );
}

export default EditorTextarea;

Angular ts

// src/components/editor-textarea/EditorTextareaAngular.ts
import { Component, ViewEncapsulation } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { TextAreaEditor, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import { currentTheme } from '../composables/useRandomData';

@Component({
  selector: 'editor-textarea-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      [range]="true"
      [rowSize]="60"
      [columns]="columns"
      [source]="source"
      [editors]="editors"
      [plugins]="plugins"
      stretch="all"
      [theme]="theme"
      [hideAttribution]="true"
      style="min-height: 400px;"
    ></revo-grid>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class EditorTextareaGridComponent {
  source = [
    {
      name: `John
  Doe
  `,
    },
  ];

  columns = [
    {
      name: 'Text area',
      prop: 'name',
      editor: 'textarea',
      cellProperties: () => ({ style: { 'white-space': 'pre', 'line-height': '24px' } }),
    },
  ];

  editors = {
    textarea: TextAreaEditor,
  };

  plugins = [ColumnStretchPlugin];

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