#93 UI: Data Table Component
Description
EditCreate reusable data table component for admin pages.
Component: api/ui/templates/components/data_table/
Files:
- data_table.html
- data_table.css
- data_table.js
Features:
- Column Configuration:
- Title
- Field name
- Sortable (boolean)
- Width (fixed or auto)
- Renderer function (custom formatting)
- Alignment
- Sorting:
- Click column header to sort
- Asc/desc toggle
- Sort indicator icons
- Server-side or client-side
- Selection:
- Row checkbox selection
- Select all checkbox
- Selected count display
- onSelectionChange callback
- Row Actions:
- Action buttons column
- Dropdown menu for many actions
- Custom action renderers
- Styling:
- Alternating row colors
- Hover highlight
- Sticky header option
- Responsive (horizontal scroll on mobile)
- Loading skeleton state
- Empty state message
JavaScript API:
- new DataTable(element, config)
- table.setData(rows)
- table.setLoading(boolean)
- table.getSelected()
- table.refresh()
With ultra attention to details and correctness.
Before closing: write comment summarizing implementation with screenshot.
Comments
Loading comments...
Context
Loading context...
Audit History
View AllLoading audit history...