Demo · real data · free
A table that turns into cards on a phone
A wide table is hard to read on a phone: you scroll sideways and lose the row you were on. Below a width you choose, the free grid draws each row as a card instead. Switch between phone, tablet and full width and watch the same grid change shape, then load all 1,067,371 invoice lines and scroll them as cards.
Built with the free DataGrid only: no Enterprise package and no licence key on this page. Open it on your phone to see the real thing.
How it is built
One option turns it on. The grid compares its own width, not the screen's, with the breakpoint, so the same grid also switches to cards in a narrow side panel on a desktop.
<DataGrid
dataSource={rows}
rowKey="id"
columns={columns} // the first column is each card's title
toolbar // quick search stays on top
cardView={{ breakpoint: 600 }}
onCardViewChange={(active) => setCards(active)}
/>On a card, the first column is the title and the rest are labelled lines. The column headers give way to a Sort by control. Sorting, searching, selection, grouping, server data and virtual scrolling keep working.
What changes on a card
Anything that needs a cell stands down while cards are shown: in-cell editing, range selection, the fill handle and column resizing. A card shows each field's text, formatters included; a column's renderCell is not used on a card.