King Aguirre

Render settings

Look
Motion

X04 Lab · Interface

Typed Grid

A small, keyboard-first data grid over this site's own project catalog. A demo, not the Data Table Pro product.
  • Arrow keys move between cells
  • Enter sorts a column
  • Type to filter
  • Home and End jump
BuildSectorStatusCommitsFirst commit
GiftlyPHCommerceLive3882026-06-09
VibeBoxWeb studio and product ecosystemLive2882026-06-06
VibeBox MotionMotion and 3D component libraryLive2882026-06-06
KabanPersonal financeBeta1472026-07-10
Karaoke NightEntertainmentLive1042026-09-13
Data Table ProDeveloper toolsLive822026-03-04
AAM Van RentalTransportLive782026-05-28
KaiFitness and nutritionBeta482026-10-11
WobbiEarly learningLive482026-10-08
DayoTravel and local discoveryDemo212026-10-07
Trident PHInsuranceLive192026-07-01
React Component KitDeveloper toolsLive182026-03-15
EmdeeHealth supplementsLive182026-10-11
KahaRetail point of saleBeta132026-10-11
The Event CornerEvent rentalsLive122026-07-23
TicketBoxPHEvent ticketingLive102026-06-25
Barty BakesBakeryPreview92026-10-11
Uy TrendingDigital mediaDemo92026-10-07
EnclaveCoffee and coworkingLive62026-10-06
ShortscapeFilm streamingDemo22026-10-07

20 rows, sorted by commits descending.

How How it is made

The wireframe of it.

  1. Columns are typed against the Project model, so a sort key that does not exist is a type error.
  2. Roving tab index: one cell is tabbable at a time and arrow keys move focus, which is the grid pattern screen readers expect.
  3. Rows are the real catalog, the same data the work pages use.

Performance

Twenty rows, no virtualization needed; Data Table Pro is where virtualization lives.

Without WebGL, or with motion set to Still

It is plain HTML; it works without animation.

  1. Next on the bench · Procedural 3DRender Kit
  2. Next on the bench · Creature motionProcedural Spine
  3. Next on the bench · 2D canvasBucket Renderer
  4. Next on the bench · Motion systemMotion Tokens