[{"data":1,"prerenderedAt":746},["ShallowReactive",2],{"navigation":3,"/recipes/booking-history":117,"/recipes/booking-history-surround":743},[4,11,98],{"title":5,"path":6,"stem":7,"children":8,"icon":10},"Introduction","/getting-started","1.getting-started/1.index",[9],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-house",{"title":12,"path":13,"stem":14,"children":15,"icon":17},"Component Catalog","/components","2.components/01.index",[16,18,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94],{"title":12,"path":13,"stem":14,"icon":17},"i-lucide-layout-grid",{"title":19,"path":20,"stem":21},"Text","/components/text","2.components/02.text",{"title":23,"path":24,"stem":25},"Button","/components/button","2.components/03.button",{"title":27,"path":28,"stem":29},"Slider","/components/slider","2.components/04.slider",{"title":31,"path":32,"stem":33},"ChoicePicker","/components/choicepicker","2.components/05.choicepicker",{"title":35,"path":36,"stem":37},"Modal","/components/modal","2.components/06.modal",{"title":39,"path":40,"stem":41},"DateTimeInput","/components/datetimeinput","2.components/07.datetimeinput",{"title":43,"path":44,"stem":45},"Image","/components/image","2.components/08.image",{"title":47,"path":48,"stem":49},"Icon","/components/icon","2.components/09.icon",{"title":51,"path":52,"stem":53},"Video","/components/video","2.components/10.video",{"title":55,"path":56,"stem":57},"AudioPlayer","/components/audioplayer","2.components/11.audioplayer",{"title":59,"path":60,"stem":61},"Row","/components/row","2.components/12.row",{"title":63,"path":64,"stem":65},"Column","/components/column","2.components/13.column",{"title":67,"path":68,"stem":69},"List","/components/list","2.components/14.list",{"title":71,"path":72,"stem":73},"Card","/components/card","2.components/15.card",{"title":75,"path":76,"stem":77},"Tabs","/components/tabs","2.components/16.tabs",{"title":79,"path":80,"stem":81},"Divider","/components/divider","2.components/17.divider",{"title":83,"path":84,"stem":85},"TextField","/components/textfield","2.components/18.textfield",{"title":87,"path":88,"stem":89},"CheckBox","/components/checkbox","2.components/19.checkbox",{"title":91,"path":92,"stem":93},"Slideover","/components/slideover","2.components/20.slideover",{"title":95,"path":96,"stem":97},"Table","/components/table","2.components/21.table",{"title":99,"path":100,"stem":101,"children":102,"icon":104},"Recipes","/recipes","3.recipes/01.index",[103,105,109,113],{"title":99,"path":100,"stem":101,"icon":104},"i-lucide-chef-hat",{"title":106,"path":107,"stem":108},"Booking Receipt","/recipes/booking-receipt","3.recipes/02.booking-receipt",{"title":110,"path":111,"stem":112},"Establishment Detail","/recipes/establishment-detail","3.recipes/03.establishment-detail",{"title":114,"path":115,"stem":116},"Booking History","/recipes/booking-history","3.recipes/04.booking-history",{"id":118,"title":114,"body":119,"description":735,"extension":736,"links":737,"meta":738,"navigation":740,"path":115,"seo":741,"stem":116,"__hash__":742},"docs/3.recipes/04.booking-history.md",{"type":120,"value":121,"toc":727},"minimark",[122,126,135,146,151,247,251,393,397,400,483,490,587,591,675,679,688,692,699,723],[123,124,114],"h1",{"id":125},"booking-history",[127,128,129,130,134],"p",{},"A structured table showing a customer's booking history — the kind of view ",[131,132,133],"strong",{},"Agent"," generates when a business owner asks to see recent bookings.",[127,136,137,138,140,141,145],{},"This recipe introduces the ",[131,139,95],{}," component — a new A2UI type that maps to Nuxt UI's ",[142,143,144],"code",{},"UTable"," (powered by TanStack Table). It lets AI agents present tabular data with typed columns, alignment, and row data without knowing TanStack internals.",[147,148,150],"h2",{"id":149},"a2ui-nuxt-ui-mapping","A2UI → Nuxt UI Mapping",[152,153,154,170],"table",{},[155,156,157],"thead",{},[158,159,160,164,167],"tr",{},[161,162,163],"th",{},"A2UI Property",[161,165,166],{},"Nuxt UI Prop",[161,168,169],{},"Notes",[171,172,173,197,216,233],"tbody",{},[158,174,175,181,190],{},[176,177,178],"td",{},[142,179,180],{},"columns",[176,182,183,185,186,189],{},[142,184,180],{}," (TanStack ColumnDef",[187,188],"span",{},")",[176,191,192,193,196],{},"Simplified: ",[142,194,195],{},"{ key, label, align }"," → auto-converted",[158,198,199,204,209],{},[176,200,201],{},[142,202,203],{},"rows",[176,205,206],{},[142,207,208],{},"data",[176,210,211,212,215],{},"Array of objects, keys match column ",[142,213,214],{},"key"," values",[158,217,218,223,230],{},[176,219,220],{},[142,221,222],{},"caption",[176,224,225,226,229],{},"rendered as ",[142,227,228],{},"\u003Cp>"," above table",[176,231,232],{},"Optional table description",[158,234,235,240,244],{},[176,236,237],{},[142,238,239],{},"sticky",[176,241,242],{},[142,243,239],{},[176,245,246],{},"Sticky header for scrollable tables",[147,248,250],{"id":249},"what-the-ai-generates","What the AI Generates",[252,253,258],"pre",{"className":254,"code":255,"language":256,"meta":257,"style":257},"language-jsonl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"booking_history\",\"catalogId\":\"standard\"}}\n{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"booking_history\",\"components\":[\n  {\"id\":\"root\",\"component\":\"Column\",\"children\":[\"page_title\",\"page_desc\",\"bookings_table\"]},\n  {\"id\":\"page_title\",\"component\":\"Text\",\"text\":\"Booking History\",\"variant\":\"heading\",\"level\":2},\n  {\"id\":\"page_desc\",\"component\":\"Text\",\"text\":\"Recent bookings for Drammen Wellness Studio\",\"variant\":\"muted\"},\n  {\"id\":\"bookings_table\",\"component\":\"Table\",\"caption\":\"Showing last 7 days\",\"columns\":[\n    {\"key\":\"id\",\"label\":\"#\",\"align\":\"left\"},\n    {\"key\":\"date\",\"label\":\"Date\",\"align\":\"left\"},\n    {\"key\":\"customer\",\"label\":\"Customer\",\"align\":\"left\"},\n    {\"key\":\"service\",\"label\":\"Service\",\"align\":\"left\"},\n    {\"key\":\"status\",\"label\":\"Status\",\"align\":\"center\"},\n    {\"key\":\"amount\",\"label\":\"Amount\",\"align\":\"right\"}\n  ],\"rows\":[\n    {\"id\":\"#1047\",\"date\":\"Feb 14, 14:00\",\"customer\":\"Guðrún Helgadóttir\",\"service\":\"Deep Tissue — 60 min\",\"status\":\"Confirmed\",\"amount\":\"12.900 ISK\"},\n    {\"id\":\"#1046\",\"date\":\"Feb 14, 11:30\",\"customer\":\"Jón Sigurðsson\",\"service\":\"Hot Stone — 90 min\",\"status\":\"Completed\",\"amount\":\"18.500 ISK\"},\n    {\"id\":\"#1045\",\"date\":\"Feb 13, 16:00\",\"customer\":\"Anna Kristjánsdóttir\",\"service\":\"Aromatherapy — 45 min\",\"status\":\"Completed\",\"amount\":\"9.900 ISK\"},\n    {\"id\":\"#1044\",\"date\":\"Feb 13, 10:00\",\"customer\":\"Ólafur Magnússon\",\"service\":\"Deep Tissue — 60 min\",\"status\":\"Cancelled\",\"amount\":\"12.900 ISK\"},\n    {\"id\":\"#1043\",\"date\":\"Feb 12, 15:30\",\"customer\":\"Sigrún Einarsdóttir\",\"service\":\"Hot Stone — 90 min\",\"status\":\"Completed\",\"amount\":\"18.500 ISK\"},\n    {\"id\":\"#1042\",\"date\":\"Feb 12, 09:00\",\"customer\":\"Björk Sveinsdóttir\",\"service\":\"Deep Tissue — 60 min\",\"status\":\"Completed\",\"amount\":\"12.900 ISK\"},\n    {\"id\":\"#1041\",\"date\":\"Feb 11, 13:00\",\"customer\":\"Einar Þórarinsson\",\"service\":\"Aromatherapy — 45 min\",\"status\":\"No-show\",\"amount\":\"9.900 ISK\"}\n  ]}\n]}}\n","jsonl","",[142,259,260,267,273,279,285,291,297,303,309,315,321,327,333,339,345,351,357,363,369,375,381,387],{"__ignoreMap":257},[187,261,264],{"class":262,"line":263},"line",1,[187,265,266],{},"{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"booking_history\",\"catalogId\":\"standard\"}}\n",[187,268,270],{"class":262,"line":269},2,[187,271,272],{},"{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"booking_history\",\"components\":[\n",[187,274,276],{"class":262,"line":275},3,[187,277,278],{},"  {\"id\":\"root\",\"component\":\"Column\",\"children\":[\"page_title\",\"page_desc\",\"bookings_table\"]},\n",[187,280,282],{"class":262,"line":281},4,[187,283,284],{},"  {\"id\":\"page_title\",\"component\":\"Text\",\"text\":\"Booking History\",\"variant\":\"heading\",\"level\":2},\n",[187,286,288],{"class":262,"line":287},5,[187,289,290],{},"  {\"id\":\"page_desc\",\"component\":\"Text\",\"text\":\"Recent bookings for Drammen Wellness Studio\",\"variant\":\"muted\"},\n",[187,292,294],{"class":262,"line":293},6,[187,295,296],{},"  {\"id\":\"bookings_table\",\"component\":\"Table\",\"caption\":\"Showing last 7 days\",\"columns\":[\n",[187,298,300],{"class":262,"line":299},7,[187,301,302],{},"    {\"key\":\"id\",\"label\":\"#\",\"align\":\"left\"},\n",[187,304,306],{"class":262,"line":305},8,[187,307,308],{},"    {\"key\":\"date\",\"label\":\"Date\",\"align\":\"left\"},\n",[187,310,312],{"class":262,"line":311},9,[187,313,314],{},"    {\"key\":\"customer\",\"label\":\"Customer\",\"align\":\"left\"},\n",[187,316,318],{"class":262,"line":317},10,[187,319,320],{},"    {\"key\":\"service\",\"label\":\"Service\",\"align\":\"left\"},\n",[187,322,324],{"class":262,"line":323},11,[187,325,326],{},"    {\"key\":\"status\",\"label\":\"Status\",\"align\":\"center\"},\n",[187,328,330],{"class":262,"line":329},12,[187,331,332],{},"    {\"key\":\"amount\",\"label\":\"Amount\",\"align\":\"right\"}\n",[187,334,336],{"class":262,"line":335},13,[187,337,338],{},"  ],\"rows\":[\n",[187,340,342],{"class":262,"line":341},14,[187,343,344],{},"    {\"id\":\"#1047\",\"date\":\"Feb 14, 14:00\",\"customer\":\"Guðrún Helgadóttir\",\"service\":\"Deep Tissue — 60 min\",\"status\":\"Confirmed\",\"amount\":\"12.900 ISK\"},\n",[187,346,348],{"class":262,"line":347},15,[187,349,350],{},"    {\"id\":\"#1046\",\"date\":\"Feb 14, 11:30\",\"customer\":\"Jón Sigurðsson\",\"service\":\"Hot Stone — 90 min\",\"status\":\"Completed\",\"amount\":\"18.500 ISK\"},\n",[187,352,354],{"class":262,"line":353},16,[187,355,356],{},"    {\"id\":\"#1045\",\"date\":\"Feb 13, 16:00\",\"customer\":\"Anna Kristjánsdóttir\",\"service\":\"Aromatherapy — 45 min\",\"status\":\"Completed\",\"amount\":\"9.900 ISK\"},\n",[187,358,360],{"class":262,"line":359},17,[187,361,362],{},"    {\"id\":\"#1044\",\"date\":\"Feb 13, 10:00\",\"customer\":\"Ólafur Magnússon\",\"service\":\"Deep Tissue — 60 min\",\"status\":\"Cancelled\",\"amount\":\"12.900 ISK\"},\n",[187,364,366],{"class":262,"line":365},18,[187,367,368],{},"    {\"id\":\"#1043\",\"date\":\"Feb 12, 15:30\",\"customer\":\"Sigrún Einarsdóttir\",\"service\":\"Hot Stone — 90 min\",\"status\":\"Completed\",\"amount\":\"18.500 ISK\"},\n",[187,370,372],{"class":262,"line":371},19,[187,373,374],{},"    {\"id\":\"#1042\",\"date\":\"Feb 12, 09:00\",\"customer\":\"Björk Sveinsdóttir\",\"service\":\"Deep Tissue — 60 min\",\"status\":\"Completed\",\"amount\":\"12.900 ISK\"},\n",[187,376,378],{"class":262,"line":377},20,[187,379,380],{},"    {\"id\":\"#1041\",\"date\":\"Feb 11, 13:00\",\"customer\":\"Einar Þórarinsson\",\"service\":\"Aromatherapy — 45 min\",\"status\":\"No-show\",\"amount\":\"9.900 ISK\"}\n",[187,382,384],{"class":262,"line":383},21,[187,385,386],{},"  ]}\n",[187,388,390],{"class":262,"line":389},22,[187,391,392],{},"]}}\n",[147,394,396],{"id":395},"column-definition-simplified","Column Definition (Simplified)",[127,398,399],{},"The A2UI Table uses a simplified column format that LLMs can easily produce — no TanStack knowledge required:",[252,401,405],{"className":402,"code":403,"language":404,"meta":257,"style":257},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"key\": \"status\",\n  \"label\": \"Status\",\n  \"align\": \"center\"\n}\n","json",[142,406,407,413,439,459,478],{"__ignoreMap":257},[187,408,409],{"class":262,"line":263},[187,410,412],{"class":411},"sMK4o","{\n",[187,414,415,418,421,424,427,430,434,436],{"class":262,"line":269},[187,416,417],{"class":411},"  \"",[187,419,214],{"class":420},"spNyl",[187,422,423],{"class":411},"\"",[187,425,426],{"class":411},":",[187,428,429],{"class":411}," \"",[187,431,433],{"class":432},"sfazB","status",[187,435,423],{"class":411},[187,437,438],{"class":411},",\n",[187,440,441,443,446,448,450,452,455,457],{"class":262,"line":275},[187,442,417],{"class":411},[187,444,445],{"class":420},"label",[187,447,423],{"class":411},[187,449,426],{"class":411},[187,451,429],{"class":411},[187,453,454],{"class":432},"Status",[187,456,423],{"class":411},[187,458,438],{"class":411},[187,460,461,463,466,468,470,472,475],{"class":262,"line":281},[187,462,417],{"class":411},[187,464,465],{"class":420},"align",[187,467,423],{"class":411},[187,469,426],{"class":411},[187,471,429],{"class":411},[187,473,474],{"class":432},"center",[187,476,477],{"class":411},"\"\n",[187,479,480],{"class":262,"line":287},[187,481,482],{"class":411},"}\n",[127,484,485,486,489],{},"This is automatically converted to a TanStack ",[142,487,488],{},"ColumnDef"," at render time:",[252,491,495],{"className":492,"code":493,"language":494,"meta":257,"style":257},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  accessorKey: 'status',\n  header: 'Status',\n  meta: { class: { th: 'text-center', td: 'text-center' } }\n}\n","ts",[142,496,497,501,519,534,583],{"__ignoreMap":257},[187,498,499],{"class":262,"line":263},[187,500,412],{"class":411},[187,502,503,507,509,512,514,517],{"class":262,"line":269},[187,504,506],{"class":505},"sBMFI","  accessorKey",[187,508,426],{"class":411},[187,510,511],{"class":411}," '",[187,513,433],{"class":432},[187,515,516],{"class":411},"'",[187,518,438],{"class":411},[187,520,521,524,526,528,530,532],{"class":262,"line":275},[187,522,523],{"class":505},"  header",[187,525,426],{"class":411},[187,527,511],{"class":411},[187,529,454],{"class":432},[187,531,516],{"class":411},[187,533,438],{"class":411},[187,535,536,539,541,544,547,549,551,554,556,558,561,563,566,569,571,573,575,577,580],{"class":262,"line":281},[187,537,538],{"class":505},"  meta",[187,540,426],{"class":411},[187,542,543],{"class":411}," {",[187,545,546],{"class":505}," class",[187,548,426],{"class":411},[187,550,543],{"class":411},[187,552,553],{"class":505}," th",[187,555,426],{"class":411},[187,557,511],{"class":411},[187,559,560],{"class":432},"text-center",[187,562,516],{"class":411},[187,564,565],{"class":411},",",[187,567,568],{"class":505}," td",[187,570,426],{"class":411},[187,572,511],{"class":411},[187,574,560],{"class":432},[187,576,516],{"class":411},[187,578,579],{"class":411}," }",[187,581,582],{"class":411}," }\n",[187,584,585],{"class":262,"line":287},[187,586,482],{"class":411},[147,588,590],{"id":589},"component-properties","Component Properties",[152,592,593,609],{},[155,594,595],{},[158,596,597,600,603,606],{},[161,598,599],{},"Property",[161,601,602],{},"Type",[161,604,605],{},"Required",[161,607,608],{},"Description",[171,610,611,628,646,661],{},[158,612,613,617,622,625],{},[176,614,615],{},[142,616,180],{},[176,618,619],{},[142,620,621],{},"Array\u003C{ key, label, align? }>",[176,623,624],{},"Yes",[176,626,627],{},"Column definitions",[158,629,630,634,639,641],{},[176,631,632],{},[142,633,203],{},[176,635,636],{},[142,637,638],{},"Array\u003CRecord\u003Cstring, unknown>>",[176,640,624],{},[176,642,643,644,215],{},"Table data — each object's keys should match column ",[142,645,214],{},[158,647,648,652,655,658],{},[176,649,650],{},[142,651,222],{},[176,653,654],{},"string",[176,656,657],{},"No",[176,659,660],{},"Description text above the table",[158,662,663,667,670,672],{},[176,664,665],{},[142,666,239],{},[176,668,669],{},"boolean",[176,671,657],{},[176,673,674],{},"Makes the header stick when scrolling",[147,676,678],{"id":677},"try-it","Try It",[127,680,681,682,687],{},"Paste the JSONL above into the ",[683,684,686],"a",{"href":685},"/playground","Playground"," to see the table render live.",[147,689,691],{"id":690},"real-world-context","Real-World Context",[127,693,694,695,698],{},"In the ",[131,696,697],{},"AI Agents"," platform, this table appears when:",[700,701,702,714,717,720],"ul",{},[703,704,705,706,709,710],"li",{},"A ",[131,707,708],{},"business owner"," asks Agent: ",[711,712,713],"em",{},"\"Show me this week's bookings\"",[703,715,716],{},"Agent queries the booking data and streams a Table component",[703,718,719],{},"The table renders progressively — columns appear first, then rows populate",[703,721,722],{},"Business owners can scan status at a glance: Confirmed, Completed, Cancelled, No-show",[724,725,726],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":257,"searchDepth":263,"depth":269,"links":728},[729,730,731,732,733,734],{"id":149,"depth":269,"text":150},{"id":249,"depth":269,"text":250},{"id":395,"depth":269,"text":396},{"id":589,"depth":269,"text":590},{"id":677,"depth":269,"text":678},{"id":690,"depth":269,"text":691},"A data table showing booking records with status, dates, and amounts — introduces the Table component for structured data.","md",null,{"icon":739},"i-lucide-table",true,{"title":114,"description":735},"flNIeK0EvLlZZoUflrh7AgvoNM70p89pw1xpZp7RHDI",[744,737],{"title":110,"path":111,"stem":112,"description":745,"children":-1},"A slideover panel revealing venue information — demonstrates the Slideover component with nested layout composition.",1771187321370]