Data table
On long tables (the audit log) the header row sticks under the top bar while the body scrolls, and the toolbar sticks above it. Needs the kit v2 `overflow:clip` shell so sticky works on a real page.
Lifted from the approved family page at build time; interact with it.
Scroll inside the table: the header stays. Rows open to show before and after.
| Expand | Timestamp | Who | Action | Entity | Request |
|---|---|---|---|---|---|
| 2026-10-11 14:20:07 | staff: Mei | update | master_product / 3f2c9a1e… | req_01JA7Q3K8MZC4W | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-11 14:02:51 | staff: Mei | publish | website_release / v3 | req_01JA7P2D9TQ6XR | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-11 13:47:10 | api_key: mcp-doors | update | offer_price / 8d41c0b2… | req_01JA7N8V1HJ3KD | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-11 12:31:44 | system: cloth-mirror | sync | cloth / HS 81045 | req_01JA7J5R4WB2NE | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-11 11:15:02 | staff: Tom | create | master_product / c97e2f10… | req_01JA7E9K2PM7SV | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-11 10:58:39 | staff: Tom | update | master_product / c97e2f10… | req_01JA7D7Y6CG1QT | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-10 17:40:12 | staff: Priya | update | brand_settings / rj-clothing | req_01JA5B3N8ZF4LA | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-10 16:05:55 | staff: Tom | create | master_product / 41b8e6d3… | req_01JA58Q2XKV9HM | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-10 15:22:30 | api_key: studio-sync | revoke | api_key / key_live_…7c2a | req_01JA56M4TRS8PB | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-10 11:09:48 | staff: Mei | update | master_product / e2a07d94… | req_01JA4R7H5NW3YC | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-09 18:31:16 | system: cloth-mirror | sync | cloth / VBC 218.1003 | req_01JA2F1Q9DL6ZU | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
| 2026-10-09 09:12:03 | staff: Priya | publish | website_release / v2 | req_01JA0X4B7GE2MJ | |
Before{
"handle": "navy-birdseye-two-piece",
"status": "draft",
"version": 3,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} After{
"handle": "navy-birdseye-two-piece",
"status": "available",
"version": 4,
"recommended_price": {
"GBP": 1150, "EUR": 1320, "USD": 1450
}
} | |||||
shadcn TableCollapsibleTanStack getExpandedRowModelth position:sticky.dt-scroll.y.dt-json--font-code from families/data-table/#sticky-header
The frame, main column and phone frame clip instead of hiding overflow, so a sticky top bar, toolbar or save bar sticks on a real page.
Nothing to see changes: overflow:clip clips exactly like hidden but is not a scroll container, so position:sticky children stick to the page scroll.
.frame{overflow:clip}.main{overflow:clip}.phone{overflow:clip} from families/page-primitives/#shell