RevoGrid

Appearance

React Data Grid Cell Template ​

RevoGrid provide a way to render native components inside of cells.

WARNING

If you are aiming for the faster render we are recommending to stick with native VNode render.

TIP

Check ColumnDataSchemaModel for mode information about input types.

This capability, known as native cell rendering, allows developers to customize how the grid cells are displayed, providing a high degree of control over their appearance and behavior.

In this guide, we will explore how to implement custom cell renderers and templates within your RevoGrid in React. Whether you need to render custom React components, include dynamic data, or create interactive cell behaviors, RevoGrid’s native rendering support ensures that your cells are more than just plain text.

Why Use Custom Cell Rendering? ​

RevoGrid’s native cell rendering enables you to:

  • Embed Components: Render complex or interactive UI elements inside grid cells, such as buttons, images, input fields, or custom widgets.
  • Dynamic Content: Customize each cell’s content based on the data it represents, such as formatting or conditional rendering.
  • Interactivity: Make cells interactive with event listeners and component lifecycle methods, improving the overall user experience.

Basic Setup ​

Here’s an example of how you can use a simple React component to render custom content inside a grid cell.

tsx


// App.tsx
import { type ColumnDataSchemaModel, RevoGrid, Template } from '@revolist/react-datagrid';
import { useState } from 'react'

/**
 * Custom cell component
 */
const Cell = ({ value }: Partial<ColumnDataSchemaModel>) => {
  return <div><strong>{value}</strong></div>;
};

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

function App() {
  const [source] = useState([
    {
      name: '1',
      details: 'Item 1',
    },
  ]);
  return (
    <>
      <RevoGrid columns={columns} source={source} />
    </>
  )
}

export default App;

In the example above:

  • We define a Cell component that accepts a value prop and renders it inside a span element with custom styles.
  • The columns definition includes the cellTemplate property, which references the Cell component.
  • RevoGrid automatically uses Cell to render the name column.

Check out our React Data Grid examples ​