[{"data":1,"prerenderedAt":3766},["ShallowReactive",2],{"locale-alternates":3,"docs-nav-en":134,"api-none":377,"page-en-\u002Fcomponents\u002Fbb-table":378,"pt-showcase-BbTable":3164,"bb-items:v-0-2-1-7-1-5":3643},{"\u002Fit\u002Fcomponenti\u002Fbb-accordion":4,"\u002Fen\u002Fcomponents\u002Fbb-accordion":5,"\u002Fit\u002Fcomponenti\u002Fbb-alert":6,"\u002Fen\u002Fcomponents\u002Fbb-alert":7,"\u002Fit\u002Fcomponenti\u002Fbb-asterisk":8,"\u002Fen\u002Fcomponents\u002Fbb-asterisk":9,"\u002Fit\u002Fcomponenti\u002Fbb-avatar":10,"\u002Fen\u002Fcomponents\u002Fbb-avatar":11,"\u002Fit\u002Fcomponenti\u002Fbb-badge":12,"\u002Fen\u002Fcomponents\u002Fbb-badge":13,"\u002Fit\u002Fcomponenti\u002Fbb-base-button":14,"\u002Fen\u002Fcomponents\u002Fbb-base-button":15,"\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs":16,"\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs":17,"\u002Fit\u002Fcomponenti\u002Fbb-button":18,"\u002Fen\u002Fcomponents\u002Fbb-button":19,"\u002Fit\u002Fcomponenti\u002Fbb-calendar":20,"\u002Fen\u002Fcomponents\u002Fbb-calendar":21,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox":22,"\u002Fen\u002Fcomponents\u002Fbb-checkbox":23,"\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group":24,"\u002Fen\u002Fcomponents\u002Fbb-checkbox-group":25,"\u002Fit\u002Fcomponenti\u002Fbb-collapsible":26,"\u002Fen\u002Fcomponents\u002Fbb-collapsible":27,"\u002Fit\u002Fcomponenti\u002Fbb-color-input":28,"\u002Fen\u002Fcomponents\u002Fbb-color-input":29,"\u002Fit\u002Fcomponenti\u002Fbb-color-palette":30,"\u002Fen\u002Fcomponents\u002Fbb-color-palette":31,"\u002Fit\u002Fcomponenti\u002Fbb-confirm":32,"\u002Fen\u002Fcomponents\u002Fbb-confirm":33,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker":34,"\u002Fen\u002Fcomponents\u002Fbb-date-picker":35,"\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input":36,"\u002Fen\u002Fcomponents\u002Fbb-date-picker-input":37,"\u002Fit\u002Fcomponenti\u002Fbb-dialog":38,"\u002Fen\u002Fcomponents\u002Fbb-dialog":39,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown":40,"\u002Fen\u002Fcomponents\u002Fbb-dropdown":41,"\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button":42,"\u002Fen\u002Fcomponents\u002Fbb-dropdown-button":43,"\u002Fit\u002Fcomponenti\u002Fbb-dropzone":44,"\u002Fen\u002Fcomponents\u002Fbb-dropzone":45,"\u002Fit\u002Fcomponenti\u002Fbb-form":46,"\u002Fen\u002Fcomponents\u002Fbb-form":47,"\u002Fit\u002Fcomponenti\u002Fbb-hover-card":48,"\u002Fen\u002Fcomponents\u002Fbb-hover-card":49,"\u002Fit\u002Fcomponenti\u002Fbb-icon":50,"\u002Fen\u002Fcomponents\u002Fbb-icon":51,"\u002Fit\u002Fcomponenti\u002Fbb-indicator":52,"\u002Fen\u002Fcomponents\u002Fbb-indicator":53,"\u002Fit\u002Fcomponenti\u002Fbb-number-input":54,"\u002Fen\u002Fcomponents\u002Fbb-number-input":55,"\u002Fit\u002Fcomponenti\u002Fbb-off-canvas":56,"\u002Fen\u002Fcomponents\u002Fbb-off-canvas":57,"\u002Fit\u002Fcomponenti\u002Fbb-pagination":58,"\u002Fen\u002Fcomponents\u002Fbb-pagination":59,"\u002Fit\u002Fcomponenti\u002Fbb-popover":60,"\u002Fen\u002Fcomponents\u002Fbb-popover":61,"\u002Fit\u002Fcomponenti\u002Fbb-progress":62,"\u002Fen\u002Fcomponents\u002Fbb-progress":63,"\u002Fit\u002Fcomponenti\u002Fbb-radio":64,"\u002Fen\u002Fcomponents\u002Fbb-radio":65,"\u002Fit\u002Fcomponenti\u002Fbb-radio-group":66,"\u002Fen\u002Fcomponents\u002Fbb-radio-group":67,"\u002Fit\u002Fcomponenti\u002Fbb-rating":68,"\u002Fen\u002Fcomponents\u002Fbb-rating":69,"\u002Fit\u002Fcomponenti\u002Fbb-select":70,"\u002Fen\u002Fcomponents\u002Fbb-select":71,"\u002Fit\u002Fcomponenti\u002Fbb-select-popover":72,"\u002Fen\u002Fcomponents\u002Fbb-select-popover":73,"\u002Fit\u002Fcomponenti\u002Fbb-slider":74,"\u002Fen\u002Fcomponents\u002Fbb-slider":75,"\u002Fit\u002Fcomponenti\u002Fbb-smooth-height":76,"\u002Fen\u002Fcomponents\u002Fbb-smooth-height":77,"\u002Fit\u002Fcomponenti\u002Fbb-spinner":78,"\u002Fen\u002Fcomponents\u002Fbb-spinner":79,"\u002Fit\u002Fcomponenti\u002Fbb-switch":80,"\u002Fen\u002Fcomponents\u002Fbb-switch":81,"\u002Fit\u002Fcomponenti\u002Fbb-switch-group":82,"\u002Fen\u002Fcomponents\u002Fbb-switch-group":83,"\u002Fit\u002Fcomponenti\u002Fbb-table":84,"\u002Fen\u002Fcomponents\u002Fbb-table":85,"\u002Fit\u002Fcomponenti\u002Fbb-tabs":86,"\u002Fen\u002Fcomponents\u002Fbb-tabs":87,"\u002Fit\u002Fcomponenti\u002Fbb-tag":88,"\u002Fen\u002Fcomponents\u002Fbb-tag":89,"\u002Fit\u002Fcomponenti\u002Fbb-text-input":90,"\u002Fen\u002Fcomponents\u002Fbb-text-input":91,"\u002Fit\u002Fcomponenti\u002Fbb-textarea":92,"\u002Fen\u002Fcomponents\u002Fbb-textarea":93,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker":94,"\u002Fen\u002Fcomponents\u002Fbb-time-picker":95,"\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input":96,"\u002Fen\u002Fcomponents\u002Fbb-time-picker-input":97,"\u002Fit\u002Fcomponenti\u002Fbb-toast":98,"\u002Fen\u002Fcomponents\u002Fbb-toast":99,"\u002Fit\u002Fcomponenti\u002Fbb-tooltip":100,"\u002Fen\u002Fcomponents\u002Fbb-tooltip":101,"\u002Fit\u002Fcomponenti\u002Fbb-tree":102,"\u002Fen\u002Fcomponents\u002Fbb-tree":103,"\u002Fit\u002Fguide\u002Fadoption-checklist":104,"\u002Fen\u002Fguides\u002Fadoption-checklist":105,"\u002Fit\u002Fguide\u002Fai-agents":106,"\u002Fen\u002Fguides\u002Fai-agents":107,"\u002Fit\u002Fguide\u002Fcoherence":108,"\u002Fen\u002Fguides\u002Fcoherence":109,"\u002Fit\u002Fguide\u002Fdesign-language":110,"\u002Fen\u002Fguides\u002Fdesign-language":111,"\u002Fit\u002Fguide\u002Fdesign-tokens":112,"\u002Fen\u002Fguides\u002Fdesign-tokens":113,"\u002Fit\u002Fguide\u002Ffetching-data":114,"\u002Fen\u002Fguides\u002Ffetching-data":115,"\u002Fit\u002Fguide\u002Ficons":116,"\u002Fen\u002Fguides\u002Ficons":117,"\u002Fit\u002Fguide\u002Finertia":118,"\u002Fen\u002Fguides\u002Finertia":119,"\u002Fit\u002Fguide\u002Finstallation":120,"\u002Fen\u002Fguides\u002Finstallation":121,"\u002Fit\u002Fguide\u002Fmigration":122,"\u002Fen\u002Fguides\u002Fmigration":123,"\u002Fit\u002Fguide\u002Fnuxt":124,"\u002Fen\u002Fguides\u002Fnuxt":125,"\u002Fit\u002Fguide\u002Foptions-and-items":126,"\u002Fen\u002Fguides\u002Foptions-and-items":127,"\u002Fit\u002Fguide\u002Fpassthrough":128,"\u002Fen\u002Fguides\u002Fpassthrough":129,"\u002Fit\u002Fguide\u002Fpreset-components":130,"\u002Fen\u002Fguides\u002Fpreset-components":131,"\u002Fit\u002Fguide\u002Fvalidated-forms":132,"\u002Fen\u002Fguides\u002Fvalidated-forms":133},"\u002Fen\u002Fcomponents\u002Fbb-accordion","\u002Fit\u002Fcomponenti\u002Fbb-accordion","\u002Fen\u002Fcomponents\u002Fbb-alert","\u002Fit\u002Fcomponenti\u002Fbb-alert","\u002Fen\u002Fcomponents\u002Fbb-asterisk","\u002Fit\u002Fcomponenti\u002Fbb-asterisk","\u002Fen\u002Fcomponents\u002Fbb-avatar","\u002Fit\u002Fcomponenti\u002Fbb-avatar","\u002Fen\u002Fcomponents\u002Fbb-badge","\u002Fit\u002Fcomponenti\u002Fbb-badge","\u002Fen\u002Fcomponents\u002Fbb-base-button","\u002Fit\u002Fcomponenti\u002Fbb-base-button","\u002Fen\u002Fcomponents\u002Fbb-breadcrumbs","\u002Fit\u002Fcomponenti\u002Fbb-breadcrumbs","\u002Fen\u002Fcomponents\u002Fbb-button","\u002Fit\u002Fcomponenti\u002Fbb-button","\u002Fen\u002Fcomponents\u002Fbb-calendar","\u002Fit\u002Fcomponenti\u002Fbb-calendar","\u002Fen\u002Fcomponents\u002Fbb-checkbox","\u002Fit\u002Fcomponenti\u002Fbb-checkbox","\u002Fen\u002Fcomponents\u002Fbb-checkbox-group","\u002Fit\u002Fcomponenti\u002Fbb-checkbox-group","\u002Fen\u002Fcomponents\u002Fbb-collapsible","\u002Fit\u002Fcomponenti\u002Fbb-collapsible","\u002Fen\u002Fcomponents\u002Fbb-color-input","\u002Fit\u002Fcomponenti\u002Fbb-color-input","\u002Fen\u002Fcomponents\u002Fbb-color-palette","\u002Fit\u002Fcomponenti\u002Fbb-color-palette","\u002Fen\u002Fcomponents\u002Fbb-confirm","\u002Fit\u002Fcomponenti\u002Fbb-confirm","\u002Fen\u002Fcomponents\u002Fbb-date-picker","\u002Fit\u002Fcomponenti\u002Fbb-date-picker","\u002Fen\u002Fcomponents\u002Fbb-date-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-date-picker-input","\u002Fen\u002Fcomponents\u002Fbb-dialog","\u002Fit\u002Fcomponenti\u002Fbb-dialog","\u002Fen\u002Fcomponents\u002Fbb-dropdown","\u002Fit\u002Fcomponenti\u002Fbb-dropdown","\u002Fen\u002Fcomponents\u002Fbb-dropdown-button","\u002Fit\u002Fcomponenti\u002Fbb-dropdown-button","\u002Fen\u002Fcomponents\u002Fbb-dropzone","\u002Fit\u002Fcomponenti\u002Fbb-dropzone","\u002Fen\u002Fcomponents\u002Fbb-form","\u002Fit\u002Fcomponenti\u002Fbb-form","\u002Fen\u002Fcomponents\u002Fbb-hover-card","\u002Fit\u002Fcomponenti\u002Fbb-hover-card","\u002Fen\u002Fcomponents\u002Fbb-icon","\u002Fit\u002Fcomponenti\u002Fbb-icon","\u002Fen\u002Fcomponents\u002Fbb-indicator","\u002Fit\u002Fcomponenti\u002Fbb-indicator","\u002Fen\u002Fcomponents\u002Fbb-number-input","\u002Fit\u002Fcomponenti\u002Fbb-number-input","\u002Fen\u002Fcomponents\u002Fbb-off-canvas","\u002Fit\u002Fcomponenti\u002Fbb-off-canvas","\u002Fen\u002Fcomponents\u002Fbb-pagination","\u002Fit\u002Fcomponenti\u002Fbb-pagination","\u002Fen\u002Fcomponents\u002Fbb-popover","\u002Fit\u002Fcomponenti\u002Fbb-popover","\u002Fen\u002Fcomponents\u002Fbb-progress","\u002Fit\u002Fcomponenti\u002Fbb-progress","\u002Fen\u002Fcomponents\u002Fbb-radio","\u002Fit\u002Fcomponenti\u002Fbb-radio","\u002Fen\u002Fcomponents\u002Fbb-radio-group","\u002Fit\u002Fcomponenti\u002Fbb-radio-group","\u002Fen\u002Fcomponents\u002Fbb-rating","\u002Fit\u002Fcomponenti\u002Fbb-rating","\u002Fen\u002Fcomponents\u002Fbb-select","\u002Fit\u002Fcomponenti\u002Fbb-select","\u002Fen\u002Fcomponents\u002Fbb-select-popover","\u002Fit\u002Fcomponenti\u002Fbb-select-popover","\u002Fen\u002Fcomponents\u002Fbb-slider","\u002Fit\u002Fcomponenti\u002Fbb-slider","\u002Fen\u002Fcomponents\u002Fbb-smooth-height","\u002Fit\u002Fcomponenti\u002Fbb-smooth-height","\u002Fen\u002Fcomponents\u002Fbb-spinner","\u002Fit\u002Fcomponenti\u002Fbb-spinner","\u002Fen\u002Fcomponents\u002Fbb-switch","\u002Fit\u002Fcomponenti\u002Fbb-switch","\u002Fen\u002Fcomponents\u002Fbb-switch-group","\u002Fit\u002Fcomponenti\u002Fbb-switch-group","\u002Fen\u002Fcomponents\u002Fbb-table","\u002Fit\u002Fcomponenti\u002Fbb-table","\u002Fen\u002Fcomponents\u002Fbb-tabs","\u002Fit\u002Fcomponenti\u002Fbb-tabs","\u002Fen\u002Fcomponents\u002Fbb-tag","\u002Fit\u002Fcomponenti\u002Fbb-tag","\u002Fen\u002Fcomponents\u002Fbb-text-input","\u002Fit\u002Fcomponenti\u002Fbb-text-input","\u002Fen\u002Fcomponents\u002Fbb-textarea","\u002Fit\u002Fcomponenti\u002Fbb-textarea","\u002Fen\u002Fcomponents\u002Fbb-time-picker","\u002Fit\u002Fcomponenti\u002Fbb-time-picker","\u002Fen\u002Fcomponents\u002Fbb-time-picker-input","\u002Fit\u002Fcomponenti\u002Fbb-time-picker-input","\u002Fen\u002Fcomponents\u002Fbb-toast","\u002Fit\u002Fcomponenti\u002Fbb-toast","\u002Fen\u002Fcomponents\u002Fbb-tooltip","\u002Fit\u002Fcomponenti\u002Fbb-tooltip","\u002Fen\u002Fcomponents\u002Fbb-tree","\u002Fit\u002Fcomponenti\u002Fbb-tree","\u002Fen\u002Fguides\u002Fadoption-checklist","\u002Fit\u002Fguide\u002Fadoption-checklist","\u002Fen\u002Fguides\u002Fai-agents","\u002Fit\u002Fguide\u002Fai-agents","\u002Fen\u002Fguides\u002Fcoherence","\u002Fit\u002Fguide\u002Fcoherence","\u002Fen\u002Fguides\u002Fdesign-language","\u002Fit\u002Fguide\u002Fdesign-language","\u002Fen\u002Fguides\u002Fdesign-tokens","\u002Fit\u002Fguide\u002Fdesign-tokens","\u002Fen\u002Fguides\u002Ffetching-data","\u002Fit\u002Fguide\u002Ffetching-data","\u002Fen\u002Fguides\u002Ficons","\u002Fit\u002Fguide\u002Ficons","\u002Fen\u002Fguides\u002Finertia","\u002Fit\u002Fguide\u002Finertia","\u002Fen\u002Fguides\u002Finstallation","\u002Fit\u002Fguide\u002Finstallation","\u002Fen\u002Fguides\u002Fmigration","\u002Fit\u002Fguide\u002Fmigration","\u002Fen\u002Fguides\u002Fnuxt","\u002Fit\u002Fguide\u002Fnuxt","\u002Fen\u002Fguides\u002Foptions-and-items","\u002Fit\u002Fguide\u002Foptions-and-items","\u002Fen\u002Fguides\u002Fpassthrough","\u002Fit\u002Fguide\u002Fpassthrough","\u002Fen\u002Fguides\u002Fpreset-components","\u002Fit\u002Fguide\u002Fpreset-components","\u002Fen\u002Fguides\u002Fvalidated-forms","\u002Fit\u002Fguide\u002Fvalidated-forms",[135,150,162,186,198,242,275,311,332,353,365,371],{"label":136,"entries":137},"Getting started",[138,142,146],{"title":139,"path":140,"order":141},"Installation","\u002Fguides\u002Finstallation",1,{"title":143,"path":144,"order":145},"Migrating from v2","\u002Fguides\u002Fmigration",2,{"title":147,"path":148,"order":149},"Adoption checklist","\u002Fguides\u002Fadoption-checklist",3,{"label":151,"entries":152},"Design system",[153,156,159],{"title":154,"path":155,"order":141},"Design tokens","\u002Fguides\u002Fdesign-tokens",{"title":157,"path":158,"order":145},"Design language","\u002Fguides\u002Fdesign-language",{"title":160,"path":161,"order":149},"Passthrough","\u002Fguides\u002Fpassthrough",{"label":163,"entries":164},"Playbooks",[165,168,171,174,178,182],{"title":166,"path":167,"order":141},"Options and items","\u002Fguides\u002Foptions-and-items",{"title":169,"path":170,"order":145},"Fetching data","\u002Fguides\u002Ffetching-data",{"title":172,"path":173,"order":149},"Coherence","\u002Fguides\u002Fcoherence",{"title":175,"path":176,"order":177},"Validated forms","\u002Fguides\u002Fvalidated-forms",4,{"title":179,"path":180,"order":181},"Icons","\u002Fguides\u002Ficons",5,{"title":183,"path":184,"order":185},"Preset components","\u002Fguides\u002Fpreset-components",6,{"label":187,"entries":188},"Ecosystem",[189,192,195],{"title":190,"path":191,"order":141},"Inertia and Laravel","\u002Fguides\u002Finertia",{"title":193,"path":194,"order":145},"Nuxt","\u002Fguides\u002Fnuxt",{"title":196,"path":197,"order":149},"AI agents","\u002Fguides\u002Fai-agents",{"label":199,"entries":200},"Inputs",[201,204,207,210,213,216,219,222,226,230,234,238],{"title":202,"path":203,"component":202,"order":141},"BbBaseButton","\u002Fcomponents\u002Fbb-base-button",{"title":205,"path":206,"component":205,"order":145},"BbButton","\u002Fcomponents\u002Fbb-button",{"title":208,"path":209,"component":208,"order":149},"BbCalendar","\u002Fcomponents\u002Fbb-calendar",{"title":211,"path":212,"component":211,"order":149},"BbColorInput","\u002Fcomponents\u002Fbb-color-input",{"title":214,"path":215,"component":214,"order":177},"BbDatePickerInput","\u002Fcomponents\u002Fbb-date-picker-input",{"title":217,"path":218,"component":217,"order":181},"BbDropzone","\u002Fcomponents\u002Fbb-dropzone",{"title":220,"path":221,"component":220,"order":185},"BbForm","\u002Fcomponents\u002Fbb-form",{"title":223,"path":224,"component":223,"order":225},"BbNumberInput","\u002Fcomponents\u002Fbb-number-input",7,{"title":227,"path":228,"component":227,"order":229},"BbTag","\u002Fcomponents\u002Fbb-tag",8,{"title":231,"path":232,"component":231,"order":233},"BbTextarea","\u002Fcomponents\u002Fbb-textarea",9,{"title":235,"path":236,"component":235,"order":237},"BbTextInput","\u002Fcomponents\u002Fbb-text-input",10,{"title":239,"path":240,"component":239,"order":241},"BbTimePickerInput","\u002Fcomponents\u002Fbb-time-picker-input",11,{"label":243,"entries":244},"Selection",[245,248,251,254,257,260,263,266,269,272],{"title":246,"path":247,"component":246,"order":141},"BbCheckbox","\u002Fcomponents\u002Fbb-checkbox",{"title":249,"path":250,"component":249,"order":145},"BbCheckboxGroup","\u002Fcomponents\u002Fbb-checkbox-group",{"title":252,"path":253,"component":252,"order":149},"BbRadio","\u002Fcomponents\u002Fbb-radio",{"title":255,"path":256,"component":255,"order":177},"BbRadioGroup","\u002Fcomponents\u002Fbb-radio-group",{"title":258,"path":259,"component":258,"order":181},"BbRating","\u002Fcomponents\u002Fbb-rating",{"title":261,"path":262,"component":261,"order":185},"BbSelect","\u002Fcomponents\u002Fbb-select",{"title":264,"path":265,"component":264,"order":225},"BbSelectPopover","\u002Fcomponents\u002Fbb-select-popover",{"title":267,"path":268,"component":267,"order":229},"BbSlider","\u002Fcomponents\u002Fbb-slider",{"title":270,"path":271,"component":270,"order":233},"BbSwitch","\u002Fcomponents\u002Fbb-switch",{"title":273,"path":274,"component":273,"order":237},"BbSwitchGroup","\u002Fcomponents\u002Fbb-switch-group",{"label":276,"entries":277},"Overlay",[278,281,284,287,290,293,296,299,302,305,308],{"title":279,"path":280,"component":279,"order":141},"BbColorPalette","\u002Fcomponents\u002Fbb-color-palette",{"title":282,"path":283,"component":282,"order":145},"BbConfirm","\u002Fcomponents\u002Fbb-confirm",{"title":285,"path":286,"component":285,"order":149},"BbDatePicker","\u002Fcomponents\u002Fbb-date-picker",{"title":288,"path":289,"component":288,"order":177},"BbDialog","\u002Fcomponents\u002Fbb-dialog",{"title":291,"path":292,"component":291,"order":181},"BbDropdown","\u002Fcomponents\u002Fbb-dropdown",{"title":294,"path":295,"component":294,"order":185},"BbDropdownButton","\u002Fcomponents\u002Fbb-dropdown-button",{"title":297,"path":298,"component":297,"order":225},"BbHoverCard","\u002Fcomponents\u002Fbb-hover-card",{"title":300,"path":301,"component":300,"order":225},"BbOffCanvas","\u002Fcomponents\u002Fbb-off-canvas",{"title":303,"path":304,"component":303,"order":229},"BbPopover","\u002Fcomponents\u002Fbb-popover",{"title":306,"path":307,"component":306,"order":233},"BbTimePicker","\u002Fcomponents\u002Fbb-time-picker",{"title":309,"path":310,"component":309,"order":237},"BbTooltip","\u002Fcomponents\u002Fbb-tooltip",{"label":312,"entries":313},"Navigation",[314,317,320,323,326,329],{"title":315,"path":316,"component":315,"order":141},"BbAccordion","\u002Fcomponents\u002Fbb-accordion",{"title":318,"path":319,"component":318,"order":145},"BbBreadcrumbs","\u002Fcomponents\u002Fbb-breadcrumbs",{"title":321,"path":322,"component":321,"order":149},"BbCollapsible","\u002Fcomponents\u002Fbb-collapsible",{"title":324,"path":325,"component":324,"order":177},"BbPagination","\u002Fcomponents\u002Fbb-pagination",{"title":327,"path":328,"component":327,"order":181},"BbTabs","\u002Fcomponents\u002Fbb-tabs",{"title":330,"path":331,"component":330,"order":185},"BbTree","\u002Fcomponents\u002Fbb-tree",{"label":333,"entries":334},"Feedback",[335,338,341,344,347,350],{"title":336,"path":337,"component":336,"order":141},"BbAlert","\u002Fcomponents\u002Fbb-alert",{"title":339,"path":340,"component":339,"order":145},"BbBadge","\u002Fcomponents\u002Fbb-badge",{"title":342,"path":343,"component":342,"order":149},"BbIndicator","\u002Fcomponents\u002Fbb-indicator",{"title":345,"path":346,"component":345,"order":177},"BbProgress","\u002Fcomponents\u002Fbb-progress",{"title":348,"path":349,"component":348,"order":181},"BbSpinner","\u002Fcomponents\u002Fbb-spinner",{"title":351,"path":352,"component":351,"order":185},"BbToast","\u002Fcomponents\u002Fbb-toast",{"label":354,"entries":355},"Data Display",[356,359,362],{"title":357,"path":358,"component":357,"order":141},"BbAvatar","\u002Fcomponents\u002Fbb-avatar",{"title":360,"path":361,"component":360,"order":145},"BbIcon","\u002Fcomponents\u002Fbb-icon",{"title":363,"path":364,"component":363,"order":149},"BbTable","\u002Fcomponents\u002Fbb-table",{"label":366,"entries":367},"Layout & Utility",[368],{"title":369,"path":370,"component":369,"order":141},"BbSmoothHeight","\u002Fcomponents\u002Fbb-smooth-height",{"label":372,"entries":373},"Other",[374],{"title":375,"path":376,"component":375,"order":141},"BbAsterisk","\u002Fcomponents\u002Fbb-asterisk",null,{"id":379,"title":363,"body":380,"component":363,"description":3147,"extension":3148,"group":354,"meta":3149,"navigation":2048,"order":149,"path":364,"sections":3150,"seo":3161,"stem":3162,"__hash__":3163},"docs_en\u002Fcomponents\u002Fbb-table.md",{"type":381,"value":382,"toc":3133},"minimark",[383,441,450,462,482,490,493,497,518,547,570,573,576,588,594,603,606,672,708,758,771,774,819,857,877,880,902,905,914,955,961,982,985,1021,1042,1048,1066,1069,1096,1141,1168,1177,1180,1225,1231,1240,1243,1292,1309,1312,1317,1345,1372,1378,1384,1387,1412,1429,1442,1445,1498,1504,1525,1528,1564,1577,1580,1606,1625,1755,1768,1835,1853,1880,1908,1914,1930,1933,1957,1978,1984,1995,1998,2008,2285,2294,2316,2337,2340,2374,2383,2386,2400,2437,2443,2450,2480,2521,2569,2798,2826,2856,2861,2925,3129],[384,385,386,394],"when",{},[387,388,389,390,393],"p",{},"Reach for ",[391,392,363],"code",{}," when you have rows of records with columns: an orders\nlisting, a members admin, an audit log. You declare the columns; the component\nowns extraction, formatting, sorting indicators, selection controls, skeletons,\nempty states, detail rows and keyboard navigation.",[395,396,398],"template",{"v-slot:else":397},"",[399,400,401,420,427,434],"ul",{},[402,403,404,409,410,414,415,419],"li",{},[405,406,407],"a",{"href":70},[391,408,261],{},",\n",[405,411,412],{"href":24},[391,413,249],{}," or\n",[405,416,417],{"href":66},[391,418,255],{}," — options are being picked\ninside a form; a selectable table is not a form field",[402,421,422,426],{},[405,423,424],{"href":102},[391,425,330],{}," — the data is genuinely recursive: a file\ntree, nested categories. Flat rows with one level of detail stay here",[402,428,429,433],{},[405,430,431],{"href":72},[391,432,264],{}," — it is a picker that\nopens from a cell",[402,435,436,440],{},[405,437,438],{"href":58},[391,439,324],{}," — you are after the paging\ncontrols",[387,442,443,444,446,447,449],{},"Also see: ",[405,445,169],{"href":114},", ",[405,448,172],{"href":108},".",[387,451,452,453,457,458,461],{},"It ",[454,455,456],"strong",{},"reports intent",". Your application owns the rows. Sort, selection, page,\nexpansion and highlight arrive as v-models; apply them in a ",[391,459,460],{},"computed"," or send\nthem to your API.",[463,464,465],"migration",{},[387,466,467,477,478,449],{},[454,468,469,470,473,474,449],{},"In v3 the table is a CSS grid of ",[391,471,472],{},"\u003Cdiv>","s with ARIA roles, not a ",[391,475,476],{},"\u003Ctable>","\nThe migration details are in ",[405,479,481],{"href":480},"#styling","Styling the grid",[483,484,486],"h2",{"id":485},"default",[487,488,489],"span",{},"An async orders list",[387,491,492],{},"Start with the shape most application screens need: an API-backed order list\nwith filtering and server ordering.",[494,495],"demo",{"name":496},"BbTable\u002FAsyncOrders",[387,498,499,500,506,507,513,514,517],{},"Set ",[405,501,503],{"href":502},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-items",[391,504,505],{},"items"," to a function and list\nwhat the request depends on in\n",[405,508,510],{"href":509},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-dependencies",[391,511,512],{},"dependencies",". The table\nthen owns the request lifecycle: debounce, loading state, refetch and discarding\nout-of-order responses. Do not add a parallel watcher. Dependencies compare by\nvalue, so ",[391,515,516],{},"[filters]"," refetches when the filter contents change.",[387,519,520,521,524,525,409,528,531,532,535,536,539,540,543,544,546],{},"The provider receives one context object: ",[391,522,523],{},"reason"," (",[391,526,527],{},"'initial'",[391,529,530],{},"'dependencies'"," or ",[391,533,534],{},"'pagination'","), ",[391,537,538],{},"modelValue"," (the current selection) and\n",[391,541,542],{},"signal",". Pass ",[391,545,542],{}," to your request: it aborts when a newer call starts.",[387,548,499,549,555,556,562,563,569],{},[405,550,552],{"href":551},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-itemValue",[391,553,554],{},"item-value"," before adding row\nstate. It is the stable key for selection, expansion and highlight; without it\nthose models compare object references and break after a refetch.\n",[405,557,559],{"href":558},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-caption",[391,560,561],{},"caption"," names the table for\nassistive technology (visually hidden unless you add\n",[405,564,566],{"href":565},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-displayCaption",[391,567,568],{},"display-caption",").",[387,571,572],{},"For a local array, the same contract is smaller:",[494,574],{"name":575},"BbTable\u002FBasic",[387,577,578,579,581,582,449],{},"Every row in ",[391,580,505],{}," mounts. A few hundred rows on a client-only screen is fine;\npast roughly a thousand, page them or add ",[405,583,585],{"href":584},"#wide-tables",[391,586,587],{},"virtual",[483,589,591],{"id":590},"columns",[487,592,593],{},"Columns and cells",[387,595,596,597,602],{},"Everything a cell needs is declared in the column object of\n",[405,598,600],{"href":599},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-columns",[391,601,590],{},", which is why most tables\nneed no cell slots at all.",[494,604],{"name":605},"BbTable\u002FOrderColumns",[399,607,608,617,647,653],{},[402,609,610,613,614,569],{},[391,611,612],{},"key"," extracts the value; dot paths reach nested fields\n(",[391,615,616],{},"customer.address.city",[402,618,619,622,623,626,627,629,630,633,634,638,639,642,643,646],{},[391,620,621],{},"formatter(content, key, item)"," transforms it, and runs even when the value is\nnullish. That is what makes a ",[454,624,625],{},"virtual column"," work: a ",[391,628,612],{}," that matches no\nfield, computed from ",[391,631,632],{},"item"," (the ",[635,636,637],"em",{},"Lines"," column above). ",[391,640,641],{},"formatOnNull: false","\nopts out; ",[391,644,645],{},"placeholder"," fills a cell that still ends up empty.",[402,648,649,652],{},[391,650,651],{},"rowHeader: true"," marks the column that names each row. Its cells become row\nheaders, so a screen reader reads \"ORD-2026-0418, 5 Jun 2026\" instead of a\nbare date. They look the same.",[402,654,655,446,658,446,661,446,664,667,668,671],{},[391,656,657],{},"align",[391,659,660],{},"width",[391,662,663],{},"thClass",[391,665,666],{},"tdClass"," and ",[391,669,670],{},"rowClass"," set presentation.",[387,673,674,675,446,678,681,682,446,685,688,689,692,693,696,697,700,701,707],{},"Widths are grid tracks. A number or a length (",[391,676,677],{},"120",[391,679,680],{},"'8rem'",") freezes the\ncolumn. A grid value (",[391,683,684],{},"'2fr'",[391,686,687],{},"'minmax(0, 1fr)'",") is used as written, and\n",[391,690,691],{},"'max-content'"," keeps an ID on one line. Leave most columns unsized. The table\nestimates a floor from each column's content and keeps the values a line break\nwould harm on one line: names and statuses, amounts with their currency, ranges,\ndates and codes. When room runs short, longer values wrap first, then prose\nnarrows, then a long heading of several words takes two lines; it scrolls\nsideways only as a last resort. You rarely need ",[391,694,695],{},"whitespace-nowrap"," in a\n",[391,698,699],{},"td-class",".\n",[405,702,704],{"href":703},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-fixed",[391,705,706],{},"fixed"," splits the room equally\ninstead.",[387,709,710,667,713,716,717,723,724,730,731,446,733,409,735,446,738,741,742,745,746,667,748,750,751,754,755,757],{},[391,711,712],{},"select",[391,714,715],{},"actions"," are not columns. The\n",[405,718,720],{"href":719},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-selectable",[391,721,722],{},"selectable"," prop creates the\nselection column, and providing the\n",[405,725,727],{"href":726},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-actions",[391,728,729],{},"#actions"," slot creates the actions\ncolumn. Do not key a column like one of the table's own slots (",[391,732,715],{},[391,734,712],{},[391,736,737],{},"expand",[391,739,740],{},"empty"," and a few more), or its ",[391,743,744],{},"#\u003Ckey>"," slot becomes the table's own.\nDev builds warn for ",[391,747,715],{},[391,749,712],{},", and ",[391,752,753],{},"bitboss-ui check","\nflags any colliding key when ",[391,756,590],{}," is written in the same file.",[387,759,760,761,763,764,770],{},"When a value needs markup rather than a string, override that column's body with\na ",[391,762,744],{}," slot. Row-level state goes in\n",[405,765,767],{"href":766},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-rowClass",[391,768,769],{},"row-class",", which paints the whole\nrow rather than one cell:",[494,772],{"name":773},"BbTable\u002FStatusCells",[387,775,776,779,780,783,784,446,787,790,791,446,794,783,797,667,800,803,804,807,808,811,812,815,816,818],{},[454,777,778],{},"The slot name is the key in kebab-case."," ",[391,781,782],{},"status"," is ",[391,785,786],{},"#status",[391,788,789],{},"customerId","\nis ",[391,792,793],{},"#customer-id",[391,795,796],{},"address.city",[391,798,799],{},"#address-city",[391,801,802],{},"address2"," is\n",[391,805,806],{},"#address-2",". For a key with accents or punctuation, write the name through the\nfunction instead of by hand: ",[391,809,810],{},"#[slotKey('Qualità')]",", with\n",[391,813,814],{},"import { slotKey } from 'bitboss-ui'",". A name that differs by one character\nnever matches. Leftover camelCase or underscore names are reported twice: a\ndevelopment build warns, and ",[391,817,753],{}," names the new spelling.",[387,820,821,822,824,825,828,829,831,832,633,835,838,839,841,842,446,845,848,849,852,853,856],{},"Keep the slotted column in ",[391,823,590],{},": its label, alignment and width still come\nfrom there, and the formatter's output reaches the slot as ",[391,826,827],{},"content",". The scope\nalso carries ",[391,830,632],{}," (your record), ",[391,833,834],{},"value",[454,836,837],{},"row's"," value through\n",[391,840,554],{},", not the cell's) and the row's ",[391,843,844],{},"selected",[391,846,847],{},"expanded"," and\n",[391,850,851],{},"highlighted"," flags with their ",[391,854,855],{},"toggle*"," callbacks.",[387,858,859,865,866,872,873,876],{},[405,860,862],{"href":861},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-%3Ckey%3E:header",[391,863,864],{},"#\u003Ckey>:header"," replaces a\nheader and takes the built-in sort button with it. To add beside the label\ninstead, use\n",[405,867,869],{"href":868},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-%3Ckey%3E:header:append",[391,870,871],{},"#\u003Ckey>:header:append","\nor ",[391,874,875],{},":prepend",":",[494,878],{"name":879},"BbTable\u002FHeaderAffix",[387,881,882,883,886,887,890,891,894,895,898,899,449],{},"A ",[454,884,885],{},"totals row"," takes one slot per column: ",[391,888,889],{},"#\u003Ckey>:last"," fills that column's\ncell in a row after the data rows (",[391,892,893],{},"#\u003Ckey>:first"," puts one before). The cell\nsits on its column's own track, so it follows ",[391,896,897],{},"order",", hidden columns and\nresizing. Style the row with ",[391,900,901],{},"pt:last-row",[494,903],{"name":904},"BbTable\u002FFooterTotals",[387,906,907,909,910,913],{},[391,908,505],{}," in the slot scope is the rows in view, so a total across pages comes from\nyour server. Add ",[391,911,912],{},"fixed-last"," to keep the row in view while the body scrolls.",[463,915,917,936],{"title":916},"rowClass and sortable on a column",[387,918,919,920,923,924,927,928,931,932,935],{},"Both fields are new on the v3 column type. v2 ignored unknown column fields, so\napplications often parked their own data there. A leftover per-column\n",[391,921,922],{},"rowClass: 'w-40'"," still type-checks and now lands on every row. A backend sort\nkey parked in ",[391,925,926],{},"sortable"," intersects ",[391,929,930],{},"boolean & string"," (a type error that never\nmentions ",[391,933,934],{},"BbTableColumn","), and at runtime the truthy string turns the built-in\nsort UI on beside your own. Rename both fields.",[937,938,942],"pre",{"className":939,"code":940,"language":941,"meta":397,"style":397},"language-diff shiki shiki-themes github-light-high-contrast github-dark-high-contrast","- type Column = BbTableColumn\u003COrder> & { sortable?: string };\n+ type Column = BbTableColumn\u003COrder> & { sortKey?: string };\n","diff",[391,943,944,950],{"__ignoreMap":397},[487,945,947],{"class":946,"line":141},"line",[487,948,949],{},"- type Column = BbTableColumn\u003COrder> & { sortable?: string };\n",[487,951,952],{"class":946,"line":145},[487,953,954],{},"+ type Column = BbTableColumn\u003COrder> & { sortKey?: string };\n",[483,956,958],{"id":957},"sorting",[487,959,960],{},"Sortable columns",[387,962,963,964,966,967,973,974,977,978,981],{},"Mark a column ",[391,965,926],{}," and bind\n",[405,968,970],{"href":969},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-sort",[391,971,972],{},"v-model:sort",". The model is an ordered\narray of ",[391,975,976],{},"[columnKey, direction]"," entries, and the array order ",[454,979,980],{},"is"," the\npriority.",[494,983],{"name":984},"BbTable\u002FSortableProducts",[387,986,987,988,991,992,995,996,1002,1003,1006,1007,1009,1010,1012,1013,1016,1017,1020],{},"A click on a sortable header sorts by ",[454,989,990],{},"that column alone",", cycling it through\nascending, descending and unsorted. ",[454,993,994],{},"Shift+click"," (or Shift+Enter) adds the\ncolumn instead: it joins the end of the model, and a direction flip updates its\nentry in place, so the column keeps its priority. Set\n",[405,997,999],{"href":998},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-multiSort",[391,1000,1001],{},"multi-sort"," when a plain click\nshould add too. ",[454,1004,1005],{},"The table never sorts your rows."," Apply the model in a\n",[391,1008,460],{},", as above, or forward it to the server and refetch through\n",[391,1011,512],{},", as the first demo does. To open pre-sorted, seed the model; the\ncolumn's ",[391,1014,1015],{},"sorted"," field only sets ",[391,1018,1019],{},"aria-sort"," for rows the server already\nreturns in order.",[387,1022,1023,1024,1027,1028,1030,1031,1033,1034,1037,1038,1041],{},"A sortable header is a real ",[391,1025,1026],{},"\u003Cbutton>"," and its cell carries ",[391,1029,1019],{},". A\ncustom ",[391,1032,864],{}," slot replaces that button, so render your own and call\nthe scope's ",[391,1035,1036],{},"toggleSort"," to keep sorting reachable: ",[391,1039,1040],{},"@click=\"toggleSort\""," passes\nthe event, so Shift adds the column there too.",[483,1043,1045],{"id":1044},"selection",[487,1046,1047],{},"Selecting rows",[387,1049,1050,1051,966,1055,1061,1062,1065],{},"Add ",[405,1052,1053],{"href":719},[391,1054,722],{},[405,1056,1058],{"href":1057},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-modelValue",[391,1059,1060],{},"v-model",". Multiple is the\ndefault, and the model ",[454,1063,1064],{},"must"," already be an array; the table throws otherwise.",[494,1067],{"name":1068},"BbTable\u002FSelectableProducts",[387,1070,1071,1072,1075,1076,1082,1083,1085,1086,1092,1093,449],{},"A selectable table is a ",[391,1073,1074],{},"\u003Cfieldset>",": give it a\n",[405,1077,1079],{"href":1078},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-legend",[391,1080,1081],{},"legend"," that says what the selection\nis for (it falls back to ",[391,1084,561],{},"). Each checkbox is labelled from the row's\ncells in the locale's word order (\"Select …\" in English, \"… auswählen\" in\nGerman); ",[405,1087,1089],{"href":1088},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-accessibleLabel",[391,1090,1091],{},"accessible-label","\nreplaces that label with your own function of ",[391,1094,1095],{},"(columns, item)",[399,1097,1098,1110,1126],{},[402,1099,1100,1106,1107,449],{},[405,1101,1103],{"href":1102},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-name",[391,1104,1105],{},"name"," renders a hidden input per\nselected value, so the table submits inside a plain ",[391,1108,1109],{},"\u003Cform>",[402,1111,1112,1114,1115,1118,1119,1125],{},[391,1113,722],{}," also takes a predicate ",[391,1116,1117],{},"(item) => boolean"," to lock rows, and\n",[405,1120,1122],{"href":1121},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-max",[391,1123,1124],{},"max"," caps the count.",[402,1127,1128,848,1134,1140],{},[405,1129,1131],{"href":1130},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#event-item:selected",[391,1132,1133],{},"item:selected",[405,1135,1137],{"href":1136},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#event-item:unselected",[391,1138,1139],{},"item:unselected"," are for\nside effects; the model stays the state.",[387,1142,1143,1146,1147,1153,1154,1160,1161,1164,1165,1167],{},[454,1144,1145],{},"Select-all means \"everything, across every page\"."," While\n",[405,1148,1150],{"href":1149},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-selectAll",[391,1151,1152],{},"v-model:select-all"," is on, every\nrow reads as selected and unticking one adds it to\n",[405,1155,1157],{"href":1156},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-unselectedItems",[391,1158,1159],{},"v-model:unselected-items",",\nso your bulk endpoint receives ",[391,1162,1163],{},"{ all: true, except: [...] }",". ",[391,1166,538],{}," stays\nempty in that mode and the hidden inputs post nothing, so read the two select-all\nmodels and submit through a handler.",[387,1169,1170,1173,1174,876],{},[391,1171,1172],{},":multiple=\"false\""," renders radios and the model becomes one value or ",[391,1175,1176],{},"null",[494,1178],{"name":1179},"BbTable\u002FSinglePlanChoice",[463,1181,1183,1210],{"title":1182},"allow-select-all → disable-select-all",[387,1184,1185,1186,1189,1190,1193,1194,1197,1198,1201,1202,1205,1206,1209],{},"The prop that hides the header checkbox inverted: v2's ",[391,1187,1188],{},"allow-select-all","\n(default ",[391,1191,1192],{},"true",") is now ",[391,1195,1196],{},"disable-select-all"," (default ",[391,1199,1200],{},"false","). The old name\nlands in ",[391,1203,1204],{},"$attrs"," and has no effect; a development build warns, and\n",[391,1207,1208],{},"npx bitboss-ui check --fix"," inverts it.",[937,1211,1213],{"className":939,"code":1212,"language":941,"meta":397,"style":397},"- \u003CBbTable selectable :allow-select-all=\"false\" … \u002F>\n+ \u003CBbTable selectable disable-select-all … \u002F>\n",[391,1214,1215,1220],{"__ignoreMap":397},[487,1216,1217],{"class":946,"line":141},[487,1218,1219],{},"- \u003CBbTable selectable :allow-select-all=\"false\" … \u002F>\n",[487,1221,1222],{"class":946,"line":145},[487,1223,1224],{},"+ \u003CBbTable selectable disable-select-all … \u002F>\n",[483,1226,1228],{"id":1227},"states",[487,1229,1230],{},"Loading and empty",[387,1232,1233,1239],{},[405,1234,1236],{"href":1235},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-loading",[391,1237,1238],{},"loading"," means two different\nthings, and the table tells them apart.",[494,1241],{"name":1242},"BbTable\u002FLoadingStates",[387,1244,1245,1246,1249,1250,1253,1254,446,1257,446,1260,446,1263,446,1266,1269,1270,1273,1274,1277,1278,1284,1285,1291],{},"With ",[454,1247,1248],{},"nothing to show yet"," it draws skeleton rows, shaped per column by the\n",[391,1251,1252],{},"skeleton"," field (",[391,1255,1256],{},"text",[391,1258,1259],{},"avatar",[391,1261,1262],{},"avatar-text",[391,1264,1265],{},"image",[391,1267,1268],{},"badge","). With\n",[454,1271,1272],{},"rows already on screen"," they stay, dimmed, under a progress bar along the\nheader, so a refetch never loses the reader's place. While loading, the header\nand rows are ",[391,1275,1276],{},"inert",";\n",[405,1279,1281],{"href":1280},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-interactiveWhileLoading",[391,1282,1283],{},"interactive-while-loading","\nkeeps them usable during a background poll.\n",[405,1286,1288],{"href":1287},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-loadingText",[391,1289,1290],{},"loading-text"," is announced to\nscreen readers, never painted.",[387,1293,1294,1295,1301,1302,1308],{},"When the result is empty, the table shows its empty row.\n",[405,1296,1298],{"href":1297},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-emptyText",[391,1299,1300],{},"empty-text"," replaces the default\ntext; ",[405,1303,1305],{"href":1304},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-empty",[391,1306,1307],{},"#empty"," replaces the content.",[494,1310],{"name":1311},"BbTable\u002FEmptyResult",[387,1313,1314,1316],{},[391,1315,1307],{}," fills the table's own full-width cell, already centred and spanning\nevery column, so pass content, not a row.",[387,1318,1319,1320,1323,1324,1164,1330,1332,1333,524,1336,1338,1339,1342,1343,449],{},"A provider that ",[454,1321,1322],{},"throws"," is a failed load: the rows clear and the empty state\nshows ",[405,1325,1327],{"href":1326},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-failedText",[391,1328,1329],{},"failed-text",[391,1331,1307],{},"\nreceives what was thrown as ",[391,1334,1335],{},"error",[391,1337,1176],{}," when nothing failed), so it can offer\na retry. Do not catch inside the provider and return ",[391,1340,1341],{},"[]",": that reads as an empty\nresult. To retry, bump a counter listed in ",[391,1344,512],{},[463,1346,1348],{"title":1347},"Skeletons, #loading and #empty",[387,1349,1350,1351,1357,1358,1360,1361,1364,1365,1367,1368,1371],{},"v2 replaced the rows with skeletons on every refetch; v3 keeps them. The\n",[405,1352,1354],{"href":1353},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-loading",[391,1355,1356],{},"#loading"," slot replaces the\nskeleton, so it renders on the first load only. ",[391,1359,1307],{}," used to replace the\nempty-state ",[391,1362,1363],{},"\u003Ctr>",": delete a hand-rolled ",[391,1366,1363],{}," \u002F ",[391,1369,1370],{},"\u003Ctd>"," and keep its content.",[483,1373,1375],{"id":1374},"pages",[487,1376,1377],{},"Pages and outside control",[387,1379,1380,1381,1383],{},"The table never slices. Hand it the current page as ",[391,1382,505],{}," and tell it where\nthat page sits:",[494,1385],{"name":1386},"BbTable\u002FPagedProducts",[387,1388,1389,409,1395,848,1401,1407,1408,1411],{},[405,1390,1392],{"href":1391},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-page",[391,1393,1394],{},"page",[405,1396,1398],{"href":1397},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-perPage",[391,1399,1400],{},"per-page",[405,1402,1404],{"href":1403},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-totalItems",[391,1405,1406],{},"total-items"," let a screen reader\nannounce each row's position in the whole result set, not just on this page.\nKeep the range line on one line (",[391,1409,1410],{},"shrink-0 whitespace-nowrap",") and let the pager\ntake the rest of the row; it fits its buttons to what is left.",[387,1413,1414,1415,1418,1419,1421,1422,1428],{},"On a server-driven table the provider forwards filters, sort and page and\nreturns the slice. Do ",[454,1416,1417],{},"not"," list the page in ",[391,1420,512],{},": a provider table\nalready refetches when the shared page moves.\n",[405,1423,1425],{"href":1424},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-enforceCoherence",[391,1426,1427],{},"enforce-coherence"," drops\nselected, highlighted and expanded values whose row left the result after each\nload, but leave it off on any provider-paginated table: every page turn is a\nload, so it would drop the selections held on other pages. Reconcile in the\nprovider instead.",[387,1430,1431,1432,848,1438,1441],{},"Give the table an ",[405,1433,1435],{"href":1434},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-id",[391,1436,1437],{},"id",[391,1439,1440],{},"useBbTableContext(id)"," hands any component on the page a two-way handle on its\nstate, with no prop drilling:",[494,1443],{"name":1444},"BbTable\u002FBulkActionBar",[387,1446,1447,1448,446,1450,446,1453,446,1456,446,1458,409,1461,446,1463,446,1465,446,1468,667,1471,1474,1475,1480,1481,1484,1485,1491,1492,1494,1495,1497],{},"The handle exposes ",[391,1449,844],{},[391,1451,1452],{},"unselected",[391,1454,1455],{},"all",[391,1457,851],{},[391,1459,1460],{},"sort",[391,1462,897],{},[391,1464,1394],{},[391,1466,1467],{},"perPage",[391,1469,1470],{},"totalItems",[391,1472,1473],{},"totalPages"," as writable refs, next\nto the v-models rather than instead of them. A\n",[405,1476,1478],{"href":1477},"\u002Fen\u002Fcomponents\u002Fbb-pagination#table",[391,1479,324],{}," with a matching ",[391,1482,1483],{},"table-id","\njoins the same state, and it renders the right page count on the server too.\n",[454,1486,1487,1488,1490],{},"The ",[391,1489,1437],{}," is a rendezvous key:"," the table, the handle and the pagination meet\non that exact string, and a different spelling opens a separate state that no\ntable fills. In development a ",[391,1493,324],{}," whose ",[391,1496,1483],{}," matches no mounted\ntable warns the first time someone uses it.",[483,1499,1501],{"id":1500},"rows",[487,1502,1503],{},"Detail rows and the open record",[387,1505,1506,1507,1510,1511,1517,1518,1524],{},"Two ways to show more of a record. ",[454,1508,1509],{},"Inline",": track the open rows in\n",[405,1512,1514],{"href":1513},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-expandedItems",[391,1515,1516],{},"v-model:expanded-items"," and\nrender their detail in ",[405,1519,1521],{"href":1520},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-expand",[391,1522,1523],{},"#expand",", a\nfull-width row below the record.",[494,1526],{"name":1527},"BbTable\u002FExpandableOrders",[387,1529,1530,1531,1537,1538,1541,1542,446,1545,1548,1549,1552,1553,1556,1557,1559,1560,1563],{},"The trigger here lives in the actions column, labelled with\n",[405,1532,1534],{"href":1533},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-actionsText",[391,1535,1536],{},"actions-text",", and binds the\nscope's ",[391,1539,1540],{},"expandProps",": it wires ",[391,1543,1544],{},"aria-expanded",[391,1546,1547],{},"aria-controls"," and the click,\nso do not also bind ",[391,1550,1551],{},"@click=\"toggleExpanded\""," (one click would toggle twice).\nFor a control of your own, the scope also hands you ",[391,1554,1555],{},"toggleExpanded"," and the\nread-only ",[391,1558,847],{}," flag. An icon-only toggle still needs an ",[391,1561,1562],{},"aria-label",". All\nthree reach every cell slot, so the chevron can sit in the identity column.",[387,1565,1566,1569,1570,1576],{},[454,1567,1568],{},"Beside the table",":\n",[405,1571,1573],{"href":1572},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-highlighted",[391,1574,1575],{},"v-model:highlighted"," marks the\none row whose details are open in a panel. It is single by design and separate\nfrom selection.",[494,1578],{"name":1579},"BbTable\u002FMasterDetailOrders",[387,1581,1582,1585,1586,1592,1593,1596,1597,1600,1601,1605],{},[454,1583,1584],{},"Binding the model turns highlight on."," An unbound table only emits\n",[405,1587,1589],{"href":1588},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#event-click:row",[391,1590,1591],{},"click:row",". A highlighted row\ngets ",[391,1594,1595],{},"aria-current=\"true\""," and the shipped fill with a brand accent bar;\nclicking it again clears it. ",[391,1598,1599],{},"pt:row:highlighted"," (or\n",[405,1602,1603],{"href":766},[391,1604,769],{},") paints it your way:\nthe demo uses a stronger tint and medium-weight text.",[387,1607,1608,1614,1615,1617,1618,1621,1622,1624],{},[405,1609,1611],{"href":1610},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-highlightable",[391,1612,1613],{},"highlightable"," decides which\nrows a click may open: ",[391,1616,1200],{}," for none (a user without the privilege), or a\nfunction of the row's item. A refused row ignores clicks and Enter, and a value\nyour code puts in the model still shows on it. Load the details in a ",[391,1619,1620],{},"watch"," on\nthe model, not in ",[391,1623,1591],{},": the model also changes when the row closes.",[937,1626,1630],{"className":1627,"code":1628,"language":1629,"meta":397,"style":397},"language-vue shiki shiki-themes github-light-high-contrast github-dark-high-contrast","\u003CBbTable\n    v-model:highlighted=\"openTaskId\"\n    :highlightable=\"(task) => task.status !== 'archived'\"\n    pt:row:highlighted=\"font-medium\"\n    item-value=\"id\"\n    :items=\"tasks\"\n    :columns=\"columns\"\n\u002F>\n","vue",[391,1631,1632,1642,1664,1701,1711,1721,1736,1750],{"__ignoreMap":397},[487,1633,1634,1638],{"class":946,"line":141},[487,1635,1637],{"class":1636},"suds8","\u003C",[487,1639,1641],{"class":1640},"sne4z","BbTable\n",[487,1643,1644,1648,1650,1652,1655,1658,1661],{"class":946,"line":145},[487,1645,1647],{"class":1646},"s-5SL","    v-model",[487,1649,876],{"class":1636},[487,1651,851],{"class":1646},[487,1653,1654],{"class":1636},"=",[487,1656,1657],{"class":1636},"\"",[487,1659,1660],{"class":1636},"openTaskId",[487,1662,1663],{"class":1636},"\"\n",[487,1665,1666,1669,1671,1673,1675,1678,1682,1685,1689,1692,1695,1699],{"class":946,"line":149},[487,1667,1668],{"class":1636},"    :",[487,1670,1613],{"class":1646},[487,1672,1654],{"class":1636},[487,1674,1657],{"class":1636},[487,1676,1677],{"class":1636},"(",[487,1679,1681],{"class":1680},"soyes","task",[487,1683,1684],{"class":1636},") ",[487,1686,1688],{"class":1687},"sHUrx","=>",[487,1690,1691],{"class":1636}," task.status ",[487,1693,1694],{"class":1687},"!==",[487,1696,1698],{"class":1697},"sT6z2"," 'archived'",[487,1700,1663],{"class":1636},[487,1702,1703,1706,1708],{"class":946,"line":177},[487,1704,1705],{"class":1646},"    pt:row:highlighted",[487,1707,1654],{"class":1636},[487,1709,1710],{"class":1697},"\"font-medium\"\n",[487,1712,1713,1716,1718],{"class":946,"line":181},[487,1714,1715],{"class":1646},"    item-value",[487,1717,1654],{"class":1636},[487,1719,1720],{"class":1697},"\"id\"\n",[487,1722,1723,1725,1727,1729,1731,1734],{"class":946,"line":185},[487,1724,1668],{"class":1636},[487,1726,505],{"class":1646},[487,1728,1654],{"class":1636},[487,1730,1657],{"class":1636},[487,1732,1733],{"class":1636},"tasks",[487,1735,1663],{"class":1636},[487,1737,1738,1740,1742,1744,1746,1748],{"class":946,"line":225},[487,1739,1668],{"class":1636},[487,1741,590],{"class":1646},[487,1743,1654],{"class":1636},[487,1745,1657],{"class":1636},[487,1747,590],{"class":1636},[487,1749,1663],{"class":1636},[487,1751,1752],{"class":946,"line":229},[487,1753,1754],{"class":1636},"\u002F>\n",[387,1756,1757,1763,1764,1767],{},[405,1758,1760],{"href":1759},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-keyboardNavigation",[391,1761,1762],{},"keyboard-navigation","\nturns the table into an ARIA grid with ",[454,1765,1766],{},"one tab stop"," and focus that moves\nbetween cells:",[399,1769,1770,1800,1819],{},[402,1771,1772,779,1776,779,1779,779,1782,1785,1786,1367,1789,1792,1793,1367,1796,1799],{},[1773,1774,1775],"kbd",{},"←",[1773,1777,1778],{},"→",[1773,1780,1781],{},"↑",[1773,1783,1784],{},"↓"," move one cell (↑ from the\nfirst row reaches the header); ",[1773,1787,1788],{},"Home",[1773,1790,1791],{},"End"," go to the row's\nends, ",[1773,1794,1795],{},"PageUp",[1773,1797,1798],{},"PageDown"," ten rows.",[402,1801,1802,531,1805,1808,1809,531,1811,1814,1815,1818],{},[1773,1803,1804],{},"Enter",[1773,1806,1807],{},"Space"," opens the row, exactly like a click.\nOn a cell that holds buttons or links, ",[1773,1810,1804],{},[1773,1812,1813],{},"F2"," moves\ninto them and ",[1773,1816,1817],{},"Escape"," comes back.",[402,1820,1821,1824,1825,1827,1828,1824,1831,1834],{},[1773,1822,1823],{},"Shift","+",[1773,1826,1807],{}," toggles the row's selection,\n",[1773,1829,1830],{},"Ctrl",[1773,1832,1833],{},"A"," selects all.",[387,1836,1837,1838,1840,1841,1843,1844,1846,1847,1850,1851,449],{},"With an ",[391,1839,1523],{}," slot the table is a treegrid: ",[1773,1842,1778],{}," on a row expands\nit, ",[1773,1845,1775],{}," collapses it. Controls inside cells leave the tab order while\nthe grid is on, so ",[1773,1848,1849],{},"Tab"," passes the table in one step. Focus and\nhighlight stay separate: arrowing opens nothing until the reader presses\n",[1773,1852,1804],{},[387,1854,1855,1856,1859,1860,1862,1863,1865,1866,1869,1870,1872,1873,531,1876,1879],{},"Row events fire with ",[391,1857,1858],{},"(event, item)",", where ",[391,1861,632],{}," is your record exactly as\npassed in ",[391,1864,505],{},". A click on a control inside the row (a link, a button, a\ncheckbox) emits none. Keep them for side effects: ",[454,1867,1868],{},"row navigation goes through a\nreal link"," in a cell (a ",[391,1871,205],{}," with ",[391,1874,1875],{},"href",[391,1877,1878],{},"to","), so middle-click and\nopen-in-new-tab work.",[463,1881,1883,1893],{"title":1882},"Row event payload",[387,1884,1885,1886,1889,1890,1892],{},"v2 passed the table's internal row wrapper (your record at ",[391,1887,1888],{},"row.item",") and a\nthird ",[391,1891,844],{}," boolean. Both are gone; a three-parameter handler is a type\nerror.",[937,1894,1896],{"className":939,"code":1895,"language":941,"meta":397,"style":397},"- \u003CBbTable @click:row=\"(event, row, selected) => open(row.item, selected)\" \u002F>\n+ \u003CBbTable @click:row=\"(event, item) => open(item)\" \u002F>\n",[391,1897,1898,1903],{"__ignoreMap":397},[487,1899,1900],{"class":946,"line":141},[487,1901,1902],{},"- \u003CBbTable @click:row=\"(event, row, selected) => open(row.item, selected)\" \u002F>\n",[487,1904,1905],{"class":946,"line":145},[487,1906,1907],{},"+ \u003CBbTable @click:row=\"(event, item) => open(item)\" \u002F>\n",[483,1909,1911],{"id":1910},"reorder",[487,1912,1913],{},"Reordering rows",[387,1915,1050,1916,1922,1923,1925,1926,1929],{},[405,1917,1919],{"href":1918},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-reorderableRows",[391,1920,1921],{},"reorderable-rows"," for a\ndrag handle at the start of each row. People drag it, or focus it and lift the\nrow with ",[1773,1924,1807],{}," and the arrow keys. The table only ",[454,1927,1928],{},"reports"," the\nmove; your handler splices the array.",[494,1931],{"name":1932},"BbTable\u002FReorderableQueue",[387,1934,1935,1941,1942,1945,1946,1949,1950,1952,1953,1956],{},[405,1936,1938],{"href":1937},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#event-reorder:rows",[391,1939,1940],{},"@reorder:rows"," carries\n",[391,1943,1944],{},"{ item, from, to }",": take the row out at ",[391,1947,1948],{},"from",", put it back at ",[391,1951,1878],{},". A drop\nwhere the row already was emits nothing. Style the handle with ",[391,1954,1955],{},"pt:dragHandle","\n(a class list, not a per-row function).",[399,1958,1959,1969],{},[402,1960,1961,1964,1965,1968],{},[454,1962,1963],{},"Server pages:"," the indexes are into the page the table holds, so add the\npage's offset, ",[391,1966,1967],{},"(page - 1) * perPage + from",". A row cannot move to another page.",[402,1970,1971,1974,1975,449],{},[454,1972,1973],{},"Sorted tables:"," a move is reported against the rows as sorted. Splicing\nyour stored array changes nothing a sort shows, so the row snaps back. Sort by\na rank the drag edits (priority, position) and write the new ranks, or turn the\nhandles off for any other sort:\n",[391,1976,1977],{},":reorderable-rows=\"!sort.length || sort[0][0] === 'priority'\"",[483,1979,1981],{"id":1980},"wide-tables",[487,1982,1983],{},"Narrow, wide and long tables",[387,1985,1986,1987,1990,1991,1994],{},"On a narrow screen, ",[454,1988,1989],{},"hide columns rather than scroll",": a scrolling table loses\nits identity column first, and that is the one the reader is looking for. Rank\nthe columns, give each secondary one its own ",[391,1992,1993],{},"hidden"," rule, and keep at most\nthree columns on a phone, with the facts that left stacked under the row's\nname. Resize the window to watch the columns go:",[494,1996],{"name":1997},"BbTable\u002FResponsiveOrders",[387,1999,2000,2001,2003,2004,2007],{},"The column list is a ",[391,2002,460],{},". VueUse's ",[391,2005,2006],{},"useBreakpoints"," gives one ref per\ntier, and each column says inline when it leaves:",[937,2009,2013],{"className":2010,"code":2011,"language":2012,"meta":397,"style":397},"language-ts shiki shiki-themes github-light-high-contrast github-dark-high-contrast","import { computed } from 'vue';\nimport { breakpointsTailwind, useBreakpoints } from '@vueuse\u002Fcore';\n\nconst breakpoints = useBreakpoints(breakpointsTailwind, { ssrWidth: 1280 });\nconst isMobile = breakpoints.smaller('md');\nconst belowLg = breakpoints.smaller('lg');\nconst belowXl = breakpoints.smaller('xl');\n\nconst columns = computed((): BbTableColumn\u003COrder>[] => [\n    { key: 'reference', label: 'Order', rowHeader: true },\n    { key: 'customerId', label: 'Customer', hidden: isMobile.value },\n    { key: 'placedAt', label: 'Placed', hidden: belowLg.value },\n    { key: 'channel', label: 'Channel', hidden: belowXl.value },\n    { key: 'status', label: 'Status' },\n    { key: 'total', label: 'Total', align: 'right' },\n]);\n","ts",[391,2014,2015,2030,2044,2050,2074,2097,2117,2137,2141,2174,2196,2211,2227,2243,2258,2279],{"__ignoreMap":397},[487,2016,2017,2020,2023,2025,2028],{"class":946,"line":141},[487,2018,2019],{"class":1687},"import",[487,2021,2022],{"class":1636}," { computed } ",[487,2024,1948],{"class":1687},[487,2026,2027],{"class":1697}," 'vue'",[487,2029,1277],{"class":1636},[487,2031,2032,2034,2037,2039,2042],{"class":946,"line":145},[487,2033,2019],{"class":1687},[487,2035,2036],{"class":1636}," { breakpointsTailwind, useBreakpoints } ",[487,2038,1948],{"class":1687},[487,2040,2041],{"class":1697}," '@vueuse\u002Fcore'",[487,2043,1277],{"class":1636},[487,2045,2046],{"class":946,"line":149},[487,2047,2049],{"emptyLinePlaceholder":2048},true,"\n",[487,2051,2052,2055,2058,2061,2065,2068,2071],{"class":946,"line":177},[487,2053,2054],{"class":1687},"const",[487,2056,2057],{"class":1646}," breakpoints",[487,2059,2060],{"class":1687}," =",[487,2062,2064],{"class":2063},"sKwhi"," useBreakpoints",[487,2066,2067],{"class":1636},"(breakpointsTailwind, { ssrWidth: ",[487,2069,2070],{"class":1646},"1280",[487,2072,2073],{"class":1636}," });\n",[487,2075,2076,2078,2081,2083,2086,2089,2091,2094],{"class":946,"line":181},[487,2077,2054],{"class":1687},[487,2079,2080],{"class":1646}," isMobile",[487,2082,2060],{"class":1687},[487,2084,2085],{"class":1636}," breakpoints.",[487,2087,2088],{"class":2063},"smaller",[487,2090,1677],{"class":1636},[487,2092,2093],{"class":1697},"'md'",[487,2095,2096],{"class":1636},");\n",[487,2098,2099,2101,2104,2106,2108,2110,2112,2115],{"class":946,"line":185},[487,2100,2054],{"class":1687},[487,2102,2103],{"class":1646}," belowLg",[487,2105,2060],{"class":1687},[487,2107,2085],{"class":1636},[487,2109,2088],{"class":2063},[487,2111,1677],{"class":1636},[487,2113,2114],{"class":1697},"'lg'",[487,2116,2096],{"class":1636},[487,2118,2119,2121,2124,2126,2128,2130,2132,2135],{"class":946,"line":225},[487,2120,2054],{"class":1687},[487,2122,2123],{"class":1646}," belowXl",[487,2125,2060],{"class":1687},[487,2127,2085],{"class":1636},[487,2129,2088],{"class":2063},[487,2131,1677],{"class":1636},[487,2133,2134],{"class":1697},"'xl'",[487,2136,2096],{"class":1636},[487,2138,2139],{"class":946,"line":229},[487,2140,2049],{"emptyLinePlaceholder":2048},[487,2142,2143,2145,2148,2150,2153,2156,2158,2161,2163,2166,2169,2171],{"class":946,"line":233},[487,2144,2054],{"class":1687},[487,2146,2147],{"class":1646}," columns",[487,2149,2060],{"class":1687},[487,2151,2152],{"class":2063}," computed",[487,2154,2155],{"class":1636},"(()",[487,2157,876],{"class":1687},[487,2159,2160],{"class":1680}," BbTableColumn",[487,2162,1637],{"class":1636},[487,2164,2165],{"class":1680},"Order",[487,2167,2168],{"class":1636},">[] ",[487,2170,1688],{"class":1687},[487,2172,2173],{"class":1636}," [\n",[487,2175,2176,2179,2182,2185,2188,2191,2193],{"class":946,"line":237},[487,2177,2178],{"class":1636},"    { key: ",[487,2180,2181],{"class":1697},"'reference'",[487,2183,2184],{"class":1636},", label: ",[487,2186,2187],{"class":1697},"'Order'",[487,2189,2190],{"class":1636},", rowHeader: ",[487,2192,1192],{"class":1646},[487,2194,2195],{"class":1636}," },\n",[487,2197,2198,2200,2203,2205,2208],{"class":946,"line":241},[487,2199,2178],{"class":1636},[487,2201,2202],{"class":1697},"'customerId'",[487,2204,2184],{"class":1636},[487,2206,2207],{"class":1697},"'Customer'",[487,2209,2210],{"class":1636},", hidden: isMobile.value },\n",[487,2212,2214,2216,2219,2221,2224],{"class":946,"line":2213},12,[487,2215,2178],{"class":1636},[487,2217,2218],{"class":1697},"'placedAt'",[487,2220,2184],{"class":1636},[487,2222,2223],{"class":1697},"'Placed'",[487,2225,2226],{"class":1636},", hidden: belowLg.value },\n",[487,2228,2230,2232,2235,2237,2240],{"class":946,"line":2229},13,[487,2231,2178],{"class":1636},[487,2233,2234],{"class":1697},"'channel'",[487,2236,2184],{"class":1636},[487,2238,2239],{"class":1697},"'Channel'",[487,2241,2242],{"class":1636},", hidden: belowXl.value },\n",[487,2244,2246,2248,2251,2253,2256],{"class":946,"line":2245},14,[487,2247,2178],{"class":1636},[487,2249,2250],{"class":1697},"'status'",[487,2252,2184],{"class":1636},[487,2254,2255],{"class":1697},"'Status'",[487,2257,2195],{"class":1636},[487,2259,2261,2263,2266,2268,2271,2274,2277],{"class":946,"line":2260},15,[487,2262,2178],{"class":1636},[487,2264,2265],{"class":1697},"'total'",[487,2267,2184],{"class":1636},[487,2269,2270],{"class":1697},"'Total'",[487,2272,2273],{"class":1636},", align: ",[487,2275,2276],{"class":1697},"'right'",[487,2278,2195],{"class":1636},[487,2280,2282],{"class":946,"line":2281},16,[487,2283,2284],{"class":1636},"]);\n",[387,2286,2287,2290,2291,449],{},[391,2288,2289],{},"ssrWidth"," makes the server and the first client render agree on a width, so a\nserver-rendered page hydrates without a mismatch. A column that only makes sense\non a phone takes the inverse rule, ",[391,2292,2293],{},"hidden: !isMobile.value",[387,2295,2296,2298,2299,2304,2305,2308,2309,2311,2312,2315],{},[391,2297,1993],{}," removes the column's track but keeps it declared, so it returns to its\nplace in ",[405,2300,2302],{"href":2301},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#model-order",[391,2303,897],{}," when there is room\nagain; never filter the array instead. Never hide cells with ",[391,2306,2307],{},"display: none","\neither: the grid keeps the track and every following cell shifts one column\nover. If the table sits in a narrow card rather than a narrow screen, drive the\nsame ",[391,2310,1993],{}," from the card's width (VueUse ",[391,2313,2314],{},"useElementSize",") instead of the\nwindow's.",[387,2317,2318,2319,2325,2326,2329,2330,2336],{},"When every column must stay reachable (a spreadsheet-shaped tool), let it\nscroll and pin what anchors the row.\n",[405,2320,2322],{"href":2321},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-fixedHeaders",[391,2323,2324],{},"fixed-headers"," sticks the\nheader, ",[391,2327,2328],{},"fixed: 'left' | 'right'"," on a column pins it, and\n",[405,2331,2333],{"href":2332},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-compact",[391,2334,2335],{},"compact"," tightens the rows.",[494,2338],{"name":2339},"BbTable\u002FStickyAndPinned",[387,2341,2342,2345,2346,2349,2350,2353,2354,848,2360,2366,2367,2370,2371,449],{},[454,2343,2344],{},"The table is its own scroll box",": put the ",[391,2347,2348],{},"max-height"," on the table, as\nabove, not on a wrapper. Inside a flex row, give the ancestor between page and\ntable ",[391,2351,2352],{},"min-width: 0",", or the row widens instead of letting the table scroll. The\nselection and actions columns pin with\n",[405,2355,2357],{"href":2356},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-fixedSelect",[391,2358,2359],{},"fixed-select",[405,2361,2363],{"href":2362},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-fixedActions",[391,2364,2365],{},"fixed-actions",". Pinned cells\nare opaque and paint the table's ",[391,2368,2369],{},"--bg",", so on a surface other than the panel\ncolour, ",[405,2372,2373],{"href":480},"set that one knob",[387,2375,2376,2377,2382],{},"Once the list is long, ",[405,2378,2380],{"href":2379},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-virtual",[391,2381,587],{},"\nmounts only the rows in view:",[494,2384],{"name":2385},"BbTable\u002FVirtualRows",[387,2387,2388,2389,2392,2393,2396,2397,2399],{},"Bound the height, or the page becomes the scroller; the header sticks on its\nown. Rows keep their absolute ",[391,2390,2391],{},"aria-rowindex"," and focus is never lost to an\nunmount. ",[454,2394,2395],{},"Columns are sized once",", from the first rendered rows, and later\nlonger values clip with an ellipsis, so give a column that must wrap a ",[391,2398,660],{},".\nBrowser find only reaches mounted rows.",[387,2401,2402,2403,2409,2410,2415,2416,2419,2420,2426,2427,2415,2433,2436],{},"To let people rearrange the grid,\n",[405,2404,2406],{"href":2405},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-reorderable",[391,2407,2408],{},"reorderable"," makes each header\na drag handle writing ",[405,2411,2412],{"href":2301},[391,2413,2414],{},"v-model:order","\n(",[391,2417,2418],{},"reorderable: false"," on a column locks it in place), and\n",[405,2421,2423],{"href":2422},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#prop-resizable",[391,2424,2425],{},"resizable"," reports new widths\nthrough ",[405,2428,2430],{"href":2429},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#event-resize:column",[391,2431,2432],{},"@resize:column",[391,2434,2435],{},"resizable: false"," on a column locks its width). The pinned catalogue above has\nboth, with the pinned column locked.",[483,2438,2440],{"id":2439},"styling",[487,2441,2442],{},"Styling the grid: classes, roles and pt",[387,2444,2445,2446,2449],{},"Style the table through its classes, its ARIA roles and its ",[391,2447,2448],{},"pt"," parts. Element\nnames match nothing.",[387,2451,2452,2457,2458,2461,2462,2465,2466,2468,2469,2472,2473,2476,2477,2479],{},[454,2453,2454,2455],{},"The surface is ",[391,2456,2369],{},", a local on ",[391,2459,2460],{},".bb-table"," defaulting to\n",[391,2463,2464],{},"var(--bb-panel)",". Cells are transparent so the row can tint them, but the stuck\nheader band and pinned cells are opaque and paint ",[391,2467,2369],{},"; a pinned cell still\ntakes its row's hover and highlight tint, yours from a ",[391,2470,2471],{},"pt:row"," hover class (",[391,2474,2475],{},"hover:bg-…",") included, so\ngive an app hover colour as an opaque colour. Set ",[391,2478,2369],{}," once when the table sits\non another surface:",[937,2481,2485],{"className":2482,"code":2483,"language":2484,"meta":397,"style":397},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast",".my-card .bb-table {\n    --bg: var(--card-bg);\n}\n","css",[391,2486,2487,2498,2516],{"__ignoreMap":397},[487,2488,2489,2492,2495],{"class":946,"line":141},[487,2490,2491],{"class":1646},".my-card",[487,2493,2494],{"class":1646}," .bb-table",[487,2496,2497],{"class":1636}," {\n",[487,2499,2500,2503,2506,2509,2511,2514],{"class":946,"line":145},[487,2501,2502],{"class":1680},"    --bg",[487,2504,2505],{"class":1636},": ",[487,2507,2508],{"class":1646},"var",[487,2510,1677],{"class":1636},[487,2512,2513],{"class":1680},"--card-bg",[487,2515,2096],{"class":1636},[487,2517,2518],{"class":946,"line":149},[487,2519,2520],{"class":1636},"}\n",[387,2522,2523,2524,2526,2527,2530,2531,446,2533,409,2536,446,2539,446,2542,446,2544,2547,2548,446,2551,2554,2555,2557,2558,667,2561,2564,2565,449],{},"For one-off changes, ",[391,2525,2448],{}," reaches every part without a selector:\n",[391,2528,2529],{},"pt:cell-column-header"," (every header cell), ",[391,2532,2471],{},[391,2534,2535],{},"pt:cell",[391,2537,2538],{},"pt:sort-icon",[391,2540,2541],{},"pt:select-icon",[391,2543,1955],{},[391,2545,2546],{},"pt:caption",", and states such as\n",[391,2549,2550],{},"pt:row:expanded",[391,2552,2553],{},"pt:row:disabled"," (a row ",[391,2556,722],{}," rejects),\n",[391,2559,2560],{},"pt:cell-column-header:sorted",[391,2562,2563],{},"pt:body:empty",". The full list is on the\n",[405,2566,2568],{"href":2567},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi","API page",[2570,2571,2572,2585],"table",{},[2573,2574,2575],"thead",{},[2576,2577,2578,2582],"tr",{},[2579,2580,2581],"th",{},"Region",[2579,2583,2584],{},"Class · role",[2586,2587,2588,2598,2608,2629,2642,2655,2676,2688,2706,2730,2748,2765,2782],"tbody",{},[2576,2589,2590,2594],{},[2591,2592,2593],"td",{},"container",[2591,2595,2596],{},[391,2597,2460],{},[2576,2599,2600,2602],{},[2591,2601,561],{},[2591,2603,2604,2607],{},[391,2605,2606],{},".bb-table__caption"," (before the root)",[2576,2609,2610,2613],{},[2591,2611,2612],{},"grid root",[2591,2614,2615,2618,2619,2621,2622,1367,2625,2628],{},[391,2616,2617],{},".bb-table__table"," · ",[391,2620,2570],{},"; ",[391,2623,2624],{},"grid",[391,2626,2627],{},"treegrid"," with keyboard",[2576,2630,2631,2634],{},[2591,2632,2633],{},"header group",[2591,2635,2636,2618,2639],{},[391,2637,2638],{},".bb-table__head",[391,2640,2641],{},"rowgroup",[2576,2643,2644,2647],{},[2591,2645,2646],{},"header row",[2591,2648,2649,2618,2652],{},[391,2650,2651],{},".bb-table__header-row",[391,2653,2654],{},"row",[2576,2656,2657,2660],{},[2591,2658,2659],{},"header cell",[2591,2661,2662,2665,2666,446,2669,2672,2673],{},[391,2663,2664],{},".bb-table__cell-column-header"," (+ ",[391,2667,2668],{},"--select",[391,2670,2671],{},"--actions",") · ",[391,2674,2675],{},"columnheader",[2576,2677,2678,2681],{},[2591,2679,2680],{},"body group",[2591,2682,2683,2618,2686],{},[391,2684,2685],{},".bb-table__body",[391,2687,2641],{},[2576,2689,2690,2693],{},[2591,2691,2692],{},"data row",[2591,2694,2695,2665,2698,446,2701,2672,2704],{},[391,2696,2697],{},".bb-table__row",[391,2699,2700],{},"--highlighted",[391,2702,2703],{},"--expanded",[391,2705,2654],{},[2576,2707,2708,2711],{},[2591,2709,2710],{},"data cell",[2591,2712,2713,2665,2716,446,2718,2672,2720,2621,2723,2726,2727],{},[391,2714,2715],{},".bb-table__cell",[391,2717,2668],{},[391,2719,2671],{},[391,2721,2722],{},"cell",[391,2724,2725],{},"gridcell"," with keyboard; ",[391,2728,2729],{},"rowheader",[2576,2731,2732,2735],{},[2591,2733,2734],{},"expand row",[2591,2736,2737,2740,2741,2618,2744,2740,2746],{},[391,2738,2739],{},".bb-table-expand__row"," > ",[391,2742,2743],{},".bb-table-expand__cell",[391,2745,2654],{},[391,2747,2722],{},[2576,2749,2750,2753],{},[2591,2751,2752],{},"empty state",[2591,2754,2755,2740,2758,2618,2761,2740,2763],{},[391,2756,2757],{},".bb-table-empty__row",[391,2759,2760],{},".bb-table-empty__cell",[391,2762,2654],{},[391,2764,2722],{},[2576,2766,2767,2770],{},[2591,2768,2769],{},"skeleton row",[2591,2771,2772,2740,2775,2618,2778,2740,2780],{},[391,2773,2774],{},".bb-table-skeleton__row",[391,2776,2777],{},".bb-table-skeleton__cell",[391,2779,2654],{},[391,2781,2722],{},[2576,2783,2784,2787],{},[2591,2785,2786],{},"footer group",[2591,2788,2789,2618,2792,2794,2795],{},[391,2790,2791],{},".bb-table__foot",[391,2793,2641],{},", only with ",[391,2796,2797],{},"#tfoot",[387,2799,2800,2801,446,2803,2805,2806,2808,2809,2811,2812,2815,2816,414,2818,2821,2822,2825],{},"The roles are supported hooks. A body cell can be ",[391,2802,2722],{},[391,2804,2725],{}," (under\n",[391,2807,1762],{},") or ",[391,2810,2729],{}," (a ",[391,2813,2814],{},"rowHeader"," column), so a rule that must\nhold everywhere uses ",[391,2817,2715],{},[391,2819,2820],{},":is([role='cell'], [role='gridcell'], [role='rowheader'])",". Cells are direct\nchildren of their row, so ",[391,2823,2824],{},":nth-child(n)"," addresses a column.",[387,2827,2828,2829,667,2832,2835,2836,667,2839,2842,2843,2846,2847,2850,2851,2853,2854,449],{},"Some geometry is not yours to change: ",[391,2830,2831],{},"display: grid",[391,2833,2834],{},"gap: 0"," on the root,\nrow groups and rows; ",[391,2837,2838],{},"grid-column: 1 \u002F -1",[391,2840,2841],{},"contain: inline-size"," on\nfull-width cells; ",[391,2844,2845],{},"white-space: nowrap"," on the actions cell; and ",[391,2848,2849],{},"position: sticky"," on ",[391,2852,2638],{}," under ",[391,2855,2324],{},[2857,2858,2860],"h3",{"id":2859},"replacing-a-whole-row-group","Replacing a whole row group",[387,2862,2863,409,2869,848,2875,2880,2881,2884,2885,1600,2888,2891,2892,2895,2896,2621,2899,2901,2902,2905,2906,2908,2909,2912,2913,2915,2916,2918,2919,2921,2922,2924],{},[405,2864,2866],{"href":2865},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-thead",[391,2867,2868],{},"#thead",[405,2870,2872],{"href":2871},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-tbody",[391,2873,2874],{},"#tbody",[405,2876,2878],{"href":2877},"\u002Fen\u002Fcomponents\u002Fbb-table\u002Fapi#slot-tfoot",[391,2879,2797],{}," hand you a region, and the\nmarkup you pass is grid markup. Reach for them only when a per-column slot does\nnot fit, such as a note spanning the table. Write one ",[391,2882,2883],{},"\u003Cdiv role=\"row\">"," per row, holding one ",[391,2886,2887],{},"\u003Cdiv role=\"cell\">",[391,2889,2890],{},"role=\"columnheader\""," in the head) per column. A spanning cell uses\n",[391,2893,2894],{},"grid-column"," plus ",[391,2897,2898],{},"aria-colspan",[391,2900,2797],{}," receives ",[391,2903,2904],{},"columnCount",", selection and\nactions columns included, and the table numbers its rows after the body (leave\n",[391,2907,2391],{}," off). ",[454,2910,2911],{},"Nothing lints the roles",": plain ",[391,2914,472],{},"s render\nfine and read as a pile of boxes to a screen reader. A custom ",[391,2917,2868],{}," over an\nempty table publishes no column tracks, and a ",[391,2920,2874],{}," turns off ",[391,2923,587],{}," and\nthe keyboard grid.",[463,2926,2928,2936,3057,3118],{"title":2927},"Element selectors and v2 classes",[387,2929,2930,2932,2933,2935],{},[391,2931,363],{}," now renders role-complete ",[391,2934,472],{}," elements as a CSS grid. Props,\nslots, events and models did not change, but markup-dependent behaviour did:",[399,2937,2938,2954,2969,2974,2977,2985,2988,2995,2998,3003],{},[402,2939,2940,2941,446,2943,446,2945,446,2947,446,2949,446,2951,2953],{},"Element selectors (",[391,2942,2570],{},[391,2944,2573],{},[391,2946,2586],{},[391,2948,2576],{},[391,2950,2579],{},[391,2952,2591],{},") and global\ntable CSS no longer match.",[402,2955,2956,446,2958,667,2960,2962,2963,2965,2966,2968],{},[391,2957,2868],{},[391,2959,2874],{},[391,2961,2797],{}," require ",[391,2964,472],{}," rows with the correct ARIA\nroles. A ",[391,2967,1363],{}," inside the grid cannot land on its tracks.",[402,2970,2971,2972,449],{},"Browser copy produces one value per line. Build “copy as TSV” from ",[391,2973,505],{},[402,2975,2976],{},"Printed grids do not repeat their header. Use a print-specific report view.",[402,2978,2979,2981,2982,2984],{},[391,2980,561],{}," is now a ",[391,2983,472],{}," before the grid root, with the same accessible\nname.",[402,2986,2987],{},"Flexible surplus is shared equally, not by content. The measured 748px\u002F52px\npair becomes 544px\u002F256px. In narrow containers, the longest flexible column\ncan be about 22% narrower; mixing fixed and flexible tracks can move a column\nby about 19px.",[402,2989,2990,2991,2994],{},"A cell that scrolls no longer floors its track, and ellipsis works with no\nextra CSS. Remove any v2 ",[391,2992,2993],{},"max-width: 0"," rule on cells: it now collapses the\ncell to its padding.",[402,2996,2997],{},"Percent widths in overflow resolve against the grid's min-content width. The\nmeasured 30% column changes from 181px to 303px. Non-overflowing tables do\nnot change.",[402,2999,1245,3000,3002],{},[391,3001,706],{},", undeclared widths split the available space equally. If every\ncolumn has a width, remaining space follows those proportions; selection and\nactions stay at content width.",[402,3004,3005,3006,779,3009,446,3012,779,3015,446,3018,779,3021,3024,3025,1367,3028,1367,3031,3034,3035,3038,3039,3042,3043,3046,3047,848,3050,3053,3054,449],{},"The locals tightened (",[391,3007,3008],{},"--px",[391,3010,3011],{},"12px",[391,3013,3014],{},"--py",[391,3016,3017],{},"6px",[391,3019,3020],{},"--cell-h",[391,3022,3023],{},"36px",", from\n",[391,3026,3027],{},"16px",[391,3029,3030],{},"8px",[391,3032,3033],{},"42px","), and every published ",[391,3036,3037],{},"--bb-table-*"," variable lost\nits prefix (",[391,3040,3041],{},"--bb-table-offset-start"," → ",[391,3044,3045],{},"--offset-start","); ",[391,3048,3049],{},"--fill",[391,3051,3052],{},"--natural-width"," are gone. Grep your CSS for ",[391,3055,3056],{},"--bb-table-",[387,3058,3059,3060,3042,3062,446,3064,3066,3067,446,3069,3042,3071,446,3073,3042,3076,409,3078,3042,3080,3083,3084,3086,3087,3066,3089,446,3091,3042,3093,446,3095,3098,3099,1164,3101,1367,3104,3107,3108,3110,3111,3114,3115,3117],{},"Translating a v2 stylesheet: ",[391,3061,2570],{},[391,3063,2617],{},[391,3065,2573],{}," →\n",[391,3068,2638],{},[391,3070,2586],{},[391,3072,2685],{},[391,3074,3075],{},"tfoot",[391,3077,2791],{},[391,3079,2576],{},[391,3081,3082],{},"[role='row']"," (or ",[391,3085,2697],{}," for data rows only), ",[391,3088,2579],{},[391,3090,2664],{},[391,3092,2591],{},[391,3094,2715],{},[391,3096,3097],{},"td:nth-of-type(n)","\n→ ",[391,3100,2824],{},[391,3102,3103],{},"colgroup",[391,3105,3106],{},"col"," are gone: declare ",[391,3109,660],{}," on the column.\n",[391,3112,3113],{},"[role='cell']"," is stronger than ",[391,3116,2591],{}," was, so an override that used to lose by\none point can now win.",[387,3119,3120,3121,3124,3125,3128],{},"The layout requires subgrid (Chrome\u002FEdge 117, Firefox 71, Safari 16). Vertical\ncentering through block ",[391,3122,3123],{},"align-content"," requires Chrome 123, Safari 17.4 or\nFirefox 125; older versions top-align cell content. There is no ",[391,3126,3127],{},"@supports","\nfallback.",[3130,3131,3132],"style",{},"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 .suds8, html code.shiki .suds8{--shiki-default:#0E1116;--shiki-dark:#F0F3F6}html pre.shiki code .sne4z, html code.shiki .sne4z{--shiki-default:#024C1A;--shiki-dark:#72F088}html pre.shiki code .s-5SL, html code.shiki .s-5SL{--shiki-default:#023B95;--shiki-dark:#91CBFF}html pre.shiki code .soyes, html code.shiki .soyes{--shiki-default:#702C00;--shiki-dark:#FFB757}html pre.shiki code .sHUrx, html code.shiki .sHUrx{--shiki-default:#A0111F;--shiki-dark:#FF9492}html pre.shiki code .sT6z2, html code.shiki .sT6z2{--shiki-default:#032563;--shiki-dark:#ADDCFF}html pre.shiki code .sKwhi, html code.shiki .sKwhi{--shiki-default:#622CBC;--shiki-dark:#DBB7FF}",{"title":397,"searchDepth":149,"depth":149,"links":3134},[3135,3136,3137,3138,3139,3140,3141,3142,3143,3144],{"id":485,"depth":145,"text":489},{"id":590,"depth":145,"text":593},{"id":957,"depth":145,"text":960},{"id":1044,"depth":145,"text":1047},{"id":1227,"depth":145,"text":1230},{"id":1374,"depth":145,"text":1377},{"id":1500,"depth":145,"text":1503},{"id":1910,"depth":145,"text":1913},{"id":1980,"depth":145,"text":1983},{"id":2439,"depth":145,"text":2442,"children":3145},[3146],{"id":2859,"depth":149,"text":2860},"A column-driven data table with sorting, selection, detail rows, server data and virtual scrolling.","md",{},[3151,3152,3153,3154,3155,3156,3157,3158,3159,3160],{"id":485,"title":489},{"id":590,"title":593},{"id":957,"title":960},{"id":1044,"title":1047},{"id":1227,"title":1230},{"id":1374,"title":1377},{"id":1500,"title":1503},{"id":1910,"title":1913},{"id":1980,"title":1983},{"id":2439,"title":2442},{"title":363,"description":3147},"components\u002Fbb-table","Cxvj0eVlVjl57NstFCK49emm0qQNSt2T9mz6ph9d8k4",{"name":363,"slug":3165,"group":354,"description":3166,"entrypoint":3167,"docs":3168,"props":3171,"models":3366,"events":3379,"slots":3433,"exposed":3502,"pt":3503,"validated":377,"migration":3576},"bb-table","Displays tabular data, configurable columns and data mapper.","bitboss-ui",{"contract":3169,"source":3170},"ai\u002FBbTable.md","ai\u002Fsource\u002FBbTable.md",[3172,3178,3182,3186,3189,3193,3196,3199,3204,3207,3211,3214,3219,3223,3227,3231,3233,3236,3239,3242,3245,3249,3253,3256,3259,3262,3266,3269,3273,3278,3282,3285,3288,3292,3295,3297,3300,3303,3305,3308,3311,3313,3316,3321,3324,3326,3329,3331,3335,3337,3340,3344,3347,3350,3353,3355,3358,3360,3363],{"name":3173,"type":3174,"required":3175,"default":377,"description":3176,"note":3177,"demo":1044},"accessibleLabel","((columns: MappedCell[], item: any) => string) | undefined",false,"The label of each row's selection checkbox, from `(columns, item)`. Unset: the row's name in the locale's select template (its `rowHeader` cells, else its first column: \"Select INV-1041\"). The cells arrive in render order: look one up by `key`, never by position.","Called with the mapped cells in render order, so look a cell up by `key` rather than by position — `order` and `reorderable` both move them.",{"name":3179,"type":3180,"required":3175,"default":377,"description":3181,"note":377,"demo":377},"actionsText","string | undefined","Label used in the header of the actions column.",{"name":657,"type":3183,"required":3175,"default":3184,"description":3185,"note":377,"demo":377},"\"left\" | \"center\" | \"right\" | undefined","\"left\"","Text alignment of the columns.",{"name":561,"type":3180,"required":3175,"default":377,"description":3187,"note":3188,"demo":485},"Caption describing the table's content, for accessibility.","The table's accessible name, and the fallback name of the `\u003Cfieldset>` a selectable table renders. Visually hidden unless `display-caption` is set. In v3 it is a `\u003Cdiv>` before the grid root rather than a `\u003Ccaption>` inside it.",{"name":590,"type":3190,"required":3175,"default":1341,"description":3191,"note":3192,"demo":590},"BbTableColumn\u003CT>[] | undefined","Array of definitions of how the columns should be rendered.","Write these as `BbTableColumn\u003CYourItem>[]`. A column carries extraction (`key`, dot paths allowed), formatting (`formatter`, `placeholder`, `formatOnNull`), presentation (`label`, `align`, `width`, `skeleton`), `rowHeader` for the column that names each row, and styling (`thClass`, `tdClass`, `rowClass`). `actions` and `select` are not columns: the `#actions` slot creates the actions column and `selectable` the selection one. A column keyed like one of the table's own slots (`actions`, `select`, `expand`, `empty`…) collides with that slot. Pin with `fixed: 'left' | 'right'`, hide with `hidden`, lock against reordering with `reorderable: false`.",{"name":2335,"type":3194,"required":3175,"default":1200,"description":3195,"note":377,"demo":377},"boolean | undefined","Adds a CSS class that applies a compact style to the component.",{"name":512,"type":3197,"required":3175,"default":1341,"description":3198,"note":377,"demo":377},"unknown[] | undefined","Defines an array of dependencies that will trigger actions in the component upon change.",{"name":3200,"type":3201,"required":3175,"default":3202,"description":3203,"note":377,"demo":377},"depsDebounceTime","number | undefined","0","Timeout used to debounce response to changes to dependencies.",{"name":3205,"type":3194,"required":3175,"default":1200,"description":3206,"note":377,"demo":377},"disabled","Disables the component",{"name":3208,"type":3194,"required":3175,"default":1200,"description":3209,"note":3210,"demo":1044},"disableSelectAll","Hides the \"Select all\" checkbox that selectable multi-row tables display by default.","Replaces v2's `allow-select-all`, with the polarity inverted: `allow-select-all=\"false\"` becomes `disable-select-all`. The old name lands in `$attrs` and does nothing, so the change is silent.",{"name":3212,"type":3194,"required":3175,"default":1200,"description":3213,"note":377,"demo":377},"displayCaption","Shows the caption as a visible title. Off by default: the caption is hidden, and screen readers still hear it as the table's name.",{"name":3215,"type":3180,"required":3175,"default":3216,"description":3217,"note":3218,"demo":1227},"emptyText","the localized `common.emptyText` (\"No data to display\")","Text shown when there are no items.","Also the place to explain a failed fetch: there is no `error-text` prop and no table-level error state, and a provider that rejects keeps the previous rows on screen. Catch the error in the provider, keep the reason in a ref, return `[]`, and show it through this text or the `#empty` slot.",{"name":3220,"type":3194,"required":3175,"default":1200,"description":3221,"note":3222,"demo":1374},"enforceCoherence","After every load, prunes `modelValue`, `unselected-items`, `highlighted` and `expanded-items` of values whose row is gone (a single value resets to `null`). Never on a provider-paginated table: a page change would prune the other pages' selection; reconcile in the provider instead.","Leave it off on any provider-paginated table (`items` is a function): every page turn is a load, so a cross-page selection would be pruned away. Reconcile in the provider instead, which receives the current selection for exactly this reason.",{"name":3224,"type":3225,"required":3175,"default":1341,"description":3226,"note":377,"demo":377},"expandedItems","any[] | undefined","Used by `v-model:expandedItems`: the expanded items, toggled by the row expand control and by external writes, like the `highlighted` \u002F `sort` v-models. Drives the `#expand` rows and their `aria-expanded` \u002F `aria-controls` wiring.",{"name":3228,"type":3180,"required":3175,"default":3229,"description":3230,"note":377,"demo":377},"failedText","the localized `common.failedText` (\"Couldn't load items\")","String displayed in the empty state while the latest load FAILED (the `items` provider threw): the twin of `emptyText` for that case.",{"name":706,"type":3194,"required":3175,"default":1200,"description":3232,"note":377,"demo":377},"Gives the columns that declare no `width` an equal share of the width (a `minmax(0, 1fr)` track each).",{"name":3234,"type":3194,"required":3175,"default":1200,"description":3235,"note":377,"demo":377},"fixedActions","Pins the actions column (the one the `#actions` slot creates) to the right edge, `position: sticky`, in place. It has no column definition, so this is its `column.fixed`. No effect without an `#actions` slot.",{"name":3237,"type":3194,"required":3175,"default":1200,"description":3238,"note":377,"demo":377},"fixedFirst","Sticks the `#\u003Ckey>:first` row to the top of the scrollport (under a stuck header).",{"name":3240,"type":3194,"required":3175,"default":1200,"description":3241,"note":377,"demo":377},"fixedHeaders","Sticks the headers to the top of the table.",{"name":3243,"type":3194,"required":3175,"default":1200,"description":3244,"note":377,"demo":377},"fixedLast","Sticks the `#\u003Ckey>:last` row (a totals row) to the bottom of the scrollport.",{"name":3246,"type":3194,"required":3175,"default":1200,"description":3247,"note":3248,"demo":1980},"fixedSelect","Pins the selection column to the left edge, `position: sticky`, in place. It has no column definition, so this is its `column.fixed`. No effect unless the table is `selectable`.","Pinned cells are opaque and paint the table's `--bg` local, so a table on a surface that is not `--bb-panel` needs that one custom property set or the pinned column reads as a white hole. The same applies to `fixed-actions` and to any `column.fixed`.",{"name":3250,"type":3251,"required":3175,"default":377,"description":3252,"note":377,"demo":377},"headerRowClass","Classes | undefined","Classes for the header row.",{"name":1613,"type":3254,"required":3175,"default":377,"description":3255,"note":377,"demo":377},"boolean | ((item: Item) => boolean) | undefined","Which rows a click, Enter or `toggleHighlighted` may highlight: `false` for none, or a function of the row's item. Unset: every row, when `highlighted` is bound. A value the app sets still shows on a refused row.",{"name":851,"type":3257,"required":3175,"default":377,"description":3258,"note":377,"demo":377},"any","Used by `v-model:highlighted`: the one row the UI is about (say, whose details are open), a single item value or `null`. Opt-in: bound, a row click highlights; unbound, it only emits `click:row`. The row gets `aria-current=\"true\"` and a shipped tint.",{"name":1437,"type":3180,"required":3175,"default":377,"description":3260,"note":3261,"demo":1374},"Stable id for this table's width context. When omitted a unique id is generated. Nested tables use the nearest ancestor id to inherit widths.","The rendezvous key for `useBbTableContext(id)` and for a `BbPagination` with a matching `table-id`. A typo does not error — it creates a second, unattached state node, so a toolbar that \"works\" while the table ignores it is almost always a misspelled id.",{"name":3263,"type":3264,"required":3175,"default":377,"description":3265,"note":377,"demo":377},"inheritColumnWidths","string | boolean | undefined","Snaps a nested table's columns to an ancestor table's tracks: `true` = the nearest one, a table `id` = that one (when a table in between has a different column count). Off by default: a nested table sizes itself.",{"name":3267,"type":3194,"required":3175,"default":1200,"description":3268,"note":377,"demo":377},"interactiveWhileLoading","Keeps the header and rows interactive while loading (by default they are `inert`: a refetch is about to replace them). For background refreshes that must not interrupt an open editor.",{"name":505,"type":3270,"required":2048,"default":1341,"description":3271,"note":3272,"demo":485},"Item[] | ((context: BbTableItemsContext) => Item[] | Promise\u003CItem[]>)","Rows to render: an array, or a provider called with a `BbTableItemsContext` (`reason`, `modelValue`, `signal`), sync or async. A provider fails by THROWING, never by returning `[]`: the rows clear and `#empty` gets the `error`. Return the page as it is.","Pass rows or a provider. Put filters and sort in `dependencies`; the table debounces, reports loading and discards stale responses.",{"name":3274,"type":3275,"required":3175,"default":377,"description":3276,"note":3277,"demo":485},"itemValue","ItemAccessor\u003CItem> | undefined","The row's value, as a property path or a function returning any value; the selection, `expandedItems` and row keys compare by it.","Stable row identity as a path or function. Set it before adding selection, expansion or highlight so those models survive refetches.",{"name":3279,"type":3194,"required":3175,"default":1200,"description":3280,"note":3281,"demo":1500},"keyboardNavigation","Opt-in keyboard navigation: the table becomes an ARIA `grid` (`treegrid` with an `#expand` slot) with ONE tab stop and roving focus over its cells. Controls in cells leave the tab order (Enter\u002FF2 go in). Ignored with a `#tbody` slot.","Makes the table an ARIA grid (a treegrid with `#expand`): one tab stop, focus moves between cells, Enter\u002FSpace open the row, Enter\u002FF2 step into a cell's controls. Controls inside cells leave the tab order while it is on. Ignored under a `#tbody` slot.",{"name":1081,"type":3180,"required":3175,"default":377,"description":3283,"note":3284,"demo":1044},"The `\u003Clegend>` of a `selectable` table (it renders as a `\u003Cfieldset>`): the selection's accessible name. Falls back to `caption`, then to a localized default.","Only rendered by a `selectable` table. Say what the selection is for (\"select invoices to export\") — that is what makes it worth more than the `caption` fallback.",{"name":1238,"type":3194,"required":3175,"default":1200,"description":3286,"note":3287,"demo":1227},"Loading state: skeletons with no rows yet, else the rows stay on screen, dimmed, under an indeterminate bar. A refetch never blanks a table the user is reading.","With rows already on screen this no longer blanks the table: the rows stay, dimmed, under a progress bar, and the header and rows go `inert` unless you set `interactive-while-loading`. Skeletons appear only when there is nothing to keep.",{"name":3289,"type":3180,"required":3175,"default":3290,"description":3291,"note":377,"demo":377},"loadingText","the localized `common.loadingText` (\"Loading...\")","Screen-reader announcement for the loading row's `aria-live` status. Visually hidden — the skeleton (or the `#loading` slot) is the visible signal.",{"name":1124,"type":3201,"required":3175,"default":3293,"description":3294,"note":377,"demo":377},"Infinity","Maximum number of items that can be selected.",{"name":538,"type":3257,"required":3175,"default":1341,"description":3296,"note":377,"demo":377},"Used by v-model. Can be any serializable type.",{"name":3298,"type":3194,"required":3175,"default":1192,"description":3299,"note":377,"demo":377},"multiple","Allows the selection of multiple items.",{"name":3301,"type":3194,"required":3175,"default":1200,"description":3302,"note":377,"demo":377},"multiSort","A plain click on a sortable header adds the column to the sort, as Shift+click always does. Off, a plain click makes the sort that column alone.",{"name":1105,"type":3180,"required":3175,"default":377,"description":3304,"note":377,"demo":377},"Defines the name of the input.",{"name":897,"type":3306,"required":3175,"default":1341,"description":3307,"note":377,"demo":377},"string[] | undefined","Used by `v-model:order`: the column keys in render order. Columns it omits follow in declaration order; unknown keys stay put. A `reorderable` move writes it back complete. Works unbound, like `sort`; never holds `select` \u002F `actions`.",{"name":1394,"type":3309,"required":3175,"default":377,"description":3310,"note":377,"demo":377},"string | number | undefined","Current page (from 1), for the rows' `aria-rowindex` and a `BbPagination` paired through `id`. Doesn't slice `items`: pass the current page's rows. Numeric strings are coerced.",{"name":1467,"type":3309,"required":3175,"default":377,"description":3312,"note":377,"demo":377},"Rows per page, for `aria-rowindex` and a paired `BbPagination`. Doesn't slice `items`. Unset, an array `items` infers it from its length. Numeric strings are coerced.",{"name":2448,"type":3314,"required":3175,"default":377,"description":3315,"note":377,"demo":377},"PtItemMap\u003CBbTablePtPart, \"row\" | \"expand\", BbTablePtState, Item> | undefined","Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:\u003Cpart>` row.",{"name":3317,"type":3318,"required":3175,"default":377,"description":3319,"note":377,"demo":3320},"pt:\u003Cpart>","PtValue | ((ctx: PtItemCtx\u003CItem, BbTablePtState>) => PtItemResult) | undefined","Passthrough, attribute form: one attribute per part, `pt:\u003Cpart>`, and per part and state, `pt:\u003Cpart>:\u003Cstate>`. Parts: `body`, `caption`, `cell`, `cellColumnHeader`, `dragHandle`, `dragIcon`, `expand`, `firstRow`, `foot`, `head`, `headerRow`, `lastRow`, `root`, `row`, `selectIcon`, `sortIcon`, `table`. States: `disabled`, `empty`, `expanded`, `highlighted`, `indeterminate`, `loading`, `placeholder`, `selected`, `sorted`, `sortedDesc`, `value`.","passthrough",{"name":3322,"type":3194,"required":3175,"default":1200,"description":3323,"note":377,"demo":377},"readonly","Sets the input in a readonly state.",{"name":2408,"type":3194,"required":3175,"default":1200,"description":3325,"note":377,"demo":377},"Lets the user reorder the data columns: drag a header, or Shift+←\u002F→ on a focused header. Every move writes `v-model:order`; a column panel that only writes `order` does not need it. `select` \u002F `actions` and a custom `#thead` never move.",{"name":3327,"type":3194,"required":3175,"default":1200,"description":3328,"note":377,"demo":377},"reorderableRows","Adds a drag handle at the start of each row: the user drags a row, or lifts it with Space \u002F Enter and the arrow keys, and `reorder:rows` reports `{ item, from, to }`. The table never reorders `items`: splice it in the handler.",{"name":2425,"type":3194,"required":3175,"default":1200,"description":3330,"note":377,"demo":377},"Lets the user resize the data columns (drag a header's trailing edge, or Alt+←\u002F→; double-click resets). Each commit fires `resize:column(key, width)` once: write the width back into the column definition to keep it. Ignored when inheriting widths.",{"name":670,"type":3332,"required":3175,"default":377,"description":3333,"note":3334,"demo":590},"BbTableRowClasses\u003CItem> | undefined","Classes for each data row, or a function of the row's item.","The column-level `rowClass` field is new in v3 and accepts a plain string, so a leftover per-column class of that name now type-checks and lands on the whole row. Check your column definitions when you upgrade.",{"name":722,"type":3254,"required":3175,"default":377,"description":3336,"note":377,"demo":377},"Makes rows selectable: a boolean for every row, or a function of the row's item deciding for that row.",{"name":3338,"type":3194,"required":3175,"default":1200,"description":3339,"note":377,"demo":377},"selectAll","Whether the \"Select all\" checkbox is checked.",{"name":3341,"type":3180,"required":3175,"default":377,"description":3342,"note":3343,"demo":1044},"selectAllLabel","Label of the \"Select all\" checkbox.","Select-all is the \"everything across every page\" affordance: while it is on, `modelValue` stays empty and the exclusions accumulate in `unselected-items`. Read those two, never infer the selection from `modelValue`.",{"name":3345,"type":3180,"required":3175,"default":377,"description":3346,"note":377,"demo":377},"selectText","Header text of the radio column when the table is not `multiple`.",{"name":1460,"type":3348,"required":3175,"default":1341,"description":3349,"note":377,"demo":377},"BbTableSortEntry[] | undefined","Used by `v-model:sort`: `[columnKey, direction]` entries in priority order, written by the `sortable` headers and shown by them. Doesn't sort `items`: apply it to your data or your server query.",{"name":666,"type":3351,"required":3175,"default":377,"description":3352,"note":377,"demo":377},"ColumnClasses\u003CItem> | undefined","Classes for every data cell, or a function of `(content, key, item)`.",{"name":663,"type":3251,"required":3175,"default":377,"description":3354,"note":377,"demo":377},"Classes for every header cell.",{"name":1470,"type":3309,"required":3175,"default":377,"description":3356,"note":3357,"demo":1374},"Total row count, for `aria-rowcount` and a paired `BbPagination`'s page count. Unset, an array `items` infers it from its length. Numeric strings are coerced.","Pass it with `page` and `per-page` so the table can announce the whole result set: `aria-rowcount` (`totalItems` plus the header row, any `#tfoot` rows and the open expand rows) and each row's absolute `aria-rowindex`.",{"name":1473,"type":3309,"required":3175,"default":377,"description":3359,"note":377,"demo":377},"Seeds a paired `BbPagination`'s page count when the server reports pages, not rows; the table renders nothing from it. A known total (`totalItems`) always wins. Numeric strings are coerced.",{"name":3361,"type":3225,"required":3175,"default":1341,"description":3362,"note":377,"demo":377},"unselectedItems","Items that are not selected.",{"name":587,"type":3194,"required":3175,"default":1200,"description":3364,"note":3365,"demo":1980},"Windows the body: only the rows near the scrollport are mounted. Bound the table's height to make it the scroller; column widths are measured once, from the first rows. Ignored when inheriting widths and under a `#tbody` slot.","Bound the height of the table or of an ancestor, or the page becomes the scroller. Columns are measured once from the first batch and then hold, and their cells clip with an ellipsis instead of wrapping — a column that must wrap needs a declared `width`.",[3367,3369,3371,3373,3375,3376,3378],{"name":3224,"type":3225,"note":3368,"demo":1500},"Holds the open rows by `item-value`. Without `item-value` expansion is keyed by object identity and every refetch closes every row.",{"name":851,"type":3257,"note":3370,"demo":1500},"Bind `ref(null)`, not `ref()`. The value is the switch: `undefined` leaves the whole highlight mechanic off (and warns in dev), `null` turns it on with nothing highlighted.",{"name":538,"type":3257,"note":3372,"demo":1044},"Holds row values resolved through `item-value`, or whole records without it. In multiple mode it must already be an array on the first render, or the table throws.",{"name":897,"type":3306,"note":3374,"demo":377},"Bind it without `reorderable` when a column panel owns the order; `useBbTableContext(id).order` reads and writes it from anywhere, and `[]` restores the declared order. Hide a column with its `hidden` flag, never by filtering the order array, and it returns exactly where it was. A column with `reorderable: false` stays at its declared slot whatever the array says.",{"name":3338,"type":3194,"note":377,"demo":377},{"name":1460,"type":3348,"note":3377,"demo":485},"The array order is the sort priority. The table reports it and never applies it: sort your own array, or forward it to the server as `orderBy` and refetch through `dependencies`.",{"name":3361,"type":3225,"note":377,"demo":377},[3380,3384,3387,3390,3394,3397,3399,3403,3408,3412,3415,3418,3422,3426,3430],{"name":1591,"signature":3381,"description":3382,"note":3383,"demo":1500},"(event: MouseEvent, item: any): void","A body row was clicked, or activated with Enter\u002FSpace under `keyboardNavigation`. Carries the DOM `MouseEvent` and the raw record.","The payload is `(event, item)` — your raw record. v2 passed the table's internal row wrapper plus a trailing `selected` boolean; both are gone. Use it for side effects, not for navigation: a row that opens a record should contain a real link.",{"name":3385,"signature":3381,"description":3386,"note":377,"demo":377},"contextmenu:row","A body row was right-clicked. Carries the DOM `MouseEvent` and the raw record.",{"name":3388,"signature":3381,"description":3389,"note":377,"demo":377},"dblclick:row","A body row was double-clicked. Carries the DOM `MouseEvent` and the raw record.",{"name":3391,"signature":3392,"description":3393,"note":377,"demo":377},"hide:column","(key: string): void","A column was hidden through a header slot's `hideColumn()`. Fired once; write `hidden: true` into the column definition to persist it.",{"name":1133,"signature":3395,"description":3396,"note":377,"demo":377},"(value: any): void","The user selected one row. Carries the row's value (read through `itemValue`, the same value the selection v-model holds).",{"name":1139,"signature":3395,"description":3398,"note":377,"demo":377},"The user unselected one row. Carries the row's value, like `item:selected`.",{"name":3400,"signature":3401,"description":3402,"note":377,"demo":377},"reorder:rows","(payload: { item: any; from: number; to: number; }): void","A row was moved (`reorderable-rows`): `item` is your object, `from` \u002F `to` index the `items` the table holds. Splice `items` in the handler; a drop in place emits nothing.",{"name":3404,"signature":3405,"description":3406,"note":3407,"demo":377},"resize:column","(key: string, width: number | null): void","The user resized a column (`resizable`): the new width in px, or `null` after a double-click on the handle reset it to its declared width.","Fires once per committed resize, with `null` after a double-click reset. There is no width model on purpose: write the reported width back into your column definition, which always outranks a user override.",{"name":3409,"signature":3410,"description":3411,"note":377,"demo":377},"update:expandedItems","(value: any[]): void","Emitted with the new value whenever `v-model:expandedItems` changes.",{"name":3413,"signature":3395,"description":3414,"note":377,"demo":377},"update:highlighted","Emitted with the new value whenever `v-model:highlighted` changes.",{"name":3416,"signature":3395,"description":3417,"note":377,"demo":377},"update:modelValue","Emitted with the new value whenever `v-model` changes.",{"name":3419,"signature":3420,"description":3421,"note":377,"demo":377},"update:order","(value: string[]): void","Emitted with the new value whenever `v-model:order` changes.",{"name":3423,"signature":3424,"description":3425,"note":377,"demo":377},"update:selectAll","(value: boolean): void","Emitted with the new value whenever `v-model:selectAll` changes.",{"name":3427,"signature":3428,"description":3429,"note":377,"demo":377},"update:sort","(value: BbTableSortEntry[]): void","Emitted with the new value whenever `v-model:sort` changes.",{"name":3431,"signature":3410,"description":3432,"note":377,"demo":377},"update:unselectedItems","Emitted with the new value whenever `v-model:unselectedItems` changes.",[3434,3439,3443,3447,3451,3454,3457,3460,3464,3468,3472,3476,3480,3484,3488,3492,3495,3499],{"name":3435,"type":3436,"description":3437,"note":3438,"demo":590},"\u003Ckey>","object","One column's body cell in every row, by the column `key` through `slotKey`. Scope: `{ item, value, content, selected, expanded, highlighted, classes, sortOrder, toggleSelected, toggleExpanded, toggleHighlighted, expandProps }`.","The name is the column `key` in kebab-case: `unitPrice` and `unit_price` are both `#unit-price`, `address.city` is `#address-city`. For accents or punctuation write `#[slotKey('…')]`, and build names in code with `slotKey`, never a hand copy of the rule. Scope `value` is the row's value, not the cell's. Keep the column in `columns`: it still supplies the label, alignment and width.",{"name":3440,"type":3441,"description":3442,"note":377,"demo":377},"\u003Ckey>:first","BbTableEdgeCellSlotProps\u003CItem>","One column's cell in a row before the data rows; any such slot creates the row, aligned with the columns. Only over rows.",{"name":3444,"type":3436,"description":3445,"note":3446,"demo":957},"\u003Ckey>:header","One column's header content, replacing its label and the built-in sort button. Scope: `{ label, items, sortable, sortOrder, toggleSort, hideColumn, classes }`.","Replaces the header and the built-in sort button with it. To add beside the label and keep sorting, use `\u003Ckey>:header:prepend` \u002F `:append`.",{"name":3448,"type":3449,"description":3450,"note":377,"demo":590},"\u003Ckey>:header:append","BbTableHeaderAffixSlotProps\u003CItem>","Content after one column's header, keeping the sort button; beats `header:append` (they never stack).",{"name":3452,"type":3449,"description":3453,"note":377,"demo":590},"\u003Ckey>:header:prepend","Content before one column's header, keeping the sort button; beats `header:prepend` (they never stack).",{"name":3455,"type":3441,"description":3456,"note":377,"demo":377},"\u003Ckey>:last","One column's cell in a row after the data rows (a totals row); any such slot creates that row, aligned like `\u003Ckey>:first`.",{"name":715,"type":3458,"description":3459,"note":377,"demo":377},"{ expanded?: boolean | undefined; expandProps?: ExpandControllerProps | undefined; toggleExpanded?: (() => void) | undefined; highlighted?: boolean | undefined; toggleHighlighted?: (() => void) | undefined; selected?: boolean | undefined; toggleSelected?: (() => void) | undefined; item: Item; value: any; }","Content of each row's actions cell; this slot CREATES the actions column (there is no prop). The header cell (labelled by `actions-text`, replaceable through `#actions:header`) and one cell per row come and go with it. Pin it with `fixed-actions`.",{"name":3461,"type":3462,"description":3463,"note":377,"demo":377},"actions:header","{ text: string; }","Replaces the default actions header cell content.",{"name":740,"type":3465,"description":3466,"note":3467,"demo":1227},"{ error: unknown; }","Content shown when there are no rows and nothing is loading, inside the table's own full-width cell: pass content, never a row. `error` is what the latest failed load threw (`null` when none).","Fills the table's own full-width cell, already centred and already spanning every column. Pass content, not a row — v2 handed this slot the whole `\u003Ctr>`, and a hand-rolled row here is now table markup inside a grid.",{"name":737,"type":3469,"description":3470,"note":3471,"demo":1500},"{ expanded: boolean; expandProps?: ExpandControllerProps | undefined; toggleExpanded: () => void; highlighted?: boolean | undefined; toggleHighlighted?: (() => void) | undefined; selected?: boolean | undefined; toggleSelected?: (() => void) | undefined; item: Item; value: any; }","Full-width expandable content row rendered below each main row when expanded.","One full-width row below its record. `expandProps`, `expanded` and `toggleExpanded` also reach every per-column cell slot, so the toggle can live in the identity column instead of the actions column.",{"name":3473,"type":3449,"description":3474,"note":3475,"demo":590},"header:append","Content after every data column's header content (the label + sort control, or its own `\u003Ckey>:header` replacement). A column's `\u003Ckey>:header:append` wins over this for that column; they never stack. Branch on `columnKey` for per-column output.","Renders after the column's existing header content, so the built-in sort button survives — which a full `#\u003Ckey>:header` replacement does not. The table-wide form applies to every data column and never to the select or actions cells; a per-column affix wins over it and the two never stack.",{"name":3477,"type":3449,"description":3478,"note":3479,"demo":590},"header:prepend","Content before every data column's header content (the label + sort control, or its own `\u003Ckey>:header` replacement). A column's `\u003Ckey>:header:prepend` wins over this for that column; they never stack. Branch on `columnKey` for per-column output.","The mirror of `header:append`, rendered before the column's existing header content. A column key that normalizes to `prepend` or `append` shadows these table-wide names: the table-wide reading wins, and dev builds warn.",{"name":1238,"type":3481,"description":3482,"note":3483,"demo":1227},"{ items: Item[]; }","Content shown while table rows are loading (replaces the skeleton rows).","Replaces the skeleton, so it follows the skeleton's rule: first load only. A refetch over existing rows keeps them and shows the built-in progress bar instead, which this slot cannot change.",{"name":712,"type":3485,"description":3486,"note":3487,"demo":1044},"{ item: Item; value: any; checked: boolean; disabled: boolean; inputName: string; readonly: boolean; toggleSelected?: (() => void) | undefined; }","Replaces the default checkbox\u002Fradio in the selection cell for each row.","Replaces a row's checkbox or radio while keeping the table's selection path. This is the supported way to change the control — rebuilding selection with your own checkbox in a cell slot is not.",{"name":3489,"type":3490,"description":3491,"note":377,"demo":377},"select:header","{ multiple: boolean; selectAll: boolean; text: string; }","Replaces the default selection header cell content (checkbox or radio label).",{"name":2586,"type":3436,"description":3493,"note":3494,"demo":2439},"Replaces the content of the body row group (`.bb-table__body`), for full control of the body markup. Provide role-complete rows (`\u003Cdiv role=\"row\">` with one `\u003Cdiv role=\"cell\">` per column), never `\u003Ctr>`\u002F`\u003Ctd>`. A full-width cell spans with `grid-column: 1 \u002F -1`.","Role-complete `\u003Cdiv role=\"row\">` rows of `\u003Cdiv role=\"cell\">`. Taking over the body switches off `virtual`, which has no rows of its own to window.",{"name":3075,"type":3496,"description":3497,"note":3498,"demo":2439},"{ columnCount: number; }","Fills the footer row group (`.bb-table__foot`) for footers that are not column-shaped (a note, pagination). Column-aligned totals go in `#\u003Ckey>:last` (`#\u003Ckey>:first` for a row before the data). Role-complete rows (`\u003Cdiv role=\"row\">` of `\u003Cdiv role=\"cell\">`), never `\u003Ctr>`\u002F`\u003Ctd>`.","The markup you pass is grid markup: `\u003Cdiv role=\"row\">` holding `\u003Cdiv role=\"cell\">`, spanning with `grid-column` and `aria-colspan` rather than `colspan`. The table numbers these rows after the body (`aria-rowindex`) and counts them in `aria-rowcount`, so leave the index off. Nothing lints the roles — a row group of plain `\u003Cdiv>`s renders correctly and is invisible to a screen reader.",{"name":2573,"type":3436,"description":3500,"note":3501,"demo":2439},"Replaces the header row group's content (`.bb-table__head`). The table is a CSS grid: provide `\u003Cdiv role=\"row\">` rows of `\u003Cdiv role=\"columnheader\">` cells, never `\u003Ctr>` \u002F `\u003Cth>`.","Role-complete rows of `\u003Cdiv role=\"columnheader\">`. The table measures its tracks off the header cells, so a custom header over an empty table publishes no tracks and a nested table cannot inherit from it until rows arrive.",[],{"parts":3504,"states":3551},[3505,3508,3510,3512,3515,3518,3521,3524,3527,3529,3531,3533,3536,3539,3542,3545,3548],{"name":3506,"description":3507},"root","The table's container.",{"name":561,"description":3509},"The visible caption (`caption` with `displayCaption`).",{"name":2570,"description":3511},"The grid root: `role=\"table\"`, or `role=\"grid\"` with `keyboardNavigation` (`role=\"treegrid\"` with an `#expand` slot too).",{"name":3513,"description":3514},"head","The header row group.",{"name":3516,"description":3517},"headerRow","The header row.",{"name":3519,"description":3520},"cellColumnHeader","Every column header cell (`role=\"columnheader\"`), the select and actions headers included — a broadcast resolved per header. Not a `\u003Cth>`: the grid is `div`s with ARIA roles.",{"name":3522,"description":3523},"sortIcon","A sortable column's sort arrow, resolved per header.",{"name":3525,"description":3526},"body","The body row group.",{"name":2654,"description":3528},"Every DATA row — a broadcast resolved per row. The skeleton is not a part, and an expand row is styled through `expand`. Also takes a per-item function, called with the row's raw item, once per rendered row: keep it cheap.",{"name":2722,"description":3530},"Every data cell, the select and actions cells included — a broadcast resolved with its row's states (`role=\"cell\"`, `gridcell` under `keyboardNavigation`) — and the cells of the `firstRow` \u002F `lastRow`, with no row state. Takes no function: use `tdClass` for a per-cell hook.",{"name":737,"description":3532},"The cell under an open row that holds the `#expand` slot and spans every column — resolved with its data row's `selected`, `highlighted` and `expanded` (always on: the cell exists only while its row is open). Not a `cell`, so `pt:cell` never reaches it: a rule taken off the cells (`pt:cell=\"border-b-0\"`) needs `pt:expand=\"border-b-0\"` too. Also takes a per-item function, called with the open row's raw item.",{"name":3534,"description":3535},"firstRow","The row of `#\u003Ckey>:first` cells, before the data rows.",{"name":3537,"description":3538},"lastRow","The row of `#\u003Ckey>:last` cells, after the data rows (a totals row: `pt:lastRow=\"font-semibold\"`).",{"name":3540,"description":3541},"selectIcon","The selection glyph: each row's checkbox (radio with single selection) and the select-all checkbox — resolved per node. Not rendered when the `select` \u002F `select:header` slots replace them.",{"name":3543,"description":3544},"dragIcon","The move glyph on the chip that follows a column drag (`reorderable`).",{"name":3546,"description":3547},"dragHandle","Each row's drag handle button (`reorderable-rows`), resolved with its row's states. A class list or an object; no per-row function.",{"name":3549,"description":3550},"foot","The footer row group (the `tfoot` slot's container).",[3552,3554,3556,3558,3560,3563,3565,3567,3569,3571,3574],{"name":3205,"description":3553},"Per node, on `row`, its cells and its `selectIcon`: the row cannot be SELECTED — `selectable` rejects it, or the table is `disabled` (`bb-table__row--disabled`). It still clicks, highlights and expands. Never on a table without selection. The select-all glyph takes it from the table's `disabled`.",{"name":740,"description":3555},"Component-wide: there are no rows (`bb-table--empty`).",{"name":847,"description":3557},"Per node, on `row`, its cells and its `expand`: the row's expand row is open (`bb-table__row--expanded`).",{"name":851,"description":3559},"Per node, on `row`, its cells and its `expand`: the highlighted row.",{"name":3561,"description":3562},"indeterminate","Per node, on the select-all `selectIcon`: some rows are selected, not all.",{"name":1238,"description":3564},"Component-wide: the table is `loading`.",{"name":645,"description":3566},"Per node, on a DATA `cell`: the value was empty and the column's `placeholder` shows instead, whatever its text (`bb-table__cell--placeholder`). A cell with an empty value and no `placeholder` has neither state.",{"name":844,"description":3568},"Per node, on `row`, its cells, its `expand` and its `selectIcon`: a checked row; on the select-all glyph, every row is selected.",{"name":1015,"description":3570},"Per node, on `cellColumnHeader` and `sortIcon`: the column is sorted, either direction (`bb-table__cell-column-header--sorted`).",{"name":3572,"description":3573},"sortedDesc","Per node, on `cellColumnHeader` and `sortIcon`: sorted descending (`bb-table__cell-column-header--sorted-desc`). Ascending is `sorted` alone.",{"name":834,"description":3575},"Per node, on a DATA `cell`: the formatter \u002F placeholder pipeline produced a value (not `null` \u002F `undefined`), slot cells included (`bb-table__cell--value`). Not on the select, drag or actions cells.",{"removed":3577,"renamed":3624},[3578,3584,3589,3593,3597,3602,3606,3610,3613,3616,3621],{"name":715,"surface":3579,"replacedBy":377,"hint":377,"since":3580,"migration":3581,"silent":2048,"fix":3582},"prop","3.0.0-beta.21","ai\u002Fguides\u002Fmigration\u002Fcomponents\u002Fbb-table.md",{"kind":3583},"remove",{"name":3585,"surface":3579,"replacedBy":3208,"hint":377,"since":3586,"migration":3581,"silent":2048,"fix":3587},"allowSelectAll","3.0.0-alpha.1",{"kind":3588},"invert",{"name":3590,"surface":3579,"replacedBy":3267,"hint":377,"since":3586,"migration":3581,"silent":2048,"fix":3591},"enabledWhileLoading",{"kind":3592},"rename",{"name":3594,"surface":3579,"replacedBy":377,"hint":377,"since":3580,"migration":3581,"silent":2048,"fix":3595},"fixedColumns",{"kind":3596},"manual",{"name":3598,"surface":3599,"replacedBy":3600,"hint":377,"since":377,"migration":3581,"silent":2048,"fix":3601},"header:\u003Cx>","slot","\u003Cx>:header",{"kind":3592},{"name":3603,"surface":3599,"replacedBy":3604,"hint":377,"since":377,"migration":3581,"silent":2048,"fix":3605},"header:\u003Cx>:append","\u003Cx>:header:append",{"kind":3592},{"name":3607,"surface":3599,"replacedBy":3608,"hint":377,"since":377,"migration":3581,"silent":2048,"fix":3609},"header:\u003Cx>:prepend","\u003Cx>:header:prepend",{"kind":3592},{"name":3611,"surface":3599,"replacedBy":3461,"hint":377,"since":377,"migration":3581,"silent":2048,"fix":3612},"header:actions",{"kind":3592},{"name":3614,"surface":3599,"replacedBy":3489,"hint":377,"since":377,"migration":3581,"silent":2048,"fix":3615},"header:select",{"kind":3592},{"name":3617,"surface":3599,"replacedBy":740,"hint":377,"since":3618,"migration":3619,"silent":2048,"fix":3620},"no-data","3.0.0-beta.41","ai\u002Fguides\u002Fmigration\u002Fv2-to-v3.md",{"kind":3592},{"name":3622,"surface":3579,"replacedBy":3215,"hint":377,"since":3618,"migration":3619,"silent":2048,"fix":3623},"noDataText",{"kind":3592},[3625,3627,3629,3631,3633,3635,3637,3639,3641],{"from":3585,"to":3208,"surface":3579,"since":3586,"migration":3581,"fix":3626},{"kind":3588},{"from":3590,"to":3267,"surface":3579,"since":3586,"migration":3581,"fix":3628},{"kind":3592},{"from":3598,"to":3600,"surface":3599,"since":377,"migration":3581,"fix":3630},{"kind":3592},{"from":3603,"to":3604,"surface":3599,"since":377,"migration":3581,"fix":3632},{"kind":3592},{"from":3607,"to":3608,"surface":3599,"since":377,"migration":3581,"fix":3634},{"kind":3592},{"from":3611,"to":3461,"surface":3599,"since":377,"migration":3581,"fix":3636},{"kind":3592},{"from":3614,"to":3489,"surface":3599,"since":377,"migration":3581,"fix":3638},{"kind":3592},{"from":3617,"to":740,"surface":3599,"since":3618,"migration":3619,"fix":3640},{"kind":3592},{"from":3622,"to":3215,"surface":3579,"since":3618,"migration":3619,"fix":3642},{"kind":3592},[3644,3656,3670,3679,3691,3704,3723,3736,3744,3758],{"id":3645,"reference":3646,"customerId":3647,"total":3648,"currency":3649,"status":3650,"channel":3651,"placedAt":3652,"lines":3653},9020,"ORD-2026-0511",25,199,"EUR","pending","phone","2026-08-29T09:41:00.000Z",[3654],{"productId":3655,"quantity":141,"unitPrice":3648},109,{"id":3657,"reference":3658,"customerId":3659,"total":3660,"currency":3649,"status":3650,"channel":3661,"placedAt":3662,"lines":3663},9019,"ORD-2026-0507",20,627.9,"web","2026-08-27T10:04:00.000Z",[3664,3667],{"productId":3665,"quantity":145,"unitPrice":3666},117,279,{"productId":3668,"quantity":141,"unitPrice":3669},114,69.9,{"id":3671,"reference":3672,"customerId":229,"total":3673,"currency":3649,"status":3650,"channel":3674,"placedAt":3675,"lines":3676},9018,"ORD-2026-0502",179,"marketplace","2026-08-24T16:28:00.000Z",[3677],{"productId":3678,"quantity":141,"unitPrice":3673},104,{"id":3680,"reference":3681,"customerId":2229,"total":3682,"currency":3649,"status":3650,"channel":3661,"placedAt":3683,"lines":3684},9017,"ORD-2026-0496",418,"2026-08-21T08:35:00.000Z",[3685,3688],{"productId":3686,"quantity":141,"unitPrice":3687},122,189,{"productId":3689,"quantity":141,"unitPrice":3690},121,229,{"id":3692,"reference":3693,"customerId":185,"total":3694,"currency":3649,"status":3695,"channel":3661,"placedAt":3696,"lines":3697},9016,"ORD-2026-0491",958.9,"shipped","2026-08-18T14:07:00.000Z",[3698,3701],{"productId":3699,"quantity":141,"unitPrice":3700},106,899,{"productId":3702,"quantity":141,"unitPrice":3703},103,59.9,{"id":3705,"reference":3706,"customerId":3707,"total":3708,"currency":3649,"status":3709,"channel":3710,"placedAt":3711,"lines":3712},9014,"ORD-2026-0480",17,1286.8,"processing","reseller","2026-08-11T09:19:00.000Z",[3713,3716,3717,3720],{"productId":3714,"quantity":145,"unitPrice":3715},101,489,{"productId":3702,"quantity":141,"unitPrice":3703},{"productId":3718,"quantity":141,"unitPrice":3719},108,129.9,{"productId":3721,"quantity":141,"unitPrice":3722},125,119,{"id":3724,"reference":3725,"customerId":177,"total":3726,"currency":3649,"status":3709,"channel":3661,"placedAt":3727,"lines":3728},9013,"ORD-2026-0474",777.9,"2026-08-07T17:41:00.000Z",[3729,3732,3733],{"productId":3730,"quantity":141,"unitPrice":3731},112,159,{"productId":3668,"quantity":141,"unitPrice":3669},{"productId":3734,"quantity":141,"unitPrice":3735},105,549,{"id":3737,"reference":3738,"customerId":2245,"total":3739,"currency":3649,"status":3695,"channel":3661,"placedAt":3740,"lines":3741},9011,"ORD-2026-0463",318,"2026-07-29T08:26:00.000Z",[3742],{"productId":3743,"quantity":145,"unitPrice":3731},124,{"id":3745,"reference":3746,"customerId":237,"total":3747,"currency":3649,"status":3695,"channel":3651,"placedAt":3748,"lines":3749},9010,"ORD-2026-0458",1046,"2026-07-23T15:12:00.000Z",[3750,3753,3755],{"productId":3751,"quantity":145,"unitPrice":3752},118,349,{"productId":3754,"quantity":141,"unitPrice":3666},123,{"productId":3756,"quantity":141,"unitPrice":3757},110,69,{"id":3759,"reference":3760,"customerId":3761,"total":3762,"currency":3649,"status":3695,"channel":3674,"placedAt":3763,"lines":3764},9008,"ORD-2026-0447",19,458,"2026-07-14T10:31:00.000Z",[3765],{"productId":3689,"quantity":145,"unitPrice":3690},1793055145513]