[{"data":1,"prerenderedAt":1740},["ShallowReactive",2],{"navigation_docs":3,"-colorffy-ui-components-datatable":273,"-colorffy-ui-components-datatable-surround":1735},[4,21,115],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Colorffy CSS","i-lucide-palette","\u002Fcolorffy-css","2.colorffy-css",[27,32,37,42,78,99],{"title":28,"path":29,"stem":30,"icon":31},"Overview","\u002Fcolorffy-css\u002Foverview","2.colorffy-css\u002F1.overview","i-lucide-book-open",{"title":33,"path":34,"stem":35,"icon":36},"Color System","\u002Fcolorffy-css\u002Fcolor-system","2.colorffy-css\u002F2.color-system","i-lucide-droplet",{"title":38,"path":39,"stem":40,"icon":41},"Customization","\u002Fcolorffy-css\u002Fcustomization","2.colorffy-css\u002F3.customization","i-lucide-settings",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":20},"Utilities","i-lucide-wrench","\u002Fcolorffy-css\u002Futilities","2.colorffy-css\u002F4.utilities",[48,53,58,63,68,73],{"title":49,"path":50,"stem":51,"icon":52},"Borders & Shadows","\u002Fcolorffy-css\u002Futilities\u002Fborders-shadows","2.colorffy-css\u002F4.utilities\u002F01.borders-shadows","i-lucide-frame",{"title":54,"path":55,"stem":56,"icon":57},"Colors & Gradients","\u002Fcolorffy-css\u002Futilities\u002Fcolors-gradients","2.colorffy-css\u002F4.utilities\u002F02.colors-gradients","i-lucide-paint-bucket",{"title":59,"path":60,"stem":61,"icon":62},"Display & Flexbox","\u002Fcolorffy-css\u002Futilities\u002Fdisplay-flexbox","2.colorffy-css\u002F4.utilities\u002F03.display-flexbox","i-lucide-stretch-horizontal",{"title":64,"path":65,"stem":66,"icon":67},"Effects","\u002Fcolorffy-css\u002Futilities\u002Feffects","2.colorffy-css\u002F4.utilities\u002F04.effects","i-lucide-wand-sparkles",{"title":69,"path":70,"stem":71,"icon":72},"Spacing","\u002Fcolorffy-css\u002Futilities\u002Fspacing","2.colorffy-css\u002F4.utilities\u002F05.spacing","i-lucide-ruler",{"title":74,"path":75,"stem":76,"icon":77},"Typography","\u002Fcolorffy-css\u002Futilities\u002Ftypography","2.colorffy-css\u002F4.utilities\u002F06.typography","i-lucide-type",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":20},"Layout","i-lucide-layout-template","\u002Fcolorffy-css\u002Flayout","2.colorffy-css\u002F5.layout",[84,89,94],{"title":85,"path":86,"stem":87,"icon":88},"App Layout","\u002Fcolorffy-css\u002Flayout\u002Fapp-layout","2.colorffy-css\u002F5.layout\u002F01.app-layout","i-lucide-app-window",{"title":90,"path":91,"stem":92,"icon":93},"Flex Grid","\u002Fcolorffy-css\u002Flayout\u002Fflex-grid","2.colorffy-css\u002F5.layout\u002F02.flex-grid","i-lucide-columns-3",{"title":95,"path":96,"stem":97,"icon":98},"Grid","\u002Fcolorffy-css\u002Flayout\u002Fgrid","2.colorffy-css\u002F5.layout\u002F03.grid","i-lucide-grid-3x3",{"title":100,"icon":101,"path":102,"stem":103,"children":104,"page":20},"SCSS API","i-lucide-braces","\u002Fcolorffy-css\u002Fscss-api","2.colorffy-css\u002F6.scss-api",[105,110],{"title":106,"path":107,"stem":108,"icon":109},"Mixins","\u002Fcolorffy-css\u002Fscss-api\u002Fmixins","2.colorffy-css\u002F6.scss-api\u002F01.mixins","i-lucide-code",{"title":111,"path":112,"stem":113,"icon":114},"Tonal Tokens","\u002Fcolorffy-css\u002Fscss-api\u002Ftonal-tokens","2.colorffy-css\u002F6.scss-api\u002F02.tonal-tokens","i-lucide-swatch-book",{"title":116,"icon":117,"path":118,"stem":119,"children":120,"page":20},"Colorffy UI","i-lucide-blocks","\u002Fcolorffy-ui","3.colorffy-ui",[121,125,268],{"title":122,"path":123,"stem":124,"icon":31},"Usage","\u002Fcolorffy-ui\u002Fusage","3.colorffy-ui\u002F1.usage",{"title":126,"icon":127,"path":128,"stem":129,"children":130,"page":20},"Components","i-lucide-component","\u002Fcolorffy-ui\u002Fcomponents","3.colorffy-ui\u002F2.components",[131,135,140,145,150,155,160,165,170,175,180,185,190,195,200,204,209,214,218,223,228,233,238,243,248,253,258,263],{"title":28,"path":132,"stem":133,"icon":134},"\u002Fcolorffy-ui\u002Fcomponents\u002Foverview","3.colorffy-ui\u002F2.components\u002F00.overview","i-lucide-layout-grid",{"title":136,"path":137,"stem":138,"icon":139},"Accordion","\u002Fcolorffy-ui\u002Fcomponents\u002Faccordion","3.colorffy-ui\u002F2.components\u002F01.accordion","i-lucide-chevrons-down-up",{"title":141,"path":142,"stem":143,"icon":144},"Alert","\u002Fcolorffy-ui\u002Fcomponents\u002Falert","3.colorffy-ui\u002F2.components\u002F02.alert","i-lucide-triangle-alert",{"title":146,"path":147,"stem":148,"icon":149},"Avatar","\u002Fcolorffy-ui\u002Fcomponents\u002Favatar","3.colorffy-ui\u002F2.components\u002F03.avatar","i-lucide-circle-user",{"title":151,"path":152,"stem":153,"icon":154},"Badge","\u002Fcolorffy-ui\u002Fcomponents\u002Fbadge","3.colorffy-ui\u002F2.components\u002F04.badge","i-lucide-tag",{"title":156,"path":157,"stem":158,"icon":159},"Breadcrumb","\u002Fcolorffy-ui\u002Fcomponents\u002Fbreadcrumb","3.colorffy-ui\u002F2.components\u002F05.breadcrumb","i-lucide-chevron-right",{"title":161,"path":162,"stem":163,"icon":164},"Button","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton","3.colorffy-ui\u002F2.components\u002F06.button","i-lucide-square-mouse-pointer",{"title":166,"path":167,"stem":168,"icon":169},"Button Group","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-group","3.colorffy-ui\u002F2.components\u002F07.button-group","i-lucide-square-stack",{"title":171,"path":172,"stem":173,"icon":174},"Button Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fbutton-menu","3.colorffy-ui\u002F2.components\u002F08.button-menu","i-lucide-menu",{"title":176,"path":177,"stem":178,"icon":179},"Card","\u002Fcolorffy-ui\u002Fcomponents\u002Fcard","3.colorffy-ui\u002F2.components\u002F09.card","i-lucide-square",{"title":181,"path":182,"stem":183,"icon":184},"Datatable","\u002Fcolorffy-ui\u002Fcomponents\u002Fdatatable","3.colorffy-ui\u002F2.components\u002F10.datatable","i-lucide-table",{"title":186,"path":187,"stem":188,"icon":189},"Empty","\u002Fcolorffy-ui\u002Fcomponents\u002Fempty","3.colorffy-ui\u002F2.components\u002F11.empty","i-lucide-inbox",{"title":191,"path":192,"stem":193,"icon":194},"Icons","\u002Fcolorffy-ui\u002Fcomponents\u002Ficons","3.colorffy-ui\u002F2.components\u002F12.icons","i-lucide-shapes",{"title":196,"path":197,"stem":198,"icon":199},"Inputs","\u002Fcolorffy-ui\u002Fcomponents\u002Finputs","3.colorffy-ui\u002F2.components\u002F13.inputs","i-lucide-text-cursor-input",{"title":79,"path":201,"stem":202,"icon":203},"\u002Fcolorffy-ui\u002Fcomponents\u002Flayout","3.colorffy-ui\u002F2.components\u002F14.layout","i-lucide-layout",{"title":205,"path":206,"stem":207,"icon":208},"List","\u002Fcolorffy-ui\u002Fcomponents\u002Flist","3.colorffy-ui\u002F2.components\u002F15.list","i-lucide-list",{"title":210,"path":211,"stem":212,"icon":213},"Loading","\u002Fcolorffy-ui\u002Fcomponents\u002Floading","3.colorffy-ui\u002F2.components\u002F16.loading","i-lucide-loader-circle",{"title":215,"path":216,"stem":217,"icon":88},"Modal","\u002Fcolorffy-ui\u002Fcomponents\u002Fmodal","3.colorffy-ui\u002F2.components\u002F17.modal",{"title":219,"path":220,"stem":221,"icon":222},"Navbar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavbar","3.colorffy-ui\u002F2.components\u002F18.navbar","i-lucide-panel-top",{"title":224,"path":225,"stem":226,"icon":227},"Navigation Bar","\u002Fcolorffy-ui\u002Fcomponents\u002Fnavigation-bar","3.colorffy-ui\u002F2.components\u002F19.navigation-bar","i-lucide-navigation",{"title":229,"path":230,"stem":231,"icon":232},"Popover","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover","3.colorffy-ui\u002F2.components\u002F20.popover","i-lucide-message-square",{"title":234,"path":235,"stem":236,"icon":237},"Popover Menu","\u002Fcolorffy-ui\u002Fcomponents\u002Fpopover-menu","3.colorffy-ui\u002F2.components\u002F21.popover-menu","i-lucide-ellipsis",{"title":239,"path":240,"stem":241,"icon":242},"Progress","\u002Fcolorffy-ui\u002Fcomponents\u002Fprogress","3.colorffy-ui\u002F2.components\u002F22.progress","i-lucide-loader",{"title":244,"path":245,"stem":246,"icon":247},"Segmented Controls","\u002Fcolorffy-ui\u002Fcomponents\u002Fsegmented-controls","3.colorffy-ui\u002F2.components\u002F23.segmented-controls","i-lucide-toggle-left",{"title":249,"path":250,"stem":251,"icon":252},"Sidebar","\u002Fcolorffy-ui\u002Fcomponents\u002Fsidebar","3.colorffy-ui\u002F2.components\u002F24.sidebar","i-lucide-panel-left",{"title":254,"path":255,"stem":256,"icon":257},"Skeleton","\u002Fcolorffy-ui\u002Fcomponents\u002Fskeleton","3.colorffy-ui\u002F2.components\u002F25.skeleton","i-lucide-square-dashed",{"title":259,"path":260,"stem":261,"icon":262},"Tabs","\u002Fcolorffy-ui\u002Fcomponents\u002Ftabs","3.colorffy-ui\u002F2.components\u002F26.tabs","i-lucide-panels-top-left",{"title":264,"path":265,"stem":266,"icon":267},"Tooltip","\u002Fcolorffy-ui\u002Fcomponents\u002Ftooltip","3.colorffy-ui\u002F2.components\u002F27.tooltip","i-lucide-message-circle",{"title":269,"path":270,"stem":271,"icon":272},"Styling","\u002Fcolorffy-ui\u002Fstyling","3.colorffy-ui\u002F3.styling","i-lucide-paintbrush",{"id":274,"title":181,"body":275,"description":1728,"extension":1729,"links":1730,"meta":1731,"navigation":1732,"path":182,"seo":1733,"stem":183,"__hash__":1734},"docs\u002F3.colorffy-ui\u002F2.components\u002F10.datatable.md",{"type":276,"value":277,"toc":1721},"minimark",[278,306,311,749,753,758,877,881,892,1228,1232,1383,1387,1670,1717],[279,280,281,285,286,289,290,293,294,297,298,301,302,305],"p",{},[282,283,284],"code",{},"UiDatatable"," renders rows from an ",[282,287,288],{},"items"," array against an explicit ",[282,291,292],{},"columns"," definition. Each column's ",[282,295,296],{},"key"," is the data field, the sort key, and the ",[282,299,300],{},"cell-\u003Ckey>"," slot name; ",[282,303,304],{},"label"," is the header text.",[307,308,310],"h2",{"id":309},"add-a-datatable","Add a datatable",[312,313,318],"pre",{"className":314,"code":315,"language":316,"meta":317,"style":317},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport type { IDatatableColumn } from '@colorffy\u002Fui'\n\nconst columns: IDatatableColumn[] = [\n  { key: 'name', label: 'Name' },\n  { key: 'email', label: 'Email' },\n  { key: 'total', label: 'Total', align: 'end' },\n]\n\nconst items = [\n  { name: 'John Doe', email: 'john@example.com', total: 1280 },\n  { name: 'Jane Smith', email: 'jane@example.com', total: 940 },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDatatable\n    :columns=\"columns\"\n    :items=\"items\"\n    default-sort-key=\"name\"\n    table-class=\"table-bordered\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue","",[282,319,320,355,387,394,417,454,485,530,536,541,553,597,637,642,652,657,667,676,691,705,719,734,740],{"__ignoreMap":317},[321,322,325,329,333,337,340,343,346,350,352],"span",{"class":323,"line":324},"line",1,[321,326,328],{"class":327},"sMK4o","\u003C",[321,330,332],{"class":331},"swJcz","script",[321,334,336],{"class":335},"spNyl"," setup",[321,338,339],{"class":335}," lang",[321,341,342],{"class":327},"=",[321,344,345],{"class":327},"\"",[321,347,349],{"class":348},"sfazB","ts",[321,351,345],{"class":327},[321,353,354],{"class":327},">\n",[321,356,358,362,365,368,372,375,378,381,384],{"class":323,"line":357},2,[321,359,361],{"class":360},"s7zQu","import",[321,363,364],{"class":360}," type",[321,366,367],{"class":327}," {",[321,369,371],{"class":370},"sTEyZ"," IDatatableColumn",[321,373,374],{"class":327}," }",[321,376,377],{"class":360}," from",[321,379,380],{"class":327}," '",[321,382,383],{"class":348},"@colorffy\u002Fui",[321,385,386],{"class":327},"'\n",[321,388,390],{"class":323,"line":389},3,[321,391,393],{"emptyLinePlaceholder":392},true,"\n",[321,395,397,400,403,406,409,412,414],{"class":323,"line":396},4,[321,398,399],{"class":335},"const",[321,401,402],{"class":370}," columns",[321,404,405],{"class":327},":",[321,407,371],{"class":408},"sBMFI",[321,410,411],{"class":370},"[] ",[321,413,342],{"class":327},[321,415,416],{"class":370}," [\n",[321,418,420,423,426,428,430,433,436,439,442,444,446,449,451],{"class":323,"line":419},5,[321,421,422],{"class":327},"  {",[321,424,425],{"class":331}," key",[321,427,405],{"class":327},[321,429,380],{"class":327},[321,431,432],{"class":348},"name",[321,434,435],{"class":327},"'",[321,437,438],{"class":327},",",[321,440,441],{"class":331}," label",[321,443,405],{"class":327},[321,445,380],{"class":327},[321,447,448],{"class":348},"Name",[321,450,435],{"class":327},[321,452,453],{"class":327}," },\n",[321,455,457,459,461,463,465,468,470,472,474,476,478,481,483],{"class":323,"line":456},6,[321,458,422],{"class":327},[321,460,425],{"class":331},[321,462,405],{"class":327},[321,464,380],{"class":327},[321,466,467],{"class":348},"email",[321,469,435],{"class":327},[321,471,438],{"class":327},[321,473,441],{"class":331},[321,475,405],{"class":327},[321,477,380],{"class":327},[321,479,480],{"class":348},"Email",[321,482,435],{"class":327},[321,484,453],{"class":327},[321,486,488,490,492,494,496,499,501,503,505,507,509,512,514,516,519,521,523,526,528],{"class":323,"line":487},7,[321,489,422],{"class":327},[321,491,425],{"class":331},[321,493,405],{"class":327},[321,495,380],{"class":327},[321,497,498],{"class":348},"total",[321,500,435],{"class":327},[321,502,438],{"class":327},[321,504,441],{"class":331},[321,506,405],{"class":327},[321,508,380],{"class":327},[321,510,511],{"class":348},"Total",[321,513,435],{"class":327},[321,515,438],{"class":327},[321,517,518],{"class":331}," align",[321,520,405],{"class":327},[321,522,380],{"class":327},[321,524,525],{"class":348},"end",[321,527,435],{"class":327},[321,529,453],{"class":327},[321,531,533],{"class":323,"line":532},8,[321,534,535],{"class":370},"]\n",[321,537,539],{"class":323,"line":538},9,[321,540,393],{"emptyLinePlaceholder":392},[321,542,544,546,549,551],{"class":323,"line":543},10,[321,545,399],{"class":335},[321,547,548],{"class":370}," items ",[321,550,342],{"class":327},[321,552,416],{"class":370},[321,554,556,558,561,563,565,568,570,572,575,577,579,582,584,586,589,591,595],{"class":323,"line":555},11,[321,557,422],{"class":327},[321,559,560],{"class":331}," name",[321,562,405],{"class":327},[321,564,380],{"class":327},[321,566,567],{"class":348},"John Doe",[321,569,435],{"class":327},[321,571,438],{"class":327},[321,573,574],{"class":331}," email",[321,576,405],{"class":327},[321,578,380],{"class":327},[321,580,581],{"class":348},"john@example.com",[321,583,435],{"class":327},[321,585,438],{"class":327},[321,587,588],{"class":331}," total",[321,590,405],{"class":327},[321,592,594],{"class":593},"sbssI"," 1280",[321,596,453],{"class":327},[321,598,600,602,604,606,608,611,613,615,617,619,621,624,626,628,630,632,635],{"class":323,"line":599},12,[321,601,422],{"class":327},[321,603,560],{"class":331},[321,605,405],{"class":327},[321,607,380],{"class":327},[321,609,610],{"class":348},"Jane Smith",[321,612,435],{"class":327},[321,614,438],{"class":327},[321,616,574],{"class":331},[321,618,405],{"class":327},[321,620,380],{"class":327},[321,622,623],{"class":348},"jane@example.com",[321,625,435],{"class":327},[321,627,438],{"class":327},[321,629,588],{"class":331},[321,631,405],{"class":327},[321,633,634],{"class":593}," 940",[321,636,453],{"class":327},[321,638,640],{"class":323,"line":639},13,[321,641,535],{"class":370},[321,643,645,648,650],{"class":323,"line":644},14,[321,646,647],{"class":327},"\u003C\u002F",[321,649,332],{"class":331},[321,651,354],{"class":327},[321,653,655],{"class":323,"line":654},15,[321,656,393],{"emptyLinePlaceholder":392},[321,658,660,662,665],{"class":323,"line":659},16,[321,661,328],{"class":327},[321,663,664],{"class":331},"template",[321,666,354],{"class":327},[321,668,670,673],{"class":323,"line":669},17,[321,671,672],{"class":327},"  \u003C",[321,674,675],{"class":331},"UiDatatable\n",[321,677,679,682,684,686,688],{"class":323,"line":678},18,[321,680,681],{"class":335},"    :columns",[321,683,342],{"class":327},[321,685,345],{"class":327},[321,687,292],{"class":348},[321,689,690],{"class":327},"\"\n",[321,692,694,697,699,701,703],{"class":323,"line":693},19,[321,695,696],{"class":335},"    :items",[321,698,342],{"class":327},[321,700,345],{"class":327},[321,702,288],{"class":348},[321,704,690],{"class":327},[321,706,708,711,713,715,717],{"class":323,"line":707},20,[321,709,710],{"class":335},"    default-sort-key",[321,712,342],{"class":327},[321,714,345],{"class":327},[321,716,432],{"class":348},[321,718,690],{"class":327},[321,720,722,725,727,729,732],{"class":323,"line":721},21,[321,723,724],{"class":335},"    table-class",[321,726,342],{"class":327},[321,728,345],{"class":327},[321,730,731],{"class":348},"table-bordered",[321,733,690],{"class":327},[321,735,737],{"class":323,"line":736},22,[321,738,739],{"class":327},"  \u002F>\n",[321,741,743,745,747],{"class":323,"line":742},23,[321,744,647],{"class":327},[321,746,664],{"class":331},[321,748,354],{"class":327},[307,750,752],{"id":751},"customize-a-cell","Customize a cell",[279,754,755,756,405],{},"The cell slot name is ",[282,757,300],{},[312,759,761],{"className":314,"code":760,"language":316,"meta":317,"style":317},"\u003Ctemplate>\n  \u003CUiDatatable :columns=\"columns\" :items=\"items\">\n    \u003Ctemplate #cell-total=\"{ item }\">\n      \u003Cstrong>${{ item.total }}\u003C\u002Fstrong>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUiDatatable>\n\u003C\u002Ftemplate>\n",[282,762,763,771,801,831,851,860,869],{"__ignoreMap":317},[321,764,765,767,769],{"class":323,"line":324},[321,766,328],{"class":327},[321,768,664],{"class":331},[321,770,354],{"class":327},[321,772,773,775,777,780,782,784,786,788,791,793,795,797,799],{"class":323,"line":357},[321,774,672],{"class":327},[321,776,284],{"class":331},[321,778,779],{"class":335}," :columns",[321,781,342],{"class":327},[321,783,345],{"class":327},[321,785,292],{"class":348},[321,787,345],{"class":327},[321,789,790],{"class":335}," :items",[321,792,342],{"class":327},[321,794,345],{"class":327},[321,796,288],{"class":348},[321,798,345],{"class":327},[321,800,354],{"class":327},[321,802,803,806,808,811,814,816,818,821,824,827,829],{"class":323,"line":389},[321,804,805],{"class":327},"    \u003C",[321,807,664],{"class":331},[321,809,810],{"class":327}," #",[321,812,813],{"class":335},"cell-total",[321,815,342],{"class":327},[321,817,345],{"class":327},[321,819,820],{"class":327},"{",[321,822,823],{"class":370}," item ",[321,825,826],{"class":327},"}",[321,828,345],{"class":327},[321,830,354],{"class":327},[321,832,833,836,839,842,845,847,849],{"class":323,"line":396},[321,834,835],{"class":327},"      \u003C",[321,837,838],{"class":331},"strong",[321,840,841],{"class":327},">",[321,843,844],{"class":370},"${{ item.total }}",[321,846,647],{"class":327},[321,848,838],{"class":331},[321,850,354],{"class":327},[321,852,853,856,858],{"class":323,"line":419},[321,854,855],{"class":327},"    \u003C\u002F",[321,857,664],{"class":331},[321,859,354],{"class":327},[321,861,862,865,867],{"class":323,"line":456},[321,863,864],{"class":327},"  \u003C\u002F",[321,866,284],{"class":331},[321,868,354],{"class":327},[321,870,871,873,875],{"class":323,"line":487},[321,872,647],{"class":327},[321,874,664],{"class":331},[321,876,354],{"class":327},[307,878,880],{"id":879},"hide-align-and-manage-columns","Hide, align, and manage columns",[279,882,883,884,887,888,891],{},"Mark a column ",[282,885,886],{},"hidden"," to start it collapsed, then enable ",[282,889,890],{},"column-manager"," so users can toggle it:",[312,893,895],{"className":314,"code":894,"language":316,"meta":317,"style":317},"\u003Cscript setup lang=\"ts\">\nimport type { IDatatableColumn } from '@colorffy\u002Fui'\n\nconst columns: IDatatableColumn[] = [\n  { key: 'id', label: 'ID', hidden: true },\n  { key: 'name', label: 'Name' },\n  { key: 'actions', label: 'Actions', sortable: false, align: 'end' },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUiDatatable :columns=\"columns\" :items=\"items\" column-manager>\n    \u003Ctemplate #cell-actions=\"{ item }\">\n      \u003CUiButton variant=\"outline\" size=\"sm\" :text=\"`Edit ${item.name}`\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUiDatatable>\n\u003C\u002Ftemplate>\n",[282,896,897,917,937,941,957,998,1026,1078,1082,1090,1094,1102,1133,1158,1204,1212,1220],{"__ignoreMap":317},[321,898,899,901,903,905,907,909,911,913,915],{"class":323,"line":324},[321,900,328],{"class":327},[321,902,332],{"class":331},[321,904,336],{"class":335},[321,906,339],{"class":335},[321,908,342],{"class":327},[321,910,345],{"class":327},[321,912,349],{"class":348},[321,914,345],{"class":327},[321,916,354],{"class":327},[321,918,919,921,923,925,927,929,931,933,935],{"class":323,"line":357},[321,920,361],{"class":360},[321,922,364],{"class":360},[321,924,367],{"class":327},[321,926,371],{"class":370},[321,928,374],{"class":327},[321,930,377],{"class":360},[321,932,380],{"class":327},[321,934,383],{"class":348},[321,936,386],{"class":327},[321,938,939],{"class":323,"line":389},[321,940,393],{"emptyLinePlaceholder":392},[321,942,943,945,947,949,951,953,955],{"class":323,"line":396},[321,944,399],{"class":335},[321,946,402],{"class":370},[321,948,405],{"class":327},[321,950,371],{"class":408},[321,952,411],{"class":370},[321,954,342],{"class":327},[321,956,416],{"class":370},[321,958,959,961,963,965,967,970,972,974,976,978,980,983,985,987,990,992,996],{"class":323,"line":419},[321,960,422],{"class":327},[321,962,425],{"class":331},[321,964,405],{"class":327},[321,966,380],{"class":327},[321,968,969],{"class":348},"id",[321,971,435],{"class":327},[321,973,438],{"class":327},[321,975,441],{"class":331},[321,977,405],{"class":327},[321,979,380],{"class":327},[321,981,982],{"class":348},"ID",[321,984,435],{"class":327},[321,986,438],{"class":327},[321,988,989],{"class":331}," hidden",[321,991,405],{"class":327},[321,993,995],{"class":994},"sfNiH"," true",[321,997,453],{"class":327},[321,999,1000,1002,1004,1006,1008,1010,1012,1014,1016,1018,1020,1022,1024],{"class":323,"line":456},[321,1001,422],{"class":327},[321,1003,425],{"class":331},[321,1005,405],{"class":327},[321,1007,380],{"class":327},[321,1009,432],{"class":348},[321,1011,435],{"class":327},[321,1013,438],{"class":327},[321,1015,441],{"class":331},[321,1017,405],{"class":327},[321,1019,380],{"class":327},[321,1021,448],{"class":348},[321,1023,435],{"class":327},[321,1025,453],{"class":327},[321,1027,1028,1030,1032,1034,1036,1039,1041,1043,1045,1047,1049,1052,1054,1056,1059,1061,1064,1066,1068,1070,1072,1074,1076],{"class":323,"line":487},[321,1029,422],{"class":327},[321,1031,425],{"class":331},[321,1033,405],{"class":327},[321,1035,380],{"class":327},[321,1037,1038],{"class":348},"actions",[321,1040,435],{"class":327},[321,1042,438],{"class":327},[321,1044,441],{"class":331},[321,1046,405],{"class":327},[321,1048,380],{"class":327},[321,1050,1051],{"class":348},"Actions",[321,1053,435],{"class":327},[321,1055,438],{"class":327},[321,1057,1058],{"class":331}," sortable",[321,1060,405],{"class":327},[321,1062,1063],{"class":994}," false",[321,1065,438],{"class":327},[321,1067,518],{"class":331},[321,1069,405],{"class":327},[321,1071,380],{"class":327},[321,1073,525],{"class":348},[321,1075,435],{"class":327},[321,1077,453],{"class":327},[321,1079,1080],{"class":323,"line":532},[321,1081,535],{"class":370},[321,1083,1084,1086,1088],{"class":323,"line":538},[321,1085,647],{"class":327},[321,1087,332],{"class":331},[321,1089,354],{"class":327},[321,1091,1092],{"class":323,"line":543},[321,1093,393],{"emptyLinePlaceholder":392},[321,1095,1096,1098,1100],{"class":323,"line":555},[321,1097,328],{"class":327},[321,1099,664],{"class":331},[321,1101,354],{"class":327},[321,1103,1104,1106,1108,1110,1112,1114,1116,1118,1120,1122,1124,1126,1128,1131],{"class":323,"line":599},[321,1105,672],{"class":327},[321,1107,284],{"class":331},[321,1109,779],{"class":335},[321,1111,342],{"class":327},[321,1113,345],{"class":327},[321,1115,292],{"class":348},[321,1117,345],{"class":327},[321,1119,790],{"class":335},[321,1121,342],{"class":327},[321,1123,345],{"class":327},[321,1125,288],{"class":348},[321,1127,345],{"class":327},[321,1129,1130],{"class":335}," column-manager",[321,1132,354],{"class":327},[321,1134,1135,1137,1139,1141,1144,1146,1148,1150,1152,1154,1156],{"class":323,"line":639},[321,1136,805],{"class":327},[321,1138,664],{"class":331},[321,1140,810],{"class":327},[321,1142,1143],{"class":335},"cell-actions",[321,1145,342],{"class":327},[321,1147,345],{"class":327},[321,1149,820],{"class":327},[321,1151,823],{"class":370},[321,1153,826],{"class":327},[321,1155,345],{"class":327},[321,1157,354],{"class":327},[321,1159,1160,1162,1165,1168,1170,1172,1175,1177,1180,1182,1184,1187,1189,1192,1194,1196,1199,1201],{"class":323,"line":644},[321,1161,835],{"class":327},[321,1163,1164],{"class":331},"UiButton",[321,1166,1167],{"class":335}," variant",[321,1169,342],{"class":327},[321,1171,345],{"class":327},[321,1173,1174],{"class":348},"outline",[321,1176,345],{"class":327},[321,1178,1179],{"class":335}," size",[321,1181,342],{"class":327},[321,1183,345],{"class":327},[321,1185,1186],{"class":348},"sm",[321,1188,345],{"class":327},[321,1190,1191],{"class":335}," :text",[321,1193,342],{"class":327},[321,1195,345],{"class":327},[321,1197,1198],{"class":348},"`Edit ${item.name}`",[321,1200,345],{"class":327},[321,1202,1203],{"class":327}," \u002F>\n",[321,1205,1206,1208,1210],{"class":323,"line":654},[321,1207,855],{"class":327},[321,1209,664],{"class":331},[321,1211,354],{"class":327},[321,1213,1214,1216,1218],{"class":323,"line":659},[321,1215,864],{"class":327},[321,1217,284],{"class":331},[321,1219,354],{"class":327},[321,1221,1222,1224,1226],{"class":323,"line":669},[321,1223,647],{"class":327},[321,1225,664],{"class":331},[321,1227,354],{"class":327},[307,1229,1231],{"id":1230},"show-loading-and-empty-states","Show loading and empty states",[312,1233,1235],{"className":314,"code":1234,"language":316,"meta":317,"style":317},"\u003Ctemplate>\n  \u003C!-- Skeleton rows while data loads -->\n  \u003CUiDatatable :columns=\"columns\" :items=\"[]\" :is-loading=\"true\" :skeleton-rows=\"6\" \u002F>\n\n  \u003C!-- Built-in empty state -->\n  \u003CUiDatatable\n    :columns=\"columns\"\n    :items=\"[]\"\n    empty-state-title=\"No customers yet\"\n    empty-state-subtitle=\"New customers will appear here.\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[282,1236,1237,1245,1251,1304,1308,1313,1319,1331,1343,1357,1371,1375],{"__ignoreMap":317},[321,1238,1239,1241,1243],{"class":323,"line":324},[321,1240,328],{"class":327},[321,1242,664],{"class":331},[321,1244,354],{"class":327},[321,1246,1247],{"class":323,"line":357},[321,1248,1250],{"class":1249},"sHwdD","  \u003C!-- Skeleton rows while data loads -->\n",[321,1252,1253,1255,1257,1259,1261,1263,1265,1267,1269,1271,1273,1276,1278,1281,1283,1285,1288,1290,1293,1295,1297,1300,1302],{"class":323,"line":389},[321,1254,672],{"class":327},[321,1256,284],{"class":331},[321,1258,779],{"class":335},[321,1260,342],{"class":327},[321,1262,345],{"class":327},[321,1264,292],{"class":348},[321,1266,345],{"class":327},[321,1268,790],{"class":335},[321,1270,342],{"class":327},[321,1272,345],{"class":327},[321,1274,1275],{"class":348},"[]",[321,1277,345],{"class":327},[321,1279,1280],{"class":335}," :is-loading",[321,1282,342],{"class":327},[321,1284,345],{"class":327},[321,1286,1287],{"class":348},"true",[321,1289,345],{"class":327},[321,1291,1292],{"class":335}," :skeleton-rows",[321,1294,342],{"class":327},[321,1296,345],{"class":327},[321,1298,1299],{"class":348},"6",[321,1301,345],{"class":327},[321,1303,1203],{"class":327},[321,1305,1306],{"class":323,"line":396},[321,1307,393],{"emptyLinePlaceholder":392},[321,1309,1310],{"class":323,"line":419},[321,1311,1312],{"class":1249},"  \u003C!-- Built-in empty state -->\n",[321,1314,1315,1317],{"class":323,"line":456},[321,1316,672],{"class":327},[321,1318,675],{"class":331},[321,1320,1321,1323,1325,1327,1329],{"class":323,"line":487},[321,1322,681],{"class":335},[321,1324,342],{"class":327},[321,1326,345],{"class":327},[321,1328,292],{"class":348},[321,1330,690],{"class":327},[321,1332,1333,1335,1337,1339,1341],{"class":323,"line":532},[321,1334,696],{"class":335},[321,1336,342],{"class":327},[321,1338,345],{"class":327},[321,1340,1275],{"class":348},[321,1342,690],{"class":327},[321,1344,1345,1348,1350,1352,1355],{"class":323,"line":538},[321,1346,1347],{"class":335},"    empty-state-title",[321,1349,342],{"class":327},[321,1351,345],{"class":327},[321,1353,1354],{"class":348},"No customers yet",[321,1356,690],{"class":327},[321,1358,1359,1362,1364,1366,1369],{"class":323,"line":543},[321,1360,1361],{"class":335},"    empty-state-subtitle",[321,1363,342],{"class":327},[321,1365,345],{"class":327},[321,1367,1368],{"class":348},"New customers will appear here.",[321,1370,690],{"class":327},[321,1372,1373],{"class":323,"line":555},[321,1374,739],{"class":327},[321,1376,1377,1379,1381],{"class":323,"line":599},[321,1378,647],{"class":327},[321,1380,664],{"class":331},[321,1382,354],{"class":327},[307,1384,1386],{"id":1385},"props","Props",[1388,1389,1390,1409],"table",{},[1391,1392,1393],"thead",{},[1394,1395,1396,1400,1403,1406],"tr",{},[1397,1398,1399],"th",{},"Prop",[1397,1401,1402],{},"Type",[1397,1404,1405],{},"Default",[1397,1407,1408],{},"Description",[1410,1411,1412,1430,1446,1466,1489,1511,1531,1550,1569,1587,1614,1634,1653],"tbody",{},[1394,1413,1414,1419,1424,1427],{},[1415,1416,1417],"td",{},[282,1418,292],{},[1415,1420,1421],{},[282,1422,1423],{},"IDatatableColumn[]",[1415,1425,1426],{},"—",[1415,1428,1429],{},"Column definitions (required).",[1394,1431,1432,1436,1441,1443],{},[1415,1433,1434],{},[282,1435,288],{},[1415,1437,1438],{},[282,1439,1440],{},"Record\u003Cstring, any>[]",[1415,1442,1426],{},[1415,1444,1445],{},"Row data (required).",[1394,1447,1448,1453,1458,1463],{},[1415,1449,1450],{},[282,1451,1452],{},"rowKey",[1415,1454,1455],{},[282,1456,1457],{},"string",[1415,1459,1460,1462],{},[282,1461,969],{}," → index",[1415,1464,1465],{},"Stable key field for rows.",[1394,1467,1468,1473,1478,1482],{},[1415,1469,1470],{},[282,1471,1472],{},"sortable",[1415,1474,1475],{},[282,1476,1477],{},"boolean",[1415,1479,1480],{},[282,1481,1287],{},[1415,1483,1484,1485,1488],{},"Enable sorting (per-column opt-out via ",[282,1486,1487],{},"column.sortable",").",[1394,1490,1491,1496,1500,1505],{},[1415,1492,1493],{},[282,1494,1495],{},"defaultSortKey",[1415,1497,1498],{},[282,1499,1457],{},[1415,1501,1502],{},[282,1503,1504],{},"''",[1415,1506,1507,1508,1510],{},"Column ",[282,1509,296],{}," to sort by initially.",[1394,1512,1513,1518,1523,1528],{},[1415,1514,1515],{},[282,1516,1517],{},"defaultSortOrder",[1415,1519,1520],{},[282,1521,1522],{},"'asc' | 'desc'",[1415,1524,1525],{},[282,1526,1527],{},"'asc'",[1415,1529,1530],{},"Initial sort direction.",[1394,1532,1533,1538,1542,1547],{},[1415,1534,1535],{},[282,1536,1537],{},"columnManager",[1415,1539,1540],{},[282,1541,1477],{},[1415,1543,1544],{},[282,1545,1546],{},"false",[1415,1548,1549],{},"Show the show \u002F hide column menu.",[1394,1551,1552,1557,1562,1566],{},[1415,1553,1554],{},[282,1555,1556],{},"tableClass",[1415,1558,1559],{},[282,1560,1561],{},"'table-bordered' | 'table-striped' | 'table-borderless' | string",[1415,1563,1564],{},[282,1565,1504],{},[1415,1567,1568],{},"Table style.",[1394,1570,1571,1576,1580,1584],{},[1415,1572,1573],{},[282,1574,1575],{},"isLoading",[1415,1577,1578],{},[282,1579,1477],{},[1415,1581,1582],{},[282,1583,1546],{},[1415,1585,1586],{},"Show skeleton rows.",[1394,1588,1589,1598,1603,1611],{},[1415,1590,1591,1594,1595],{},[282,1592,1593],{},"skeletonRows"," \u002F ",[282,1596,1597],{},"skeletonCols",[1415,1599,1600],{},[282,1601,1602],{},"number",[1415,1604,1605,1594,1608],{},[282,1606,1607],{},"10",[282,1609,1610],{},"5",[1415,1612,1613],{},"Skeleton dimensions.",[1394,1615,1616,1621,1625,1627],{},[1415,1617,1618],{},[282,1619,1620],{},"caption",[1415,1622,1623],{},[282,1624,1457],{},[1415,1626,1426],{},[1415,1628,1629,1630,1633],{},"Accessible ",[282,1631,1632],{},"\u003Ccaption>",".",[1394,1635,1636,1641,1645,1650],{},[1415,1637,1638],{},[282,1639,1640],{},"emptyStateTitle",[1415,1642,1643],{},[282,1644,1457],{},[1415,1646,1647],{},[282,1648,1649],{},"'No data available'",[1415,1651,1652],{},"Empty-state title.",[1394,1654,1655,1660,1664,1667],{},[1415,1656,1657],{},[282,1658,1659],{},"emptyStateSubtitle",[1415,1661,1662],{},[282,1663,1457],{},[1415,1665,1666],{},"…",[1415,1668,1669],{},"Empty-state subtitle.",[279,1671,1672,1679,1680,1682,1683,1682,1685,1682,1688,1682,1691,1694,1695,1594,1698,1594,1701,1703,1704,1682,1707,1710,1711,1679,1714,1716],{},[838,1673,1674,1675,1678],{},"Column (",[282,1676,1677],{},"IDatatableColumn","):"," ",[282,1681,296],{},", ",[282,1684,304],{},[282,1686,1687],{},"sortable?",[282,1689,1690],{},"hidden?",[282,1692,1693],{},"align?"," (",[282,1696,1697],{},"start",[282,1699,1700],{},"center",[282,1702,525],{},"), ",[282,1705,1706],{},"thClass?",[282,1708,1709],{},"tdClass?",".\n",[838,1712,1713],{},"Slots:",[282,1715,300],{}," per column.",[1718,1719,1720],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":317,"searchDepth":357,"depth":357,"links":1722},[1723,1724,1725,1726,1727],{"id":309,"depth":357,"text":310},{"id":751,"depth":357,"text":752},{"id":879,"depth":357,"text":880},{"id":1230,"depth":357,"text":1231},{"id":1385,"depth":357,"text":1386},"Display tabular data with sorting, a column manager, loading, and empty states.","md",null,{},{"icon":184},{"title":181,"description":1728},"t_z4OgNjDpAqNsASz7QhAod6P9OnheFJOo7haHFA2YI",[1736,1738],{"title":176,"path":177,"stem":178,"description":1737,"icon":179,"children":-1},"Group related content in a surface with the UiCard component.",{"title":186,"path":187,"stem":188,"description":1739,"icon":189,"children":-1},"Communicate an empty state with an icon, message, and optional action.",1782196219260]