Data Components
7 components for displaying, searching, and managing structured data.
DataTable
DataTable
Feature-rich data table with sorting, selection, loading, and empty states.
With Sorting & Selection
| Name | Role | Status | Department | ||
|---|---|---|---|---|---|
Aiko Tanaka | aiko.t@appem.io | Viewer | Inactive | Marketing | |
David Park | david.park@appem.io | Editor | Active | Product | |
Elena Vasquez | elena.v@appem.io | Admin | Active | Engineering | |
James Miller | james.m@appem.io | Viewer | Pending | Sales | |
Marcus Johnson | marcus.j@appem.io | Editor | Active | Design | |
Sarah Chen | sarah.chen@appem.io | Admin | Active | Engineering |
Loading State
Empty State
| Name | Role | Status | Department |
|---|
No users found matching your criteria.
Pagination
Pagination
Page navigation with smart ellipsis and boundary handling.
Basic (12 pages)
Current page: 1
Many Pages (50 pages)
Small Size
SearchBar
SearchBar
Search input with debounced onChange, clear button, and loading state.
With Debounce
Debounced value: ""
Loading State
Modal
Modal
Dialog overlay with configurable sizes and backdrop behavior.
Default Size (md)
Large Size
Dropdown
Dropdown
Context menu with grouped items, icons, and danger actions.
Flat Items
Grouped Items
FormFieldRenderer
FormFieldRenderer
Dynamic field renderer supporting 28 field types. Showing 10 key types below.
Text & Email
Number & Currency
$
Date
Select & Multi-Select
ReactTypeScript
Checkbox
File Upload
Drop files here or click to upload
.pdf,.xlsx,.csv
Auto-Generated (Read Only)
REC-2024-00157