# Filterable data table > A dark monospace accounts table: a search types itself, a filter chip lights up and non-matching rows fade away. - Category: Developer tools - Version: 1.0 - Source: https://ownlyplans.com/bhaskar/filterable-data-table/ ## 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. ## Tech stack - CSS - Dashboard - HTML ## Build steps ### 1. Paste the prompt The AI generates the table and the animation. Prompt: ```text 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. ## Assets ### prompt.md — The full prompt. ~~~~ # Filterable data table Copy this prompt into Claude, Cursor or Lovable. ```text 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. ``` ~~~~ ### index.html.md — Complete code of the result in the video. ~~~~ # index.html The finished result as one file. Save it as index.html and open it. ```html Filterable data table dashboard

Accounts

Filter, sort and review every customer in one place
enterprise
Plan: Enterprise ✕
Status: Any
Showing 8 of 8Showing 3 of 8
AccountPlanStatusARR
Northwind TradersEnterpriseActive$128,400
Pixel ForgeStarterTrial$2,900
Atlas LogisticsEnterpriseActive$94,250
Moss & WrenProActive$18,600
Helio SystemsEnterpriseRenewing$211,000
Daybreak CaféStarterActive$1,450
Quill StudioProTrial$7,320
Brightpath EduProActive$24,980
``` ~~~~ ## Build instructions by tool ### Claude Code Open a terminal in an empty folder, run `claude`, then paste the prompt. ```text Build the "Filterable data table" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/filterable-data-table/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the filtering → Check the counter → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Claude Code.) ``` ### Cursor Open an empty folder in Cursor, start an Agent chat, then paste the prompt. ```text Build the "Filterable data table" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/filterable-data-table/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the filtering → Check the counter → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Cursor.) ``` ### Lovable Start a new Lovable project and paste the prompt as your first message. ```text Build the "Filterable data table" app from the OwnlyPlans blueprint at https://ownlyplans.com/bhaskar/filterable-data-table/. Stack: CSS, Dashboard, HTML. Follow the plan's steps in order: Paste the prompt → Check the filtering → Check the counter → Make it real. Download the full plan (Markdown) from the link above and keep it in the project root as PLAN.md. Ask me before adding anything not in the plan. (Prepared for Lovable.) ``` ## Definition of done - Every build step is complete and the app runs locally. - The main user flow works end to end. - Share your build on OwnlyPlans with a demo link, build time and tool.