Data
Data Grid
semantic HTML정렬, 필터, 페이징, 선택을 지원하는 데이터 표입니다.
Live example
| Ada | Owner | Active |
| Grace | Editor | Invited |
| Linus | Reviewer | Active |
<section data-standard-component="data-grid"><label>Search <input type="search" data-grid-search placeholder="Filter rows"></label><div data-ui="scroll"><table><caption>Team members</caption><thead><tr><th><button type="button" data-sort-column="0">Name</button></th><th><button type="button" data-sort-column="1">Role</button></th><th><button type="button" data-sort-column="2">Status</button></th></tr></thead><tbody><tr><td>Ada</td><td>Owner</td><td>Active</td></tr><tr><td>Grace</td><td>Editor</td><td>Invited</td></tr><tr><td>Linus</td><td>Reviewer</td><td>Active</td></tr></tbody></table></div><output data-example-output aria-live="polite">3 rows</output></section>Variants and sizes
The pattern inherits theme and density tokens. Use compact, comfortable, or roomy density when the surrounding screen requires it.
compactcomfortableroomy
Public API
| Contract | Value |
|---|---|
| Implementation | semantic HTML |
| Status | stable |
| License | free |
| Since | 0.3 |
| HTML contract | Native HTML elements and attributes |
| Events | Native browser events |
Accessibility
표의 이름, 정렬 상태, 행 수, loading 상태와 선택 행을 ARIA 및 x-selection-change로 제공합니다.
Server template guidance
<!-- Render the semantic HTML on the server. Load enhancement JavaScript only when this interaction is needed. -->