Table
Table는 데이터를 행과 열로 구성하여 구조화된 방식으로 표시하는 컴포넌트입니다.Table 컴포넌트는 순수한 뷰(View) 역할에 집중하여 기본적인 구조와 스타일만을 제공합니다. 복잡한 상태 관리와 로직을 바탕으로 대량의 데이터를 다루는 Data Table을 구현하려면 Table Block 문서를 참고해주세요.
Props Table
Table.Root
데이터를 행과 열로 표시하는 Table 복합 컴포넌트의 루트. <table> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Header
테이블 상단의 헤더 행 그룹. <thead> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Body
테이블의 주요 데이터를 담는 행 그룹. <tbody> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Footer
합계나 요약처럼 테이블 하단에 놓이는 행 그룹. <tfoot> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Row
테이블의 셀 행. 다음 행과 테두리로 구분됩니다. <tr> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Heading
열이나 행의 레이블 역할을 하는 헤더 셀. <th> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Cell
테이블 행의 데이터 셀. <td> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.ColumnGroup
테이블 열의 너비나 스타일을 지정하는 Table.Column 파트의 그룹. <colgroup> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
Table.Column
Table.ColumnGroup 안에서 하나 이상의 열의 너비나 스타일을 지정하는 열. <col> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |