🗂️ CommonTable

정렬 · 페이지 · 체크박스 선택까지 기본 제공. 45건 데이터로 페이징 동작 확인.

라이브 데모

선택: 0 건

총 45 건

ID	이름	역할	상태	점수	가입일
1	사용자1	관리자	비활성	99	2025-01-01
2	사용자2	매니저	활성	95	2025-02-02
3	사용자3	일반	활성	84	2025-03-03
4	사용자4	게스트	비활성	93	2025-04-04
5	사용자5	관리자	활성	26	2025-05-05
6	사용자6	매니저	활성	79	2025-06-06
7	사용자7	일반	비활성	52	2025-07-07
8	사용자8	게스트	활성	42	2025-08-08
9	사용자9	관리자	활성	2	2025-09-09
10	사용자10	매니저	비활성	13	2025-10-10

1 / 5

사용법

import { CommonTable, type Column } from "~/features/common";

const cols: Column<User>[] = [
    { key: "id", header: "ID", width: 60, align: "right" },
    { key: "name", header: "이름" },
    { key: "role", header: "역할",
      render: (r) => <span className="badge badge-primary">{r.role}</span> },
];

<CommonTable
    rows={users} columns={cols}
    rowKey={(r) => r.id}
    pageSize={20}
    selectable selected={sel} onSelectedChange={setSel}
    onRowClick={(r) => nav(`/users/${r.id}`)}
/>