Filterable data table
A dark monospace accounts table: a search types itself, a filter chip lights up and non-matching rows fade away.
Use it with Claude or any AI tool. Copy the prompt and paste it in. The link inside gives the AI the whole page as Markdown.
Live preview of the result built from this prompt. Click to pause.
Overview
A data table with a lime-on-graphite terminal look. The search box types “enterprise”, a Plan chip activates, the row counter flips from 8 of 8 to 3 of 8 and only the enterprise rows stay lit. Topic inspired by OpenDesign’s public dashboard prompt list; this prompt and design are written from scratch.
Build it step by step
Sign in to tick steps off-
1
Paste the prompt
The AI generates the table and the animation.
Make a single-file HTML data table screen, 1280x720, graphite background #0e1014, text #e7e9ee, lime accent #c8f560, monospace font stack (ui-monospace, Menlo, Consolas). No libraries. Header: H1 "Accounts" and subtitle "Filter, sort and review every customer in one place". Toolbar: a 420px search input with lime text, a chip "Plan: Enterprise x" and a second chip "Status: Any", and a result counter on the right. Table: columns Account, Plan, Status, ARR (right aligned, bold). Eight rows of realistic companies (Northwind Traders, Pixel Forge, Atlas Logistics, Moss & Wren, Helio Systems, Daybreak Cafe, Quill Studio, Brightpath Edu). Plan and Status are small tags; Enterprise tags are lime tinted, Trial and Renewing are amber tinted. Motion (8 second loop): rows rise in one after another. The search box types "enterprise" using a steps() width animation and a blinking caret. The Plan chip lights up (lime border and tint). Rows that are not Enterprise fade to 8 percent opacity with a 2px blur, and Enterprise rows get a faint lime background. The counter cross-fades from "Showing 8 of 8" to "Showing 3 of 8". Then everything resets. Respect prefers-reduced-motion. Return only the complete HTML.
-
2
Check the filtering
Only the three Enterprise rows should stay lit.
-
3
Check the counter
It should flip between 8 of 8 and 3 of 8.
Done when You can see it working in the browser.
-
4
Make it real
Replace the animation with real JavaScript filtering over your data.
Files and links
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.