데이터 · SINCE v0.4.0
npm v0.3.0 · v0.4.0 예정
DataTable — 웹 semantic table과 네이티브 adaptive list를 잇는 DataTable
실제 HTML table, 네이티브 list, controlled 정렬·다중 선택과 명시적 로딩·오류·갱신 상태를 제공하는 Expo·React Native DataTable입니다.
v0.4.0 공개 예정
이 컴포넌트는 현재 소스에 포함된 다음 릴리스 미리보기입니다. npm latest에 반영될 때까지 검색 색인에서 제외됩니다.
DataTable 사용 시점과 역할
DataTable은 서버 결과의 행 순서와 가져오기·페이지네이션을 앱에 남겨 둔 채 열 배치, 정렬 요청, 현재 보이는 행의 다중 선택과 상태 표현을 담당합니다. 웹 table 표현은 실제 caption·thead·tbody·th·td를 렌더하고, 네이티브 auto 표현은 태블릿 이상에서 가로 스크롤 표, 작은 화면에서 앱이 제공한 compact list row로 적응합니다. 스프레드시트형 grid나 가상화까지 가장하지 않아 일반 문서 탐색과 앱 소유 상태가 예측 가능하게 유지됩니다.
- columns tuple에서 열 ID와 sortable 열 ID를 추론하고 ascending·descending·해제 순환을 controlled callback으로 전달
- loading·error·ready·refreshing 판별 유니언과 현재 보이는 enabled 행만 바꾸면서 off-page key를 보존하는 선택 모델
- 웹 semantic table, 네이티브 list·listitem 의미론과 auto·table·list presentation
설치와 최소 예제
DataTable: 패키지 루트 엔트리에서 import한 뒤 앱이 소유한 상태와 이벤트를 연결하세요.
TypeScript
pnpm add @gj-kit/expo-ui
import { DataTable } from '@gj-kit/expo-ui';
const columns = [
{ id: 'member', header: '고객', flex: 2, sortable: true, getTextValue: ({ row }) => row.member },
{ id: 'amount', header: '금액', width: 120, align: 'end', getTextValue: ({ row }) => row.amount },
] as const;
<DataTable caption="최근 결제" state={{ status: 'ready', rows }} columns={columns} getRowKey={(row) => row.id} rowHeaderColumnId="member" sort={sort} onSortChange={setSort} presentation="auto" renderListRow={({ row }) => <PaymentRow payment={row} />} />접근성과 플랫폼 동작
보이는 caption 또는 accessibilityLabel 중 하나가 반드시 표를 명명하고 rowHeaderColumnId가 행 제목 열을 지정합니다. 모든 열은 getTextValue로 현지화된 scalar를 제공해 compact row와 네이티브 읽기 맥락을 유지합니다. 웹은 정렬 중인 th에만 aria-sort를 두고 실제 row header를 사용하며, 네이티브는 지원하지 않는 cell 역할을 가장하지 않고 list·listitem 구조와 이름 있는 정렬·checkbox 제어를 제공합니다. DataTable은 arrow-key grid가 아니므로 셀 안의 링크와 버튼은 일반 탭 순서를 유지합니다.
기본 스타일은 현재 UiProvider 테마의 color, spacing, radius, typography, metric 역할에서 파생됩니다. Expo, bare React Native와 React Native Web에서 같은 prop 계약을 사용합니다.