[{"data":1,"prerenderedAt":60},["Reactive",2],{"blog-post-markdown-table-performance-optimization-complete-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":34,"related":35},"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","Tutorial","Matthew Rathbone","markdown table performance, responsive markdown tables, table optimization, large dataset tables, mobile markdown tables, table virtualization, adaptive table design, data presentation",18,"\u003Cp>Advanced Markdown table performance optimization and responsive design techniques enable sophisticated data presentation systems that maintain performance across large datasets while providing optimal user experiences on all device types. By implementing intelligent rendering strategies, adaptive layout patterns, and progressive loading techniques, developers can create data-rich documentation that scales effectively while preserving readability and accessibility across diverse viewing contexts and performance requirements.\u003C/p>\n\u003Ch2 id=\"why-master-table-performance-and-responsive-design\">Why Master Table Performance and Responsive Design?\u003C/h2>\n\u003Cp>Professional table optimization provides essential benefits for data-heavy documentation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Performance Scaling\u003C/strong>: Handle large datasets without compromising page load times or user experience\u003C/li>\n\u003Cli>\u003Cstrong>Device Compatibility\u003C/strong>: Ensure optimal table rendering across desktop, tablet, and mobile devices\u003C/li>\n\u003Cli>\u003Cstrong>User Experience\u003C/strong>: Provide smooth interactions with complex data through progressive enhancement\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility\u003C/strong>: Maintain screen reader compatibility and keyboard navigation for all users\u003C/li>\n\u003Cli>\u003Cstrong>Maintenance Efficiency\u003C/strong>: Reduce complexity through systematic responsive design patterns and automated optimization\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-performance-concepts\">Foundation Performance Concepts\u003C/h2>\n\u003Ch3 id=\"understanding-table-rendering-challenges\">Understanding Table Rendering Challenges\u003C/h3>\n\u003Cp>Analyzing performance bottlenecks in Markdown table systems:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Table Performance Analysis\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Small Table (Acceptable Performance)\u003C/span>\n| Name | Role | Experience | Skills |\n|------|------|------------|--------|\n| Alice | Developer | 5 years | React, Node.js |\n| Bob | Designer | 3 years | Figma, CSS |\n| Carol | Manager | 8 years | Agile, Strategy |\n\n\u003Cspan class=\"hljs-section\">## Large Table (Performance Issues)\u003C/span>\n<!-- 1000+ rows can cause significant performance degradation -->\n| ID | Name | Email | Department | Role | Start Date | Salary | Benefits | Notes |\n|----|----- |-------|------------|------|------------|--------|----------|-------|\n| 001 | John Smith | john@example.com | Engineering | Senior Dev | 2020-01-15 | $95,000 | Health, 401k | Team lead for React projects |\n| 002 | Jane Doe | jane@example.com | Design | UX Designer | 2021-03-22 | $78,000 | Health, PTO | Specializes in mobile interfaces |\n<!-- ... 998 more rows ... -->\n\n\u003Cspan class=\"hljs-section\">## Performance Problems with Large Tables:\u003C/span>\n\u003Cspan class=\"hljs-bullet\">1.\u003C/span> \u003Cspan class=\"hljs-strong\">**DOM Overhead**\u003C/span>: Browser struggles with thousands of DOM elements\n\u003Cspan class=\"hljs-bullet\">2.\u003C/span> \u003Cspan class=\"hljs-strong\">**Memory Usage**\u003C/span>: Large tables consume significant RAM\n\u003Cspan class=\"hljs-bullet\">3.\u003C/span> \u003Cspan class=\"hljs-strong\">**Render Blocking**\u003C/span>: Initial page load delayed by table processing\n\u003Cspan class=\"hljs-bullet\">4.\u003C/span> \u003Cspan class=\"hljs-strong\">**Interaction Lag**\u003C/span>: Scrolling and search become unresponsive\n\u003Cspan class=\"hljs-bullet\">5.\u003C/span> \u003Cspan class=\"hljs-strong\">**Mobile Issues**\u003C/span>: Small screens cannot effectively display wide tables\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progressive-table-enhancement\">Progressive Table Enhancement\u003C/h3>\n\u003Cp>Implementing layered enhancement for optimal performance:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-performance-optimizer.js - Advanced table performance management\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableOptimizer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">virtualScrollThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>, \u003Cspan class=\"hljs-comment\">// Rows before virtualization\u003C/span>\n            \u003Cspan class=\"hljs-attr\">lazyLoadThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>, \u003Cspan class=\"hljs-comment\">// Rows before lazy loading\u003C/span>\n            \u003Cspan class=\"hljs-attr\">mobileBreakpoint\u003C/span>: \u003Cspan class=\"hljs-number\">768\u003C/span>, \u003Cspan class=\"hljs-comment\">// Mobile breakpoint in px\u003C/span>\n            \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">25\u003C/span>, \u003Cspan class=\"hljs-comment\">// Rows per rendering chunk\u003C/span>\n            \u003Cspan class=\"hljs-attr\">searchDebounceMs\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>, \u003Cspan class=\"hljs-comment\">// Search input debounce\u003C/span>\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">visibleRows\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">loadedChunks\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">currentViewport\u003C/span>: { \u003Cspan class=\"hljs-attr\">start\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">end\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> },\n            \u003Cspan class=\"hljs-attr\">isVirtualized\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">isMobile\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\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\">rafId\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeTimeoutId\u003C/span> = \u003Cspan class=\"hljs-literal\">null\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_\">detectDevice\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupResizeObserver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">scanAndOptimizeTables\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectDevice\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span> = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerWidth\u003C/span> <= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">mobileBreakpoint\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'mobile-view'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupResizeObserver\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\">resizeTimeoutId\u003C/span>) {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeTimeoutId\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resizeTimeoutId\u003C/span> = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> wasMobile = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectDevice\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (wasMobile !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Device type changed, re-optimize all tables\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">reoptimizeTables\u003C/span>();\n            }\n        }, \u003Cspan class=\"hljs-number\">250\u003C/span>);\n        \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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">setupResizeObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">scanAndOptimizeTables\u003C/span>(\u003Cspan class=\"hljs-params\">\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\">'table'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> table \u003Cspan class=\"hljs-keyword\">of\u003C/span> tables) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">optimizeTable\u003C/span>(table);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">optimizeTable\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTable\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData.\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\">virtualScrollThreshold\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>(table, tableData);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData.\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\">lazyLoadThreshold\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementLazyLoading\u003C/span>(table, tableData);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementResponsiveFeatures\u003C/span>(table, tableData);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addInteractionFeatures\u003C/span>(table, tableData);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTable\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalCells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td, th'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: table,\n            \u003Cspan class=\"hljs-attr\">rowCount\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">columnCount\u003C/span>: headers.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cellCount\u003C/span>: totalCells.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">estimatedHeight\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span> * \u003Cspan class=\"hljs-number\">40\u003C/span>, \u003Cspan class=\"hljs-comment\">// Estimate 40px per row\u003C/span>\n            \u003Cspan class=\"hljs-attr\">hasHeader\u003C/span>: !!table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'thead'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">isWide\u003C/span>: headers.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">8\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">id\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateTableId\u003C/span>(table)\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateTableId\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (table.\u003Cspan class=\"hljs-property\">id\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> table.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> id = \u003Cspan class=\"hljs-string\">`table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.random().toString(\u003Cspan class=\"hljs-number\">36\u003C/span>).substr(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">9\u003C/span>)}\u003C/span>`\u003C/span>;\n        table.\u003Cspan class=\"hljs-property\">id\u003C/span> = id;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> id;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">implementVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Implementing virtual scrolling for table with \u003Cspan class=\"hljs-subst\">${tableData.rowCount}\u003C/span> rows`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Create virtual scroll container\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualContainer\u003C/span>(table, tableData);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewport = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createViewport\u003C/span>(container, tableData);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollbar = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createVirtualScrollbar\u003C/span>(container, tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Move original table to viewport\u003C/span>\n        viewport.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Initialize virtual scrolling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeVirtualScrolling\u003C/span>(container, viewport, scrollbar, tableData);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">isVirtualized\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualContainer\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\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\">'virtual-table-container'\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: relative;\n            height: min(600px, \u003Cspan class=\"hljs-subst\">${tableData.estimatedHeight}\u003C/span>px);\n            overflow: hidden;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Replace table with container\u003C/span>\n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(container, table);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createViewport\u003C/span>(\u003Cspan class=\"hljs-params\">container, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewport = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        viewport.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-viewport'\u003C/span>;\n        viewport.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: 100%;\n            overflow: auto;\n            position: relative;\n        `\u003C/span>;\n        \n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(viewport);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> viewport;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualScrollbar\u003C/span>(\u003Cspan class=\"hljs-params\">container, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollbar = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        scrollbar.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scrollbar'\u003C/span>;\n        scrollbar.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: absolute;\n            right: 0;\n            top: 0;\n            width: 12px;\n            height: 100%;\n            background: #f5f5f5;\n            cursor: pointer;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> thumb = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        thumb.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scrollbar-thumb'\u003C/span>;\n        thumb.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            background: #ccc;\n            border-radius: 6px;\n            min-height: 20px;\n            width: 100%;\n            position: absolute;\n            transition: background 0.2s;\n        `\u003C/span>;\n        \n        scrollbar.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(thumb);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(scrollbar);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { scrollbar, thumb };\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">initializeVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">container, viewport, scrollbarElements, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = viewport.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Hide all rows initially\u003C/span>\n        originalRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>) {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Setup scroll event handling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> ticking = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        viewport.\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\">if\u003C/span> (!ticking) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualView\u003C/span>(viewport, originalRows, tableData);\n                    ticking = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                });\n                ticking = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Setup custom scrollbar\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupVirtualScrollbar\u003C/span>(viewport, scrollbarElements, tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Initial render\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualView\u003C/span>(viewport, originalRows, tableData);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateVirtualView\u003C/span>(\u003Cspan class=\"hljs-params\">viewport, rows, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = viewport.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewportHeight = viewport.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeight = \u003Cspan class=\"hljs-number\">40\u003C/span>; \u003Cspan class=\"hljs-comment\">// Estimate\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(scrollTop / rowHeight);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n            rows.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            startIndex + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(viewportHeight / rowHeight) + \u003Cspan class=\"hljs-number\">5\u003C/span> \u003Cspan class=\"hljs-comment\">// Buffer\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-comment\">// Show/hide rows based on viewport\u003C/span>\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            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index >= startIndex && index <= endIndex) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> === \u003Cspan class=\"hljs-string\">'none'\u003C/span>) {\n                    row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(index);\n                }\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> !== \u003Cspan class=\"hljs-string\">'none'\u003C/span>) {\n                    row.\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\">state\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(index);\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Update viewport state\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">currentViewport\u003C/span> = { \u003Cspan class=\"hljs-attr\">start\u003C/span>: startIndex, \u003Cspan class=\"hljs-attr\">end\u003C/span>: endIndex };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupVirtualScrollbar\u003C/span>(\u003Cspan class=\"hljs-params\">viewport, { scrollbar, thumb }, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">updateThumb\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollRatio = viewport.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> / (viewport.\u003Cspan class=\"hljs-property\">scrollHeight\u003C/span> - viewport.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> thumbHeight = (viewport.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span> / viewport.\u003Cspan class=\"hljs-property\">scrollHeight\u003C/span>) * scrollbar.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> thumbTop = scrollRatio * (scrollbar.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span> - thumbHeight);\n            \n            thumb.\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-built_in\">Math\u003C/span>.max(\u003Cspan class=\"hljs-number\">20\u003C/span>, thumbHeight)}\u003C/span>px`\u003C/span>;\n            thumb.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${thumbTop}\u003C/span>px`\u003C/span>;\n        };\n        \n        viewport.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, updateThumb);\n        \n        \u003Cspan class=\"hljs-comment\">// Scrollbar click handling\u003C/span>\n        scrollbar.\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-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">target\u003C/span> === scrollbar) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = scrollbar.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> clickRatio = (e.\u003Cspan class=\"hljs-property\">clientY\u003C/span> - rect.\u003Cspan class=\"hljs-property\">top\u003C/span>) / rect.\u003Cspan class=\"hljs-property\">height\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = clickRatio * (viewport.\u003Cspan class=\"hljs-property\">scrollHeight\u003C/span> - viewport.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>);\n                viewport.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = scrollTop;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-title function_\">updateThumb\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">implementLazyLoading\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Implementing lazy loading for table with \u003Cspan class=\"hljs-subst\">${tableData.rowCount}\u003C/span> rows`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\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>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Hide rows beyond initial chunk\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> initialChunk = \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\">chunkSize\u003C/span>, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\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            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index >= initialChunk) {\n                row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">loaded\u003C/span> = \u003Cspan class=\"hljs-string\">'false'\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">loaded\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">loadedChunks\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Add load more button\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addLoadMoreButton\u003C/span>(table, rows, tableData);\n        \n        \u003Cspan class=\"hljs-comment\">// Setup intersection observer for automatic loading\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(table, rows, tableData);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addLoadMoreButton\u003C/span>(\u003Cspan class=\"hljs-params\">table, rows, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> loadMoreContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        loadMoreContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'load-more-container'\u003C/span>;\n        loadMoreContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            text-align: center;\n            padding: 20px;\n            border-top: 1px solid #eee;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> button = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        button.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'load-more-button'\u003C/span>;\n        button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Load More Rows (\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.getHiddenRowCount(rows)}\u003C/span> remaining)`\u003C/span>;\n        button.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            background: #007cba;\n            color: white;\n            border: none;\n            padding: 10px 20px;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 14px;\n        `\u003C/span>;\n        \n        button.\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_\">loadNextChunk\u003C/span>(rows, button, tableData);\n        });\n        \n        loadMoreContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(button);\n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(loadMoreContainer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">table, rows, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> loadMoreButton = table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.load-more-button'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!loadMoreButton) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \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\">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_\">loadNextChunk\u003C/span>(rows, loadMoreButton, tableData);\n                }\n            });\n        }, {\n            \u003Cspan class=\"hljs-attr\">rootMargin\u003C/span>: \u003Cspan class=\"hljs-string\">'200px'\u003C/span> \u003Cspan class=\"hljs-comment\">// Load when button is 200px from viewport\u003C/span>\n        });\n        \n        observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(loadMoreButton);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(tableData.\u003Cspan class=\"hljs-property\">id\u003C/span>, observer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadNextChunk\u003C/span>(\u003Cspan class=\"hljs-params\">rows, button, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> hiddenRows = rows.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\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-keyword\">const\u003C/span> chunkSize = \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\">chunkSize\u003C/span>, hiddenRows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Show next chunk of rows\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 < chunkSize; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (hiddenRows[i]) {\n                hiddenRows[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                hiddenRows[i].\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">loaded\u003C/span> = \u003Cspan class=\"hljs-string\">'true'\u003C/span>;\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update button text\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> remaining = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getHiddenRowCount\u003C/span>(rows);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (remaining > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Load More Rows (\u003Cspan class=\"hljs-subst\">${remaining}\u003C/span> remaining)`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'All rows loaded'\u003C/span>;\n            button.\u003Cspan class=\"hljs-property\">disabled\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            button.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = \u003Cspan class=\"hljs-string\">'0.6'\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getHiddenRowCount\u003C/span>(\u003Cspan class=\"hljs-params\">rows\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rows.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> === \u003Cspan class=\"hljs-string\">'none'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">implementResponsiveFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">state\u003C/span>.\u003Cspan class=\"hljs-property\">isMobile\u003C/span> && tableData.\u003Cspan class=\"hljs-property\">isWide\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementCardLayout\u003C/span>(table, tableData);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData.\u003Cspan class=\"hljs-property\">isWide\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementHorizontalScrolling\u003C/span>(table, tableData);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addColumnToggling\u003C/span>(table, tableData);\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTableControls\u003C/span>(table, tableData);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">implementCardLayout\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Implementing card layout for mobile'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Create card container\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cardContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        cardContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-cards mobile-only'\u003C/span>;\n        cardContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            display: grid;\n            gap: 15px;\n            margin: 20px 0;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Hide original table on mobile\u003C/span>\n        table.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'desktop-only'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Convert rows to cards\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\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>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>)).\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        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\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            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> card = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRowCard\u003C/span>(headers, cells, index);\n            cardContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(card);\n        });\n        \n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(cardContainer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createRowCard\u003C/span>(\u003Cspan class=\"hljs-params\">headers, cells, index\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> card = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        card.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'row-card'\u003C/span>;\n        card.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            background: white;\n            border: 1px solid #ddd;\n            border-radius: 8px;\n            padding: 15px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        `\u003C/span>;\n        \n        cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, cellIndex\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellIndex < headers.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> field = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n                field.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'card-field'\u003C/span>;\n                field.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                    margin-bottom: 10px;\n                    padding-bottom: 10px;\n                    border-bottom: 1px solid #eee;\n                `\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n                label.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'card-label'\u003C/span>;\n                label.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = headers[cellIndex];\n                label.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                    font-weight: 600;\n                    color: #333;\n                    margin-bottom: 4px;\n                    font-size: 14px;\n                `\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n                value.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'card-value'\u003C/span>;\n                value.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                value.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                    color: #666;\n                    font-size: 14px;\n                    line-height: 1.4;\n                `\u003C/span>;\n                \n                field.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(label);\n                field.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(value);\n                card.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(field);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> card;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">implementHorizontalScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Wrap table in horizontal scroll container\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        scrollContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-scroll-container'\u003C/span>;\n        scrollContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            overflow-x: auto;\n            overflow-y: visible;\n            margin: 20px 0;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n        `\u003C/span>;\n        \n        table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(scrollContainer, table);\n        scrollContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add scroll indicator\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addScrollIndicator\u003C/span>(scrollContainer, table);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addScrollIndicator\u003C/span>(\u003Cspan class=\"hljs-params\">container, table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'scroll-indicator'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            position: absolute;\n            right: 0;\n            top: 0;\n            width: 30px;\n            height: 100%;\n            background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);\n            pointer-events: none;\n            transition: opacity 0.3s;\n        `\u003C/span>;\n        \n        container.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n        \n        \u003Cspan class=\"hljs-comment\">// Update indicator based on scroll position\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            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isAtEnd = container.\u003Cspan class=\"hljs-property\">scrollLeft\u003C/span> >= (container.\u003Cspan class=\"hljs-property\">scrollWidth\u003C/span> - container.\u003Cspan class=\"hljs-property\">clientWidth\u003C/span> - \u003Cspan class=\"hljs-number\">5\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">opacity\u003C/span> = isAtEnd ? \u003Cspan class=\"hljs-string\">'0'\u003C/span> : \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Initial state\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            container.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Event\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>));\n        }, \u003Cspan class=\"hljs-number\">100\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">addColumnToggling\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (tableData.\u003Cspan class=\"hljs-property\">columnCount\u003C/span> <= \u003Cspan class=\"hljs-number\">4\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>; \u003Cspan class=\"hljs-comment\">// Skip for simple tables\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controlsContainer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getOrCreateControlsContainer\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnToggle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        columnToggle.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'column-toggle'\u003C/span>;\n        columnToggle.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            margin-bottom: 15px;\n            padding: 15px;\n            background: #f9f9f9;\n            border-radius: 4px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> title = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        title.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Show/Hide Columns:'\u003C/span>;\n        title.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            font-weight: 600;\n            margin-bottom: 10px;\n            font-size: 14px;\n        `\u003C/span>;\n        columnToggle.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(title);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkboxContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        checkboxContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\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            \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'label'\u003C/span>);\n            label.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                display: flex;\n                align-items: center;\n                cursor: pointer;\n                font-size: 13px;\n            `\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkbox = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n            checkbox.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>;\n            checkbox.\u003Cspan class=\"hljs-property\">checked\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            checkbox.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">marginRight\u003C/span> = \u003Cspan class=\"hljs-string\">'6px'\u003C/span>;\n            \n            checkbox.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggleColumn\u003C/span>(table, index, checkbox.\u003Cspan class=\"hljs-property\">checked\u003C/span>);\n            });\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n            text.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            label.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(checkbox);\n            label.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(text);\n            checkboxContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(label);\n        });\n        \n        columnToggle.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(checkboxContainer);\n        controlsContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(columnToggle);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">toggleColumn\u003C/span>(\u003Cspan class=\"hljs-params\">table, columnIndex, show\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> selector = \u003Cspan class=\"hljs-string\">`tr > :nth-child(\u003Cspan class=\"hljs-subst\">${columnIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>)`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(selector);\n        \n        cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n            cell.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = show ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">addTableControls\u003C/span>(\u003Cspan class=\"hljs-params\">table, tableData\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controlsContainer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getOrCreateControlsContainer\u003C/span>(table);\n        \n        \u003Cspan class=\"hljs-comment\">// Add search functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTableSearch\u003C/span>(table, controlsContainer);\n        \n        \u003Cspan class=\"hljs-comment\">// Add sorting functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTableSorting\u003C/span>(table, controlsContainer);\n        \n        \u003Cspan class=\"hljs-comment\">// Add export functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addTableExport\u003C/span>(table, controlsContainer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getOrCreateControlsContainer\u003C/span>(\u003Cspan class=\"hljs-params\">table\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> container = table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-controls'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!container) {\n            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\">'table-controls'\u003C/span>;\n            container.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                margin-bottom: 20px;\n                padding: 20px;\n                background: #fafafa;\n                border-radius: 8px;\n                border: 1px solid #e5e5e5;\n            `\u003C/span>;\n            table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(container, table);\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">addTableSearch\u003C/span>(\u003Cspan class=\"hljs-params\">table, container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search'\u003C/span>;\n        searchContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            margin-bottom: 15px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Search table...'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            width: 100%;\n            max-width: 300px;\n            padding: 8px 12px;\n            border: 1px solid #ccc;\n            border-radius: 4px;\n            font-size: 14px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> searchTimeout;\n        searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(searchTimeout);\n            searchTimeout = \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_\">performTableSearch\u003C/span>(table, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">searchDebounceMs\u003C/span>);\n        });\n        \n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchContainer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performTableSearch\u003C/span>(\u003Cspan class=\"hljs-params\">table, searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> term = searchTerm.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        rows.\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-keyword\">const\u003C/span> text = row.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = !term || text.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(term);\n            \n            row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = matches ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (matches) visibleCount++;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Update search results indicator\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSearchResults\u003C/span>(table, visibleCount, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSearchResults\u003C/span>(\u003Cspan class=\"hljs-params\">table, visibleCount, totalCount\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = table.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-controls'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> indicator = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-results'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!indicator) {\n            indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-results'\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                font-size: 12px;\n                color: #666;\n                margin-top: 5px;\n            `\u003C/span>;\n            container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-search'\u003C/span>).\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n        }\n        \n        indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = visibleCount === totalCount \n            ? \u003Cspan class=\"hljs-string\">`Showing all \u003Cspan class=\"hljs-subst\">${totalCount}\u003C/span> rows`\u003C/span>\n            : \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visibleCount}\u003C/span> of \u003Cspan class=\"hljs-subst\">${totalCount}\u003C/span> rows`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">addTableSorting\u003C/span>(\u003Cspan class=\"hljs-params\">table, container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\n        \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            header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n            header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">userSelect\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Add sort indicator\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sort-indicator'\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                margin-left: 8px;\n                opacity: 0.5;\n                font-size: 12px;\n            `\u003C/span>;\n            indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'↕'\u003C/span>;\n            header.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(indicator);\n            \n            header.\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_\">sortTableByColumn\u003C/span>(table, index, header);\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sortTableByColumn\u003C/span>(\u003Cspan class=\"hljs-params\">table, columnIndex, header\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = table.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\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>(tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Determine sort direction\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentSort = header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> || \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> newSort = currentSort === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Clear other headers\u003C/span>\n        table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">delete\u003C/span> th.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = th.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\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        \u003Cspan class=\"hljs-comment\">// Update current header\u003C/span>\n        header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortDirection\u003C/span> = newSort;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = header.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n            indicator.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = newSort === \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        }\n        \n        \u003Cspan class=\"hljs-comment\">// Sort rows\u003C/span>\n        rows.\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> aText = a.\u003Cspan class=\"hljs-property\">cells\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bText = b.\u003Cspan class=\"hljs-property\">cells\u003C/span>[columnIndex].\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Try numeric sort first\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> aNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aText);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bNum = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bText);\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> comparison;\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                comparison = aNum - bNum;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                comparison = aText.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(bText);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> newSort === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? comparison : -comparison;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Re-append sorted rows\u003C/span>\n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row));\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">addTableExport\u003C/span>(\u003Cspan class=\"hljs-params\">table, container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> exportContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        exportContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-export'\u003C/span>;\n        exportContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            display: flex;\n            gap: 10px;\n            align-items: center;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n        label.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Export:'\u003C/span>;\n        label.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            font-weight: 600;\n            font-size: 14px;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> csvButton = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createExportButton\u003C/span>(\u003Cspan class=\"hljs-string\">'CSV'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportTableAsCSV\u003C/span>(table));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> jsonButton = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createExportButton\u003C/span>(\u003Cspan class=\"hljs-string\">'JSON'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportTableAsJSON\u003C/span>(table));\n        \n        exportContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(label);\n        exportContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(csvButton);\n        exportContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(jsonButton);\n        \n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(exportContainer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createExportButton\u003C/span>(\u003Cspan class=\"hljs-params\">text, onClick\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> button = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        button.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        button.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            padding: 6px 12px;\n            border: 1px solid #ccc;\n            background: white;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 12px;\n        `\u003C/span>;\n        \n        button.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, onClick);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> button;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exportTableAsCSV\u003C/span>(\u003Cspan class=\"hljs-params\">table\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>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> th.\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-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>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\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-title function_\">map\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_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>))\n                    .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">td, index\u003C/span>) =>\u003C/span> table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>)[index].\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-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">td\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${td.textContent.trim().replace(/\u003Cspan class=\"hljs-string\">"/g, '"\u003C/span>\u003Cspan class=\"hljs-string\">"')}"\u003C/span>\u003Cspan class=\"hljs-string\">`)\n                    .join(',');\n            });\n        \n        const csv = [headers.map(h => `\u003C/span>\u003Cspan class=\"hljs-string\">"${h}"\u003C/span>\u003Cspan class=\"hljs-string\">`).join(','), ...rows].join('\\n');\n        this.downloadFile(csv, 'table-export.csv', 'text/csv');\n    }\n    \n    exportTableAsJSON(table) {\n        const headers = Array.from(table.querySelectorAll('thead th'))\n            .filter(th => th.style.display !== 'none')\n            .map(th => th.textContent.trim());\n        \n        const data = Array.from(table.querySelectorAll('tbody tr'))\n            .filter(row => row.style.display !== 'none')\n            .map(row => {\n                const obj = {};\n                Array.from(row.querySelectorAll('td'))\n                    .filter((td, index) => table.querySelectorAll('thead th')[index].style.display !== 'none')\n                    .forEach((td, index) => {\n                        obj[headers[index]] = td.textContent.trim();\n                    });\n                return obj;\n            });\n        \n        const json = JSON.stringify(data, null, 2);\n        this.downloadFile(json, 'table-export.json', 'application/json');\n    }\n    \n    downloadFile(content, filename, mimeType) {\n        const blob = new Blob([content], { type: mimeType });\n        const url = URL.createObjectURL(blob);\n        \n        const link = document.createElement('a');\n        link.href = url;\n        link.download = filename;\n        link.style.display = 'none';\n        \n        document.body.appendChild(link);\n        link.click();\n        document.body.removeChild(link);\n        \n        URL.revokeObjectURL(url);\n    }\n    \n    async reoptimizeTables() {\n        // Clear existing optimizations\n        this.cleanup();\n        \n        // Re-scan and optimize\n        await this.scanAndOptimizeTables();\n    }\n    \n    cleanup() {\n        // Cancel any pending RAF calls\n        if (this.rafId) {\n            cancelAnimationFrame(this.rafId);\n            this.rafId = null;\n        }\n        \n        // Disconnect observers\n        this.observers.forEach(observer => observer.disconnect());\n        this.observers.clear();\n        \n        // Reset state\n        this.state = {\n            visibleRows: new Set(),\n            loadedChunks: new Set(),\n            currentViewport: { start: 0, end: 0 },\n            isVirtualized: false,\n            isMobile: false\n        };\n    }\n}\n\n// Auto-initialize on DOM ready\ndocument.addEventListener('DOMContentLoaded', () => {\n    const optimizer = new MarkdownTableOptimizer({\n        virtualScrollThreshold: 50, // Lower threshold for demo\n        lazyLoadThreshold: 25,\n        mobileBreakpoint: 768,\n        chunkSize: 20\n    });\n    \n    // Make optimizer available globally for debugging\n    window.tableOptimizer = optimizer;\n});\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-design-patterns\">Responsive Design Patterns\u003C/h2>\n\u003Ch3 id=\"adaptive-table-layouts\">Adaptive Table Layouts\u003C/h3>\n\u003Cp>Implementing responsive design strategies for optimal viewing across devices:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-tables.css - Comprehensive responsive table styles */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base table styles with performance optimizations */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \n    \u003Cspan class=\"hljs-comment\">/* Performance optimizations */\u003C/span>\n    \u003Cspan class=\"hljs-attribute\">table-layout\u003C/span>: fixed;\n    \u003Cspan class=\"hljs-attribute\">contain\u003C/span>: layout style;\n    \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateZ\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>); \u003Cspan class=\"hljs-comment\">/* Create compositing layer */\u003C/span>\n}\n\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">text-overflow\u003C/span>: ellipsis;\n    \u003Cspan class=\"hljs-attribute\">white-space\u003C/span>: nowrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">thead\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: sticky;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#333\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Mobile-first responsive approach */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">767px\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">/* Hide table on mobile, show cards instead */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.desktop-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: block;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Compact mobile table for simple tables */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Responsive scroll container */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.table-scroll-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\n        -webkit-\u003Cspan class=\"hljs-attribute\">overflow\u003C/span>-scrolling: touch;\n        \u003Cspan class=\"hljs-attribute\">scrollbar-width\u003C/span>: thin;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-scroll-container\u003C/span>::-webkit-scrollbar {\n        \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-scroll-container\u003C/span>::-webkit-scrollbar-track {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f1f1\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-scroll-container\u003C/span>::-webkit-scrollbar-thumb {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#c1c1c1\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Tablet styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) \u003Cspan class=\"hljs-keyword\">and\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">1023px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.desktop-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Adjust column widths for tablet */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tablet-optimized\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tablet-optimized\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.tablet-optimized\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Desktop styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">1024px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span>\u003Cspan class=\"hljs-selector-class\">.mobile-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.desktop-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Enhanced interactions for desktop */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.05\u003C/span>);\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">/* Column resizing for desktop */\u003C/span>\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.resizable\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n        \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: col-resize;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.resizable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n        \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">3px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: transparent;\n        \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: col-resize;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-class\">.resizable\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Virtual scrolling styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.virtual-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ddd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.virtual-viewport\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: auto;\n    scroll-behavior: smooth;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.virtual-scrollbar\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.05\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">20\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.virtual-scrollbar-thumb\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.3\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.virtual-scrollbar-thumb\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.5\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading states */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-loading\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.8\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">z-index\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-loading-spinner\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f3f3f3\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: spin \u003Cspan class=\"hljs-number\">1s\u003C/span> linear infinite;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> spin {\n    \u003Cspan class=\"hljs-number\">0%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">0deg\u003C/span>); }\n    \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">360deg\u003C/span>); }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Card layout styles */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.row-card\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e5e5e5\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.05\u003C/span>);\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: box-shadow \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.row-card\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-field\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-field\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-transform\u003C/span>: uppercase;\n    \u003Cspan class=\"hljs-attribute\">letter-spacing\u003C/span>: \u003Cspan class=\"hljs-number\">0.5px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.card-value\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">line-height\u003C/span>: \u003Cspan class=\"hljs-number\">1.4\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table controls */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">20px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-search\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">400px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span> \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ced4da\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-search\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.25\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.column-toggle\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.column-toggle\u003C/span> \u003Cspan class=\"hljs-selector-tag\">label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: inline-flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.column-toggle\u003C/span> \u003Cspan class=\"hljs-selector-tag\">input\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[type=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span>]\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    accent-\u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Export controls */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-export\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-export\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#ced4da\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">13px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-export\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007cba\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Sort indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.6\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: opacity \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Accessibility improvements */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.row-card\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-export\u003C/span> \u003Cspan class=\"hljs-selector-tag\">button\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.virtual-viewport\u003C/span> {\n        scroll-behavior: auto;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.row-card\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.virtual-scrollbar\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-export\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">break-inside\u003C/span>: avoid;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span> \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-cards\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.optimized-table\u003C/span>\u003Cspan class=\"hljs-selector-class\">.desktop-only\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: table \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-documentation-systems\">Integration with Documentation Systems\u003C/h2>\n\u003Cp>Table performance optimization integrates seamlessly with comprehensive documentation workflows. When combined with \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automated content management and workflow systems\u003C/a>, optimized tables become part of intelligent content delivery systems that adapt presentation based on device capabilities, user preferences, and content complexity while maintaining optimal performance characteristics.\u003C/p>\n\u003Cp>For sophisticated content architectures, table optimization works effectively with \u003Ca href=\"/blog/markdown-form-creation-input-validation-complete-guide\">form systems and interactive content features\u003C/a> to create dynamic data presentation workflows where user interactions with forms can trigger real-time table updates, filtering, and data visualization while preserving performance through progressive enhancement techniques.\u003C/p>\n\u003Cp>When building comprehensive documentation platforms, table performance complements \u003Ca href=\"/blog/markdown-image-optimization-compression-complete-guide\">responsive image optimization and media management\u003C/a> by creating cohesive multimedia experiences where optimized tables, responsive images, and adaptive layouts work together to deliver fast, accessible content experiences across all device types and network conditions.\u003C/p>\n\u003Ch2 id=\"advanced-performance-techniques\">Advanced Performance Techniques\u003C/h2>\n\u003Ch3 id=\"server-side-rendering-optimization\">Server-Side Rendering Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// ssr-table-optimizer.js - Server-side table optimization for static sites\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">SSRTableOptimizer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">maxInitialRows\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">generateAMP\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableCriticalCSS\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">preloadThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            ...options\n        };\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">optimizeMarkdownTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableMarkdown, context = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> parsed = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseMarkdownTable\u003C/span>(tableMarkdown);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (parsed.\u003Cspan class=\"hljs-property\">rows\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\">maxInitialRows\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateOptimizedHTML\u003C/span>(parsed, context);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateStandardHTML\u003C/span>(parsed, context);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseMarkdownTable\u003C/span>(\u003Cspan class=\"hljs-params\">markdown\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lines = markdown.\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> separatorLine = lines[\u003Cspan class=\"hljs-number\">1\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> alignments = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseAlignments\u003C/span>(separatorLine);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = lines.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">line\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">parseTableRow\u003C/span>(line));\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">headers\u003C/span>: headers.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> ({\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: header,\n                \u003Cspan class=\"hljs-attr\">alignment\u003C/span>: alignments[index] || \u003Cspan class=\"hljs-string\">'left'\u003C/span>\n            })),\n            rows,\n            \u003Cspan class=\"hljs-attr\">totalRows\u003C/span>: rows.\u003Cspan class=\"hljs-property\">length\u003C/span>\n        };\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_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, -\u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-comment\">// Remove empty first/last elements\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    }\n    \n    \u003Cspan class=\"hljs-title function_\">parseAlignments\u003C/span>(\u003Cspan class=\"hljs-params\">separatorLine\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> separatorLine.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-string\">'|'\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, -\u003Cspan class=\"hljs-number\">1\u003C/span>)\n            .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cleaned = cell.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cleaned.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>) && cleaned.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'center'\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cleaned.\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(\u003Cspan class=\"hljs-string\">':'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'right'\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'left'\u003C/span>;\n                }\n            });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateOptimizedHTML\u003C/span>(\u003Cspan class=\"hljs-params\">parsed, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { headers, rows } = parsed;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> initialRows = rows.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxInitialRows\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> remainingCount = rows.\u003Cspan class=\"hljs-property\">length\u003C/span> - initialRows.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = context.\u003Cspan class=\"hljs-property\">tableId\u003C/span> || \u003Cspan class=\"hljs-string\">`table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="optimized-table-container" data-table-id="\u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>">\n                <div class="table-controls" style="display: none;">\n                    <div class="table-search">\n                        <input type="text" placeholder="Search table..." \n                               aria-label="Search table data">\n                        <div class="search-results" aria-live="polite"></div>\n                    </div>\n                </div>\n                \n                <div class="table-scroll-container">\n                    <table class="optimized-table" id="\u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>">\n                        <thead>\n                            <tr>\n                                \u003Cspan class=\"hljs-subst\">${headers.map(header => \u003Cspan class=\"hljs-string\">`\n                                    <th style="text-align: \u003Cspan class=\"hljs-subst\">${header.alignment}\u003C/span>">\n                                        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(header.text)}\u003C/span>\n                                        <span class="sort-indicator" aria-hidden="true">↕</span>\n                                    </th>\n                                `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                            </tr>\n                        </thead>\n                        <tbody>\n                            \u003Cspan class=\"hljs-subst\">${initialRows.map(row => \u003Cspan class=\"hljs-string\">`\n                                <tr>\n                                    \u003Cspan class=\"hljs-subst\">${row.map((cell, index) => \u003Cspan class=\"hljs-string\">`\n                                        <td style="text-align: \u003Cspan class=\"hljs-subst\">${headers[index].alignment}\u003C/span>">\n                                            \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(cell)}\u003C/span>\n                                        </td>\n                                    `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                                </tr>\n                            `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                            \u003Cspan class=\"hljs-subst\">${remainingCount > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.generateHiddenRows(rows.slice(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.maxInitialRows), headers) : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                        </tbody>\n                    </table>\n                </div>\n                \n                \u003Cspan class=\"hljs-subst\">${remainingCount > \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-string\">`\n                    <div class="load-more-container">\n                        <button class="load-more-button" \n                                data-remaining="\u003Cspan class=\"hljs-subst\">${remainingCount}\u003C/span>">\n                            Load More Rows (\u003Cspan class=\"hljs-subst\">${remainingCount}\u003C/span> remaining)\n                        </button>\n                    </div>\n                `\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>\n                \n                <script type="application/json" class="table-data">\n                    \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">JSON\u003C/span>.stringify({ headers, rows, totalRows: rows.length })}\u003C/span>\n                </script>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateHiddenRows\u003C/span>(\u003Cspan class=\"hljs-params\">rows, headers\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> rows.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <tr style="display: none;" data-loaded="false">\n                \u003Cspan class=\"hljs-subst\">${row.map((cell, index) => \u003Cspan class=\"hljs-string\">`\n                    <td style="text-align: \u003Cspan class=\"hljs-subst\">${headers[index].alignment}\u003C/span>">\n                        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(cell)}\u003C/span>\n                    </td>\n                `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n            </tr>\n        `\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateStandardHTML\u003C/span>(\u003Cspan class=\"hljs-params\">parsed, context\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { headers, rows } = parsed;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = context.\u003Cspan class=\"hljs-property\">tableId\u003C/span> || \u003Cspan class=\"hljs-string\">`table-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Date\u003C/span>.now()}\u003C/span>`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="standard-table-container">\n                <table class="optimized-table" id="\u003Cspan class=\"hljs-subst\">${tableId}\u003C/span>">\n                    <thead>\n                        <tr>\n                            \u003Cspan class=\"hljs-subst\">${headers.map(header => \u003Cspan class=\"hljs-string\">`\n                                <th style="text-align: \u003Cspan class=\"hljs-subst\">${header.alignment}\u003C/span>">\n                                    \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(header.text)}\u003C/span>\n                                </th>\n                            `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        \u003Cspan class=\"hljs-subst\">${rows.map(row => \u003Cspan class=\"hljs-string\">`\n                            <tr>\n                                \u003Cspan class=\"hljs-subst\">${row.map((cell, index) => \u003Cspan class=\"hljs-string\">`\n                                    <td style="text-align: \u003Cspan class=\"hljs-subst\">${headers[index].alignment}\u003C/span>">\n                                        \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(cell)}\u003C/span>\n                                    </td>\n                                `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                            </tr>\n                        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </tbody>\n                </table>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">escapeHtml\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> div = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        div.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = text;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> div.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-variable language_\">module\u003C/span>.\u003Cspan class=\"hljs-property\">exports\u003C/span> = \u003Cspan class=\"hljs-title class_\">SSRTableOptimizer\u003C/span>;\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced Markdown table performance optimization and responsive design represents a comprehensive approach to data presentation that balances technical efficiency with user experience excellence, enabling documentation systems to handle complex datasets while maintaining accessibility and usability across all device types and performance contexts. By implementing intelligent rendering strategies, adaptive layout patterns, and progressive enhancement techniques, developers can create table systems that scale effectively from simple data presentations to complex interactive dashboards.\u003C/p>\n\u003Cp>The key to successful table optimization lies in understanding the specific requirements of your content, users, and technical constraints, then applying systematic optimization techniques that enhance rather than complicate the user experience. Whether you're building technical documentation, data-driven content sites, or comprehensive knowledge bases, the techniques covered in this guide provide the foundation for creating performant, accessible, and maintainable table systems that serve users effectively across diverse viewing contexts.\u003C/p>\n\u003Cp>Remember to implement performance monitoring to track the real-world impact of your optimizations, continuously test your responsive designs across different devices and network conditions, and maintain clear documentation of your optimization strategies for team members and contributors. With careful attention to performance and responsive design principles, your Markdown table systems can deliver exceptional user experiences that make complex data accessible, understandable, and actionable for all users.\u003C/p>\n",[15,19,22,25,28,31],{"id":16,"text":17,"level":18},"why-master-table-performance-and-responsive-design","Why Master Table Performance and Responsive Design?",2,{"id":20,"text":21,"level":18},"foundation-performance-concepts","Foundation Performance Concepts",{"id":23,"text":24,"level":18},"responsive-design-patterns","Responsive Design Patterns",{"id":26,"text":27,"level":18},"integration-with-documentation-systems","Integration with Documentation Systems",{"id":29,"text":30,"level":18},"advanced-performance-techniques","Advanced Performance Techniques",{"id":32,"text":33,"level":18},"conclusion","Conclusion",[],[36,44,52],{"slug":37,"title":38,"description":39,"excerpt":40,"date":41,"category":9,"author":10,"keywords":42,"readingMinutes":43},"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,{"slug":45,"title":46,"description":47,"excerpt":48,"date":49,"category":9,"author":10,"keywords":50,"readingMinutes":51},"markdown-performance-optimization-best-practices-complete-guide","Markdown Performance Optimization and Best Practices: Complete Guide for High-Performance Documentation Systems","Master advanced Markdown performance optimization techniques for fast-loading documentation, efficient parsing, and scalable content systems. Learn caching strategies, asset optimization, and performance monitoring for Markdown-based sites.","Advanced Markdown performance optimization and best practices enable high-performance documentation systems that deliver exceptional user experiences while maintaining scalability across large…","2025-11-24","markdown performance optimization, markdown best practices, documentation performance, markdown parsing optimization, static site performance, markdown caching, content delivery optimization, markdown asset management",28,{"slug":53,"title":54,"description":55,"excerpt":56,"date":57,"category":9,"author":10,"keywords":58,"readingMinutes":59},"markdown-performance-optimization-rendering-speed-guide","Markdown Performance Optimization and Rendering Speed: Complete Guide for High-Performance Documentation Systems","Master Markdown performance optimization techniques for faster rendering, efficient processing, and scalable documentation systems. Learn caching strategies, parser optimization, and performance monitoring for large-scale content management.","Advanced Markdown performance optimization enables high-speed rendering and efficient processing for large-scale documentation systems that handle thousands of documents with complex content…","2025-09-30","markdown performance, markdown rendering speed, markdown optimization, markdown parser performance, documentation performance, markdown caching, static site performance, markdown processing speed",25,1792184946462]