[{"data":1,"prerenderedAt":626},["ShallowReactive",2],{"$flAv0C5xF4SFbe-_UT5xQCVguIlLM0CI35fWKvcdS-VQ":3},{"newThing":4,"project":5,"cycle":8,"sections":23,"threads":592,"otherDocs":593,"images":595,"archiveItems":616,"links":625},null,{"id":6,"label":7,"liveBase":4},"design","Design",{"id":9,"num":10,"dir":11,"name":12,"title":13,"focus":14,"status":15,"statusNote":4,"created":16,"completed":4,"mode":4,"recordless":17,"thumbnail":18,"imageCount":19,"artifactCount":20,"lastActivity":21,"hasPickup":17,"hasInitialPrompt":22},"c18",18,"c18.document-ux-table-list","document-ux-table-list","Document UX Table List","Comprehensive documentation of the UxTableList component with production-level examples and usage patterns","archived","2026-03-12",false,"\u002Fcycles\u002Fdesign\u002Fc18-data-table-pattern.png",6,1,"2026-09-11",true,[24,38,48,83,327,582],{"key":25,"title":26,"empty":17,"ast":27},"why","Why",{"type":28,"children":29},"root",[30],{"type":31,"tag":32,"props":33,"children":34},"element","p",{},[35],{"type":36,"value":37},"text","UxTableList is the most complex component in the layer — it handles sorting, searching, expandable rows, toggle rows, column headers, totals, and empty states. Despite being used extensively across app.qpoint.io, it lacks comprehensive documentation in the design site. The existing demo is minimal and doesn't reflect real-world usage patterns.",{"key":39,"title":40,"empty":17,"ast":41},"objective","Objective",{"type":28,"children":42},[43],{"type":31,"tag":32,"props":44,"children":45},{},[46],{"type":36,"value":47},"Create thorough documentation for UxTableList by examining all production instantiations in app.qpoint.io, building realistic demo examples with test datasets that replicate production conditions, and placing the documentation where it belongs in the component hierarchy.",{"key":49,"title":50,"empty":17,"ast":51},"scope","Scope",{"type":28,"children":52},[53],{"type":31,"tag":54,"props":55,"children":56},"ul",{},[57,63,68,73,78],{"type":31,"tag":58,"props":59,"children":60},"li",{},[61],{"type":36,"value":62},"Audit all UxTableList usages across app.qpoint.io to understand the full API surface",{"type":31,"tag":58,"props":64,"children":65},{},[66],{"type":36,"value":67},"Document how each sub-component (ColumnHeader, Search, Sorter, ToggleRow, ExpandRow, Totals) is used in practice",{"type":31,"tag":58,"props":69,"children":70},{},[71],{"type":36,"value":72},"Create test datasets that mirror production data shapes",{"type":31,"tag":58,"props":74,"children":75},{},[76],{"type":36,"value":77},"Build demo examples that are closer to working app.qpoint.io patterns",{"type":31,"tag":58,"props":79,"children":80},{},[81],{"type":36,"value":82},"Determine proper placement (table group index page vs. dedicated page)",{"key":84,"title":85,"empty":17,"ast":86},"key-changes","Key Changes",{"type":28,"children":87},[88,97,124,132,164,172,276,284],{"type":31,"tag":32,"props":89,"children":90},{},[91],{"type":31,"tag":92,"props":93,"children":94},"strong",{},[95],{"type":36,"value":96},"Production audit:",{"type":31,"tag":54,"props":98,"children":99},{},[100,105,110],{"type":31,"tag":58,"props":101,"children":102},{},[103],{"type":36,"value":104},"Inventoried 36 files across app.qpoint.io using UxTableList components",{"type":31,"tag":58,"props":106,"children":107},{},[108],{"type":36,"value":109},"Identified 10 cross-cutting patterns: sorting\u002Ffiltering, search, infinite scroll, row expansion, totals row, TD type components, compact mode, DataMetric integration, empty states, sorting without searching",{"type":31,"tag":58,"props":111,"children":112},{},[113,115,122],{"type":36,"value":114},"Documented the sort metric object shape (",{"type":31,"tag":116,"props":117,"children":119},"code",{"className":118},[],[120],{"type":36,"value":121},"{name, width, total, trend, unit, search, healthPolicy, spark}",{"type":36,"value":123},")",{"type":31,"tag":32,"props":125,"children":126},{},[127],{"type":31,"tag":92,"props":128,"children":129},{},[130],{"type":36,"value":131},"Test dataset:",{"type":31,"tag":54,"props":133,"children":134},{},[135],{"type":31,"tag":58,"props":136,"children":137},{},[138,140,146,148,154,156,162],{"type":36,"value":139},"New file: ",{"type":31,"tag":116,"props":141,"children":143},{"className":142},[],[144],{"type":36,"value":145},"app\u002Fdata\u002Ftable-list-demo.ts",{"type":36,"value":147}," — 8 vendor records with production-realistic fields (connections, requests, bytesIn\u002FOut, errors, availability, avgDuration, p99Duration), plus ",{"type":31,"tag":116,"props":149,"children":151},{"className":150},[],[152],{"type":36,"value":153},"formatBytes",{"type":36,"value":155}," and ",{"type":31,"tag":116,"props":157,"children":159},{"className":158},[],[160],{"type":36,"value":161},"formatNumber",{"type":36,"value":163}," helpers",{"type":31,"tag":32,"props":165,"children":166},{},[167],{"type":31,"tag":92,"props":168,"children":169},{},[170],{"type":36,"value":171},"Demo rewrites (8 files):",{"type":31,"tag":54,"props":173,"children":174},{},[175,186,197,208,219,230,247,265],{"type":31,"tag":58,"props":176,"children":177},{},[178,184],{"type":31,"tag":116,"props":179,"children":181},{"className":180},[],[182],{"type":36,"value":183},"UxTableList",{"type":36,"value":185}," — Full production pattern: ColumnHeader-driven sorting, search filtering, computed totals row, expandable detail panels, black header separator bar, grey totals separator",{"type":31,"tag":58,"props":187,"children":188},{},[189,195],{"type":31,"tag":116,"props":190,"children":192},{"className":191},[],[193],{"type":36,"value":194},"UxTableListHeader",{"type":36,"value":196}," — Working table with sticky header, compact toggle via adminProps",{"type":31,"tag":58,"props":198,"children":199},{},[200,206],{"type":31,"tag":116,"props":201,"children":203},{"className":202},[],[204],{"type":36,"value":205},"UxTableListColumnHeader",{"type":36,"value":207}," — Sort + search columns with metric config objects, live filtering, compact\u002Fdisabled adminProps",{"type":31,"tag":58,"props":209,"children":210},{},[211,217],{"type":31,"tag":116,"props":212,"children":214},{"className":213},[],[215],{"type":36,"value":216},"UxTableListSorter",{"type":36,"value":218}," — 3 sortable columns with actual sort logic and direction toggle, disabled adminProp",{"type":31,"tag":58,"props":220,"children":221},{},[222,228],{"type":31,"tag":116,"props":223,"children":225},{"className":224},[],[226],{"type":36,"value":227},"UxTableListSearch",{"type":36,"value":229}," — Inline search input filtering vendors by domain\u002Fname",{"type":31,"tag":58,"props":231,"children":232},{},[233,239,241],{"type":31,"tag":116,"props":234,"children":236},{"className":235},[],[237],{"type":36,"value":238},"UxTableListExpandRow",{"type":36,"value":240}," — 5 clickable rows expanding to 4-stat detail panels with ",{"type":31,"tag":116,"props":242,"children":244},{"className":243},[],[245],{"type":36,"value":246},"bg-white shadow-lg rounded-12",{"type":31,"tag":58,"props":248,"children":249},{},[250,256,258,263],{"type":31,"tag":116,"props":251,"children":253},{"className":252},[],[254],{"type":36,"value":255},"UxTableListToggleRow",{"type":36,"value":257}," — 4 rows with toggle expansion, close callback, ",{"type":31,"tag":116,"props":259,"children":261},{"className":260},[],[262],{"type":36,"value":246},{"type":36,"value":264}," expanded panels",{"type":31,"tag":58,"props":266,"children":267},{},[268,274],{"type":31,"tag":116,"props":269,"children":271},{"className":270},[],[272],{"type":36,"value":273},"UxTableListTotals",{"type":36,"value":275}," — Computed aggregate row (total requests, bytes, errors) with black separator",{"type":31,"tag":32,"props":277,"children":278},{},[279],{"type":31,"tag":92,"props":280,"children":281},{},[282],{"type":36,"value":283},"Production patterns replicated in demos:",{"type":31,"tag":54,"props":285,"children":286},{},[287,298,309],{"type":31,"tag":58,"props":288,"children":289},{},[290,296],{"type":31,"tag":116,"props":291,"children":293},{"className":292},[],[294],{"type":36,"value":295},"\u003Ctr>\u003Cth class=\"h-[5px] p-0 bg-black\" colspan=\"100%\">\u003C\u002Fth>\u003C\u002Ftr>",{"type":36,"value":297}," — header separator bar (all 8 demos)",{"type":31,"tag":58,"props":299,"children":300},{},[301,307],{"type":31,"tag":116,"props":302,"children":304},{"className":303},[],[305],{"type":36,"value":306},"\u003Ctr>\u003Cth class=\"h-[2px] p-0 bg-grey-200\" colspan=\"100%\">\u003C\u002Fth>\u003C\u002Ftr>",{"type":36,"value":308}," — totals separator (UxTableList demo)",{"type":31,"tag":58,"props":310,"children":311},{},[312,314,319,321],{"type":36,"value":313},"Expanded content uses ",{"type":31,"tag":116,"props":315,"children":317},{"className":316},[],[318],{"type":36,"value":246},{"type":36,"value":320}," instead of ",{"type":31,"tag":116,"props":322,"children":324},{"className":323},[],[325],{"type":36,"value":326},"bg-grey-50",{"key":328,"title":329,"empty":17,"ast":330},"outcome","Outcome",{"type":28,"children":331},[332,402,410,415,465,470,554],{"type":31,"tag":32,"props":333,"children":334},{},[335,340,342,348,350,355,357,363,365,370,372,378,380,385,387,393,395,400],{"type":31,"tag":92,"props":336,"children":337},{},[338],{"type":36,"value":339},"Phase 1 — Demo rewrites (prior session):",{"type":36,"value":341},"\nFixed column header alignment across all 8 UxTableList demo pages. Root cause: every demo redundantly wrapped header content in ",{"type":31,"tag":116,"props":343,"children":345},{"className":344},[],[346],{"type":36,"value":347},"\u003CUxTableListHeader>",{"type":36,"value":349},", but ",{"type":31,"tag":116,"props":351,"children":353},{"className":352},[],[354],{"type":36,"value":183},{"type":36,"value":356}," already wraps the ",{"type":31,"tag":116,"props":358,"children":360},{"className":359},[],[361],{"type":36,"value":362},"#header",{"type":36,"value":364}," slot in ",{"type":31,"tag":116,"props":366,"children":368},{"className":367},[],[369],{"type":36,"value":347},{"type":36,"value":371}," internally. This produced nested ",{"type":31,"tag":116,"props":373,"children":375},{"className":374},[],[376],{"type":36,"value":377},"\u003Cthead>",{"type":36,"value":379}," elements — invalid HTML that broke column alignment. Fix: removed the inner ",{"type":31,"tag":116,"props":381,"children":383},{"className":382},[],[384],{"type":36,"value":347},{"type":36,"value":386}," wrapper from all demos so ",{"type":31,"tag":116,"props":388,"children":390},{"className":389},[],[391],{"type":36,"value":392},"\u003Ctr>",{"type":36,"value":394}," elements sit directly in the ",{"type":31,"tag":116,"props":396,"children":398},{"className":397},[],[399],{"type":36,"value":362},{"type":36,"value":401}," slot, matching the working pattern in app.qpoint.io.",{"type":31,"tag":32,"props":403,"children":404},{},[405],{"type":31,"tag":92,"props":406,"children":407},{},[408],{"type":36,"value":409},"Phase 2 — Compositional guide + app pattern:",{"type":31,"tag":32,"props":411,"children":412},{},[413],{"type":36,"value":414},"New files:",{"type":31,"tag":54,"props":416,"children":417},{},[418,429,448],{"type":31,"tag":58,"props":419,"children":420},{},[421,427],{"type":31,"tag":116,"props":422,"children":424},{"className":423},[],[425],{"type":36,"value":426},"app\u002Fcomponents\u002Fpatterns\u002FCodeBlock.vue",{"type":36,"value":428}," — reusable titled, collapsible, copyable code block for multi-block guide pages",{"type":31,"tag":58,"props":430,"children":431},{},[432,438,440,446],{"type":31,"tag":116,"props":433,"children":435},{"className":434},[],[436],{"type":36,"value":437},"app\u002Fcomponents\u002Fpatterns\u002FDataTable.vue",{"type":36,"value":439}," — PatternCard entry on ",{"type":31,"tag":116,"props":441,"children":443},{"className":442},[],[444],{"type":36,"value":445},"\u002Fpatterns\u002Fapp",{"type":36,"value":447}," with live demo (sort, search, expand) + link to guide",{"type":31,"tag":58,"props":449,"children":450},{},[451,457,459],{"type":31,"tag":116,"props":452,"children":454},{"className":453},[],[455],{"type":36,"value":456},"app\u002Fpages\u002Fpatterns\u002Fdata-table.vue",{"type":36,"value":458}," — dedicated guide page at ",{"type":31,"tag":116,"props":460,"children":462},{"className":461},[],[463],{"type":36,"value":464},"\u002Fpatterns\u002Fdata-table",{"type":31,"tag":32,"props":466,"children":467},{},[468],{"type":36,"value":469},"Guide page sections:",{"type":31,"tag":471,"props":472,"children":473},"ol",{},[474,484,494,512,538],{"type":31,"tag":58,"props":475,"children":476},{},[477,482],{"type":31,"tag":92,"props":478,"children":479},{},[480],{"type":36,"value":481},"Component Map",{"type":36,"value":483}," — visual tree of all 8 sub-components and their nesting\u002Fslot relationships",{"type":31,"tag":58,"props":485,"children":486},{},[487,492],{"type":31,"tag":92,"props":488,"children":489},{},[490],{"type":36,"value":491},"Flat Composition",{"type":36,"value":493}," — live working demo + copyable code showing single-file pattern with sort metrics, ColumnHeader auto-delegation, separator rows, ExpandRow details",{"type":31,"tag":58,"props":495,"children":496},{},[497,502,504,510],{"type":31,"tag":92,"props":498,"children":499},{},[500],{"type":36,"value":501},"Production Decomposition",{"type":36,"value":503}," — 6-layer walkthrough from ",{"type":31,"tag":116,"props":505,"children":507},{"className":506},[],[508],{"type":36,"value":509},"app.qpoint.io\u002Ftraffic\u002Fconnections",{"type":36,"value":511}," with annotated code blocks: Page → Container → UI → SortHeader → ItemUI → ItemDetails",{"type":31,"tag":58,"props":513,"children":514},{},[515,520,522,528,530,536],{"type":31,"tag":92,"props":516,"children":517},{},[518],{"type":36,"value":519},"Key Patterns",{"type":36,"value":521}," — header separator, totals separator, sort metrics shape, scroll event chain, sticky header (the primary motivation — ",{"type":31,"tag":116,"props":523,"children":525},{"className":524},[],[526],{"type":36,"value":527},"sticky top-0",{"type":36,"value":529}," with ",{"type":31,"tag":116,"props":531,"children":533},{"className":532},[],[534],{"type":36,"value":535},"#page-scroll-window",{"type":36,"value":537}," dependency), open item tracking, expanded content styling",{"type":31,"tag":58,"props":539,"children":540},{},[541,546,548],{"type":31,"tag":92,"props":542,"children":543},{},[544],{"type":36,"value":545},"Sub-component cross-references",{"type":36,"value":547}," — links to all 8 individual component pages at ",{"type":31,"tag":116,"props":549,"children":551},{"className":550},[],[552],{"type":36,"value":553},"\u002Fcomponents\u002Ftable\u002F*",{"type":31,"tag":32,"props":555,"children":556},{},[557,559,565,567,572,574,580],{"type":36,"value":558},"Navigation wired: ",{"type":31,"tag":116,"props":560,"children":562},{"className":561},[],[563],{"type":36,"value":564},"\u002Fpatterns",{"type":36,"value":566}," index, ",{"type":31,"tag":116,"props":568,"children":570},{"className":569},[],[571],{"type":36,"value":445},{"type":36,"value":573},", ",{"type":31,"tag":116,"props":575,"children":577},{"className":576},[],[578],{"type":36,"value":579},"\u002Fpatterns\u002Fall",{"type":36,"value":581}," all include the new Data Table entry. Total app patterns: 5 (was 4).",{"key":583,"title":584,"empty":17,"ast":585},"extra","Open Issues",{"type":28,"children":586},[587],{"type":31,"tag":32,"props":588,"children":589},{},[590],{"type":36,"value":591},"None.",[],[594],"initial-prompt.md",[596,599,603,606,609,612],{"src":18,"kind":597,"order":598},"hero",4999,{"src":600,"kind":601,"order":602},"\u002Fcycles\u002Fdesign\u002Fc18-data-table-pattern-2.png","slice",2,{"src":604,"kind":601,"order":605},"\u002Fcycles\u002Fdesign\u002Fc18-data-table-pattern-3.png",3,{"src":607,"kind":601,"order":608},"\u002Fcycles\u002Fdesign\u002Fc18-data-table-pattern-4.png",4,{"src":610,"kind":601,"order":611},"\u002Fcycles\u002Fdesign\u002Fc18-data-table-pattern-5.png",5,{"src":613,"kind":614,"order":615},"\u002Fcycles\u002Fdesign\u002Fc18-data-table-pattern-full.png","full",9000,[617],{"path":618,"title":619,"image":18,"gallery":620},"archive\u002F2026-q3\u002F2026-03-18-c18-data-table-pattern","Data Table Pattern Guide",[621,623],{"src":18,"alt":622},"The data-table pattern guide.",{"src":613,"alt":624},"Data Table Pattern Guide — full page",[],1789151089312]