[{"data":1,"prerenderedAt":72},["Reactive",2],{"blog-post-markdown-table-performance-optimization-large-datasets-guide":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":46,"related":47},"markdown-table-performance-optimization-large-datasets-guide","Markdown Table Performance Optimization for Large Datasets: Complete Guide for Efficient Data Display, Lazy Loading, and Memory Management","Master performance optimization for large Markdown tables with lazy loading techniques, virtual scrolling, data chunking, and memory-efficient rendering strategies for handling extensive datasets.","Markdown table performance optimization for large datasets requires sophisticated rendering strategies, memory management techniques, and intelligent loading patterns that maintain responsive user…","2025-12-26","Tutorial","Matthew Rathbone","markdown table performance, large markdown tables, markdown table optimization, lazy loading markdown tables, virtual scrolling tables, markdown memory management, markdown table rendering performance",25,"\u003Cp>Markdown table performance optimization for large datasets requires sophisticated rendering strategies, memory management techniques, and intelligent loading patterns that maintain responsive user interfaces while displaying extensive tabular data. By implementing lazy loading, virtual scrolling, data chunking, and progressive enhancement techniques, technical writers and developers can create high-performance table displays that handle thousands of rows efficiently while providing smooth user experiences across different devices and network conditions.\u003C/p>\n\u003Ch2 id=\"why-optimize-markdown-table-performance\">Why Optimize Markdown Table Performance?\u003C/h2>\n\u003Cp>Large dataset table optimization provides essential benefits for data-heavy documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Responsive Performance\u003C/strong>: Maintain smooth scrolling and interaction with thousands of table rows\u003C/li>\n\u003Cli>\u003Cstrong>Memory Efficiency\u003C/strong>: Reduce browser memory usage through intelligent rendering strategies\u003C/li>\n\u003Cli>\u003Cstrong>Fast Initial Load\u003C/strong>: Display content quickly with progressive data loading\u003C/li>\n\u003Cli>\u003Cstrong>Scalable Architecture\u003C/strong>: Handle datasets that grow over time without performance degradation\u003C/li>\n\u003Cli>\u003Cstrong>Cross-Device Compatibility\u003C/strong>: Ensure consistent performance on mobile devices and slower hardware\u003C/li>\n\u003Cli>\u003Cstrong>SEO Preservation\u003C/strong>: Maintain search engine accessibility while optimizing client-side performance\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-performance-strategies\">Foundation Performance Strategies\u003C/h2>\n\u003Ch3 id=\"virtual-scrolling-implementation\">Virtual Scrolling Implementation\u003C/h3>\n\u003Cp>Building efficient virtual scrolling for large Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// virtual-table-renderer.js - High-performance virtual table system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTableRenderer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">container, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span> = container;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">rowHeight\u003C/span>: \u003Cspan class=\"hljs-number\">40\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnWidth\u003C/span>: \u003Cspan class=\"hljs-number\">150\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">stickyHeaders\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableSorting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableFiltering\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">displayedRows\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupContainer\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualElements\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupContainer\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'auto'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxHeight\u003C/span> || \u003Cspan class=\"hljs-string\">'600px'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">border\u003C/span> = \u003Cspan class=\"hljs-string\">'1px solid #ddd'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create viewport\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-viewport'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create content container\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-content'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'absolute'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">left\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">right\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualElements\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create header if sticky headers enabled\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">stickyHeaders\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-header'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'sticky'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">'0'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">zIndex\u003C/span> = \u003Cspan class=\"hljs-string\">'100'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">backgroundColor\u003C/span> = \u003Cspan class=\"hljs-string\">'#f8f9fa'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderBottom\u003C/span> = \u003Cspan class=\"hljs-string\">'2px solid #dee2e6'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Create loading indicator\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'loading-indicator'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'absolute'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">'50%'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">left\u003C/span> = \u003Cspan class=\"hljs-string\">'50%'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">'translate(-50%, -50%)'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<div class="spinner">Loading...</div>'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Scroll event with throttling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollTimeout;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(scrollTimeout);\n            scrollTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span>();\n            }, \u003Cspan class=\"hljs-number\">16\u003C/span>); \u003Cspan class=\"hljs-comment\">// ~60fps\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Resize observer for responsive updates\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">ResizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ResizeObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>();\n            });\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Window resize fallback\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'resize'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(), \u003Cspan class=\"hljs-number\">100\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Observe when rows enter/leave viewport for memory management\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entries\u003C/span> =>\u003C/span> {\n            entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadRowData\u003C/span>(row);\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">unloadRowData\u003C/span>(row);\n                }\n            });\n        }, {\n            \u003Cspan class=\"hljs-attr\">root\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.bufferSize * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadData\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showLoading\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> data === \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Parse CSV or other text format\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseTableData\u003C/span>(data);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(data)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = data;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Invalid data format'\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>];\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderHeaders\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateDimensions\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showError\u003C/span>(\u003Cspan class=\"hljs-string\">'Error loading table data: '\u003C/span> + error.\u003Cspan class=\"hljs-property\">message\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">finally\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideLoading\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">parseTableData\u003C/span>(\u003Cspan class=\"hljs-params\">textData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Parse Markdown table format\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = textData.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'\\n'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseTableRow\u003C/span>(lines[\u003Cspan class=\"hljs-number\">0\u003C/span>]);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Skip header separator line (usually line[1] with |---|---|)\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">2\u003C/span>; i < lines.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseTableRow\u003C/span>(lines[i]);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowObject = {};\n                headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n                    rowObject[header] = row[index] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                });\n                data.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(rowObject);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { headers, \u003Cspan class=\"hljs-attr\">rows\u003C/span>: data };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseTableRow\u003C/span>(\u003Cspan class=\"hljs-params\">line\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> line.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index, array\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Remove empty cells at start and end\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> !(index === \u003Cspan class=\"hljs-number\">0\u003C/span> && cell === \u003Cspan class=\"hljs-string\">''\u003C/span>) && \n                       !(index === array.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span> && cell === \u003Cspan class=\"hljs-string\">''\u003C/span>);\n            });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateDimensions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">containerHeight\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">containerWidth\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">clientWidth\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalHeight\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRowCount\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">containerHeight\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>) + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Set viewport height\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.totalHeight}\u003C/span>px`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRowCount\u003C/span>,\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateScrollIndicator\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleResize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateDimensions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderHeaders\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span> || !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        headerRow.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-header-row'\u003C/span>;\n        headerRow.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'flex'\u003C/span>;\n        headerRow.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">minWidth\u003C/span> = \u003Cspan class=\"hljs-string\">'fit-content'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerCell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            headerCell.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-header-cell'\u003C/span>;\n            headerCell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">minWidth\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.columnWidth}\u003C/span>px`\u003C/span>;\n            headerCell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">padding\u003C/span> = \u003Cspan class=\"hljs-string\">'8px 12px'\u003C/span>;\n            headerCell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">fontWeight\u003C/span> = \u003Cspan class=\"hljs-string\">'bold'\u003C/span>;\n            headerCell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderRight\u003C/span> = \u003Cspan class=\"hljs-string\">'1px solid #dee2e6'\u003C/span>;\n            headerCell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">backgroundColor\u003C/span> = \u003Cspan class=\"hljs-string\">'#f8f9fa'\u003C/span>;\n            \n            headerCell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = header;\n            \n            \u003Cspan class=\"hljs-comment\">// Add sorting functionality\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSorting\u003C/span>) {\n                headerCell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n                headerCell.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortByColumn\u003C/span>(index);\n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Add sort indicator\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortIndicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n                sortIndicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sort-indicator'\u003C/span>;\n                sortIndicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">marginLeft\u003C/span> = \u003Cspan class=\"hljs-string\">'8px'\u003C/span>;\n                sortIndicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0.5'\u003C/span>;\n                headerCell.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(sortIndicator);\n            }\n            \n            headerRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(headerCell);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(headerRow);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear existing rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.virtual-table-row'\u003C/span>);\n        existingRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(row);\n            row.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Render visible rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fragment = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDocumentFragment\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span>; i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>[i], i);\n            fragment.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(rowElement);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(rowElement);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(fragment);\n        \n        \u003Cspan class=\"hljs-comment\">// Update container transform for positioning\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">`translateY(\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.startIndex * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px)`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, index\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        row.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-row'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'flex'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderBottom\u003C/span> = \u003Cspan class=\"hljs-string\">'1px solid #eee'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">minWidth\u003C/span> = \u003Cspan class=\"hljs-string\">'fit-content'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span> = index;\n        \n        \u003Cspan class=\"hljs-comment\">// Alternate row coloring\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index % \u003Cspan class=\"hljs-number\">2\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">backgroundColor\u003C/span> = \u003Cspan class=\"hljs-string\">'#f8f9fa'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Create cells\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            cell.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-cell'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">minWidth\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.columnWidth}\u003C/span>px`\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">padding\u003C/span> = \u003Cspan class=\"hljs-string\">'8px 12px'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderRight\u003C/span> = \u003Cspan class=\"hljs-string\">'1px solid #dee2e6'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">textOverflow\u003C/span> = \u003Cspan class=\"hljs-string\">'ellipsis'\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">whiteSpace\u003C/span> = \u003Cspan class=\"hljs-string\">'nowrap'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellData = rowData[header];\n            cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = cellData || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            cell.\u003Cspan class=\"hljs-property\">title\u003C/span> = cellData || \u003Cspan class=\"hljs-string\">''\u003C/span>; \u003Cspan class=\"hljs-comment\">// Tooltip for truncated content\u003C/span>\n            \n            row.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(cell);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> row;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sortByColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>[columnIndex];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentSort = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> direction = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentSort && currentSort.\u003Cspan class=\"hljs-property\">column\u003C/span> === columnIndex && currentSort.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span>) {\n            direction = \u003Cspan class=\"hljs-string\">'desc'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> aVal = a[header] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bVal = b[header] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Try numeric comparison first\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> aNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aVal);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bVal);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(aNum) && !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(bNum)) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? aNum - bNum : bNum - aNum;\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// String comparison\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> comparison = aVal.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bVal);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? comparison : -comparison;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = { \u003Cspan class=\"hljs-attr\">column\u003C/span>: columnIndex, direction };\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicators = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headerContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>);\n        indicators.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">indicator, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span> === index) {\n                indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'↑'\u003C/span> : \u003Cspan class=\"hljs-string\">'↓'\u003C/span>;\n                indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'↕'\u003C/span>;\n                indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0.5'\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-params\">filterFn\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(filterFn);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateDimensions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">search\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>];\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> lowerQuery = query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">value\u003C/span> =>\u003C/span> \n                    \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lowerQuery)\n                );\n            });\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateDimensions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadRowData\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Lazy load additional row data if needed\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> index = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span>);\n        \u003Cspan class=\"hljs-comment\">// Implement additional data loading logic here\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">unloadRowData\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Unload heavy data to save memory\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// Keep essential display data, remove detailed content\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateScrollIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> progress = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> / (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalHeight\u003C/span> - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">containerHeight\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'scrollProgress'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { \u003Cspan class=\"hljs-attr\">progress\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, progress)) }\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hideLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingIndicator\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showError\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(message);\n        \u003Cspan class=\"hljs-comment\">// Implement error display logic\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n        }\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"lazy-loading-and-data-chunking\">Lazy Loading and Data Chunking\u003C/h3>\n\u003Cp>Implementing efficient data loading strategies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// lazy-table-loader.js - Progressive data loading system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LazyTableLoader\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">dataSource, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dataSource\u003C/span> = dataSource;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">prefetchDistance\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheSize\u003C/span>: \u003Cspan class=\"hljs-number\">200\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enablePreloading\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingQueue\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">LRUCache\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">cacheSize\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadChunk\u003C/span>(\u003Cspan class=\"hljs-params\">startIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunkKey = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(startIndex / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(chunkKey)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(chunkKey);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(chunkKey)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">waitForChunk\u003C/span>(chunkKey);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(chunkKey);\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunk = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchChunk\u003C/span>(chunkKey);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(chunkKey, chunk);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(chunkKey, chunk);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> chunk;\n        } \u003Cspan class=\"hljs-keyword\">finally\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(chunkKey);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">fetchChunk\u003C/span>(\u003Cspan class=\"hljs-params\">chunkIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startRow = chunkIndex * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endRow = startRow + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dataSource\u003C/span> === \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">dataSource\u003C/span>(startRow, endRow);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dataSource\u003C/span> === \u003Cspan class=\"hljs-string\">'string'\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Fetch from API endpoint\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.dataSource}\u003C/span>?start=\u003Cspan class=\"hljs-subst\">${startRow}\u003C/span>&limit=\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.chunkSize}\u003C/span>`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!response.\u003Cspan class=\"hljs-property\">ok\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`Failed to fetch data: \u003Cspan class=\"hljs-subst\">${response.status}\u003C/span>`\u003C/span>);\n            }\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Static array data source\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">dataSource\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(startRow, endRow);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">waitForChunk\u003C/span>(\u003Cspan class=\"hljs-params\">chunkKey\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">while\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(chunkKey)) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">resolve\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(resolve, \u003Cspan class=\"hljs-number\">10\u003C/span>));\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(chunkKey);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">prefetchNearbyChunks\u003C/span>(\u003Cspan class=\"hljs-params\">currentChunkIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enablePreloading\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> prefetchPromises = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> prefetchRange = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">prefetchDistance\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = -prefetchRange; i <= prefetchRange; i++) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunkIndex = currentChunkIndex + i;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (chunkIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span> && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(chunkIndex) && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadingQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(chunkIndex)) {\n                prefetchPromises.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadChunk\u003C/span>(chunkIndex * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>));\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Fire and forget prefetch\u003C/span>\n        \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">allSettled\u003C/span>(prefetchPromises);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearCache\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">loadedChunks\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheSize\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">memoryEstimate\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>()\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> totalSize = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> chunk \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>()) {\n            totalSize += \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(chunk).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> totalSize;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// LRU Cache implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LRUCache\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">capacity\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">capacity\u003C/span> = capacity;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">get\u003C/span>(\u003Cspan class=\"hljs-params\">key\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(key)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(key);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(key);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, value);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> value;\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">set\u003C/span>(\u003Cspan class=\"hljs-params\">key, value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(key)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(key);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span> >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">capacity\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>().\u003Cspan class=\"hljs-title function_\">next\u003C/span>().\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(firstKey);\n        }\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(key, value);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clear\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">get\u003C/span> \u003Cspan class=\"hljs-title function_\">size\u003C/span>() {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"memory-management-and-browser-optimization\">Memory Management and Browser Optimization\u003C/h2>\n\u003Ch3 id=\"dom-element-recycling\">DOM Element Recycling\u003C/h3>\n\u003Cp>Implementing efficient DOM management for large tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// dom-recycling-pool.js - Efficient DOM element management\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">DOMElementPool\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">elementType = \u003Cspan class=\"hljs-string\">'div'\u003C/span>, initialSize = \u003Cspan class=\"hljs-number\">50\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">elementType\u003C/span> = elementType;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Pre-populate pool\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < initialSize; i++) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>());\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> element = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">elementType\u003C/span>);\n        element.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'absolute'\u003C/span>;\n        element.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">visibility\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> element;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">acquire\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> element;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            element = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span>.\u003Cspan class=\"hljs-title function_\">pop\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            element = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(element);\n        element.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">visibility\u003C/span> = \u003Cspan class=\"hljs-string\">'visible'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> element;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">release\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(element)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(element);\n            element.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">visibility\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n            element.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            element.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            element.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(element);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">releaseAll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> element \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">release\u003C/span>(element);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">poolSize\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">activeElements\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">totalElements\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">pool\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">active\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced table renderer with element recycling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedTableRenderer\u003C/span> \u003Cspan class=\"hljs-keyword\">extends\u003C/span> \u003Cspan class=\"hljs-title class_ inherited__\">VirtualTableRenderer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">container, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">super\u003C/span>(container, options);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowPool\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">DOMElementPool\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cellPool\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">DOMElementPool\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>, \u003Cspan class=\"hljs-number\">500\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, index\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check if row is already rendered and cached\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(index)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cachedRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(index);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateRowData\u003C/span>(cachedRow, rowData, index);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> cachedRow;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">acquire\u003C/span>();\n        row.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-row optimized'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'flex'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderBottom\u003C/span> = \u003Cspan class=\"hljs-string\">'1px solid #eee'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">minWidth\u003C/span> = \u003Cspan class=\"hljs-string\">'fit-content'\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span> = index;\n        \n        \u003Cspan class=\"hljs-comment\">// Alternate row coloring\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index % \u003Cspan class=\"hljs-number\">2\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">backgroundColor\u003C/span> = \u003Cspan class=\"hljs-string\">'#f8f9fa'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Create cells using pool\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cellPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">acquire\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupCell\u003C/span>(cell, rowData[header] || \u003Cspan class=\"hljs-string\">''\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(cell);\n            row.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(cell);\n        });\n        \n        row.\u003Cspan class=\"hljs-property\">_cells\u003C/span> = cells;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(index, row);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> row;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupCell\u003C/span>(\u003Cspan class=\"hljs-params\">cell, data\u003C/span>) {\n        cell.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-cell optimized'\u003C/span>;\n        cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">minWidth\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.columnWidth}\u003C/span>px`\u003C/span>;\n        cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">padding\u003C/span> = \u003Cspan class=\"hljs-string\">'8px 12px'\u003C/span>;\n        cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">borderRight\u003C/span> = \u003Cspan class=\"hljs-string\">'1px solid #dee2e6'\u003C/span>;\n        cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'hidden'\u003C/span>;\n        cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">textOverflow\u003C/span> = \u003Cspan class=\"hljs-string\">'ellipsis'\u003C/span>;\n        cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">whiteSpace\u003C/span> = \u003Cspan class=\"hljs-string\">'nowrap'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Use textContent for better performance than innerHTML\u003C/span>\n        cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = data;\n        cell.\u003Cspan class=\"hljs-property\">title\u003C/span> = data; \u003Cspan class=\"hljs-comment\">// Tooltip for truncated content\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateRowData\u003C/span>(\u003Cspan class=\"hljs-params\">row, rowData, index\u003C/span>) {\n        row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span> = index;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">_cells\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, cellIndex\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">_cells\u003C/span>[cellIndex]) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellData = rowData[header] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    row.\u003Cspan class=\"hljs-property\">_cells\u003C/span>[cellIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span> = cellData;\n                    row.\u003Cspan class=\"hljs-property\">_cells\u003C/span>[cellIndex].\u003Cspan class=\"hljs-property\">title\u003C/span> = cellData;\n                }\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">releaseRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> index = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">_cells\u003C/span>) {\n            row.\u003Cspan class=\"hljs-property\">_cells\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                row.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(cell);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cellPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">release\u003C/span>(cell);\n            });\n            row.\u003Cspan class=\"hljs-property\">_cells\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(index);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">release\u003C/span>(row);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Release rows that are no longer visible\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentlyRendered = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>());\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldBeVisible = [];\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span>; i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                shouldBeVisible.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(i);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Release rows that shouldn't be visible\u003C/span>\n        currentlyRendered.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">index\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!shouldBeVisible.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(index)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(index);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(row);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">releaseRow\u003C/span>(row);\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Render new rows\u003C/span>\n        shouldBeVisible.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">index\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(index)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>[index], index);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(rowElement);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Update positioning\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">contentContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">`translateY(\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.startIndex * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px)`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getMemoryStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">rowPool\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">getStats\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">cellPool\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cellPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">getStats\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">renderedRows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">totalMemoryEstimate\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>()\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowPoolMemory = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">getStats\u003C/span>().\u003Cspan class=\"hljs-property\">totalElements\u003C/span> * \u003Cspan class=\"hljs-number\">200\u003C/span>; \u003Cspan class=\"hljs-comment\">// ~200 bytes per row element\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellPoolMemory = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cellPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">getStats\u003C/span>().\u003Cspan class=\"hljs-property\">totalElements\u003C/span> * \u003Cspan class=\"hljs-number\">100\u003C/span>; \u003Cspan class=\"hljs-comment\">// ~100 bytes per cell element\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataMemory = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">rowPool\u003C/span>: rowPoolMemory,\n            \u003Cspan class=\"hljs-attr\">cellPool\u003C/span>: cellPoolMemory,\n            \u003Cspan class=\"hljs-attr\">data\u003C/span>: dataMemory,\n            \u003Cspan class=\"hljs-attr\">total\u003C/span>: rowPoolMemory + cellPoolMemory + dataMemory\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">super\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroy\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">releaseAll\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cellPool\u003C/span>.\u003Cspan class=\"hljs-title function_\">releaseAll\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">renderedRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-performance-techniques\">Advanced Performance Techniques\u003C/h2>\n\u003Ch3 id=\"web-workers-for-data-processing\">Web Workers for Data Processing\u003C/h3>\n\u003Cp>Offloading heavy processing to background threads:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-worker.js - Background processing for table operations\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TableWorker\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskId\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initWorker\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initWorker\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create inline worker to avoid separate file dependency\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> workerCode = \u003Cspan class=\"hljs-string\">`\n            class TableProcessor {\n                constructor() {\n                    this.data = null;\n                    this.sortedIndices = null;\n                }\n                \n                setData(data) {\n                    this.data = data;\n                    this.buildInitialIndices();\n                }\n                \n                buildInitialIndices() {\n                    this.sortedIndices = Array.from({length: this.data.length}, (_, i) => i);\n                }\n                \n                sortData(columnIndex, direction = 'asc') {\n                    if (!this.data || !Array.isArray(this.data)) {\n                        throw new Error('No data loaded');\n                    }\n                    \n                    const headers = Object.keys(this.data[0]);\n                    const sortKey = headers[columnIndex];\n                    \n                    this.sortedIndices.sort((aIndex, bIndex) => {\n                        const a = this.data[aIndex][sortKey] || '';\n                        const b = this.data[bIndex][sortKey] || '';\n                        \n                        // Try numeric comparison\n                        const aNum = parseFloat(a);\n                        const bNum = parseFloat(b);\n                        \n                        let comparison;\n                        if (!isNaN(aNum) && !isNaN(bNum)) {\n                            comparison = aNum - bNum;\n                        } else {\n                            comparison = String(a).localeCompare(String(b));\n                        }\n                        \n                        return direction === 'asc' ? comparison : -comparison;\n                    });\n                    \n                    return this.sortedIndices.slice();\n                }\n                \n                filterData(filterCriteria) {\n                    if (!this.data) return [];\n                    \n                    const filtered = [];\n                    \n                    for (let i = 0; i < this.data.length; i++) {\n                        const row = this.data[i];\n                        let matches = true;\n                        \n                        for (const [key, value] of Object.entries(filterCriteria)) {\n                            const cellValue = String(row[key] || '').toLowerCase();\n                            const searchValue = String(value).toLowerCase();\n                            \n                            if (!cellValue.includes(searchValue)) {\n                                matches = false;\n                                break;\n                            }\n                        }\n                        \n                        if (matches) {\n                            filtered.push(i);\n                        }\n                    }\n                    \n                    return filtered;\n                }\n                \n                searchData(query) {\n                    if (!this.data || !query) return [];\n                    \n                    const lowerQuery = query.toLowerCase();\n                    const results = [];\n                    \n                    for (let i = 0; i < this.data.length; i++) {\n                        const row = this.data[i];\n                        const rowText = Object.values(row).join(' ').toLowerCase();\n                        \n                        if (rowText.includes(lowerQuery)) {\n                            results.push(i);\n                        }\n                    }\n                    \n                    return results;\n                }\n                \n                aggregateData(groupByColumn, aggregateColumn, aggregateFunction = 'sum') {\n                    if (!this.data) return {};\n                    \n                    const groups = {};\n                    \n                    this.data.forEach(row => {\n                        const groupKey = row[groupByColumn];\n                        const value = parseFloat(row[aggregateColumn]) || 0;\n                        \n                        if (!groups[groupKey]) {\n                            groups[groupKey] = {\n                                count: 0,\n                                sum: 0,\n                                values: []\n                            };\n                        }\n                        \n                        groups[groupKey].count++;\n                        groups[groupKey].sum += value;\n                        groups[groupKey].values.push(value);\n                    });\n                    \n                    // Calculate aggregates\n                    Object.keys(groups).forEach(key => {\n                        const group = groups[key];\n                        switch (aggregateFunction) {\n                            case 'avg':\n                                group.result = group.sum / group.count;\n                                break;\n                            case 'min':\n                                group.result = Math.min(...group.values);\n                                break;\n                            case 'max':\n                                group.result = Math.max(...group.values);\n                                break;\n                            case 'sum':\n                            default:\n                                group.result = group.sum;\n                                break;\n                        }\n                    });\n                    \n                    return groups;\n                }\n            }\n            \n            const processor = new TableProcessor();\n            \n            self.onmessage = function(e) {\n                const { id, method, data } = e.data;\n                \n                try {\n                    let result;\n                    \n                    switch (method) {\n                        case 'setData':\n                            processor.setData(data.tableData);\n                            result = { success: true };\n                            break;\n                            \n                        case 'sort':\n                            result = processor.sortData(data.columnIndex, data.direction);\n                            break;\n                            \n                        case 'filter':\n                            result = processor.filterData(data.criteria);\n                            break;\n                            \n                        case 'search':\n                            result = processor.searchData(data.query);\n                            break;\n                            \n                        case 'aggregate':\n                            result = processor.aggregateData(\n                                data.groupByColumn,\n                                data.aggregateColumn,\n                                data.aggregateFunction\n                            );\n                            break;\n                            \n                        default:\n                            throw new Error('Unknown method: ' + method);\n                    }\n                    \n                    self.postMessage({ id, result, error: null });\n                    \n                } catch (error) {\n                    self.postMessage({ id, result: null, error: error.message });\n                }\n            };\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([workerCode], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'application/javascript'\u003C/span> });\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span>(\u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob));\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-property\">onmessage\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> { id, result, error } = e.\u003Cspan class=\"hljs-property\">data\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> task = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(id);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (task) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(id);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (error) {\n                    task.\u003Cspan class=\"hljs-title function_\">reject\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(error));\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    task.\u003Cspan class=\"hljs-title function_\">resolve\u003C/span>(result);\n                }\n            }\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-property\">onerror\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">error\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Table worker error:'\u003C/span>, error);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">executeTask\u003C/span>(\u003Cspan class=\"hljs-params\">method, data\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">resolve, reject\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = ++\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskId\u003C/span>;\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(id, { resolve, reject });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">postMessage\u003C/span>({ id, method, data });\n            \n            \u003Cspan class=\"hljs-comment\">// Timeout after 30 seconds\u003C/span>\n            \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(id)) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(id);\n                    \u003Cspan class=\"hljs-title function_\">reject\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">'Task timeout'\u003C/span>));\n                }\n            }, \u003Cspan class=\"hljs-number\">30000\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-params\">tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeTask\u003C/span>(\u003Cspan class=\"hljs-string\">'setData'\u003C/span>, { tableData });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">sortData\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex, direction = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeTask\u003C/span>(\u003Cspan class=\"hljs-string\">'sort'\u003C/span>, { columnIndex, direction });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">filterData\u003C/span>(\u003Cspan class=\"hljs-params\">criteria\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeTask\u003C/span>(\u003Cspan class=\"hljs-string\">'filter'\u003C/span>, { criteria });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">searchData\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeTask\u003C/span>(\u003Cspan class=\"hljs-string\">'search'\u003C/span>, { query });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">aggregateData\u003C/span>(\u003Cspan class=\"hljs-params\">groupByColumn, aggregateColumn, aggregateFunction = \u003Cspan class=\"hljs-string\">'sum'\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">executeTask\u003C/span>(\u003Cspan class=\"hljs-string\">'aggregate'\u003C/span>, { \n            groupByColumn, \n            aggregateColumn, \n            aggregateFunction \n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">terminate\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">taskQueue\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progressive-enhancement-and-fallbacks\">Progressive Enhancement and Fallbacks\u003C/h3>\n\u003Cp>Implementing graceful degradation for performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// progressive-table-enhancement.js - Progressive enhancement system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ProgressiveTableEnhancement\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableVirtualization\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableWorkers\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">fallbackThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">performanceMode\u003C/span>: \u003Cspan class=\"hljs-string\">'auto'\u003C/span>, \u003Cspan class=\"hljs-comment\">// 'auto', 'performance', 'compatibility'\u003C/span>\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isVirtualized\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceLevel\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectPerformanceLevel\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectPerformanceLevel\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> performance = {\n            \u003Cspan class=\"hljs-attr\">cores\u003C/span>: navigator.\u003Cspan class=\"hljs-property\">hardwareConcurrency\u003C/span> || \u003Cspan class=\"hljs-number\">2\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">memory\u003C/span>: navigator.\u003Cspan class=\"hljs-property\">deviceMemory\u003C/span> || \u003Cspan class=\"hljs-number\">2\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">connection\u003C/span>: navigator.\u003Cspan class=\"hljs-property\">connection\u003C/span>?.\u003Cspan class=\"hljs-property\">effectiveType\u003C/span> || \u003Cspan class=\"hljs-string\">'4g'\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate performance score\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> score = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(performance.\u003Cspan class=\"hljs-property\">cores\u003C/span> / \u003Cspan class=\"hljs-number\">4\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>) * \u003Cspan class=\"hljs-number\">40\u003C/span>; \u003Cspan class=\"hljs-comment\">// 40 points max for CPU\u003C/span>\n        score += \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(performance.\u003Cspan class=\"hljs-property\">memory\u003C/span> / \u003Cspan class=\"hljs-number\">4\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>) * \u003Cspan class=\"hljs-number\">30\u003C/span>; \u003Cspan class=\"hljs-comment\">// 30 points max for memory\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Connection speed scoring\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> connectionScore = {\n            \u003Cspan class=\"hljs-string\">'slow-2g'\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'2g'\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'3g'\u003C/span>: \u003Cspan class=\"hljs-number\">20\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'4g'\u003C/span>: \u003Cspan class=\"hljs-number\">30\u003C/span>\n        }[performance.\u003Cspan class=\"hljs-property\">connection\u003C/span>] || \u003Cspan class=\"hljs-number\">30\u003C/span>;\n        score += connectionScore;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            score,\n            \u003Cspan class=\"hljs-attr\">level\u003C/span>: score > \u003Cspan class=\"hljs-number\">80\u003C/span> ? \u003Cspan class=\"hljs-string\">'high'\u003C/span> : score > \u003Cspan class=\"hljs-number\">50\u003C/span> ? \u003Cspan class=\"hljs-string\">'medium'\u003C/span> : \u003Cspan class=\"hljs-string\">'low'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">capabilities\u003C/span>: performance\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTable\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">determineEnhancements\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyEnhancements\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td, th'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cellCount\u003C/span>: cells.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">estimatedSize\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">estimateTableSize\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">hasLargeContent\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkForLargeContent\u003C/span>(cells)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">estimateTableSize\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Rough estimation of table memory usage\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgCellSize = \u003Cspan class=\"hljs-number\">50\u003C/span>; \u003Cspan class=\"hljs-comment\">// Average bytes per cell\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span>?.\u003Cspan class=\"hljs-property\">cellCount\u003C/span> * avgCellSize;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkForLargeContent\u003C/span>(\u003Cspan class=\"hljs-params\">cells\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check if any cells contain large content\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> cell \u003Cspan class=\"hljs-keyword\">of\u003C/span> cells) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">200\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            }\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">determineEnhancements\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldVirtualize = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">shouldUseVirtualization\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> shouldUseWorkers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">shouldUseWorkers\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">virtualization\u003C/span>: shouldVirtualize,\n            \u003Cspan class=\"hljs-attr\">webWorkers\u003C/span>: shouldUseWorkers,\n            \u003Cspan class=\"hljs-attr\">lazyLoading\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">memoryOptimization\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceLevel\u003C/span>.\u003Cspan class=\"hljs-property\">level\u003C/span> === \u003Cspan class=\"hljs-string\">'low'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">fallbackMode\u003C/span>: !shouldVirtualize && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">fallbackThreshold\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">shouldUseVirtualization\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMode\u003C/span> === \u003Cspan class=\"hljs-string\">'compatibility'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMode\u003C/span> === \u003Cspan class=\"hljs-string\">'performance'\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Auto mode decision logic\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span> &&\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceLevel\u003C/span>.\u003Cspan class=\"hljs-property\">score\u003C/span> > \u003Cspan class=\"hljs-number\">30\u003C/span> &&\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableVirtualization\u003C/span>\n        );\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">shouldUseWorkers\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceLevel\u003C/span>.\u003Cspan class=\"hljs-property\">capabilities\u003C/span>.\u003Cspan class=\"hljs-property\">cores\u003C/span> > \u003Cspan class=\"hljs-number\">2\u003C/span> &&\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span>.\u003Cspan class=\"hljs-property\">rowCount\u003C/span> > \u003Cspan class=\"hljs-number\">500\u003C/span> &&\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableWorkers\u003C/span> &&\n            \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>\n        );\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">applyEnhancements\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>.\u003Cspan class=\"hljs-property\">fallbackMode\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyFallbackMode\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>.\u003Cspan class=\"hljs-property\">virtualization\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enableVirtualization\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>.\u003Cspan class=\"hljs-property\">webWorkers\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enableWebWorkers\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>.\u003Cspan class=\"hljs-property\">lazyLoading\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enableLazyLoading\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>.\u003Cspan class=\"hljs-property\">memoryOptimization\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enableMemoryOptimization\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addPerformanceMonitoring\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyFallbackMode\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Apply basic optimizations without virtualization\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">tableLayout\u003C/span> = \u003Cspan class=\"hljs-string\">'fixed'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Hide rows beyond threshold and add pagination\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">fallbackThreshold\u003C/span>, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = visibleRows; i < rows.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n            rows[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rows.\u003Cspan class=\"hljs-property\">length\u003C/span> > visibleRows) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addPagination\u003C/span>(rows, visibleRows);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">enableVirtualization\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Extract table data\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractTableData\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Create virtual table container\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtualized-table-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Replace original table with virtual table\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(container, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Initialize virtual table\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedTableRenderer\u003C/span>(container, {\n            \u003Cspan class=\"hljs-attr\">rowHeight\u003C/span>: \u003Cspan class=\"hljs-number\">40\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxHeight\u003C/span>: \u003Cspan class=\"hljs-string\">'600px'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableSorting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableFiltering\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadData\u003C/span>(tableData);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isVirtualized\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractTableData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> th.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">tr\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tr.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>))\n                    .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">td\u003C/span> =>\u003C/span> td.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>());\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowObject = {};\n                headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n                    rowObject[header] = cells[index] || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                });\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> rowObject;\n            });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { headers, rows };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enableWebWorkers\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWorker\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TableWorker\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Override sorting to use web worker\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalSort = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-property\">sortByColumn\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-property\">sortByColumn\u003C/span> = \u003Cspan class=\"hljs-keyword\">async\u003C/span> (columnIndex) => {\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortedIndices = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWorker\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortData\u003C/span>(columnIndex, \u003Cspan class=\"hljs-string\">'asc'\u003C/span>);\n                    \n                    \u003Cspan class=\"hljs-comment\">// Apply sorted order to virtual table\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortedData = sortedIndices.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">index\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>[index]);\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = sortedData;\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n                    \n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n                    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Worker sort failed, falling back to main thread:'\u003C/span>, error);\n                    \u003Cspan class=\"hljs-title function_\">originalSort\u003C/span>(columnIndex);\n                }\n            };\n            \n            \u003Cspan class=\"hljs-comment\">// Initialize worker with table data\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWorker\u003C/span>.\u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enableLazyLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement lazy loading for non-virtualized tables\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isVirtualized\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lazyLoader\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">LazyTableLoader\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractTableData\u003C/span>().\u003Cspan class=\"hljs-property\">rows\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">25\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">prefetchDistance\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enableMemoryOptimization\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement memory-saving techniques\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryOptimizer\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">cleanupInterval\u003C/span>: \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performMemoryCleanup\u003C/span>();\n            }, \u003Cspan class=\"hljs-number\">30000\u003C/span>), \u003Cspan class=\"hljs-comment\">// Clean up every 30 seconds\u003C/span>\n            \n            \u003Cspan class=\"hljs-attr\">observeMemoryPressure\u003C/span>: \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'memory'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> performance) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> memInfo = performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> usageRatio = memInfo.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span> / memInfo.\u003Cspan class=\"hljs-property\">jsHeapSizeLimit\u003C/span>;\n                    \n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (usageRatio > \u003Cspan class=\"hljs-number\">0.8\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performAggressiveCleanup\u003C/span>();\n                    }\n                }\n            }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performMemoryCleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Clear unused cached elements\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> stats = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-title function_\">getMemoryStats\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Memory stats:'\u003C/span>, stats);\n            \n            \u003Cspan class=\"hljs-comment\">// Force garbage collection if available\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">gc\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">gc\u003C/span>();\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performAggressiveCleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// More aggressive memory cleanup\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearCache\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lazyLoader\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">lazyLoader\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearCache\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addPerformanceMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">startTime\u003C/span>: performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">metrics\u003C/span>: {\n                \u003Cspan class=\"hljs-attr\">renderTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">scrollPerformance\u003C/span>: [],\n                \u003Cspan class=\"hljs-attr\">memoryUsage\u003C/span>: []\n            }\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Monitor scroll performance\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollStart = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                \n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollEnd = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTime = scrollEnd - scrollStart;\n                    \n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollPerformance\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(scrollTime);\n                    \n                    \u003Cspan class=\"hljs-comment\">// Keep only recent measurements\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollPerformance\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n                        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollPerformance\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n                    }\n                });\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addPagination\u003C/span>(\u003Cspan class=\"hljs-params\">rows, pageSize\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalPages = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(rows.\u003Cspan class=\"hljs-property\">length\u003C/span> / pageSize);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentPage = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> paginationContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        paginationContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-pagination'\u003C/span>;\n        paginationContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <button class="prev-page" disabled>Previous</button>\n            <span class="page-info">Page \u003Cspan class=\"hljs-subst\">${currentPage}\u003C/span> of \u003Cspan class=\"hljs-subst\">${totalPages}\u003C/span></span>\n            <button class="next-page">Next</button>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(paginationContainer, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">showPage\u003C/span> = (\u003Cspan class=\"hljs-params\">page\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> start = (page - \u003Cspan class=\"hljs-number\">1\u003C/span>) * pageSize;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> end = start + pageSize;\n            \n            rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = (index >= start && index < end) ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            });\n            \n            currentPage = page;\n            paginationContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.page-info'\u003C/span>).\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \n                \u003Cspan class=\"hljs-string\">`Page \u003Cspan class=\"hljs-subst\">${currentPage}\u003C/span> of \u003Cspan class=\"hljs-subst\">${totalPages}\u003C/span>`\u003C/span>;\n            \n            paginationContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.prev-page'\u003C/span>).\u003Cspan class=\"hljs-property\">disabled\u003C/span> = page === \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            paginationContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.next-page'\u003C/span>).\u003Cspan class=\"hljs-property\">disabled\u003C/span> = page === totalPages;\n        };\n        \n        paginationContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.prev-page'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentPage > \u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-title function_\">showPage\u003C/span>(currentPage - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        });\n        \n        paginationContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.next-page'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentPage < totalPages) \u003Cspan class=\"hljs-title function_\">showPage\u003C/span>(currentPage + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getPerformanceReport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {\n            \u003Cspan class=\"hljs-attr\">tableStats\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableStats\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">performanceLevel\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceLevel\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enhancements\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">enhancements\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">isVirtualized\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isVirtualized\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTimes = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollPerformance\u003C/span>;\n            report.\u003Cspan class=\"hljs-property\">performance\u003C/span> = {\n                \u003Cspan class=\"hljs-attr\">averageScrollTime\u003C/span>: scrollTimes.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \n                    scrollTimes.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a + b) / scrollTimes.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">totalRenderTime\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMonitor\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTime\u003C/span>\n            };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>) {\n            report.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-title function_\">getMemoryStats\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualTable\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroy\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWorker\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWorker\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroy\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryOptimizer\u003C/span>?.\u003Cspan class=\"hljs-property\">cleanupInterval\u003C/span>) {\n            \u003Cspan class=\"hljs-built_in\">clearInterval\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryOptimizer\u003C/span>.\u003Cspan class=\"hljs-property\">cleanupInterval\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Restore original table\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-enhance tables on page load\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> largeTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n    \n    largeTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCount = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowCount > \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">ProgressiveTableEnhancement\u003C/span>(table, {\n                \u003Cspan class=\"hljs-attr\">performanceMode\u003C/span>: \u003Cspan class=\"hljs-string\">'auto'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">fallbackThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>\n            });\n        }\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-static-site-generators\">Integration with Static Site Generators\u003C/h2>\n\u003Ch3 id=\"jekyll-integration\">Jekyll Integration\u003C/h3>\n\u003Cp>Optimizing Markdown table performance in Jekyll:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\">\n<!-- _includes/optimized-table.html -->\n{% assign table_id = include.id | default: 'table' %}\n{% assign enable_virtualization = include.virtualization | default: true %}\n{% assign row_height = include.row_height | default: 40 %}\n{% assign chunk_size = include.chunk_size | default: 50 %}\n\n<div class="optimized-table-container" \n     data-table-id="{{ table_id }}"\n     data-virtualization="{{ enable_virtualization }}"\n     data-row-height="{{ row_height }}"\n     data-chunk-size="{{ chunk_size }}">\n     \n    {% if include.data_file %}\n        <!-- Load data from CSV or JSON file -->\n        {% assign table_data = site.data[include.data_file] %}\n        <script type="application/json" id="{{ table_id }}-data">\n            {{ table_data | jsonify }}\n        </script>\n    {% else %}\n        <!-- Inline table content -->\n        {{ include.content }}\n    {% endif %}\n    \n    <div class="table-controls">\n        <input type="search" \n               class="table-search" \n               placeholder="Search table..."\n               data-target="{{ table_id }}">\n        \n        <select class="table-page-size" data-target="{{ table_id }}">\n            <option value="25">25 per page</option>\n            <option value="50" selected>50 per page</option>\n            <option value="100">100 per page</option>\n            <option value="all">Show all</option>\n        </select>\n    </div>\n    \n    <div class="table-wrapper" id="{{ table_id }}-wrapper"></div>\n    \n    <div class="table-info">\n        <span class="row-count">0 rows</span>\n        <span class="performance-info"></span>\n    </div>\n</div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    const container = document.querySelector('[data-table-id="{{ table_id }}"]');\n    const wrapper = document.getElementById('{{ table_id }}-wrapper');\n    const dataScript = document.getElementById('{{ table_id }}-data');\n    \n    let tableData;\n    if (dataScript) {\n        tableData = JSON.parse(dataScript.textContent);\n    } else {\n        // Extract data from existing table markup\n        const existingTable = container.querySelector('table');\n        if (existingTable) {\n            tableData = extractTableData(existingTable);\n            existingTable.style.display = 'none';\n        }\n    }\n    \n    if (tableData) {\n        const options = {\n            enableVirtualization: container.dataset.virtualization === 'true',\n            rowHeight: parseInt(container.dataset.rowHeight),\n            chunkSize: parseInt(container.dataset.chunkSize)\n        };\n        \n        const enhancer = new ProgressiveTableEnhancement(wrapper, options);\n        enhancer.loadData(tableData);\n        \n        // Wire up controls\n        setupTableControls(container, enhancer);\n    }\n});\n\nfunction setupTableControls(container, enhancer) {\n    const search = container.querySelector('.table-search');\n    const pageSize = container.querySelector('.table-page-size');\n    const rowCount = container.querySelector('.row-count');\n    const performanceInfo = container.querySelector('.performance-info');\n    \n    if (search) {\n        let searchTimeout;\n        search.addEventListener('input', function() {\n            clearTimeout(searchTimeout);\n            searchTimeout = setTimeout(() => {\n                enhancer.search(this.value);\n                updateRowCount();\n            }, 300);\n        });\n    }\n    \n    if (pageSize) {\n        pageSize.addEventListener('change', function() {\n            const size = this.value === 'all' ? Infinity : parseInt(this.value);\n            enhancer.setPageSize(size);\n            updateRowCount();\n        });\n    }\n    \n    function updateRowCount() {\n        if (rowCount && enhancer.getFilteredRowCount) {\n            const count = enhancer.getFilteredRowCount();\n            rowCount.textContent = `${count} rows`;\n        }\n    }\n    \n    // Update performance info periodically\n    if (performanceInfo) {\n        setInterval(() => {\n            const report = enhancer.getPerformanceReport();\n            if (report.performance) {\n                performanceInfo.textContent = \n                    `Avg scroll: ${report.performance.averageScrollTime.toFixed(1)}ms`;\n            }\n        }, 5000);\n    }\n}\n</script>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-integration\">Hugo Integration\u003C/h3>\n\u003Cp>Performance optimization for Hugo Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-go\"><!-- layouts/shortcodes/optimized-table.html -->\n{{ $id := .Get \u003Cspan class=\"hljs-string\">"id"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> (printf \u003Cspan class=\"hljs-string\">"table-%d"\u003C/span> now.Unix) }}\n{{ $virtualization := .Get \u003Cspan class=\"hljs-string\">"virtualization"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span> }}\n{{ $data_file := .Get \u003Cspan class=\"hljs-string\">"data"\u003C/span> }}\n{{ $csv_file := .Get \u003Cspan class=\"hljs-string\">"csv"\u003C/span> }}\n\n<div class=\u003Cspan class=\"hljs-string\">"hugo-optimized-table"\u003C/span> \n     data-table-id=\u003Cspan class=\"hljs-string\">"{{ $id }}"\u003C/span>\n     data-virtualization=\u003Cspan class=\"hljs-string\">"{{ $virtualization }}"\u003C/span>>\n\n{{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $data_file }}\n    {{ $data := index $.Site.Data $data_file }}\n    <script \u003Cspan class=\"hljs-keyword\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"application/json"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $id }}-data"\u003C/span>>\n        {{ $data | jsonify }}\n    </script>\n{{ \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> $csv_file }}\n    {{ $csv_path := printf \u003Cspan class=\"hljs-string\">"data/%s"\u003C/span> $csv_file }}\n    {{ $csv_data := readFile $csv_path | transform.Unmarshal }}\n    <script \u003Cspan class=\"hljs-keyword\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"application/json"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $id }}-data"\u003C/span>>\n        {{ $csv_data | jsonify }}\n    </script>\n{{ \u003Cspan class=\"hljs-keyword\">else\u003C/span> }}\n    <!-- Process inline table from markdown -->\n    <div class=\u003Cspan class=\"hljs-string\">"source-table"\u003C/span> style=\u003Cspan class=\"hljs-string\">"display: none;"\u003C/span>>\n        {{ .Inner | markdownify }}\n    </div>\n{{ end }}\n\n<div class=\u003Cspan class=\"hljs-string\">"table-performance-wrapper"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $id }}-wrapper"\u003C/span>></div>\n\n</div>\n\n<script>\n(function() {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = document.querySelector(\u003Cspan class=\"hljs-string\">'[data-table-id="{{ $id }}"]'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> wrapper = document.getElementById(\u003Cspan class=\"hljs-string\">'{{ $id }}-wrapper'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Initialize table when DOM is ready\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (document.readyState === \u003Cspan class=\"hljs-string\">'loading'\u003C/span>) {\n        document.addEventListener(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, initTable);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        initTable();\n    }\n    \n    function initTable() {\n        let tableData;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataScript = document.getElementById(\u003Cspan class=\"hljs-string\">'{{ $id }}-data'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (dataScript) {\n            tableData = JSON.parse(dataScript.textContent);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> sourceTable = container.querySelector(\u003Cspan class=\"hljs-string\">'.source-table table'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sourceTable) {\n                tableData = extractTableData(sourceTable);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> enhancer = \u003Cspan class=\"hljs-built_in\">new\u003C/span> ProgressiveTableEnhancement(wrapper, {\n                enableVirtualization: container.dataset.virtualization === \u003Cspan class=\"hljs-string\">'true'\u003C/span>,\n                performanceMode: \u003Cspan class=\"hljs-string\">'auto'\u003C/span>\n            });\n            \n            enhancer.loadData(tableData).then(() => {\n                \u003Cspan class=\"hljs-comment\">// Table loaded successfully\u003C/span>\n                container.classList.add(\u003Cspan class=\"hljs-string\">'table-loaded'\u003C/span>);\n            });\n        }\n    }\n})();\n</script>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"monitoring-and-performance-analytics\">Monitoring and Performance Analytics\u003C/h2>\n\u003Ch3 id=\"real-time-performance-tracking\">Real-time Performance Tracking\u003C/h3>\n\u003Cp>Implementing comprehensive performance monitoring:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-performance-monitor.js - Real-time performance tracking\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TablePerformanceMonitor\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableInstance\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableInstance;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">renderTimes\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">scrollEvents\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">memoryUsage\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">userInteractions\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">errorCount\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">slowRender\u003C/span>: \u003Cspan class=\"hljs-number\">16\u003C/span>, \u003Cspan class=\"hljs-comment\">// 60fps threshold\u003C/span>\n            \u003Cspan class=\"hljs-attr\">highMemory\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span>, \u003Cspan class=\"hljs-comment\">// 50MB\u003C/span>\n            \u003Cspan class=\"hljs-attr\">maxScrollEvents\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">startMonitoring\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">startMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">monitorRenderPerformance\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">monitorMemoryUsage\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">monitorUserInteractions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">monitorErrors\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupReporting\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">monitorRenderPerformance\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalRender = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">renderVisibleRows\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">renderVisibleRows\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">...args\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> startTime = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = originalRender.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>, args);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> renderTime = endTime - startTime;\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordRenderTime\u003C/span>(renderTime);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (renderTime > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span>.\u003Cspan class=\"hljs-property\">slowRender\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">logSlowRender\u003C/span>(renderTime);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">monitorMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'memory'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> performance) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> memInfo = {\n                    \u003Cspan class=\"hljs-attr\">used\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">total\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">totalJSHeapSize\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">limit\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">jsHeapSizeLimit\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n                };\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordMemoryUsage\u003C/span>(memInfo);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (memInfo.\u003Cspan class=\"hljs-property\">used\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span>.\u003Cspan class=\"hljs-property\">highMemory\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">logHighMemoryUsage\u003C/span>(memInfo);\n                }\n            }\n        }, \u003Cspan class=\"hljs-number\">5000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">monitorUserInteractions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Scroll monitoring\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        container.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            scrollCount++;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (scrollCount % \u003Cspan class=\"hljs-number\">10\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) { \u003Cspan class=\"hljs-comment\">// Sample every 10th scroll\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordScrollEvent\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">scrollTop\u003C/span>: container.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n                    \u003Cspan class=\"hljs-attr\">count\u003C/span>: scrollCount\n                });\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Click monitoring\u003C/span>\n        container.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordUserInteraction\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'click'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">target\u003C/span>: e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">tagName\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">className\u003C/span>: e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">monitorErrors\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalConsoleError = \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-property\">error\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">...args\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">errorCount\u003C/span>++;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordError\u003C/span>(args);\n            originalConsoleError.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(\u003Cspan class=\"hljs-variable language_\">console\u003C/span>, args);\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'error'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">errorCount\u003C/span>++;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">recordError\u003C/span>([e.\u003Cspan class=\"hljs-property\">message\u003C/span>, e.\u003Cspan class=\"hljs-property\">filename\u003C/span>, e.\u003Cspan class=\"hljs-property\">lineno\u003C/span>]);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">recordRenderTime\u003C/span>(\u003Cspan class=\"hljs-params\">time\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n            time,\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Keep only recent measurements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTimes\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1000\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">recordMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">memInfo\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(memInfo);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">recordScrollEvent\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEvents\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(event);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEvents\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span>.\u003Cspan class=\"hljs-property\">maxScrollEvents\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEvents\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">recordUserInteraction\u003C/span>(\u003Cspan class=\"hljs-params\">interaction\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userInteractions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(interaction);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userInteractions\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">500\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userInteractions\u003C/span>.\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">recordError\u003C/span>(\u003Cspan class=\"hljs-params\">errorInfo\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Table performance error:'\u003C/span>, errorInfo);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">logSlowRender\u003C/span>(\u003Cspan class=\"hljs-params\">time\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`Slow table render detected: \u003Cspan class=\"hljs-subst\">${time.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span>ms`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">logHighMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">memInfo\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> usageMB = (memInfo.\u003Cspan class=\"hljs-property\">used\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">`High memory usage detected: \u003Cspan class=\"hljs-subst\">${usageMB}\u003C/span>MB`\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupReporting\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Report metrics every minute\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generatePerformanceReport\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">60000\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generatePerformanceReport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">renderPerformance\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeRenderPerformance\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">memoryAnalysis\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeMemoryUsage\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">userEngagement\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeUserInteractions\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">errorRate\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateErrorRate\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">recommendations\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateRecommendations\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-comment\">// Send to analytics or log locally\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sendReport\u003C/span>(report);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeRenderPerformance\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recentRenders = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">renderTimes\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">100\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (recentRenders.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">average\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">max\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">count\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> times = recentRenders.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">r\u003C/span> =>\u003C/span> r.\u003Cspan class=\"hljs-property\">time\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> average = times.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> a + b) / times.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> max = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...times);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> slowRenders = times.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">t\u003C/span> =>\u003C/span> t > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thresholds\u003C/span>.\u003Cspan class=\"hljs-property\">slowRender\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">average\u003C/span>: average.\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">max\u003C/span>: max.\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">count\u003C/span>: recentRenders.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">slowRenderPercentage\u003C/span>: ((slowRenders / times.\u003Cspan class=\"hljs-property\">length\u003C/span>) * \u003Cspan class=\"hljs-number\">100\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recentMemory = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">20\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (recentMemory.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> { \u003Cspan class=\"hljs-attr\">current\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">peak\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">trend\u003C/span>: \u003Cspan class=\"hljs-string\">'stable'\u003C/span> };\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> current = recentMemory[recentMemory.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-property\">used\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> peak = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...recentMemory.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">m\u003C/span> =>\u003C/span> m.\u003Cspan class=\"hljs-property\">used\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> first = recentMemory[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-property\">used\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> trend = current > first * \u003Cspan class=\"hljs-number\">1.1\u003C/span> ? \u003Cspan class=\"hljs-string\">'increasing'\u003C/span> : \n                     current < first * \u003Cspan class=\"hljs-number\">0.9\u003C/span> ? \u003Cspan class=\"hljs-string\">'decreasing'\u003C/span> : \u003Cspan class=\"hljs-string\">'stable'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">current\u003C/span>: (current / \u003Cspan class=\"hljs-number\">1024\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>) + \u003Cspan class=\"hljs-string\">'MB'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">peak\u003C/span>: (peak / \u003Cspan class=\"hljs-number\">1024\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span>).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>) + \u003Cspan class=\"hljs-string\">'MB'\u003C/span>,\n            trend\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeUserInteractions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recentInteractions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">userInteractions\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">100\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollEvents = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">scrollEvents\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">100\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">totalClicks\u003C/span>: recentInteractions.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">i\u003C/span> =>\u003C/span> i.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'click'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">scrollEvents\u003C/span>: scrollEvents.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">engagementScore\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateEngagementScore\u003C/span>(recentInteractions, scrollEvents)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateEngagementScore\u003C/span>(\u003Cspan class=\"hljs-params\">interactions, scrollEvents\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simple engagement scoring\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> clickWeight = \u003Cspan class=\"hljs-number\">2\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollWeight = \u003Cspan class=\"hljs-number\">0.1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> score = (interactions.\u003Cspan class=\"hljs-property\">length\u003C/span> * clickWeight) + (scrollEvents.\u003Cspan class=\"hljs-property\">length\u003C/span> * scrollWeight);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">100\u003C/span>, score).\u003Cspan class=\"hljs-title function_\">toFixed\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateErrorRate\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> timeWindow = \u003Cspan class=\"hljs-number\">10\u003C/span> * \u003Cspan class=\"hljs-number\">60\u003C/span> * \u003Cspan class=\"hljs-number\">1000\u003C/span>; \u003Cspan class=\"hljs-comment\">// 10 minutes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> now = \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recentErrors = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">errorCount\u003C/span>; \u003Cspan class=\"hljs-comment\">// Simplified for example\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">count\u003C/span>: recentErrors,\n            \u003Cspan class=\"hljs-attr\">rate\u003C/span>: recentErrors \u003Cspan class=\"hljs-comment\">// Errors per time window\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateRecommendations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> recommendations = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> renderAnalysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeRenderPerformance\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> memoryAnalysis = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeMemoryUsage\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(renderAnalysis.\u003Cspan class=\"hljs-property\">slowRenderPercentage\u003C/span>) > \u003Cspan class=\"hljs-number\">20\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Consider enabling virtualization or reducing data complexity'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (memoryAnalysis.\u003Cspan class=\"hljs-property\">trend\u003C/span> === \u003Cspan class=\"hljs-string\">'increasing'\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Memory usage is increasing - consider implementing cleanup mechanisms'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-property\">errorCount\u003C/span> > \u003Cspan class=\"hljs-number\">5\u003C/span>) {\n            recommendations.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'High error rate detected - check table data quality and error handling'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> recommendations;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sendReport\u003C/span>(\u003Cspan class=\"hljs-params\">report\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Log locally for development\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Table Performance Report:'\u003C/span>, report);\n        \n        \u003Cspan class=\"hljs-comment\">// In production, send to analytics service\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">analytics\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">analytics\u003C/span>.\u003Cspan class=\"hljs-property\">track\u003C/span> === \u003Cspan class=\"hljs-string\">'function'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">analytics\u003C/span>.\u003Cspan class=\"hljs-title function_\">track\u003C/span>(\u003Cspan class=\"hljs-string\">'Table Performance'\u003C/span>, report);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Or send to custom endpoint\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>?.\u003Cspan class=\"hljs-property\">reportEndpoint\u003C/span>) {\n            \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">reportEndpoint\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">method\u003C/span>: \u003Cspan class=\"hljs-string\">'POST'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">headers\u003C/span>: { \u003Cspan class=\"hljs-string\">'Content-Type'\u003C/span>: \u003Cspan class=\"hljs-string\">'application/json'\u003C/span> },\n                \u003Cspan class=\"hljs-attr\">body\u003C/span>: \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(report)\n            }).\u003Cspan class=\"hljs-title function_\">catch\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">err\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Failed to send performance report:'\u003C/span>, err));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clean up monitoring\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">clearInterval\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">reportingInterval\u003C/span>);\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-tables-on-small-screens\">Responsive Tables on Small Screens\u003C/h2>\n\u003Cp>Performance on mobile is as much about layout as rendering speed. A wide table forces horizontal panning and makes the browser lay out columns that are mostly off-screen. Three habits help:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Wrap the table in a scroll container\u003C/strong> (\u003Ccode>overflow-x: auto\u003C/code>) so only the table scrolls, not the whole page.\u003C/li>\n\u003Cli>\u003Cstrong>Cut columns for narrow viewports\u003C/strong> rather than shrinking text: hide low-priority columns with a media query or render a card layout below a breakpoint.\u003C/li>\n\u003Cli>\u003Cstrong>Avoid fixed pixel widths\u003C/strong> on cells; let long text wrap, and keep numeric columns right-aligned and compact.\u003C/li>\n\u003C/ul>\n\u003Cp>For very large datasets on phones, combine these with the virtual scrolling and chunking techniques above, since rendering thousands of off-screen rows costs memory no matter how the layout looks.\u003C/p>\n\u003Ch2 id=\"best-practices-and-implementation-guidelines\">Best Practices and Implementation Guidelines\u003C/h2>\n\u003Ch3 id=\"performance-optimization-checklist\">Performance Optimization Checklist\u003C/h3>\n\u003Cp>Systematic approach to table performance optimization:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Markdown Table Performance Optimization Checklist\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Initial Assessment\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Measure current table size (rows × columns)\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Analyze data complexity and content types\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Test performance on target devices\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Establish baseline metrics (render time, memory usage)\n\n\u003Cspan class=\"hljs-section\">## Basic Optimizations\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Implement virtualization for tables > 100 rows\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Add lazy loading for data-heavy content\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Use CSS \u003Cspan class=\"hljs-code\">`table-layout: fixed`\u003C/span> for consistent performance\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Minimize DOM manipulation during scrolling\n\n\u003Cspan class=\"hljs-section\">## Advanced Optimizations\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Implement element recycling for virtual rows\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Use Web Workers for data processing\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Add progressive enhancement with fallbacks\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Implement memory management and cleanup\n\n\u003Cspan class=\"hljs-section\">## User Experience\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Add loading indicators for async operations\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Provide search and filter capabilities\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Implement responsive design for mobile devices\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Add keyboard navigation support\n\n\u003Cspan class=\"hljs-section\">## Monitoring and Maintenance\u003C/span>\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Set up performance monitoring\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Track user interaction metrics\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Monitor memory usage patterns\n\u003Cspan class=\"hljs-bullet\">-\u003C/span> [ ] Implement error tracking and reporting\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-performance-issues\">Troubleshooting Common Performance Issues\u003C/h2>\n\u003Ch3 id=\"memory-leaks-and-high-usage\">Memory Leaks and High Usage\u003C/h3>\n\u003Cp>Identifying and resolving memory-related problems:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// memory-leak-detector.js - Memory leak detection and resolution\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MemoryLeakDetector\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseline\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkInterval\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">leakThreshold\u003C/span> = \u003Cspan class=\"hljs-number\">10\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span>; \u003Cspan class=\"hljs-comment\">// 10MB increase\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkCount\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">startMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!(\u003Cspan class=\"hljs-string\">'memory'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> performance)) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Memory monitoring not supported in this browser'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseline\u003C/span> = performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkInterval\u003C/span> = \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">checkForLeaks\u003C/span>();\n        }, \u003Cspan class=\"hljs-number\">30000\u003C/span>); \u003Cspan class=\"hljs-comment\">// Check every 30 seconds\u003C/span>\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">checkForLeaks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> current = performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> increase = current - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">baseline\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkCount\u003C/span>++;\n        \n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Memory check \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.checkCount}\u003C/span>: \u003Cspan class=\"hljs-subst\">${(current / \u003Cspan class=\"hljs-number\">1024\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span>).toFixed(\u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span>MB (+\u003Cspan class=\"hljs-subst\">${(increase / \u003Cspan class=\"hljs-number\">1024\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span>).toFixed(\u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span>MB)`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (increase > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">leakThreshold\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectSpecificLeaks\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">suggestCleanupActions\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectSpecificLeaks\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check for common table-related memory leaks\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> issues = [];\n        \n        \u003Cspan class=\"hljs-comment\">// Check for unremoved event listeners\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.virtual-table, .optimized-table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tables.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">10\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Multiple table instances detected - ensure proper cleanup'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for cached elements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hiddenElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[style*="visibility: hidden"]'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hiddenElements.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1000\u003C/span>) {\n            issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Large number of hidden elements - check element pooling'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Check for large data objects\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">tableInstances\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataSize = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">tableInstances\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (dataSize > \u003Cspan class=\"hljs-number\">5\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span> * \u003Cspan class=\"hljs-number\">1024\u003C/span>) { \u003Cspan class=\"hljs-comment\">// 5MB\u003C/span>\n                issues.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(\u003Cspan class=\"hljs-string\">'Large table data objects in memory - consider data streaming'\u003C/span>);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> issues;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">suggestCleanupActions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Potential memory leak detected. Suggested actions:'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'1. Clear table caches'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'2. Remove unused table instances'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'3. Force garbage collection if available'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Attempt automatic cleanup\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performAutomaticCleanup\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performAutomaticCleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear global table references\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">tableInstances\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">tableInstances\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (table.\u003Cspan class=\"hljs-property\">clearCache\u003C/span>) {\n                    table.\u003Cspan class=\"hljs-title function_\">clearCache\u003C/span>();\n                }\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Force garbage collection in development\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">gc\u003C/span> && location.\u003Cspan class=\"hljs-property\">hostname\u003C/span> === \u003Cspan class=\"hljs-string\">'localhost'\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">gc\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">stopMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkInterval\u003C/span>) {\n            \u003Cspan class=\"hljs-built_in\">clearInterval\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkInterval\u003C/span>);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">checkInterval\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Markdown table performance optimization for large datasets requires a comprehensive approach combining virtualization, memory management, progressive enhancement, and intelligent monitoring systems. By implementing these advanced techniques—virtual scrolling, Web Workers, element recycling, and performance tracking—developers can create high-performance table experiences that handle extensive data efficiently while maintaining responsive user interfaces across all devices.\u003C/p>\n\u003Cp>The key to successful implementation lies in progressive enhancement that starts with basic optimization techniques and gradually adds more sophisticated features based on performance requirements and device capabilities. This systematic approach ensures that table performance improvements enhance rather than complicate the user experience, providing scalable solutions that grow with data requirements.\u003C/p>\n\u003Cp>Whether you're displaying API responses, CSV data, or extensive documentation tables, the techniques covered in this guide provide the foundation for building professional, high-performance table displays that maintain excellent user experience regardless of dataset size or complexity.\u003C/p>\n",[15,19,22,25,28,31,34,37,40,43],{"id":16,"text":17,"level":18},"why-optimize-markdown-table-performance","Why Optimize Markdown Table Performance?",2,{"id":20,"text":21,"level":18},"foundation-performance-strategies","Foundation Performance Strategies",{"id":23,"text":24,"level":18},"memory-management-and-browser-optimization","Memory Management and Browser Optimization",{"id":26,"text":27,"level":18},"advanced-performance-techniques","Advanced Performance Techniques",{"id":29,"text":30,"level":18},"integration-with-static-site-generators","Integration with Static Site Generators",{"id":32,"text":33,"level":18},"monitoring-and-performance-analytics","Monitoring and Performance Analytics",{"id":35,"text":36,"level":18},"responsive-tables-on-small-screens","Responsive Tables on Small Screens",{"id":38,"text":39,"level":18},"best-practices-and-implementation-guidelines","Best Practices and Implementation Guidelines",{"id":41,"text":42,"level":18},"troubleshooting-common-performance-issues","Troubleshooting Common Performance Issues",{"id":44,"text":45,"level":18},"conclusion","Conclusion",[],[48,56,64],{"slug":49,"title":50,"description":51,"excerpt":52,"date":53,"category":9,"author":10,"keywords":54,"readingMinutes":55},"markdown-table-performance-optimization-complete-guide","Markdown Table Performance Optimization and Responsive Design: Complete Guide for High-Performance Documentation and Data Display","Master advanced Markdown table performance optimization techniques for large datasets, responsive design patterns, and mobile-friendly data presentation. Learn table virtualization, lazy loading, and adaptive design strategies for documentation systems.","Advanced Markdown table performance optimization and responsive design techniques enable sophisticated data presentation systems that maintain performance across large datasets while providing…","2026-01-03","markdown table performance, responsive markdown tables, table optimization, large dataset tables, mobile markdown tables, table virtualization, adaptive table design, data presentation",18,{"slug":57,"title":58,"description":59,"excerpt":60,"date":61,"category":9,"author":10,"keywords":62,"readingMinutes":63},"markdown-table-data-validation-quality-assurance-guide","Markdown Table Data Validation and Quality Assurance: Complete Guide for Content Integrity and Data Quality Management","Master advanced Markdown table data validation techniques for content integrity, quality assurance, and automated data verification. Learn validation rules, data quality checks, and error detection for professional documentation systems.","Advanced Markdown table data validation and quality assurance systems enable sophisticated content management workflows that ensure data integrity, maintain consistency standards, and provide…","2025-11-10","markdown table validation, data quality assurance, table content verification, markdown data integrity, table validation rules, content quality control, markdown table testing, data validation automation",31,{"slug":65,"title":66,"description":67,"excerpt":68,"date":69,"category":9,"author":10,"keywords":70,"readingMinutes":71},"markdown-table-responsive-design-mobile-optimization-complete-guide","Markdown Table Responsive Design and Mobile Optimization: Complete Guide for Cross-Device Table Display and Accessibility","Master responsive Markdown table design, mobile optimization techniques, and cross-device accessibility strategies. Learn adaptive layouts, breakpoint management, and user experience optimization for tables on all screen sizes.","Advanced Markdown table responsive design and mobile optimization techniques enable sophisticated data presentation that maintains readability, usability, and accessibility across diverse screen…","2025-12-14","markdown table responsive design, mobile markdown tables, responsive table optimization, markdown table accessibility, adaptive table layouts, mobile-first table design, table breakpoints, responsive markdown",22,1792184946178]