Flint DevTools Data Table
A terminal/hacker-themed API endpoint diagnostics table for developer tool dashboards.
Features
- Method badges — Color-coded HTTP method indicators (GET=green, POST=blue, PUT=amber, DELETE=red)
- Status indicators — Glowing dot indicators for healthy/degraded/down endpoints
- Latency coloring — Green (<100ms), amber (<500ms), red (>500ms) thresholds
- Error rate tracking — Color-coded error percentages per endpoint
- Sortable columns — Click to sort by latency, calls, or error rate
- Method filtering — Filter endpoints by HTTP method
- Striped rows — Alternating row backgrounds for readability
- Summary cards — Total calls, average latency, healthy endpoint count
- Scanline overlay — Subtle CRT-style scanline effect
- Noise texture — SVG noise for gritty terminal feel
- Fira Code — Monospace font for all data values
- Dark mode — Charcoal (#111111) background with green/amber terminal accents
Dependencies
@/components/vue-ui/table — Table, TableBody, TableCell, TableHead, TableHeader, TableRow@/components/vue-ui/card — Card, CardHeader, CardTitle, CardContent@/components/vue-ui/badge — Badge@/components/vue-ui/button — Buttonlucide-vue-next — Terminal, Code, Globe, Clock, ArrowUpDown, Filter
Customization
- Endpoints: Replace the
endpoints array with live API data
- : Adjust latency and error rate color thresholds
