COPY-READY BLOCKS
Tables
Four copy-ready table blocks for directories, finance, project tracking, and empty states—with neutral surfaces that keep data easy to scan.
01 · TEAM DIRECTORY
Responsive rows with people, status, search, and pagination
Open full page
type DirectoryMember
id:string
name:string
role:string
company:string
email:string
location:string
status:string
page DashboardTablePage
signal search value:""
signal currentPage value:2
signal totalMembers value:110
signal loadState value:1
signal members type:DirectoryMember[] value:[]
const seedMembers:
value:[
{
id:"member-1"
name:"Jane Doe"
role:"Senior Designer"
company:"Northstar"
email:"jane@northstar.dev"
location:"Bogota"
status:"Active"
},
{
id:"member-2"
name:"Avery Morgan"
role:"Product Designer"
company:"Meridian"
email:"avery@meridian.dev"
location:"Lisbon"
status:"Active"
},
{
id:"member-3"
name:"Maya Ortiz"
role:"Design Engineer"
company:"Dowe"
email:"maya@dowe.dev"
location:"Mexico City"
status:"Active"
},
]
init
set members value:seedMembers
set loadState value:0
fn loadMembers
set loadState value:1
request result method:"GET" route:"/api/team-members/q-:search/:currentPage"
if result.ok
set members value:result.data.data
set totalMembers value:result.data.total
set loadState value:0
else
set loadState value:0
Section id:"dashboard-table" bg:"background" color:"backgroundText" minH:"vh-0" p:{ xs:4 md:8 }
Grid columns:1 gap:5
Title size:{ xs:"2xl" md:"4xl" } weight:"black"
"Dashboard"
Tabs variant:"line" position:"top" w:"full"
tab id:"documents" label:"Documents · 2"
Grid columns:1 gap:4 py:4
Flex justify:"end" w:"full"
Flex align:"end" gap:2 w:{ xs:"full" md:80 }
Input bind:search label:"Search" placeholder:"Search people" iconStart:"magnifier" variant:"solid" scheme:"muted" w:"full"
IconButton icon:"magnifier" label:"Load results" onClick:loadMembers
Grid show:{ when:loadState gt:0 }
Grid columns:1 gap:2
Skeleton variant:"rounded" h:12 w:"full"
Skeleton variant:"rounded" h:12 w:"full"
Skeleton variant:"rounded" h:12 w:"full"
Grid show:{ when:loadState lt:1 }
Grid columns:1 gap:0
Grid columns:{ xs:3 md:7 } gap:3 align:"center" p:3 border:1 borderColor:"muted"
Box w:4 h:4 rounded:"xs" border:1
Flex align:"center" gap:1
Text size:"xs" weight:"bold"
"Author"
Icon name:"arrow-down" w:4 h:4
Text size:"xs" weight:"bold" show:{ xs:false md:true }
"Company"
Text size:"xs" weight:"bold" show:{ xs:false md:true }
"Email"
Text size:"xs" weight:"bold" show:{ xs:false md:true }
"Location"
Text size:"xs" weight:"bold" show:{ xs:false md:true }
"Status"
Box
each in:members as:member key:member.id
Grid columns:{ xs:3 md:7 } gap:3 align:"center" p:3 border:1 borderColor:"muted"
Box w:4 h:4 rounded:"xs" border:1
Flex align:"center" gap:3
Avatar alt:"Team member avatar" variant:"soft" scheme:"muted" size:"md"
icon
Svg viewBox:"0 0 24 24" w:5 h:5
Path d:"M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" fill:"currentColor"
Grid columns:1 gap:0
Text size:"sm" weight:"bold"
"{member.name}"
Text size:"xs" color:"muted"
"{member.role}"
Text size:"sm" show:{ xs:false md:true }
"{member.company}"
Text size:"sm" show:{ xs:false md:true }
"{member.email}"
Text size:"sm" show:{ xs:false md:true }
"{member.location}"
Box bg:"softMuted" rounded:"full" px:3 py:1 show:{ xs:false md:true }
Text size:"xs"
"{member.status}"
IconButton icon:"menu-dots" label:"Open member actions" variant:"ghost" scheme:"muted" size:"sm"
Flex justify:"center" p:4
Pagination bind:currentPage total:totalMembers pageSize:10 onChange:loadMembers variant:"ghost" scheme:"primary" size:"sm" ariaLabel:"Team directory pages"
tab id:"overview" label:"Overview"
Text p:5 color:"muted"
"Overview content"
tab id:"tasks" label:"Tasks · 7"
Text p:5 color:"muted"
"Task content"
tab id:"team" label:"Team · 99+"
Text p:5 color:"muted"
"Team content"02 · INVOICE LEDGER
Amounts, due dates, and status in one scan
Open full page
type InvoiceRow
id:string
invoice:string
customer:string
issued:string
due:string
amount:string
status:string
page InvoiceTablePage
signal invoices type:InvoiceRow[] value:[
{
id:"INV-1048"
invoice:"INV-1048"
customer:"Northstar Studio"
issued:"Mar 04, 2025"
due:"Mar 18, 2025"
amount:"$4,280"
status:"Paid"
},
{
id:"INV-1047"
invoice:"INV-1047"
customer:"Meridian Labs"
issued:"Mar 01, 2025"
due:"Mar 15, 2025"
amount:"$2,940"
status:"Pending"
},
]
Section id:"invoice-ledger" bg:"background" color:"backgroundText" boxed:true minH:"vh-0" p:{ xs:6 md:12 }
Grid columns:1 gap:6
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Invoice ledger"
Table:
data:invoices
variant:"soft"
scheme:"surface"
size:"md"
striped:true
bordered:true
dividers:true
rounded:"md"
column field:"invoice" label:"Invoice" width:"0.9fr"
column field:"customer" label:"Customer" width:"1.5fr"
column field:"issued" label:"Issued" width:"1fr"
column field:"due" label:"Due" width:"1fr"
column field:"amount" label:"Amount" align:"end" width:"0.8fr"
column field:"status" label:"Status" align:"end" width:"0.9fr"03 · PROJECT STATUS
Progress snapshots for a working portfolio
Open full page
type ProjectRow
id:string
project:string
owner:string
team:string
progress:string
updated:string
status:string
page ProjectStatusTablePage
signal projects type:ProjectRow[] value:[
{
id:"project-website"
project:"Marketing website"
owner:"Maya Ortiz"
team:"Design · 4"
progress:"82%"
updated:"2h ago"
status:"On track"
},
{
id:"project-mobile"
project:"Mobile onboarding"
owner:"Kai Bennett"
team:"Product · 6"
progress:"64%"
updated:"Yesterday"
status:"Review"
},
]
Section id:"project-status" bg:"background" color:"backgroundText" boxed:true minH:"vh-0" p:{ xs:6 md:12 }
Grid columns:1 gap:6
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Project status"
Table:
data:projects
variant:"outlined"
scheme:"surface"
size:"sm"
striped:true
bordered:true
dividers:true
rounded:"md"
column field:"project" label:"Project" width:"1.6fr"
column field:"owner" label:"Owner" width:"1.2fr"
column field:"team" label:"Team" width:"1fr"
column field:"progress" label:"Progress" align:"end" width:"0.8fr"
column field:"updated" label:"Updated" align:"end" width:"1fr"
column field:"status" label:"Status" align:"end" width:"1fr"04 · EMPTY STATE
Make an empty workspace feel intentional
Open full page
type EmptyTableRow
name:string
owner:string
status:string
page EmptyTablePage
signal rows type:EmptyTableRow[] value:[]
Section id:"empty-table" bg:"background" color:"backgroundText" boxed:true minH:"vh-0" p:{ xs:6 md:12 }
Grid columns:1 gap:6
Title size:{ xs:"3xl" md:"5xl" } weight:"black"
"Release queue"
Table:
data:rows
variant:"soft"
scheme:"surface"
size:"md"
bordered:true
emptyTitle:"No releases yet"
emptyDescription:"Create a release to start tracking the next deployment."
rounded:"md"
column field:"name" label:"Release" width:"1.5fr"
column field:"owner" label:"Owner" width:"1fr"
column field:"status" label:"Status" align:"end" width:"1fr"