데이터 테이블
실험composite게시판형 표입니다. 행 번호·정렬·체크박스 선택을 지원합니다. 데이터가 아주 많으면 데이터 그리드를 쓰세요.
@tissue-ui/layout-react설치
bash
npm install @tissue-ui/layout-reacttsx
import { DataTable } from "@tissue-ui/layout-react";언제 쓰나
- 표 형태 데이터를 정렬·선택과 함께 보여줄 때.
- 아주 많은 데이터는 데이터 그리드를 고려하세요.
예제
정렬 · 셀 렌더러
| 번호 | 역할 | 상태 | |
|---|---|---|---|
| 3 | 홍길동 | 관리자 | 활성 |
| 2 | 김영희 | 편집자 | 대기 |
| 1 | 이철수 | 뷰어 | 보관 |
행 선택
selectable 을 켜고 selectedIds·onSelectChange 로 선택 상태를 관리합니다.
| 번호 | 이름 | 역할 | |
|---|---|---|---|
| 3 | 홍길동 | 관리자 | |
| 2 | 김영희 | 편집자 | |
| 1 | 이철수 | 뷰어 |
행 번호 숨기기
showRowNumber={false} 로 왼쪽 번호 열을 뺍니다.
| 플랜 | 월 요금 |
|---|---|
| 무료 | ₩0 |
| 프로 | ₩9,900 |
속성
| 속성 | 타입 | 설명 |
|---|---|---|
| columns | node | 열 정의 목록입니다 (열 이름·제목·정렬 가능 여부). |
| rows | node | 표에 보여줄 행 데이터입니다. |
| selectable | boolean | 체크박스로 여러 행을 고를 수 있게 합니다. |
| onSort | node | 정렬을 바꿀 때 실행됩니다. |
| caption | string | 표 제목입니다 (화면 낭독기용, 필수). |
위 옵션 말고도 className·onClick 같은 일반 HTML 속성을 그대로 넘길 수 있습니다.
상태
default
이 페이지의 옵션·상태는 실제 코드 정의에서 그대로 가져온 것입니다. 에이전트는 같은 내용을 llms.txt 로 읽습니다.