Card Layout

A MainGrid can show its records as cards instead of table rows. The cards wrap to fill the grid's width, show each contact's photo beside their name, and keep everything else the grid does: views, search, sorting, paging and selection.

Contacts as Cards

Pick a minimum card width to watch the cards reflow: MinCardWidth takes any CSS length and defaults to 320px. The toolbar's dropdown switches between cards, table rows and automatic, which shows cards only on a phone, and the Settings menu's Sort sorts the cards, which have no column headers to click.

React example Blazor example React TypeScript Razor