Card view on phones

cardView turns rows into cards of header: value lines when the grid is narrower than a width you choose, for phones and narrow panels.

Live demoCard view

Rows as cards of "header: value" lines on narrow screens such as phones.

Code for this demo

import { createGrid, type GridApi } from '@freegridjs/core';
import { makeRows } from '../data';
import { separator, text, toggle, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const data = makeRows(200);
  let grid: GridApi;
  const create = (cards: boolean) => {
    grid?.destroy();
    grid = createGrid(ctx.host, {
      columns: [
        { field: 'name', header: h('Name', '이름'), width: 170 },
        { field: 'company', header: h('Company', '회사'), width: 140 },
        { field: 'country', header: h('Country', '국가'), width: 140 },
        { field: 'total', header: h('Total', '합계'), type: 'number', format: '#,##0', width: 120 },
        { field: 'joined', header: h('Joined', '가입일'), type: 'date', width: 120 },
      ],
      data,
      locale: lang,
      // a width in px: narrower than this, rows become cards. 99999 forces cards here; on a phone 640 is enough.
      cardView: cards ? 99999 : 640,
    });
  };
  create(true);

  text(ctx, h('Each row is a card of "header: value" lines, as on a phone. Turn cards off to see the same rows as a table.',
    '휴대폰에서처럼 행마다 "헤더: 값" 줄로 된 카드가 됩니다. 카드 보기를 끄면 같은 행이 표로 보입니다.'));
  separator(ctx);
  toggle(ctx, h('Cards', '카드 보기'), true, on => { create(on); ctx.log(`cardView: ${on ? 'always' : '640'}`); });
  return grid!;
}

A table with many columns is hard to read on a phone. With cardView the grid switches by itself when it gets narrow: below the width you give (in px; true means 640) every row becomes a card with one "header: value" line per column, and the cards scroll like the rows did. With row selection each card gets its checkbox. When the grid grows wider again, for example when a tablet turns sideways, the table comes back.

createGrid(el, {
  columns,
  data,
  cardView: true,     // narrower than 640px: every row becomes a card of "header: value" lines
  // cardView: 480,   // your own breakpoint in px
});

The breakpoint is the grid's own width, not the window's, so a grid in a narrow side panel turns into cards on a desktop too. Sorting, filters and the quick search still apply to the cards; set them from code or from your own controls, since the header row is hidden in card view.

On touch screens the table view works too: tap a cell to focus it, tap it again to edit, and drag to scroll. For more room per row, see density: 'comfortable' on Themes, fonts and density.

Questions about this page

Does FreeGrid work on phones?

Yes. Touch scrolling and editing work, and cardView turns rows into cards of header: value lines when the grid is narrower than a width you choose.