DataTable
ShellsDisplay generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.
Explore filtered data with SearchCombobox, StatusSelect, and DataTable inside a group-spaced BlockLayout.
npx @reopt-ai/opt-cli block add data-explorerimport { DataExplorer } from "@/components/surfaces/data-explorer";Change the width and theme, then interact with the components.
| 상품명 | 카테고리 | 가격 | 상태 |
|---|---|---|---|
| MacBook Pro 14 | 전자기기 | ₩2,890,000 | 활성 |
| Magic Keyboard | 전자기기 | ₩159,000 | 활성 |
| 스탠딩 데스크 | 가구 | ₩450,000 | 임시 |
| 에르고 체어 | 가구 | ₩890,000 | 활성 |
| 모니터 암 | 전자기기 | ₩89,000 | 보관 |
| USB-C 허브 | 전자기기 | ₩79,000 | 활성 |
| 책장 | 가구 | ₩250,000 | 임시 |
생성된 테스트 결과를 찾지 못했습니다.
DataExplorer 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
Display generic tabular data with dynamic columns, safe sorting, keyboard resizing, an accessible grid label, and an optional title.
Edit titles and metric names in place. Enter confirms, Escape reverts, and rejected saves preserve the input.
Overlay a loading state with one aria-busy live region and no duplicate status announcements.
Search options with match-sorter fuzzy matching in a combobox.
Choose a status from a dropdown with color indicators.
Manage domain rows in a Composite grid with keyboard navigation.