[{"data":1,"prerenderedAt":1049},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Ftable":3,"component-meta:UiTable":699},{"id":4,"title":5,"body":6,"component":417,"dependsOn":680,"description":685,"emitDescriptions":686,"extension":397,"meta":691,"navigation":692,"order":693,"path":694,"seo":695,"status":696,"stem":697,"__hash__":698},"docs\u002Fdocs\u002Fcomponents\u002Ftable.md","Table",{"type":7,"value":8,"toc":660},"minimark",[9,14,19,23,36,40,55,59,72,79,83,86,90,103,106,109,128,138,147,154,158,161,165,168,174,178,185,189,214,221,228,239,248,253,271,359,377,388,392,406,483,487,497,500,507,518,521,528,535,539,556,572,576,579,592,601,608,617,621,636,645,649,656],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"table-basic","min-h-72",[10,20,22],{"id":21},"налаштування-колонок","Налаштування колонок",[24,25,26,27,31,32,35],"p",{},"Задайте ",[28,29,30],"code",{},"tableId"," — і вмикається все одразу: ресайз межею заголовка, меню\nвидимості й порядку, перемикач щільності та збереження в ",[28,33,34],{},"localStorage",".",[15,37],{"name":38,"stage":39},"table-settings","min-h-96",[24,41,42,43,46,47,50,51,54],{},"Сама панель — спільний компонент із ",[28,44,45],{},"UiTreeTable","\n(",[28,48,49],{},"app\u002Fcomponents\u002Fui\u002Ftable\u002FColumnSettings.vue","), як і арифметика ширин,\nпорівняння значень при сортуванні й зведення збереженої розкладки\n(",[28,52,53],{},"app\u002Futils\u002FtableColumns.ts","). Це не економія рядків, а гарантія: дві\nкопії тієї самої панелі розходяться мовчки й розходилися — у дереві\nкнопки порядку мали зону дотику 45×45 і SVG-стрілки, тут лишались\nтекстові «↑↓» без зони.",[10,56,58],{"id":57},"закріплена-перша-колонка","Закріплена перша колонка",[24,60,61,64,65,68,69,71],{},[28,62,63],{},"stickyColumn"," тримає першу видиму колонку на місці при горизонтальній\nпрокрутці — той самий контракт, що ",[28,66,67],{},"stickyTreeColumn"," у ",[28,70,45],{},", і\nтой самий вигляд: край колонки отримує тінь, щойно під нею починає їхати\nвміст. Має сенс лише тоді, коли перша колонка ідентифікує рядок — назва,\nSKU, номер; закріплена колонка зі статусом лишає читача без орієнтира.",[24,73,74,75,78],{},"З ",[28,76,77],{},"selectable"," колонка прапорців теж закріплюється — інакше перша ж\nпрокрутка ховала б її під колонкою даних.",[10,80,82],{"id":81},"стани","Стани",[15,84],{"name":85,"stage":18},"table-states",[10,87,89],{"id":88},"вибір-рядків","Вибір рядків",[24,91,92,94,95,98,99,102],{},[28,93,77],{}," додає колонку прапорців, ",[28,96,97],{},"v-model:selected"," тримає ключі\nобраних рядків. Ключ береться з того самого поля, що вже дає рядкам ",[28,100,101],{},":key","\n— окремого props для цього немає й не треба.",[15,104],{"name":105,"stage":39},"table-selection",[24,107,108],{},"Три рішення, які тут неочевидні.",[24,110,111,115,116,119,120,127],{},[112,113,114],"strong",{},"«Обрати всі» об'єднує, а не замінює."," Таблиця не пагінує сама:\n",[28,117,118],{},"items"," — це вже сторінка, а ",[121,122,124],"a",{"href":123},"\u002Fdocs\u002Fcomponents\u002Fpagination",[28,125,126],{},"UiPagination","\nживе окремо. Якби прапорець у шапці замінював набір, користувач, що вибрав\nрядки, перейшов на другу сторінку й натиснув «обрати всі», мовчки втратив\nби вибір із першої. Тому шапка додає ключі сторінки до набору й забирає їх\nназад — ключі інших сторінок лишаються цілі.",[24,129,130,133,134,137],{},[112,131,132],{},"Shift+клік ставить діапазону стан якоря",", як у Finder і Gmail, а не\nперемикає кожен рядок окремо: почергове перемикання дає результат, який\nнеможливо передбачити оком. Якір — останнє перемикання без Shift. Діапазон\nрахується в порядку ",[112,135,136],{},"показу",", тож після сортування Shift виділяє те, що\nвидно між двома рядками, а не те, що лежало між ними у вихідних даних.",[24,139,140,143,144,146],{},[112,141,142],{},"Виділення не зберігається."," Ширини й видимість колонок ідуть у\n",[28,145,34],{},", виділення — ні: набір обраних записів живе рівно стільки,\nскільки триває дія над ними.",[24,148,149,150,153],{},"Сортування виділенню не шкодить: воно ключується по ",[28,151,152],{},"keyRow",", а не по\nіндексу, тож перевпорядкування рядків його не плутає.",[10,155,157],{"id":156},"api","API",[159,160],"component-api",{},[10,162,164],{"id":163},"коли-використовувати","Коли використовувати",[24,166,167],{},"Для однорідних даних, які порівнюють між собою по колонках.",[24,169,170,173],{},[28,171,172],{},"mobileCards"," вмикайте завжди, коли колонок більше трьох: горизонтальна\nпрокрутка таблиці на телефоні — найгірший спосіб читання даних.",[10,175,177],{"id":176},"коли-не-використовувати","Коли НЕ використовувати",[24,179,180,181,184],{},"Не робіть таблицю з двох колонок «назва \u002F значення» — це список описів\n(",[28,182,183],{},"\u003Cdl>","), і на мобільному він виглядатиме краще без жодних зусиль.",[10,186,188],{"id":187},"ширини-живуть-у-colgroup","Ширини живуть у colgroup",[24,190,191,194,195,198,199,202,203,206,207,209,210,213],{},[28,192,193],{},"width"," — це ",[112,196,197],{},"число в пікселях",", а не CSS-рядок. Ширини задаються один раз у\n",[28,200,201],{},"\u003Ccolgroup>"," при ",[28,204,205],{},"table-layout: fixed",", а не на кожній комірці: за фіксованої\nрозкладки враховується лише перший рядок, тож інлайновий ",[28,208,193],{}," на кожному\n",[28,211,212],{},"\u003Ctd>"," був би мертвим стилем, помноженим на кількість рядків.",[24,215,216,217,220],{},"Рівно одна колонка може мати ",[28,218,219],{},"flex: true"," — вона забирає весь залишок. Сума\nфіксованих ширин має вміщатись у контейнер.",[24,222,223,224,227],{},"Число, а не рядок, ще й тому, що ширина бере участь в арифметиці: ресайз,\nзбереження, підрахунок переповнення. З ",[28,225,226],{},"\"9rem\""," нічого з цього не порахуєш.",[10,229,231,232,235,236],{"id":230},"висота-maxheight-чи-fill","Висота: ",[28,233,234],{},"maxHeight"," чи ",[28,237,238],{},"fill",[24,240,241,243,244,247],{},[28,242,234],{}," — стеля в абсолютних одиницях: контейнер обіймає вміст, поки той\nнижчий за неї. Працює будь-де, але нічого не знає про сторінку, на якій\nстоїть. Типове ",[28,245,246],{},"max-height: 70vh"," під шапкою, фільтрами й пагінацією дає два\nдефекти одразу: знизу лишається смуга порожнечі, якої ніщо не заповнює, а\nостанній рядок ріжеться навпіл там, де до низу екрана ще третина висоти.",[24,249,250,252],{},[28,251,238],{}," віддає рішення про висоту батьківському контейнеру. Контейнер\nпрокрутки обіймає вміст, поки той вміщається, і стискається до залишку\nвисоти, щойно перестав: пагінація під таблицею лишається на екрані, а\nтаблиця на три рядки не розтягується порожнім тлом на весь екран.",[24,254,255,256,259,260,263,264,267,268,270],{},"Ціна — ланцюжок. Висота має бути ВИЗНАЧЕНОЮ згори (",[28,257,258],{},"h-dvh"," на каркасі, не\n",[28,261,262],{},"min-h-dvh","), а кожна ланка між каркасом і таблицею — flex-колонкою з\n",[28,265,266],{},"min-h-0",". Пропущений ",[28,269,266],{}," не дає ані помилки, ані попередження:\nелемент просто не стискається, і таблиця тихо рендериться на всю висоту.",[272,273,278],"pre",{"className":274,"code":275,"language":276,"meta":277,"style":277},"language-vue shiki shiki-themes github-light github-dark","\u003Cdiv class=\"flex h-dvh flex-col\">\n  \u003Cmain class=\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3\">\n    \u003Csection class=\"flex min-h-96 flex-1 flex-col gap-3\">\n      \u003CPageHeader \u002F>\n      \u003CUiTable fill sticky-header :headers=\"headers\" :items=\"items\" \u002F>\n      \u003CUiPagination v-model:page=\"page\" :total-pages=\"pages\" \u002F>\n    \u003C\u002Fsection>\n  \u003C\u002Fmain>\n\u003C\u002Fdiv>\n","vue","",[28,279,280,307,313,319,325,331,337,343,349],{"__ignoreMap":277},[281,282,285,289,293,297,300,304],"span",{"class":283,"line":284},"line",1,[281,286,288],{"class":287},"sVt8B","\u003C",[281,290,292],{"class":291},"s9eBZ","div",[281,294,296],{"class":295},"sScJk"," class",[281,298,299],{"class":287},"=",[281,301,303],{"class":302},"sZZnC","\"flex h-dvh flex-col\"",[281,305,306],{"class":287},">\n",[281,308,310],{"class":283,"line":309},2,[281,311,312],{"class":287},"  \u003Cmain class=\"flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3\">\n",[281,314,316],{"class":283,"line":315},3,[281,317,318],{"class":287},"    \u003Csection class=\"flex min-h-96 flex-1 flex-col gap-3\">\n",[281,320,322],{"class":283,"line":321},4,[281,323,324],{"class":287},"      \u003CPageHeader \u002F>\n",[281,326,328],{"class":283,"line":327},5,[281,329,330],{"class":287},"      \u003CUiTable fill sticky-header :headers=\"headers\" :items=\"items\" \u002F>\n",[281,332,334],{"class":283,"line":333},6,[281,335,336],{"class":287},"      \u003CUiPagination v-model:page=\"page\" :total-pages=\"pages\" \u002F>\n",[281,338,340],{"class":283,"line":339},7,[281,341,342],{"class":287},"    \u003C\u002Fsection>\n",[281,344,346],{"class":283,"line":345},8,[281,347,348],{"class":287},"  \u003C\u002Fmain>\n",[281,350,352,355,357],{"class":283,"line":351},9,[281,353,354],{"class":287},"\u003C\u002F",[281,356,292],{"class":291},[281,358,306],{"class":287},[24,360,361,363,364,366,367,369,370,373,374,35],{},[28,362,39],{}," на секції — не окраса. Таблиця з ",[28,365,238],{}," єдина в колонці має\n",[28,368,266],{},", тож вона забирає ВЕСЬ дефіцит висоти: у вікні 1280×320 без\nпідлоги від неї лишається сама шапка. Підлога стоїть на секції, а не на\nтаблиці, саме тому, що на таблиці вона тримала б порожнечу під короткими\nсписками; на секції зайва висота йде під пагінацію, де її не видно, а\nпереповнення бере на себе ",[28,371,372],{},"overflow-y-auto"," на ",[28,375,376],{},"\u003Cmain>",[24,378,379,380,382,383,385,386,35],{},"Саме тому ",[28,381,238],{}," безпечний і на сторінці, що прокручується: визначеної\nвисоти згори там немає, стискати немає до чого, і властивість просто знімає\nкліть ",[28,384,234],{}," — таблиця показує всі рядки, а гортає сторінка. Для\nтаблиці, вбудованої в довгу сторінку, це НЕ завжди те, що треба: якщо\nколонки не вміщаються по ширині, горизонтальний скролбар поїде в самий низ\nвисокого блока. Там лишайте ",[28,387,234],{},[10,389,391],{"id":390},"одне-api-дві-верстки","Одне API, дві верстки",[24,393,394,395,398,399,405],{},"Нижче ",[28,396,397],{},"md"," таблиця ховається, а картки рендеряться ",[112,400,401,402],{},"з тих самих слотів\n",[28,403,404],{},"cell-*",". Розмітку комірки не треба писати двічі:",[272,407,409],{"className":274,"code":408,"language":276,"meta":277,"style":277},"\u003CUiTable :headers=\"headers\" :items=\"items\" mobile-cards>\n  \u003Ctemplate #cell-status=\"{ item }\">\n    \u003CUiChip :tone=\"item.status === 'published' ? 'success' : 'neutral'\">\n      {{ item.status }}\n    \u003C\u002FUiChip>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiTable>\n",[28,410,411,450,455,460,465,470,475],{"__ignoreMap":277},[281,412,413,415,418,421,424,426,429,431,433,435,437,439,441,443,445,448],{"class":283,"line":284},[281,414,288],{"class":287},[281,416,417],{"class":291},"UiTable",[281,419,420],{"class":287}," :",[281,422,423],{"class":295},"headers",[281,425,299],{"class":287},[281,427,428],{"class":302},"\"",[281,430,423],{"class":287},[281,432,428],{"class":302},[281,434,420],{"class":287},[281,436,118],{"class":295},[281,438,299],{"class":287},[281,440,428],{"class":302},[281,442,118],{"class":287},[281,444,428],{"class":302},[281,446,447],{"class":295}," mobile-cards",[281,449,306],{"class":287},[281,451,452],{"class":283,"line":309},[281,453,454],{"class":287},"  \u003Ctemplate #cell-status=\"{ item }\">\n",[281,456,457],{"class":283,"line":315},[281,458,459],{"class":287},"    \u003CUiChip :tone=\"item.status === 'published' ? 'success' : 'neutral'\">\n",[281,461,462],{"class":283,"line":321},[281,463,464],{"class":287},"      {{ item.status }}\n",[281,466,467],{"class":283,"line":327},[281,468,469],{"class":287},"    \u003C\u002FUiChip>\n",[281,471,472],{"class":283,"line":333},[281,473,474],{"class":287},"  \u003C\u002Ftemplate>\n",[281,476,477,479,481],{"class":283,"line":339},[281,478,354],{"class":287},[281,480,417],{"class":291},[281,482,306],{"class":287},[10,484,486],{"id":485},"сортування","Сортування",[24,488,489,490,492,493,496],{},"Порівняння враховує числа й локаль. Наївні ",[28,491,288],{}," і ",[28,494,495],{},">"," ставлять «Розділ 10»\nперед «Розділ 9», а кирилицю сортують за кодами символів — перевірте це на\nприкладі вище.",[24,498,499],{},"Порожні значення завжди в кінці, незалежно від напрямку: рядок без даних не\nмає витісняти заповнені з початку списку.",[24,501,502,503,506],{},"Третій клік по заголовку ",[112,504,505],{},"скидає"," сортування. Без цього повернутися до\nвихідного порядку можна було б лише перезавантаженням сторінки.",[24,508,509,510,513,514,517],{},"Для серверного сортування задайте ",[28,511,512],{},"serverSort",": компонент повідомить про\nнамір через ",[28,515,516],{},"update:sort",", але порядок рядків не чіпатиме.",[10,519,82],{"id":520},"стани-1",[24,522,523,524,527],{},"Скелетон показується лише при ",[112,525,526],{},"першому"," завантаженні. Якщо дані вже є,\nзамість нього накладається напівпрозорий оверлей — інакше таблиця блимала б\nна кожній зміні фільтра.",[24,529,530,531,534],{},"Ширина заглушок детермінована, а не випадкова: ",[28,532,533],{},"Math.random()"," міняв би її\nна кожному рендері, і скелетон миготів би.",[10,536,538],{"id":537},"доступність","Доступність",[24,540,541,542,492,545,548,549,552,553,555],{},"Заголовки колонок мають ",[28,543,544],{},"scope=\"col\"",[28,546,547],{},"aria-sort",". Сортування вмикається\nкнопкою всередині ",[28,550,551],{},"\u003Cth>",", а не кліком по самому ",[28,554,551],{}," — інакше воно\nнедоступне з клавіатури.",[24,557,558,561,562,565,566,568,569,571],{},[28,559,560],{},"stickyHeader"," ",[112,563,564],{},"вимагає"," контейнера з власною прокруткою — тобто\n",[28,567,234],{}," або ",[28,570,238],{},". Без жодного з них закріплювати шапку немає відносно\nчого, і властивість мовчки нічого не робить.",[10,573,575],{"id":574},"дві-осі-версій-збереженого","Дві осі версій збереженого",[24,577,578],{},"Найтонше місце всієї таблиці. Збережена розкладка має два незалежні номери\nверсій, бо в ній змішані дві різні речі.",[24,580,581,584,585,588,589,591],{},[28,582,583],{},"settingsVersion"," — ",[112,586,587],{},"ваш",". Підніміть його, коли змінили дефолтні ширини чи\nвидимість у ",[28,590,423],{},": збережене більше не описує ту саму таблицю, і тримати\nйого означало б показувати користувачам чужу розкладку.",[24,593,594,584,597,600],{},[28,595,596],{},"SETTINGS_SCHEMA",[112,598,599],{},"компонента",". Коли міняється формат payload, порядок і\nвидимість (це вибір користувача) мігрують уперед, а ширини й щільність (це\nдефолти компонента) скидаються.",[24,602,603,604,607],{},"Нова колонка вставляється ",[112,605,606],{},"після найближчого лівого сусіда",", а не в кінець.\nБез цього колонка, додана через пів року, стрибала б у хвіст у кожного, хто\nколись міняв порядок.",[24,609,610,612,613,616],{},[28,611,30],{}," варто передавати динамічно там, де таблиця показує різні сутності\n(",[28,614,615],{},"group-${id}",") — компонент стежить і за ним, інакше наступна сутність\nвідкрилася б із розкладкою попередньої.",[10,618,620],{"id":619},"афорданси-прокрутки","Афорданси прокрутки",[24,622,623,624,627,628,631,632,635],{},"Переповнення рахується як ",[28,625,626],{},"ширина таблиці − ширина видимої області",", а не через\n",[28,629,630],{},"scrollWidth",". Так градієнт з'являється і після ресайзу колонки — від нього\nрозмір контейнера не міняється, тож самого ",[28,633,634],{},"ResizeObserver"," було б замало.",[24,637,638,640,641,644],{},[28,639,634],{}," при цьому теж потрібен: згортання сайдбара міняє ширину\nконтейнера без жодної події ",[28,642,643],{},"resize"," вікна.",[10,646,648],{"id":647},"чого-тут-немає","Чого тут немає",[24,650,651,652,655],{},"Віртуального скролу. Для списків у тисячі рядків беріть пагінацію або\nсерверну фільтрацію. Якщо дані ще й ієрархічні — ",[28,653,654],{},"TreeTable",": він\nвіртуалізує рядки, але вимагає фіксованої висоти рядка, якої тут немає.",[657,658,659],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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":277,"searchDepth":309,"depth":309,"links":661},[662,663,664,665,666,667,668,669,670,671,673,674,675,676,677,678,679],{"id":12,"depth":309,"text":13},{"id":21,"depth":309,"text":22},{"id":57,"depth":309,"text":58},{"id":81,"depth":309,"text":82},{"id":88,"depth":309,"text":89},{"id":156,"depth":309,"text":157},{"id":163,"depth":309,"text":164},{"id":176,"depth":309,"text":177},{"id":187,"depth":309,"text":188},{"id":230,"depth":309,"text":672},"Висота: maxHeight чи fill",{"id":390,"depth":309,"text":391},{"id":485,"depth":309,"text":486},{"id":520,"depth":309,"text":82},{"id":537,"depth":309,"text":538},{"id":574,"depth":309,"text":575},{"id":619,"depth":309,"text":620},{"id":647,"depth":309,"text":648},[681,682,683,49,53,684],"app\u002Fcomponents\u002Fui\u002FUiSkeleton.vue","app\u002Fcomponents\u002Fui\u002FUiMenu.vue","app\u002Fcomponents\u002Fui\u002FUiCheckbox.vue","app\u002Futils\u002FtableSelection.ts","Таблиця зі сортуванням, станами завантаження і мобільними картками з тих самих слотів.",{"update:sort":687,"update:headers":688,"rowClick":689,"update:selected":690},"Нове сортування або `null`, якщо скинуто. Використовуйте через `v-model:sort`.","Розкладка колонок змінилася — видимість, порядок або ширина.","Активація рядка кліком, Enter або Space. Лише коли задано `rowClickable`.","Ключі обраних рядків. Використовуйте через `v-model:selected`.",{},true,17,"\u002Fdocs\u002Fcomponents\u002Ftable",{"title":5,"description":685},"stable","docs\u002Fcomponents\u002Ftable","jqTreItXoartQYiHU7D87WXVky2Cn3EQzT3NdwIymyY",{"mode":700,"prefetch":701,"preload":701,"filePath":702,"declarationPath":703,"pascalName":417,"kebabName":704,"chunkName":705,"priority":284,"_scanned":692,"meta":706},"all",false,"app\u002Fcomponents\u002Fui\u002FUiTable.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiTable.vue","ui-table","components\u002Fui-table",{"type":309,"props":707,"slots":926,"events":965,"exposed":1037,"hash":1048},[708,790,797,801,817,821,826,835,844,847,850,854,864,872,877,883,889,895,900,905,910,915,920],{"name":423,"global":701,"description":709,"tags":710,"required":692,"type":711,"schema":712},"Опис колонок: ключ, підпис, вирівнювання, ширина, сортованість.",[],"TableHeader[]",{"kind":713,"type":711,"schema":714},"array",{"0":715},{"kind":716,"type":717,"schema":718},"object","TableHeader",{"value":719,"text":724,"sortable":727,"width":736,"flex":740,"align":744,"clamp":753,"title":766,"defaultSortDir":770,"required":779,"resizable":783,"visible":787},{"name":720,"global":701,"description":721,"tags":722,"required":692,"type":723,"schema":723},"value","Ключ поля в об'єкті рядка. Він же — суфікс іменованих слотів.",[],"string",{"name":725,"global":701,"description":277,"tags":726,"required":692,"type":723,"schema":723},"text",[],{"name":728,"global":701,"description":277,"tags":729,"required":701,"type":730,"schema":731},"sortable",[],"boolean",{"kind":732,"type":730,"schema":733},"enum",{"0":734,"1":735},"false","true",{"name":193,"global":701,"description":737,"tags":738,"required":701,"type":739,"schema":739},"Ширина в ПІКСЕЛЯХ (число, не рядок).\n\nДля `flex: true` трактується як МІНІМАЛЬНА: колонка починається з неї\nі росте на залишок.\n\nЧисло, бо ширини живуть у `\u003Ccolgroup>` і беруть участь в арифметиці\nресайзу, збереження і підрахунку переповнення. CSS-рядок цього не дає.",[],"number",{"name":741,"global":701,"description":742,"tags":743,"required":701,"type":730,"schema":730},"flex","Колонка забирає весь залишок ширини. Дозволена ОДНА на таблицю.\nСума фіксованих ширин має вміщатись у контейнер.",[],{"name":745,"global":701,"description":277,"tags":746,"required":701,"type":747,"schema":748},"align",[],"\"left\" | \"center\" | \"right\"",{"kind":732,"type":747,"schema":749},{"0":750,"1":751,"2":752},"\"left\"","\"center\"","\"right\"",{"name":754,"global":701,"description":755,"tags":756,"required":701,"type":757,"schema":758},"clamp","Перенос у комірці: 1 — обрізати, 2–6 — стільки рядків, false — без обмежень.",[],"false | 1 | 2 | 3 | 4 | 5 | 6",{"kind":732,"type":757,"schema":759},{"0":734,"1":760,"2":761,"3":762,"4":763,"5":764,"6":765},"1","2","3","4","5","6",{"name":767,"global":701,"description":768,"tags":769,"required":701,"type":723,"schema":723},"title","Повна назва: підказка на заголовку і підпис у меню налаштувань.",[],{"name":771,"global":701,"description":772,"tags":773,"required":701,"type":774,"schema":775},"defaultSortDir","Напрям ПЕРШОГО кліку по сортуванню. Типово `asc`.",[],"\"asc\" | \"desc\"",{"kind":732,"type":774,"schema":776},{"0":777,"1":778},"\"asc\"","\"desc\"",{"name":780,"global":701,"description":781,"tags":782,"required":701,"type":730,"schema":730},"required","Колонку не можна приховати.",[],{"name":784,"global":701,"description":785,"tags":786,"required":701,"type":730,"schema":730},"resizable","Заборонити ресайз. Типово можна все, крім `flex`.",[],{"name":788,"global":701,"description":277,"tags":789,"required":701,"type":730,"schema":730},"visible",[],{"name":118,"global":701,"description":791,"tags":792,"required":692,"type":793,"schema":794},"Рядки таблиці. Ключ рядка береться з поля, названого в `keyRow`.",[],"T[]",{"kind":713,"type":793,"schema":795},{"0":796},"T",{"name":152,"global":701,"default":798,"description":799,"tags":800,"required":701,"type":723,"schema":723},"\"id\"","Поле-ідентифікатор рядка для `:key`.",[],{"name":802,"global":701,"default":803,"description":804,"tags":805,"required":701,"type":806,"schema":807},"sort","null","Поточне сортування. Використовуйте через `v-model:sort`.",[],"TableSort",{"kind":716,"type":806,"schema":808},{"by":809,"dir":812},{"name":810,"global":701,"description":277,"tags":811,"required":692,"type":723,"schema":723},"by",[],{"name":813,"global":701,"description":277,"tags":814,"required":692,"type":774,"schema":815},"dir",[],{"kind":732,"type":774,"schema":816},{"0":777,"1":778},{"name":818,"global":701,"default":764,"description":819,"tags":820,"required":701,"type":739,"schema":739},"skeletonRows","Скільки рядків-заглушок показати під час ПЕРШОГО завантаження.",[],{"name":822,"global":701,"default":823,"description":824,"tags":825,"required":701,"type":723,"schema":723},"emptyText","\"Даних немає\"","Текст, коли рядків немає. Складніший стан — слот `empty`.",[],{"name":827,"global":701,"default":828,"description":829,"tags":830,"required":701,"type":831,"schema":832},"density","\"md\"","Щільність рядків. `sm` для довгих таблиць, де важливіше бачити\nбільше рядків.",[],"\"sm\" | \"md\"",{"kind":732,"type":831,"schema":833},{"0":834,"1":828},"\"sm\"",{"name":836,"global":701,"description":837,"tags":838,"required":701,"type":839,"schema":840},"rowClass","Клас на рядок — для підсвітки виділених, помилкових тощо.\n\nЗ `tableId` рядок отримує власне тло `bg-card`, тож заливка звідси\nмає бути утилітою, яка в CSS іде після `bg-card` — усі семантичні\nтокени (`bg-warning-bg`, `bg-danger-bg`, `bg-primary-50`) підходять.",[],"(item: T) => string",{"kind":841,"type":842,"schema":843},"event","(item: T): string",{},{"name":234,"global":701,"description":845,"tags":846,"required":701,"type":723,"schema":723},"Напр. `\"24rem\"`. Без нього `stickyHeader` не має де закріплюватись.",[],{"name":30,"global":701,"description":848,"tags":849,"required":701,"type":723,"schema":723},"Вмикає меню налаштувань і збереження розкладки в localStorage під\nключем `table_settings_${tableId}`. Без нього таблиця некерована\nкористувачем і нічого не запам'ятовує.",[],{"name":583,"global":701,"default":851,"description":852,"tags":853,"required":701,"type":739,"schema":739},"0","Версія ВАШИХ дефолтів. Змінили ширини чи видимість у `headers` —\nпідніміть число, і збережений вибір користувача скинеться.",[],{"name":855,"global":701,"default":856,"description":690,"tags":857,"required":701,"type":858,"schema":859},"selected","[]",[],"SelectionKey[]",{"kind":713,"type":858,"schema":860},{"0":861},{"kind":732,"type":862,"schema":863},"SelectionKey",[723,739],{"name":865,"global":701,"description":866,"tags":867,"required":701,"type":868,"schema":869},"selectableRow","Які рядки взагалі можна обрати. Незбиральний рядок показує вимкнений\nпрапорець і не потрапляє ні в «обрати всі», ні в діапазон Shift.",[],"(item: T) => boolean",{"kind":841,"type":870,"schema":871},"(item: T): boolean",{},{"name":512,"global":701,"description":873,"tags":874,"required":701,"type":730,"schema":875},"Сортувати на сервері: компонент лише повідомляє про намір через\n`update:sort`, але порядок рядків не чіпає.",[],{"kind":732,"type":730,"schema":876},{"0":734,"1":735},{"name":878,"global":701,"description":879,"tags":880,"required":701,"type":730,"schema":881},"loading","Показує скелетони замість рядків, зберігаючи висоту таблиці.",[],{"kind":732,"type":730,"schema":882},{"0":734,"1":735},{"name":884,"global":701,"default":735,"description":885,"tags":886,"required":701,"type":730,"schema":887},"densityToggle","Показати перемикач щільності в меню налаштувань.",[],{"kind":732,"type":730,"schema":888},{"0":734,"1":735},{"name":890,"global":701,"description":891,"tags":892,"required":701,"type":730,"schema":893},"rowClickable","Робить рядки клікабельними: додає роль, фокус і обробку Enter\u002FSpace.",[],{"kind":732,"type":730,"schema":894},{"0":734,"1":735},{"name":172,"global":701,"description":896,"tags":897,"required":701,"type":730,"schema":898},"Нижче `md` таблиця ховається, а замість неї рендериться список\nкарток — із ТИХ САМИХ слотів `cell-*`. Одне API, дві верстки.",[],{"kind":732,"type":730,"schema":899},{"0":734,"1":735},{"name":560,"global":701,"description":901,"tags":902,"required":701,"type":730,"schema":903},"Закріпити шапку. Вимагає `maxHeight` або `fill`, інакше не діє.",[],{"kind":732,"type":730,"schema":904},{"0":734,"1":735},{"name":63,"global":701,"description":906,"tags":907,"required":701,"type":730,"schema":908},"Закріпити ПЕРШУ видиму колонку при горизонтальній прокрутці — той\nсамий контракт, що `stickyTreeColumn` у `UiTreeTable`. Має сенс\nлише коли перша колонка ідентифікує рядок (назва, номер).",[],{"kind":732,"type":730,"schema":909},{"0":734,"1":735},{"name":238,"global":701,"description":911,"tags":912,"required":701,"type":730,"schema":913},"Висоту задає БАТЬКО, а не число тут. Контейнер прокрутки обіймає\nвміст, поки той вміщається, і стискається до залишку висоти, щойно\nперестав, — тож пагінація під таблицею лишається на екрані замість\nїхати за нижню межу вікна, а під короткою таблицею не висить\nпорожня смуга на третину екрана.\n\nВимагає ланцюжка flex-колонок із ВИЗНАЧЕНОЮ висотою (`h-dvh`,\n`h-full`) і `min-h-0` на кожній ланці. Без такого ланцюжка стискати\nнемає до чого, і таблиця рендериться на всю свою висоту — саме тому\n`fill` безпечний і на сторінці, що прокручується: там він просто\nзнімає кліть `maxHeight` і нічого не ламає.\n\nПерекриває `maxHeight`.",[],{"kind":732,"type":730,"schema":914},{"0":734,"1":735},{"name":77,"global":701,"description":916,"tags":917,"required":701,"type":730,"schema":918},"Вмикає колонку прапорців ліворуч. Ключем виділення служить той самий\n`keyRow`, що вже дає рядкам `:key`.",[],{"kind":732,"type":730,"schema":919},{"0":734,"1":735},{"name":921,"global":701,"default":735,"description":922,"tags":923,"required":701,"type":730,"schema":924},"selectionBar","Панель «Вибрано N» над таблицею. Вимикайте, коли масові дії живуть у\nвласному тулбарі споживача.",[],{"kind":732,"type":730,"schema":925},{"0":734,"1":735},[927,937,942],{"name":928,"type":929,"description":930,"tags":931,"schema":932},"mobile-card","{ item: T; }","Вміст картки нижче `md`, якщо стандартний список пар не підходить.",[],{"kind":716,"type":929,"schema":933},{"item":934},{"name":935,"global":701,"description":277,"tags":936,"required":692,"type":796,"schema":796},"item",[],{"name":938,"type":939,"description":940,"tags":941,"schema":939},"empty","any","Показується замість «Даних немає».",[],{"name":943,"type":944,"description":945,"tags":946,"schema":947},"selection-actions","{ selected: SelectionKey[]; items: T[]; clear: () => void; }","Дії в панелі «Вибрано N». `clear` знімає виділення.",[],{"kind":716,"type":944,"schema":948},{"selected":949,"items":955,"clear":959},{"name":855,"global":701,"description":277,"tags":950,"required":692,"type":858,"schema":951},[],{"kind":713,"type":858,"schema":952},{"0":953},{"kind":732,"type":862,"schema":954},[723,739],{"name":118,"global":701,"description":277,"tags":956,"required":692,"type":793,"schema":957},[],{"kind":713,"type":793,"schema":958},{"0":796},{"name":960,"global":701,"description":277,"tags":961,"required":692,"type":962,"schema":963},"clear",[],"() => void",{"kind":841,"type":964},"(): void",[966,979,1021,1031],{"name":516,"description":277,"tags":967,"type":968,"signature":969,"schema":970},[],"[value: TableSort]","(evt: \"update:sort\", value: TableSort): void",[971],{"kind":716,"type":806,"schema":972},{"by":973,"dir":975},{"name":810,"global":701,"description":277,"tags":974,"required":692,"type":723,"schema":723},[],{"name":813,"global":701,"description":277,"tags":976,"required":692,"type":774,"schema":977},[],{"kind":732,"type":774,"schema":978},{"0":777,"1":778},{"name":980,"description":277,"tags":981,"type":982,"signature":983,"schema":984},"update:headers",[],"[value: TableHeader[]]","(evt: \"update:headers\", value: TableHeader[]): void",[985],{"kind":713,"type":711,"schema":986},[987],{"kind":716,"type":717,"schema":988},{"value":989,"text":991,"sortable":993,"width":997,"flex":999,"align":1001,"clamp":1005,"title":1009,"defaultSortDir":1011,"required":1015,"resizable":1017,"visible":1019},{"name":720,"global":701,"description":721,"tags":990,"required":692,"type":723,"schema":723},[],{"name":725,"global":701,"description":277,"tags":992,"required":692,"type":723,"schema":723},[],{"name":728,"global":701,"description":277,"tags":994,"required":701,"type":730,"schema":995},[],{"kind":732,"type":730,"schema":996},{"0":734,"1":735},{"name":193,"global":701,"description":737,"tags":998,"required":701,"type":739,"schema":739},[],{"name":741,"global":701,"description":742,"tags":1000,"required":701,"type":730,"schema":730},[],{"name":745,"global":701,"description":277,"tags":1002,"required":701,"type":747,"schema":1003},[],{"kind":732,"type":747,"schema":1004},{"0":750,"1":751,"2":752},{"name":754,"global":701,"description":755,"tags":1006,"required":701,"type":757,"schema":1007},[],{"kind":732,"type":757,"schema":1008},{"0":734,"1":760,"2":761,"3":762,"4":763,"5":764,"6":765},{"name":767,"global":701,"description":768,"tags":1010,"required":701,"type":723,"schema":723},[],{"name":771,"global":701,"description":772,"tags":1012,"required":701,"type":774,"schema":1013},[],{"kind":732,"type":774,"schema":1014},{"0":777,"1":778},{"name":780,"global":701,"description":781,"tags":1016,"required":701,"type":730,"schema":730},[],{"name":784,"global":701,"description":785,"tags":1018,"required":701,"type":730,"schema":730},[],{"name":788,"global":701,"description":277,"tags":1020,"required":701,"type":730,"schema":730},[],{"name":1022,"description":277,"tags":1023,"type":1024,"signature":1025,"schema":1026},"update:selected",[],"[value: SelectionKey[]]","(evt: \"update:selected\", value: SelectionKey[]): void",[1027],{"kind":713,"type":858,"schema":1028},[1029],{"kind":732,"type":862,"schema":1030},[723,739],{"name":1032,"description":277,"tags":1033,"type":1034,"signature":1035,"schema":1036},"rowClick",[],"[item: T]","(evt: \"rowClick\", item: T): void",[796],[1038,1043],{"name":1039,"type":962,"description":1040,"tags":1041,"schema":1042},"clearSelection","Знімає виділення. Потрібне після успішної масової дії.",[],{"kind":841,"type":964},{"name":1044,"type":962,"description":1045,"tags":1046,"schema":1047},"selectAllOnPage","Обирає всі доступні рядки поточного `items`.",[],{"kind":841,"type":964},"VZcIWd_-26aKqvOVotZGWccsswkE0XK2y0jZIUwVKZA",1789660506384]