HomeCasa Data table design spec for an admin dashboard
Define a complete data table: column order and formatting, sorting, filters, pagination or virtual scroll, bulk actions, density, states, small-screen behavior and accessibility. Designed for ChatGPT, Claude, Gemini and Microsoft Copilot. It includes 6 customizable variables and you can copy it for free in one click.
Intermediate · Text · Pending editorial review
Prompt
Act as a product designer specializing in data-heavy B2B applications.
Context:
- Product: {{product}}
- Entity shown in the table: {{entity}}
- Available columns: {{columns}}
- Main user tasks with this table: {{tasks}}
- Typical row volume: {{volume}}
- Platform: {{platform}}
Deliverables:
1. Column priority and order based on the tasks, with alignment (numbers right, text left), formatting for dates, amounts and statuses, and truncation rules with tooltips.
2. Header: sorting (default and multi-column if useful), sticky header and first column, resizing and choosing visible columns.
3. Search and filters: quick filters, advanced filters, active filter chips, "clear all" and saved views.
4. Pagination, infinite scroll or virtualization: a justified recommendation for the stated volume.
5. Selection and actions: row actions, bulk actions, select all rows versus all on the page and confirmation for destructive actions.
6. Density (comfortable, compact), row height and spacing.
7. States: skeleton loading, empty, no results, error and partial data.
8. Responsive behavior or an alternative on small screens.
9. Accessibility: semantic table markup, aria-sort, keyboard navigation, visible focus and announced updates.
10. A summary table of the components and tokens needed in the design system.
Constraints:
- Do not invent columns or sample data that are not in the context; use [FILL IN].
- Justify each decision with the user task it supports.
- If key information is missing (for example, which actions can be taken on a row), ask me first.
Format: a spec with numbered headings, tables and a text wireframe of the table in its default state.How to use it
- List the real columns and what users do with the table. 2. Review the pagination recommendation with engineering. 3. Use the final components table to build or update the component in your design system.
Usage example
Entity: orders · Columns: order ID, customer, date, amount, status, carrier · Tasks: find problem orders and export · Volume: 100-10,000 rows.
Sample output
1. Column priority
| Order | Column | Alignment | Format | Task it supports |
|---|---|---|---|---|
| 1 | Order ID | Left, sticky | Monospace, link | Find a specific order |
| 2 | Status | Left | Badge with icon + text | Spot issues |
| 3 | Customer | Left | Truncated with tooltip | Identify the order |
| 4 | Date | Right | Mar 12, 2025 · 2:05 PM | Sort by age |
| 5 | Amount | Right | $1,234.50 | Review large orders |
| 6 | Carrier | Left | Text | Group issues |
| 7 | State | Left | Two-letter code | Filter shipments |
4. Pagination
With up to 10,000 rows and CSV export, I recommend pagination at 50 rows with a page-size selector: it keeps your place when you come back from an order and makes bulk selection unambiguous.
5. Selection
When selecting all: "50 orders on this page selected · Select all 2,340 matching this filter". Destructive actions ask for confirmation and state the exact count.
Wireframe (default state)
[Search orders…] [Status ▾] [Carrier ▾] [State ▾] [Views ▾] [Export CSV]
Filters: (Has issue ×) (Last 7 days ×) Clear all
☐ | Order ID ▲ | Status | Customer | Date | Amount | Carrier | State
☐ | [FILL IN] | ⚠ Issue | [FILL IN] | [FILL IN] | [FILL IN] | … | ……
Key facts
- Category
- UI/UX design · Dashboards
- Output type
- Text
- Level
- Intermediate
- Designed for
- ChatGPT, Claude, Gemini and Microsoft Copilot
- Verified in
- Pending editorial verification
- Variables
- Product, Entity, Available columns, Main tasks, Row volume and Platform
- Language
- English
- Price
- Free, no sign-up
- Updated
- Nov 7, 2026
Frequently asked questions
Pagination or infinite scroll for a data table?
For working tables, pagination or virtualization usually works better because users need to return to a specific row and see totals. The prompt recommends one based on your volume and tasks.
How do you adapt a complex table to mobile?
Usually you keep 2-3 key columns and move the rest into an expandable row or a card view. The spec suggests the best alternative for your tasks.
What is this prompt for?
Define a complete data table: column order and formatting, sorting, filters, pagination or virtual scroll, bulk actions, density, states, small-screen behavior and accessibility.
Which AI tools does it work with?
It is designed for ChatGPT, Claude, Gemini and Microsoft Copilot. We have not verified it in these tools yet, so results may vary between them.
How do I customize the prompt?
Click “Customize” and fill in the variables (Product, Entity, Available columns, Main tasks, Row volume and Platform). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.
Do I need experience to use it?
It is intermediate: it helps to know the topic so you can provide good context and review the result critically.
Is this prompt free?
Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.
Can I trust the AI output?
Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.