RevoGrid

Appearance

Cell as native component ​

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.

React Custom Cell Template Example ​

Edit react-revogrid-cell

Key Considerations for Custom Cell Templates ​

  • Data Access: Each custom cell component will have access to the data for that row via its props. The primary prop that is passed to custom renderers is the value of the cell.
  • Performance: Custom renderers can impact grid performance, especially with large datasets. RevoGrid optimizes rendering by only updating cells that have changed, but it’s important to keep performance in mind when creating complex cell templates.
  • Conditional Rendering: You can use conditional logic inside your custom cell component to change its appearance based on the data. For example, you can display different colors or icons based on numeric values or boolean flags.
  • Event Handling: Custom cells can include event handlers, such as onClick, onChange, etc., to make the grid interactive. This is ideal for rendering editable fields, buttons, or custom controls.

Advanced Use Cases ​

RevoGrid’s native rendering support opens up even more complex scenarios where you can render interactive components, such as:

  • Dynamic Dropdowns: Populate a dropdown inside a cell based on the data in the grid or external sources.
  • Custom Formatting: Display values with custom formatting, such as currency symbols, percentages, or styled numbers.
  • Inline Editing: Build advanced inline editing components, such as date pickers, checkboxes, or toggles, inside grid cells.

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 React 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 React 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 examples ​