Mahogany Data Ledger
A professional support ticket data table with warm mahogany tones for customer support platforms.
Features
- Full-width data table with 8 sample support ticket rows
- Columns: ID, Subject, Priority, Status, Created, Assignee
- Color-coded Priority badges (Critical, High, Medium, Low)
- Color-coded Status badges (Open, In Progress, Resolved, Backlog)
- Search input with icon for filtering by ID or subject
- Status and Priority filter buttons
- Sortable column headers with arrow indicators
- Alternating row colors for readability
- Assignee column with avatar initials
- Full pagination row with page numbers and navigation
- Fira Code monospace for table data, Fraunces serif for headings
- Warm cream (#FFFBEB) light mode, dark stone (#1C1917) dark mode
Dependencies
lucide-react for Search, ArrowUpDown, ChevronLeft, ChevronRight, Filter, Headphones icons- Shadcn
Badge, Button, Input, Separator components
Customization
- Edit the
tickets array to use your actual support data
- Adjust priority and status badge colors in the style maps
- Modify column headers and add/remove columns
- Change mahogany/amber color palette via hex values
- Connect search and filters to real data sources
- Add click handlers for row selection and actions
