syidaxgrid
Home Pricing Settings

GRID FEATURE

Customize cell appearance

Cell renderers change how data is displayed. Use them for status badges, links, and action buttons while retaining the original values for sorting and filtering.

Markdown source Features

How it works and when to use it

valueFormatter is simpler for basic number formatting. Choose cellRenderer when you need structure or interaction, and return a value conforming to the text, html, or vnode contract.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Safe text and supporting descriptions

Display a string without interpreting it as HTML.

javascript
grid.columnDefs = [{
  field: 'status', headerName: 'Status',
  cellRenderer: params => ({ kind: 'text', text: String(params.value ?? '-'), title: 'Current order processing status' }),
}];

Verify the result: Angle brackets in user input appear as characters rather than executable HTML.

Example 2. Separate display from editing

Use valueFormatter for currency display and the number editor for amount edits. Adding a renderer does not require implementing a custom editor.

Verify the result: Keep the displayed currency symbol separate from the stored number. After editing, verify that sorting and totals use numeric values.

Example 3. Cells with actions

Use a vnode renderer in your framework to create a details button. Include a row-identifying description in its accessible name and open your app's detail view on click.

Verify the result: Virtual scrolling may reuse cells, so reference the row in the current params. Clean up event listeners and external resources with the renderer's lifecycle.

Combining features and troubleshooting

Use kind: html only with trusted, sanitized HTML. Do not assume the Grid automatically makes arbitrary app HTML safe.

Server requests or expensive calculations on every render slow scrolling. Compute or cache values while preparing the data.

Related reading