Custom Card Rendering
A grid's cards can be laid out by the page. CardTemplate (cardRenderer in React) replaces what goes inside each card, and the grid still draws the card around it — its border, its checkbox and its selected state. The card it hands the template renders any of the grid's columns as its cell would, with its formatting, its link and the search's highlighting, so a template only decides where each column goes. It also gives the card's avatar, each column's header, the record itself, and ways to open the record and select its card.
Contacts on Cards of Their Own
Each contact's photo and name sit at the top with the company beneath, and a badge beside them shows the contact's age in a colour the age picks. The email, phone and birthday follow, each behind an icon, with the column's name as its tooltip, and a contact with no value for one leaves it out. Click anywhere else on a card to select it, or double-click to open the contact; Open and Select do the same from the card's own buttons, which keep their clicks to themselves. Search the grid and the matches are marked inside the cards, as they are in the table; switch to table rows from the toolbar to see the same contacts there.