@idbrnd/design-system 1.8.0 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -15
- package/dist/components/Table/Table.d.ts +1 -1
- package/dist/components/Table/Table.types.d.ts +31 -1
- package/dist/index.js +1870 -1802
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @idbrnd/design-system
|
|
2
2
|
|
|
3
|
-
|
|
4
4
|
|
|
5
5
|
|
|
6
6
|
|
|
@@ -1211,22 +1211,29 @@ const table = useReactTable({
|
|
|
1211
1211
|
emptyTitle="데이터가 없습니다"
|
|
1212
1212
|
emptyDescription="새 항목을 추가해 주세요"
|
|
1213
1213
|
/>
|
|
1214
|
+
|
|
1215
|
+
// 최대 행 수 제한 (초과 시 tbody 세로 스크롤, 헤더 고정)
|
|
1216
|
+
<Table table={table} maxRows={10} />
|
|
1214
1217
|
```
|
|
1215
1218
|
|
|
1216
|
-
| Prop
|
|
1217
|
-
|
|
|
1218
|
-
| `table`
|
|
1219
|
-
| `variant`
|
|
1220
|
-
| `selectable`
|
|
1221
|
-
| `interactive`
|
|
1222
|
-
| `onRowClick`
|
|
1223
|
-
| `loading`
|
|
1224
|
-
| `skeletonRowCount`
|
|
1225
|
-
| `emptyContent`
|
|
1226
|
-
| `emptyTitle`
|
|
1227
|
-
| `emptyDescription`
|
|
1228
|
-
| `customStyle`
|
|
1229
|
-
| `className`
|
|
1219
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
1220
|
+
| ------------------------ | -------------------------------- | ---------- | --------------------------------------------------------------------------- |
|
|
1221
|
+
| `table` | `Table<TData>` | — | `useReactTable()`로 생성한 TanStack Table 인스턴스 (필수) |
|
|
1222
|
+
| `variant` | `"normal"` \| `"content"` | `"normal"` | 테이블 스타일 변형 |
|
|
1223
|
+
| `selectable` | `boolean` | `false` | 첫 번째 컬럼에 체크박스 표시. `enableRowSelection` 설정 필요 |
|
|
1224
|
+
| `interactive` | `boolean` | `false` | 행 hover/focus/pressed 인터랙션 활성화 |
|
|
1225
|
+
| `onRowClick` | `(row: Row<TData>) => void` | — | 행 클릭 콜백. 제공 시 체크박스 없이도 행에 인터랙션 효과 적용 |
|
|
1226
|
+
| `loading` | `boolean` | `false` | 로딩 스켈레톤 표시 |
|
|
1227
|
+
| `skeletonRowCount` | `number` | `5` | 로딩 스켈레톤 행 수 |
|
|
1228
|
+
| `emptyContent` | `ReactNode` | — | 데이터 없을 때 표시할 커스텀 콘텐츠 (전체 오버라이드) |
|
|
1229
|
+
| `emptyTitle` | `string` | — | 빈 상태 제목 |
|
|
1230
|
+
| `emptyDescription` | `string` | — | 빈 상태 설명 |
|
|
1231
|
+
| `customStyle` | `CSSProperties` | — | 추가 인라인 스타일 |
|
|
1232
|
+
| `className` | `string` | — | 추가 클래스명 |
|
|
1233
|
+
| `maxRows` | `number` | — | 표시할 최대 행 수. 초과 시 세로 스크롤, 헤더는 항상 고정 |
|
|
1234
|
+
| `accordion` | `boolean` | `false` | 아코디언 토글 컬럼 활성화. `canExpand`·`renderAccordionContent`와 함께 사용 |
|
|
1235
|
+
| `canExpand` | `(row: Row<TData>) => boolean` | — | 쉐브론을 표시할 행 결정. 미제공 시 모든 행에 쉐브론 표시 |
|
|
1236
|
+
| `renderAccordionContent` | `(row: Row<TData>) => ReactNode` | — | 펼쳐진 행의 콘텐츠. 최초 열릴 때 1회 호출 후 DOM에 유지 |
|
|
1230
1237
|
|
|
1231
1238
|
**단일 행 선택**
|
|
1232
1239
|
|
|
@@ -1251,6 +1258,55 @@ const table = useReactTable({
|
|
|
1251
1258
|
});
|
|
1252
1259
|
```
|
|
1253
1260
|
|
|
1261
|
+
**아코디언 (행 펼치기)**
|
|
1262
|
+
|
|
1263
|
+
쉐브론 버튼 클릭 시 행 하단에 콘텐츠를 슬라이드 애니메이션으로 펼칩니다.
|
|
1264
|
+
|
|
1265
|
+
```tsx
|
|
1266
|
+
const table = useReactTable({
|
|
1267
|
+
data,
|
|
1268
|
+
columns,
|
|
1269
|
+
getCoreRowModel: getCoreRowModel(),
|
|
1270
|
+
getRowId: (row) => String(row.id), // 정렬·필터 사용 시 필수
|
|
1271
|
+
});
|
|
1272
|
+
|
|
1273
|
+
<Table
|
|
1274
|
+
table={table}
|
|
1275
|
+
accordion
|
|
1276
|
+
canExpand={(row) => !!row.original.hasDetail} // 쉐브론 표시 여부를 가볍게 판단
|
|
1277
|
+
renderAccordionContent={(
|
|
1278
|
+
row, // 실제 콘텐츠는 펼쳐질 때만 렌더
|
|
1279
|
+
) => <DetailPanel data={row.original} />}
|
|
1280
|
+
/>;
|
|
1281
|
+
```
|
|
1282
|
+
|
|
1283
|
+
- `canExpand`로 쉐브론 표시 여부를 결정하고, `renderAccordionContent`는 행이 최초로 펼쳐질 때 한 번만 호출됩니다. 이후 닫혀도 DOM에 유지되어 재렌더 없이 부드럽게 닫힙니다.
|
|
1284
|
+
- 쉐브론 버튼은 키보드 Tab+Enter 동작과 `aria-expanded` / `aria-controls`를 지원합니다.
|
|
1285
|
+
|
|
1286
|
+
**중첩 테이블 패턴**
|
|
1287
|
+
|
|
1288
|
+
```tsx
|
|
1289
|
+
<Table
|
|
1290
|
+
table={parentTable}
|
|
1291
|
+
accordion
|
|
1292
|
+
canExpand={(row) => row.original.orderCount > 0}
|
|
1293
|
+
renderAccordionContent={(row) => <OrderTable userId={row.original.id} />}
|
|
1294
|
+
/>;
|
|
1295
|
+
|
|
1296
|
+
function OrderTable({ userId }: { userId: number }) {
|
|
1297
|
+
const table = useReactTable({
|
|
1298
|
+
data: getOrders(userId),
|
|
1299
|
+
columns,
|
|
1300
|
+
getCoreRowModel: getCoreRowModel(),
|
|
1301
|
+
});
|
|
1302
|
+
return (
|
|
1303
|
+
<TableContainer variant="content">
|
|
1304
|
+
<Table table={table} variant="content" maxRows={6} />
|
|
1305
|
+
</TableContainer>
|
|
1306
|
+
);
|
|
1307
|
+
}
|
|
1308
|
+
```
|
|
1309
|
+
|
|
1254
1310
|
---
|
|
1255
1311
|
|
|
1256
1312
|
### Pagination
|
|
@@ -1470,5 +1526,6 @@ import type {
|
|
|
1470
1526
|
- `Table`은 `@tanstack/react-table`의 `useReactTable()`로 생성한 인스턴스를 필수로 받습니다. TanStack Table을 별도 설치해야 합니다.
|
|
1471
1527
|
- `TableContainer`의 `variant`는 `Table`의 `variant`와 반드시 동일하게 맞춰야 레이아웃이 올바르게 적용됩니다.
|
|
1472
1528
|
- `Table`에서 `selectable` 사용 시 `useReactTable`에 `enableRowSelection`, `state.rowSelection`, `onRowSelectionChange`를 함께 설정해야 합니다.
|
|
1529
|
+
- `Table`에서 `accordion` 사용 시 정렬·필터 기능과 함께 쓴다면 `useReactTable`에 `getRowId: (row) => String(row.id)`를 설정해야 합니다. 기본값(배열 인덱스)은 정렬 변경 시 엉뚱한 행이 펼쳐진 상태가 됩니다.
|
|
1473
1530
|
- `Pagination`에서 서버사이드 페이지네이션을 사용할 경우 `pageCount`를 서버 응답 기준으로 직접 계산해 전달해야 합니다.
|
|
1474
1531
|
- CSS 변수/타이포그래피를 포함한 스타일을 위해 `@idbrnd/design-system/style.css` import를 권장합니다.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TableProps, TableVariant } from "./Table.types";
|
|
2
2
|
export type { TableVariant };
|
|
3
3
|
export type { TableProps };
|
|
4
|
-
declare function Table<TData>({ table, variant, selectable, interactive, loading, skeletonRowCount, emptyContent, emptyTitle, emptyDescription, customStyle, className, onRowClick, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare function Table<TData>({ table, variant, selectable, interactive, loading, skeletonRowCount, emptyContent, emptyTitle, emptyDescription, customStyle, className, onRowClick, accordion, canExpand, renderAccordionContent, maxRows, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export default Table;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { CSSProperties, ReactNode } from "react";
|
|
2
2
|
import type { Row, Table } from "@tanstack/react-table";
|
|
3
3
|
export type TableVariant = "normal" | "content";
|
|
4
|
-
|
|
4
|
+
interface BaseTableProps<TData> {
|
|
5
5
|
/** useReactTable()로 생성한 TanStack Table 인스턴스 */
|
|
6
6
|
table: Table<TData>;
|
|
7
7
|
/** 테이블 스타일 변형
|
|
@@ -35,4 +35,34 @@ export interface TableProps<TData> {
|
|
|
35
35
|
customStyle?: CSSProperties;
|
|
36
36
|
/** 추가 클래스명 */
|
|
37
37
|
className?: string;
|
|
38
|
+
/** 표시할 최대 행 수. 초과 시 세로 스크롤 발생. 헤더는 항상 고정 */
|
|
39
|
+
maxRows?: number;
|
|
38
40
|
}
|
|
41
|
+
type AccordionProps<TData> = {
|
|
42
|
+
accordion?: false;
|
|
43
|
+
canExpand?: never;
|
|
44
|
+
renderAccordionContent?: never;
|
|
45
|
+
} | {
|
|
46
|
+
/** 행마다 아코디언 토글(쉐브론) 컬럼을 활성화할지 여부.
|
|
47
|
+
* `renderAccordionContent`를 함께 제공해야 동작합니다.
|
|
48
|
+
*/
|
|
49
|
+
accordion: true;
|
|
50
|
+
/** 행마다 쉐브론(토글)을 표시할지 결정하는 함수.
|
|
51
|
+
* 미제공 시 모든 행에 토글 표시.
|
|
52
|
+
* renderAccordionContent 호출을 펼쳐진 행으로만 제한하므로
|
|
53
|
+
* 콘텐츠 생성 비용이 클 때 반드시 제공하세요.
|
|
54
|
+
*/
|
|
55
|
+
canExpand?: (row: Row<TData>) => boolean;
|
|
56
|
+
/** 확장된 행에 렌더링할 콘텐츠.
|
|
57
|
+
* 행이 펼쳐질 때 해당 row를 인수로 받아 ReactNode를 반환.
|
|
58
|
+
*
|
|
59
|
+
* **주의 — row.id 안정성**: TanStack Table은 기본적으로 배열 인덱스를
|
|
60
|
+
* row.id로 사용합니다. 정렬·필터 변경 시 같은 id가 다른 데이터를 가리켜
|
|
61
|
+
* 엉뚱한 행이 열린 상태가 됩니다.
|
|
62
|
+
* accordion 사용 시 useReactTable에 반드시
|
|
63
|
+
* `getRowId: (originalRow) => originalRow.id` 를 설정하세요.
|
|
64
|
+
*/
|
|
65
|
+
renderAccordionContent: (row: Row<TData>) => ReactNode;
|
|
66
|
+
};
|
|
67
|
+
export type TableProps<TData> = BaseTableProps<TData> & AccordionProps<TData>;
|
|
68
|
+
export {};
|