휴대폰 카드 보기

cardView를 주면 그리드가 정한 폭보다 좁을 때 행을 "헤더: 값" 줄로 된 카드로 보여 줍니다. 휴대폰과 좁은 패널에 알맞습니다.

실행 예제카드 보기

휴대폰처럼 좁은 화면에서 행을 "헤더: 값" 줄로 된 카드로 보여 줍니다.

이 데모의 코드

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!;
}

컬럼이 많은 표는 휴대폰에서 읽기 어렵습니다. cardView를 주면 그리드가 좁아질 때 알아서 바뀝니다. 지정한 폭(px, true는 640)보다 좁으면 행마다 컬럼별로 "헤더: 값" 줄이 담긴 카드가 되고, 카드는 행처럼 스크롤됩니다. 행 선택을 켜 두면 카드마다 체크박스가 붙습니다. 태블릿을 가로로 돌릴 때처럼 다시 넓어지면 표로 돌아옵니다.

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
});

기준은 창 폭이 아니라 그리드 자신의 폭이라서, 좁은 사이드 패널 안의 그리드는 데스크톱에서도 카드로 보입니다. 정렬, 필터, 빠른 검색은 카드에도 그대로 적용됩니다. 카드 보기에서는 헤더 줄이 숨겨지므로 코드나 직접 만든 컨트롤로 거세요.

터치 화면에서는 표 보기도 쓸 수 있습니다. 셀을 누르면 포커스, 한 번 더 누르면 편집이고, 끌면 스크롤됩니다. 행마다 여유를 더 두려면 테마·글꼴·행 간격의 density: 'comfortable'을 보세요.

이 페이지에 대한 질문

휴대폰에서도 쓸 수 있나요?

네. 터치 스크롤과 편집이 되고, cardView를 주면 그리드가 정한 폭보다 좁을 때 행을 "헤더: 값" 줄로 된 카드로 보여 줍니다.