[{"data":1,"prerenderedAt":547},["ShallowReactive",2],{"navigation":3,"/components/table":117,"/components/table-surround":542},[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":95,"body":119,"description":535,"extension":536,"links":537,"meta":538,"navigation":539,"path":96,"seo":540,"stem":97,"__hash__":541},"docs/2.components/21.table.md",{"type":120,"value":121,"toc":527},"minimark",[122,126,135,154,159,252,256,338,342,439,444,510,514,523],[123,124,95],"h1",{"id":125},"table",[127,128,129,130,134],"p",{},"A data table for presenting structured information — maps to Nuxt UI's ",[131,132,133],"code",{},"UTable"," (powered by TanStack Table).",[127,136,137,138,141,142,145,146,149,150,153],{},"The Table component uses a simplified column format that AI agents can easily generate. Columns are defined with ",[131,139,140],{},"key",", ",[131,143,144],{},"label",", and optional ",[131,147,148],{},"align"," — A2NUI automatically converts these to TanStack ",[131,151,152],{},"ColumnDef"," objects at render time.",[155,156,158],"h2",{"id":157},"a2ui-nuxt-ui-mapping","A2UI → Nuxt UI Mapping",[125,160,161,177],{},[162,163,164],"thead",{},[165,166,167,171,174],"tr",{},[168,169,170],"th",{},"A2UI Property",[168,172,173],{},"Nuxt UI Prop",[168,175,176],{},"Notes",[178,179,180,204,222,238],"tbody",{},[165,181,182,188,197],{},[183,184,185],"td",{},[131,186,187],{},"columns",[183,189,190,192,193,196],{},[131,191,187],{}," (TanStack ColumnDef",[194,195],"span",{},")",[183,198,199,200,203],{},"Simplified ",[131,201,202],{},"{ key, label, align }"," auto-converted",[165,205,206,211,216],{},[183,207,208],{},[131,209,210],{},"rows",[183,212,213],{},[131,214,215],{},"data",[183,217,218,219,221],{},"Array of objects — keys match column ",[131,220,140],{}," values",[165,223,224,229,235],{},[183,225,226],{},[131,227,228],{},"caption",[183,230,231,232],{},"rendered as ",[131,233,234],{},"\u003Cp>",[183,236,237],{},"Description text above the table",[165,239,240,245,249],{},[183,241,242],{},[131,243,244],{},"sticky",[183,246,247],{},[131,248,244],{},[183,250,251],{},"Sticky header for scrollable content",[155,253,255],{"id":254},"example-jsonl","Example JSONL",[257,258,263],"pre",{"className":259,"code":260,"language":261,"meta":262,"style":262},"language-jsonl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"table_demo\",\"catalogId\":\"standard\"}}\n{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"table_demo\",\"components\":[\n  {\"id\":\"root\",\"component\":\"Table\",\"columns\":[\n    {\"key\":\"name\",\"label\":\"Name\",\"align\":\"left\"},\n    {\"key\":\"role\",\"label\":\"Role\",\"align\":\"left\"},\n    {\"key\":\"status\",\"label\":\"Status\",\"align\":\"center\"}\n  ],\"rows\":[\n    {\"name\":\"Elísabet Jónsdóttir\",\"role\":\"Lead Therapist\",\"status\":\"Active\"},\n    {\"name\":\"Ólafur Magnússon\",\"role\":\"Receptionist\",\"status\":\"Active\"},\n    {\"name\":\"Sigrún Einarsdóttir\",\"role\":\"Therapist\",\"status\":\"On Leave\"}\n  ]}\n]}}\n","jsonl","",[131,264,265,272,278,284,290,296,302,308,314,320,326,332],{"__ignoreMap":262},[194,266,269],{"class":267,"line":268},"line",1,[194,270,271],{},"{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"table_demo\",\"catalogId\":\"standard\"}}\n",[194,273,275],{"class":267,"line":274},2,[194,276,277],{},"{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"table_demo\",\"components\":[\n",[194,279,281],{"class":267,"line":280},3,[194,282,283],{},"  {\"id\":\"root\",\"component\":\"Table\",\"columns\":[\n",[194,285,287],{"class":267,"line":286},4,[194,288,289],{},"    {\"key\":\"name\",\"label\":\"Name\",\"align\":\"left\"},\n",[194,291,293],{"class":267,"line":292},5,[194,294,295],{},"    {\"key\":\"role\",\"label\":\"Role\",\"align\":\"left\"},\n",[194,297,299],{"class":267,"line":298},6,[194,300,301],{},"    {\"key\":\"status\",\"label\":\"Status\",\"align\":\"center\"}\n",[194,303,305],{"class":267,"line":304},7,[194,306,307],{},"  ],\"rows\":[\n",[194,309,311],{"class":267,"line":310},8,[194,312,313],{},"    {\"name\":\"Elísabet Jónsdóttir\",\"role\":\"Lead Therapist\",\"status\":\"Active\"},\n",[194,315,317],{"class":267,"line":316},9,[194,318,319],{},"    {\"name\":\"Ólafur Magnússon\",\"role\":\"Receptionist\",\"status\":\"Active\"},\n",[194,321,323],{"class":267,"line":322},10,[194,324,325],{},"    {\"name\":\"Sigrún Einarsdóttir\",\"role\":\"Therapist\",\"status\":\"On Leave\"}\n",[194,327,329],{"class":267,"line":328},11,[194,330,331],{},"  ]}\n",[194,333,335],{"class":267,"line":334},12,[194,336,337],{},"]}}\n",[155,339,341],{"id":340},"properties","Properties",[125,343,344,363],{},[162,345,346],{},[165,347,348,351,354,357,360],{},[168,349,350],{},"Property",[168,352,353],{},"Type",[168,355,356],{},"Required",[168,358,359],{},"Default",[168,361,362],{},"Description",[178,364,365,385,403,420],{},[165,366,367,371,376,379,382],{},[183,368,369],{},[131,370,187],{},[183,372,373],{},[131,374,375],{},"Array\u003C{ key, label, align? }>",[183,377,378],{},"Yes",[183,380,381],{},"—",[183,383,384],{},"Column definitions",[165,386,387,391,396,398,400],{},[183,388,389],{},[131,390,210],{},[183,392,393],{},[131,394,395],{},"Array\u003CRecord\u003Cstring, unknown>>",[183,397,378],{},[183,399,381],{},[183,401,402],{},"Table data",[165,404,405,409,412,415,417],{},[183,406,407],{},[131,408,228],{},[183,410,411],{},"string",[183,413,414],{},"No",[183,416,381],{},[183,418,419],{},"Description shown above the table",[165,421,422,426,429,431,436],{},[183,423,424],{},[131,425,244],{},[183,427,428],{},"boolean",[183,430,414],{},[183,432,433],{},[131,434,435],{},"false",[183,437,438],{},"Sticky table header",[440,441,443],"h3",{"id":442},"column-object","Column Object",[125,445,446,459],{},[162,447,448],{},[165,449,450,453,455,457],{},[168,451,452],{},"Field",[168,454,353],{},[168,456,356],{},[168,458,362],{},[178,460,461,474,487],{},[165,462,463,467,469,471],{},[183,464,465],{},[131,466,140],{},[183,468,411],{},[183,470,378],{},[183,472,473],{},"The property name in each row object",[165,475,476,480,482,484],{},[183,477,478],{},[131,479,144],{},[183,481,411],{},[183,483,378],{},[183,485,486],{},"Displayed column header text",[165,488,489,493,505,507],{},[183,490,491],{},[131,492,148],{},[183,494,495,498,499,498,502],{},[131,496,497],{},"left"," | ",[131,500,501],{},"center",[131,503,504],{},"right",[183,506,414],{},[183,508,509],{},"Text alignment for header and cells",[155,511,513],{"id":512},"try-it","Try It",[127,515,516,517,522],{},"Paste the JSONL above into the ",[518,519,521],"a",{"href":520},"/playground","Playground"," to see it render.",[524,525,526],"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);}",{"title":262,"searchDepth":268,"depth":274,"links":528},[529,530,531,534],{"id":157,"depth":274,"text":158},{"id":254,"depth":274,"text":255},{"id":340,"depth":274,"text":341,"children":532},[533],{"id":442,"depth":280,"text":443},{"id":512,"depth":274,"text":513},"Structured tabular data display with typed columns, alignment, and automatic TanStack Table integration.","md",null,{},true,{"title":95,"description":535},"ZoAMGJZkbah0vktJlsjkA60_lI3MZG9EYRES5LJNhx4",[543,545],{"title":91,"path":92,"stem":93,"description":544,"children":-1},"A panel that slides in from the edge of the screen. Ideal for detail views, forms, and secondary content.",{"title":99,"path":100,"stem":101,"description":546,"icon":104,"children":-1},"Real-world A2UI composition patterns — how AI agents build complete interfaces from standard catalog components.",1771187321369]