# Filterable data table

> A dark monospace accounts table: a search types itself, a filter chip lights up and non-matching rows fade away.

- Kind: Plan
- Page: https://ownlyplans.com/bhaskar/filterable-data-table/
- Licence: CC BY 4.0 (reuse with credit)

## 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.

## Files

- prompt.md: https://ownlyplans.com/bhaskar/filterable-data-table/prompt/ (The full prompt.)
- index.html.md: https://ownlyplans.com/bhaskar/filterable-data-table/index-html/ (Complete code of the result in the video.)

## About

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.

---
Also available as JSON: https://ownlyplans.com/bhaskar/filterable-data-table/?format=json
MCP server: https://ownlyplans.com/mcp