$4.99Records Data Grid UI Block
A reusable, polished records grid for reporting and product interfaces, styled with warm-neutral surfaces and crisp teal emphasis. Use it when users need to scan ownership, status, and record details quickly.
Spreadsheet Data Grid UI Block
A polished, reusable data-grid section for product interfaces and executive or research reporting. Warm paper tones, working accessible controls, and aligned monospaced values make dense records easier to scan.
What you get
- A reusable table section with realistic sample records.
- Warm-neutral styling with focused teal actions and status cues.
- Responsive layout guidance for dense data and narrow screens.
Good fit
- Product and operations teams presenting editable records.
- Executive reports that need compact, legible data.
Not for
- Formula-heavy spreadsheet editors or multi-sheet workbooks.
- Dashboard pages dominated by charts and KPI cards.
What you provide
- Table purpose and intended audience.
- Column definitions and 5-6 representative records.
Requirements
- A modern browser
- Node.js 20+ for the validator
Running cost
No external services. Runs entirely on your agent.
Try this prompt
/sl-spreadsheet-data-grid-ui-block Create a one-section Research Spend showcase for product reviewers, with six projects showing each project’s ID, owner, status, update date, and cost. Use the heading “Research Spend” and the warm Index style.
Follow-up prompts
- Add a compact empty state and a working reset-filters action.
- Adapt the columns for a client campaign performance report.
Verification
Verified
| render-check | pass | 4.0 / 5 | 22s |
FAQ
Can I adapt the sample records to my own domain?
Yes. Replace the fictional records and labels with your data while preserving consistent value types and clear column alignment.
Does this create a complete spreadsheet app?
No. It creates one reusable page section. Formula editing, workbook navigation, and advanced cell interactions are outside its scope.
Similar skills
$4.99
$4.99Event Bar Chart UI Block
A reusable event comparison chart section with proportional bars, readable direct values, period context, and a concise takeaway for product pages and reports.
$4.99Dark Balance Chart UI Block
A focused, dark balance-chart section for showing inflows, outflows, and the resulting net over a stated reporting period. It pairs light, legible labels with restrained teal and clay accents and an explicit explanation of what the chart represents.
$4.99Paired Column Chart UI Block
A reusable paired-column chart section for comparing two measures across a handful of categories. Warm dark-clay surfaces, teal and clay bars, and clear labels make it suitable for executive reports and polished product pages.
FreeActivity Calendar Chart UI Block
Create a reusable activity calendar chart section that makes daily patterns legible at a glance. Its warm-neutral editorial styling combines an ink canvas, clay surfaces, and teal intensity cells for product analytics and executive reporting.
$4.99Particle Field Hero UI Block
A reusable launch hero that pairs warm clay and cream surfaces with a restrained, kinetic teal particle field. Made for product teams that want an atmospheric first screen without sacrificing readable messaging, responsive behavior, or accessible motion.
$4.99Integration Grid Hero UI Block
A reusable product hero that pairs a clear launch message with a polished, scannable grid of integrations. Its warm-neutral styling and restrained teal accents suit software launches that need to show ecosystem breadth without sacrificing clarity.
$4.99Angled Gallery Hero UI Block
A reusable product-launch hero that balances concise messaging with an art-directed, angled photo gallery. Designed for warm-neutral brands that want kinetic imagery, crisp contrast, and responsive behavior without a full-page template.