RevoGrid

Appearance

Editor as native component ​

We provide a way to render native components as editor.

TIP

You can access close and save callbacks in properties. Check editor and EditorCtr type for more.

By integrating React components as native editors, RevoGrid gives you full control over how each cell behaves during the editing process, enabling complex and highly interactive editing scenarios.

Customizing Editors ​

RevoGrid allows for even more complex custom editors by passing data and handling events like onChange or onBlur. You can create more interactive editors such as input fields, checkboxes, or dropdowns that allow users to update cell values directly.

Edit react-revogrid-editor

Advanced Use Cases ​

You can extend RevoGrid’s native editor rendering by implementing more sophisticated editors, such as:

  • Date Pickers: Use a date picker React component to edit date values in a column.
  • Select Menus: Render a dropdown menu with dynamic options based on other grid data or external sources.
  • Multistep Editors: Create complex multi-field editors for advanced data entry.

Why Use Custom Editors? ​

With native editor rendering, you can:

  • Customize the Editing Experience: Use any React component as a custom editor, providing a tailored user interface for editing data directly in the grid.
  • Build Complex Editors: Embed interactive elements such as date pickers, dropdowns, or custom forms inside cells, which would be impossible with simple input fields alone.
  • Improve Usability: Create inline editors that match your application’s UI, improving consistency and enhancing the overall user experience.

Basic Setup ​

RevoGrid allows you to define custom editors for grid cells using the editor property on columns. You can then assign React components to handle the rendering and editing of cell values.

In this example, we’ll create a custom button editor that, when clicked, closes the editor. This demonstrates how you can use React components as editors.

tsx


// App.tsx
import { RevoGrid, Editor, type EditorType, type Editors } from '@revolist/react-datagrid';
import { useState } from 'react'

/**
 * Custom editor component
 */
const Button = ({ close }: EditorType) => {
  return <button onClick={() => close()}>Close</button>
};

const MY_EDITOR = 'custom-editor';
/**
 * note: columns & source need a "stable" reference in order to prevent infinite re-renders
 */
const columns = [
  {
    prop: 'name',
    name: 'First',
    editor: MY_EDITOR,
  },
];

function App() {

  const [source] = useState([
    {
      name: '1',
      details: 'Item 1',
    },
  ]);
  const gridEditors: Editors = { [MY_EDITOR]: Editor(Button) };
  return (
    <>
      <RevoGrid columns={columns} source={source} editors={gridEditors} />
    </>
  )
}

export default App;

Key Components ​

  • Custom Editor: The Button component is a simple React component that will be used as a custom editor for the “First” column. When clicked, it will close the editor.
  • Editor Registration: The gridEditors object registers the custom editor using the Editor function. In this case, it links the custom editor (the Button component) to the identifier MY_EDITOR.
  • Editor Prop: In the columns array, the editor property is set to MY_EDITOR, indicating that the custom editor should be used for the “First” column.

Check out our examples ​