Custom Cell Rendering

Every column of a grid can draw its own cells. A CellTemplate (a cellRenderer in React) gets the row's record and returns whatever the cell should show, and a GridTemplateColumn makes a column out of several — while sorting, search highlighting and the totals row keep working as they do for the built-in cells.

Contacts, Drawn by the Page

The full name is composed from first and last name behind an initials avatar; the email is a mailto link with the contact's name; the phone has an icon; the age is a badge coloured by its value. The birthday column has no template, for comparison. Search for a name or an age such as >60 to see the custom cells highlight what matched.

React example Blazor example React TypeScript AccountAndContactCustomViews.ts Razor AccountAndContactCustomViews.cs