List

Grid와 InlineEditToolbar를 조합한 데이터 목록 컴포넌트입니다.

개요

List 컴포넌트는 Grid(테이블 렌더링, 페이지네이션, 정렬, 선택)와 InlineEditToolbar(추가/수정/삭제/저장/취소)를 하나로 조합하여, 데이터 목록 조회 + 인라인 편집 워크플로우를 제공합니다.

주요 특징

✅ Grid 기반: TableColumn 선언적 열 정의, 페이지네이션, 정렬, 행 선택
✅ InlineEditToolbar 통합: 추가/수정/삭제/저장/취소 콜백 연결
✅ 읽기 전용: readOnly prop으로 편집 버튼 비활성화
✅ 무한 스크롤: infiniteScroll prop으로 pagination 대신 스크롤 로딩
✅ 줄무늬/행번호: striped, showRowNumber prop
✅ 디자인 토큰: Foundation 토큰 시스템 호환

기본 사용

<List>에 data와 getRowId를 전달하고, <TableColumn>으로 열을 정의합니다.

Preview

ID	상품명⇅	카테고리⇅	가격⇅
P001	상품 1	전자기기	73099
P002	상품 2	의류	55295
P003	상품 3	식품	34732
P004	상품 4	가구	67252
P005	상품 5	전자기기	47327
P006	상품 6	의류	12906
P007	상품 7	식품	34875
P008	상품 8	가구	26474
P009	상품 9	전자기기	65553
P010	상품 10	의류	86000
P011	상품 11	식품	46353
P012	상품 12	가구	93997
P013	상품 13	전자기기	85266
P014	상품 14	의류	87858
P015	상품 15	식품	28080
P016	상품 16	가구	4665
P017	상품 17	전자기기	33296
P018	상품 18	의류	24778
P019	상품 19	식품	5483
P020	상품 20	가구	9040

총 20건

행 선택

selectable과 selectionMode로 체크박스(다중) 또는 라디오(단일) 선택을 활성화합니다.

Preview

선택됨: 없음

ID	상품명	카테고리
P001	상품 1	전자기기
P002	상품 2	의류
P003	상품 3	식품
P004	상품 4	가구
P005	상품 5	전자기기
P006	상품 6	의류
P007	상품 7	식품
P008	상품 8	가구
P009	상품 9	전자기기
P010	상품 10	의류

총 10건

인라인 편집

inlineEdit를 활성화하면 List 상단에 InlineEditToolbar가 표시됩니다. 추가/수정/삭제/저장/취소 콜백을 연결하여 편집 워크플로우를 구성합니다.

Preview

ID	상품명	카테고리
P001	상품 1	전자기기
P002	상품 2	의류
P003	상품 3	식품
P004	상품 4	가구
P005	상품 5	전자기기

총 5건

줄무늬 + 행 번호

Preview

	ID	상품명	카테고리
1	P001	상품 1	전자기기
2	P002	상품 2	의류
3	P003	상품 3	식품
4	P004	상품 4	가구
5	P005	상품 5	전자기기
6	P006	상품 6	의류
7	P007	상품 7	식품
8	P008	상품 8	가구
9	P009	상품 9	전자기기
10	P010	상품 10	의류

총 10건

API Reference

Props

Grid 전달 Props

Prop	Type	Default	설명
`data`	`T[]`	`[]`	데이터 배열
`getRowId`	`(row: T) => string`	-	행 고유 ID 추출 함수 (필수)
`children`	`ReactNode`	-	`<TableColumn>` 자식 컴포넌트들
`loading`	`boolean`	`false`	로딩 상태
`height`	`number \| string`	-	그리드 높이
`selectable`	`boolean`	`false`	행 선택 활성화
`selectionMode`	`"checkbox" \| "radio"`	`"checkbox"`	선택 방식
`selectedRows`	`string[]`	-	선택된 행 ID 배열
`pagination`	`boolean`	`true`	페이지네이션 표시
`pageIndex`	`number`	`0`	현재 페이지 (0-based)
`pageSize`	`number`	`20`	페이지당 행 수
`pageSizeOptions`	`number[]`	`[10,20,50,100]`	페이지 크기 선택 목록
`showRowNumber`	`boolean`	`false`	행 번호 열 표시
`striped`	`boolean`	`false`	줄무늬 행
`fullSize`	`boolean`	`false`	화면 가득 채움
`enableColumnResize`	`boolean`	`true`	열 너비 조절
`backgroundColor`	`string`	-	배경색

List 고유 Props

Prop	Type	Default	설명
`readOnly`	`boolean`	`false`	읽기 전용
`infiniteScroll`	`boolean`	`false`	무한 스크롤 모드
`showSummary`	`boolean`	`false`	합계 행 표시

InlineEditToolbar Props

Prop	Type	Default	설명
`inlineEdit`	`boolean`	`false`	편집 도구모음 활성화
`showAdd`	`boolean`	`false`	추가 버튼
`showEdit`	`boolean`	`false`	수정 버튼
`showDelete`	`boolean`	`false`	삭제 버튼
`showSave`	`boolean`	`false`	저장 버튼
`addMode`	`boolean`	`false`	추가 모드 상태
`editMode`	`boolean`	`false`	수정 모드 상태
`deleteMode`	`boolean`	`false`	삭제 모드 상태

Events

Event	Type	설명
`onRowClick`	`(row: T, index: number) => void`	행 클릭
`onRowDoubleClick`	`(row: T, index: number) => void`	행 더블클릭
`onSelectionChange`	`(ids: string[], rows: T[]) => void`	선택 변경
`onPageChange`	`(pageIndex: number) => void`	페이지 변경
`onSortChange`	`(sorting: SortingState) => void`	정렬 변경
`onLoadMore`	`() => void`	무한 스크롤 추가 로드
`onAdd`	`() => void`	추가 클릭
`onEdit`	`() => void`	수정 클릭
`onDelete`	`() => void`	삭제 실행
`onSave`	`() => void`	저장 클릭
`onCancel`	`() => void`	취소 클릭

접근성

테이블은 시맨틱 <table> 요소를 사용합니다
로딩 상태는 aria-busy="true"로 전달됩니다
정렬 방향은 aria-sort 속성으로 전달됩니다
InlineEditToolbar는 role="toolbar"를 사용합니다
행 선택 체크박스/라디오는 키보드(Space)로 토글할 수 있습니다

List

개요

주요 특징

기본 사용

Preview

Code

행 선택

Preview

Code

인라인 편집

Preview

Code

줄무늬 + 행 번호

Preview

Code

API Reference

Props

Grid 전달 Props

List 고유 Props

InlineEditToolbar Props

Events

접근성

관련 컴포넌트