DataGrid
Layout 13 — Spreadsheet / Table-First Database
A dense, precise data tool with green accents inspired by Airtable meets Excel Online. Features a production-grade spreadsheet grid, browser-tab-style table navigation, CRM customer data, and signature motion animations including cell selection highlight sweep and row hover depth shadow.
Design System
Typography
UI & Labels
Geist Sans
Cell Data & Code
JetBrains Mono
Color Palette
CSS Custom Properties
--dg-bg#ffffff--dg-accent#22c55e--dg-accent-dark#16a34a--dg-border#e0e5e0--dg-text#1a2e1a--dg-text-secondary#5a6b5a--dg-topbar#1b2e1b--dg-cell-activergba(34,197,94,0.15)Features & Animations
Dense Spreadsheet Grid
18 rows of realistic CRM customer data with 6 typed columns: text, email, status badge, date, currency, and tag chips. 1px borders, row striping, and row numbers.
Cell Selection Highlight
Signature animation: clicking a cell triggers a green-bordered highlight with scale sweep using motion's AnimatePresence. The active cell has a 2px green outline with a soft glow shadow.
Row Hover Depth Shadow
Signature animation: hovering a row adds a subtle box-shadow creating a depth/lift effect. Combined with z-index elevation for a tactile spreadsheet feel.
Table Tabs with Slide Indicator
Browser-tab-style navigation with motion layoutId for smooth green accent indicator slide between tabs. Tabs for Customers, Views, Forms, Automations, and Imports.
Staggered Row Entrance
Data rows animate in with staggered opacity and y-translation using motion. Each row enters 20ms after the previous for a cascading fill effect.
Interactive Column Sort & Resize
Click column headers to cycle through ascending, descending, and unsorted states. Drag column edges to resize. Visual indicators show sort direction with green accent.
Tech Stack
Dependencies
motion/react
Animation library
lucide-react
Icon set
next/navigation
Routing & pathname
tailwindcss
Utility CSS