[{"data":1,"prerenderedAt":66},["Reactive",2],{"blog-post-markdown-table-filtering-sorting-interactive-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":40,"related":41},"markdown-table-filtering-sorting-interactive-complete-guide","Markdown Table Filtering and Sorting: Complete Interactive Guide for Dynamic Data Presentation","Master interactive Markdown table filtering and sorting with client-side JavaScript, server-side processing, and advanced data manipulation techniques. Learn implementation patterns, performance optimization, and user experience enhancements for dynamic content systems.","Interactive Markdown table filtering and sorting transforms static documentation into dynamic, user-friendly interfaces that enable real-time data exploration and content discovery. By…","2025-10-06","Tutorial","Matthew Rathbone","markdown table filtering, markdown table sorting, interactive markdown tables, dynamic table filtering, table search functionality, sortable markdown tables, table data manipulation, interactive documentation",32,"\u003Cp>Interactive Markdown table filtering and sorting transforms static documentation into dynamic, user-friendly interfaces that enable real-time data exploration and content discovery. By implementing client-side filtering algorithms, sortable column headers, and advanced search functionality, technical teams can create engaging documentation experiences that scale efficiently with large datasets while maintaining the simplicity and portability of standard Markdown table syntax.\u003C/p>\n\u003Ch2 id=\"why-implement-interactive-table-features\">Why Implement Interactive Table Features?\u003C/h2>\n\u003Cp>Professional interactive table functionality provides essential benefits for modern documentation systems:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced User Experience\u003C/strong>: Enable users to quickly find relevant information in large datasets without manual scanning\u003C/li>\n\u003Cli>\u003Cstrong>Data Exploration\u003C/strong>: Provide tools for users to analyze and understand complex information through sorting and filtering\u003C/li>\n\u003Cli>\u003Cstrong>Improved Accessibility\u003C/strong>: Support keyboard navigation and screen reader compatibility for inclusive content access\u003C/li>\n\u003Cli>\u003Cstrong>Performance Optimization\u003C/strong>: Reduce cognitive load by showing only relevant information based on user-defined criteria\u003C/li>\n\u003Cli>\u003Cstrong>Scalable Documentation\u003C/strong>: Handle growing datasets without compromising usability or requiring manual content reorganization\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-interactive-table-implementation\">Foundation Interactive Table Implementation\u003C/h2>\n\u003Ch3 id=\"basic-client-side-filtering\">Basic Client-Side Filtering\u003C/h3>\n\u003Cp>Essential HTML and JavaScript setup for interactive Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Basic interactive table structure -->\u003C/span>\n\u003Cspan class=\"hljs-meta\"><!DOCTYPE \u003Cspan class=\"hljs-keyword\">html\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">html\u003C/span> \u003Cspan class=\"hljs-attr\">lang\u003C/span>=\u003Cspan class=\"hljs-string\">"en"\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">charset\u003C/span>=\u003Cspan class=\"hljs-string\">"UTF-8"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">meta\u003C/span> \u003Cspan class=\"hljs-attr\">name\u003C/span>=\u003Cspan class=\"hljs-string\">"viewport"\u003C/span> \u003Cspan class=\"hljs-attr\">content\u003C/span>=\u003Cspan class=\"hljs-string\">"width=device-width, initial-scale=1.0"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>Interactive Markdown Tables\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\u003Cspan class=\"language-css\">\n        \u003Cspan class=\"hljs-selector-class\">.table-container\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">overflow-x\u003C/span>: auto;\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\">.interactive-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-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, system-ui, sans-serif;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.interactive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n        \u003Cspan class=\"hljs-selector-class\">.interactive-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>;\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\">#e1e5e9\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">vertical-align\u003C/span>: top;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.interactive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f6f8fa\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n            \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n            user-select: none;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.interactive-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f3f4\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n            \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">translateY\u003C/span>(-\u003Cspan class=\"hljs-number\">50%\u003C/span>);\n            \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\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\">.sort-indicator\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.sort-asc\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        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.sort-desc\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        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">15px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n            \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">10px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n            \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.search-input\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#d0d7de\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\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">250px\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.filter-select\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#d0d7de\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\">background-color\u003C/span>: white;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.clear-filters\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\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f6f8fa\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#d0d7de\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n            \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.clear-filters\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f1f3f4\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.row-hidden\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.no-results\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n            \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#656d76\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n        }\n        \n        \u003Cspan class=\"hljs-selector-class\">.results-count\u003C/span> {\n            \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#656d76\u003C/span>;\n            \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: auto;\n        }\n    \u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">style\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">head\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-container"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-controls"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \n                \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-input"\u003C/span> \n                \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Search all columns..."\u003C/span> \n                \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"globalSearch"\u003C/span>\n            >\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"filter-select"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"categoryFilter"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>All Categories\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"filter-select"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"statusFilter"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>All Statuses\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"clear-filters"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"clearFilters"\u003C/span>>\u003C/span>Clear Filters\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"results-count"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"resultsCount"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-table"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"dataTable"\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span> \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"string"\u003C/span>>\u003C/span>\n                        Name\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"category"\u003C/span> \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"string"\u003C/span>>\u003C/span>\n                        Category\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span> \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"string"\u003C/span>>\u003C/span>\n                        Status\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"priority"\u003C/span> \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"number"\u003C/span>>\u003C/span>\n                        Priority\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"date"\u003C/span> \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"date"\u003C/span>>\u003C/span>\n                        Last Updated\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"size"\u003C/span> \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"number"\u003C/span>>\u003C/span>\n                        Size (MB)\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"tableBody"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-comment\"><!-- Data rows will be populated by JavaScript -->\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"no-results"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"noResults"\u003C/span> \u003Cspan class=\"hljs-attr\">style\u003C/span>=\u003Cspan class=\"hljs-string\">"display: none;"\u003C/span>>\u003C/span>\n            No results found matching your criteria.\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span> \u003Cspan class=\"hljs-attr\">src\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-table.js"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">body\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">html\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"comprehensive-javascript-implementation\">Comprehensive JavaScript Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// interactive-table.js - Complete interactive table functionality\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">InteractiveTable\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableId, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(tableId);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thead\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'thead'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">noResults\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'noResults'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsCount\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'resultsCount'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableSearch\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableSort\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableFilter\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">caseSensitive\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightMatches\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">pageSize\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enablePagination\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = { \u003Cspan class=\"hljs-attr\">column\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-attr\">direction\u003C/span>: \u003Cspan class=\"hljs-string\">'asc'\u003C/span> };\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\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\">searchTerm\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> = \u003Cspan class=\"hljs-number\">1\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_\">setupEventListeners\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">populateFilterOptions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsCount\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Global search\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSearch\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'globalSearch'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (searchInput) {\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_\">handleGlobalSearch\u003C/span>(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\">debounceDelay\u003C/span>);\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Column sorting\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSort\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thead\u003C/span>.\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\">const\u003C/span> header = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'th[data-column]'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSort\u003C/span>(header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>, header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">type\u003C/span>);\n                }\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Filters\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableFilter\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> categoryFilter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'categoryFilter'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> statusFilter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'statusFilter'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (categoryFilter) {\n                categoryFilter.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setFilter\u003C/span>(\u003Cspan class=\"hljs-string\">'category'\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n                });\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (statusFilter) {\n                statusFilter.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setFilter\u003C/span>(\u003Cspan class=\"hljs-string\">'status'\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Clear filters\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> clearButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'clearFilters'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (clearButton) {\n            clearButton.\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_\">clearAllFilters\u003C/span>();\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Keyboard navigation\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleKeyboardNavigation\u003C/span>(e);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = data;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [...data];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTable\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">populateFilterOptions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsCount\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleGlobalSearch\u003C/span>(\u003Cspan class=\"hljs-params\">searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span> = searchTerm.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyFilters\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSort\u003C/span>(\u003Cspan class=\"hljs-params\">column, type = \u003Cspan class=\"hljs-string\">'string'\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span> === column) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span> = column;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortData\u003C/span>(column, type, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTable\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">sortData\u003C/span>(\u003Cspan class=\"hljs-params\">column, type, direction\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> aVal = a[column];\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> bVal = b[column];\n            \n            \u003Cspan class=\"hljs-comment\">// Handle different data types\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (type) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>:\n                    aVal = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(aVal) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                    bVal = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(bVal) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n                    aVal = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(aVal);\n                    bVal = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(bVal);\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'string'\u003C/span>:\n                \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                    aVal = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(aVal).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                    bVal = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(bVal).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> comparison = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (aVal < bVal) comparison = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (aVal > bVal) comparison = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'desc'\u003C/span> ? -comparison : comparison;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(column);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, value);\n        }\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyFilters\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Apply column filters\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [column, filterValue] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(row[column]).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> filter = filterValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cellValue.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filter)) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Apply global search\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchableText = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(row)\n                    .\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>)\n                    .\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!searchableText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>)) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTable\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsCount\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderTable\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\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">noResults\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'table'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">noResults\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enablePagination\u003C/span> \n            ? (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>) * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pageSize\u003C/span> \n            : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enablePagination\u003C/span> \n            ? startIndex + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pageSize\u003C/span> \n            : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(startIndex, endIndex);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = visibleData.\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\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, value]\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">let\u003C/span> cellContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">formatCellValue\u003C/span>(key, value);\n                \n                \u003Cspan class=\"hljs-comment\">// Highlight search matches\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">highlightMatches\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>) {\n                    cellContent = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSearchTerm\u003C/span>(cellContent, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>);\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<td data-column="\u003Cspan class=\"hljs-subst\">${key}\u003C/span>">\u003Cspan class=\"hljs-subst\">${cellContent}\u003C/span></td>`\u003C/span>;\n            }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<tr>\u003Cspan class=\"hljs-subst\">${cells}\u003C/span></tr>`\u003C/span>;\n        }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatCellValue\u003C/span>(\u003Cspan class=\"hljs-params\">column, value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Custom formatting based on column type\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (column) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLocaleDateString\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'size'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value).toFixed(\u003Cspan class=\"hljs-number\">1\u003C/span>)}\u003C/span> MB`\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'priority'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> priority = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(value);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> badges = {\n                    \u003Cspan class=\"hljs-number\">1\u003C/span>: \u003Cspan class=\"hljs-string\">'<span class="priority-badge high">High</span>'\u003C/span>,\n                    \u003Cspan class=\"hljs-number\">2\u003C/span>: \u003Cspan class=\"hljs-string\">'<span class="priority-badge medium">Medium</span>'\u003C/span>,\n                    \u003Cspan class=\"hljs-number\">3\u003C/span>: \u003Cspan class=\"hljs-string\">'<span class="priority-badge low">Low</span>'\u003C/span>\n                };\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> badges[priority] || value;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'status'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> statusClass = value.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/g\u003C/span>, \u003Cspan class=\"hljs-string\">'-'\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<span class="status-badge status-\u003Cspan class=\"hljs-subst\">${statusClass}\u003C/span>">\u003Cspan class=\"hljs-subst\">${value}\u003C/span></span>`\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(value));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightSearchTerm\u003C/span>(\u003Cspan class=\"hljs-params\">text, searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!searchTerm) \u003Cspan class=\"hljs-keyword\">return\u003C/span> text;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> regex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`(\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeRegExp(searchTerm)}\u003C/span>)`\u003C/span>, \u003Cspan class=\"hljs-string\">'gi'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(regex, \u003Cspan class=\"hljs-string\">'<mark>$1</mark>'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear all indicators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thead\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">indicator\u003C/span> =>\u003C/span> {\n            indicator.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sort-indicator'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Set active indicator\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">thead\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentSort.column}\u003C/span>"] .sort-indicator`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header) {\n                header.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`sort-indicator active sort-\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentSort.direction}\u003C/span>`\u003C/span>;\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">populateFilterOptions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Populate category filter\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> categoryFilter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'categoryFilter'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (categoryFilter) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> categories = [...\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">category\u003C/span>))].\u003Cspan class=\"hljs-title function_\">sort\u003C/span>();\n            categoryFilter.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<option value="">All Categories</option>'\u003C/span> +\n                categories.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cat\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${cat}\u003C/span>">\u003Cspan class=\"hljs-subst\">${cat}\u003C/span></option>`\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Populate status filter\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> statusFilter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'statusFilter'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (statusFilter) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> statuses = [...\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">status\u003C/span>))].\u003Cspan class=\"hljs-title function_\">sort\u003C/span>();\n            statusFilter.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<option value="">All Statuses</option>'\u003C/span> +\n                statuses.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">status\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${status}\u003C/span>">\u003Cspan class=\"hljs-subst\">${status}\u003C/span></option>`\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateResultsCount\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\">resultsCount\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> filtered = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filtered === total) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsCount\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${total}\u003C/span> items`\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsCount\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${filtered}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> items`\u003C/span>;\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearAllFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Reset UI controls\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'globalSearch'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'categoryFilter'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'statusFilter'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderTable\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsCount\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleKeyboardNavigation\u003C/span>(\u003Cspan class=\"hljs-params\">e\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> focusedRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tr:focus'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!focusedRow) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> nextRow = focusedRow.\u003Cspan class=\"hljs-property\">nextElementSibling\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (nextRow) nextRow.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> prevRow = focusedRow.\u003Cspan class=\"hljs-property\">previousElementSibling\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (prevRow) prevRow.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">' '\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleRowAction\u003C/span>(focusedRow);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleRowAction\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Custom action when row is selected\u003C/span>\n        row.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">toggle\u003C/span>(\u003Cspan class=\"hljs-string\">'selected'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Row action:'\u003C/span>, row);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Utility functions\u003C/span>\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    \u003Cspan class=\"hljs-title function_\">escapeRegExp\u003C/span>(\u003Cspan class=\"hljs-params\">string\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> string.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[.*+?^${}()|[\\]\\\\]/g\u003C/span>, \u003Cspan class=\"hljs-string\">'\\\\$&'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Export functionality\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">exportToCSV\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>] || {});\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> csvContent = [\n            headers.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>),\n            ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> \n                headers.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">String\u003C/span>(row[header]).replace(/\u003Cspan class=\"hljs-string\">"/g, '"\u003C/span>\u003Cspan class=\"hljs-string\">"')}"\u003C/span>\u003Cspan class=\"hljs-string\">`).join(',')\n            )\n        ].join('\\n');\n        \n        const blob = new Blob([csvContent], { type: 'text/csv' });\n        const url = window.URL.createObjectURL(blob);\n        const link = document.createElement('a');\n        link.href = url;\n        link.download = 'table-data.csv';\n        link.click();\n        window.URL.revokeObjectURL(url);\n    }\n    \n    // API for external control\n    getFilteredData() {\n        return this.filteredData;\n    }\n    \n    getCurrentFilters() {\n        return {\n            search: this.searchTerm,\n            filters: Object.fromEntries(this.filters),\n            sort: this.currentSort\n        };\n    }\n    \n    restoreState(state) {\n        if (state.search) {\n            document.getElementById('globalSearch').value = state.search;\n            this.searchTerm = state.search;\n        }\n        \n        if (state.filters) {\n            Object.entries(state.filters).forEach(([column, value]) => {\n                this.setFilter(column, value);\n                const select = document.getElementById(`\u003C/span>${column}Filter\u003Cspan class=\"hljs-string\">`);\n                if (select) select.value = value;\n            });\n        }\n        \n        if (state.sort && state.sort.column) {\n            this.currentSort = state.sort;\n            this.sortData(state.sort.column, 'string', state.sort.direction);\n            this.updateSortIndicators();\n        }\n        \n        this.renderTable();\n        this.updateResultsCount();\n    }\n}\n\n// Sample data structure\nconst sampleData = [\n    {\n        name: "User Authentication API",\n        category: "Backend",\n        status: "Active",\n        priority: 1,\n        date: "2025-10-01",\n        size: 2.5\n    },\n    {\n        name: "Frontend Dashboard",\n        category: "Frontend",\n        status: "In Development",\n        priority: 2,\n        date: "2025-09-28",\n        size: 15.3\n    },\n    {\n        name: "Database Migration Scripts",\n        category: "Database",\n        status: "Completed",\n        priority: 3,\n        date: "2025-09-25",\n        size: 0.8\n    },\n    {\n        name: "Payment Processing Service",\n        category: "Backend",\n        status: "Testing",\n        priority: 1,\n        date: "2025-10-03",\n        size: 4.7\n    },\n    {\n        name: "Mobile App Components",\n        category: "Mobile",\n        status: "Active",\n        priority: 2,\n        date: "2025-09-30",\n        size: 8.2\n    },\n    {\n        name: "Analytics Dashboard",\n        category: "Frontend",\n        status: "Planning",\n        priority: 3,\n        date: "2025-09-15",\n        size: 12.1\n    },\n    {\n        name: "Email Notification System",\n        category: "Backend",\n        status: "Active",\n        priority: 2,\n        date: "2025-09-22",\n        size: 3.4\n    },\n    {\n        name: "User Profile Management",\n        category: "Frontend",\n        status: "In Development",\n        priority: 1,\n        date: "2025-10-02",\n        size: 6.9\n    }\n];\n\n// Initialize the interactive table\ndocument.addEventListener('DOMContentLoaded', function() {\n    const interactiveTable = new InteractiveTable('dataTable', {\n        enableSearch: true,\n        enableSort: true,\n        enableFilter: true,\n        highlightMatches: true,\n        debounceDelay: 250\n    });\n    \n    interactiveTable.setData(sampleData);\n    \n    // Add export functionality\n    const exportButton = document.createElement('button');\n    exportButton.textContent = 'Export CSV';\n    exportButton.className = 'clear-filters';\n    exportButton.addEventListener('click', () => {\n        interactiveTable.exportToCSV();\n    });\n    \n    document.querySelector('.table-controls').appendChild(exportButton);\n});\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"advanced-filtering-techniques\">Advanced Filtering Techniques\u003C/h2>\n\u003Ch3 id=\"custom-filter-components\">Custom Filter Components\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// advanced-filters.js - Sophisticated filtering system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AdvancedFilterSystem\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">table, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = table;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">enableRangeFilters\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableRegexSearch\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableMultiSelect\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableDateRanges\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filterDefinitions\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\">activeFilters\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\">filterOperators\u003C/span> = {\n            \u003Cspan class=\"hljs-string\">'equals'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> value === filter,\n            \u003Cspan class=\"hljs-string\">'contains'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filter.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()),\n            \u003Cspan class=\"hljs-string\">'startsWith'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(filter.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()),\n            \u003Cspan class=\"hljs-string\">'endsWith'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(filter.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()),\n            \u003Cspan class=\"hljs-string\">'greaterThan'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value) > \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(filter),\n            \u003Cspan class=\"hljs-string\">'lessThan'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value) < \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(filter),\n            \u003Cspan class=\"hljs-string\">'between'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> num = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> num >= filter.\u003Cspan class=\"hljs-property\">min\u003C/span> && num <= filter.\u003Cspan class=\"hljs-property\">max\u003C/span>;\n            },\n            \u003Cspan class=\"hljs-string\">'dateAfter'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value) > \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(filter),\n            \u003Cspan class=\"hljs-string\">'dateBefore'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value) < \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(filter),\n            \u003Cspan class=\"hljs-string\">'dateRange'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> date = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> date >= \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(filter.\u003Cspan class=\"hljs-property\">start\u003C/span>) && date <= \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(filter.\u003Cspan class=\"hljs-property\">end\u003C/span>);\n            },\n            \u003Cspan class=\"hljs-string\">'regex'\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value, filter\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(filter, \u003Cspan class=\"hljs-string\">'i'\u003C/span>).\u003Cspan class=\"hljs-title function_\">test\u003C/span>(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(value));\n                } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                }\n            }\n        };\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_\">createAdvancedFilterUI\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupFilterEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">defineColumnFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, filterConfig\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filterDefinitions\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: filterConfig.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">operators\u003C/span>: filterConfig.\u003Cspan class=\"hljs-property\">operators\u003C/span> || [\u003Cspan class=\"hljs-string\">'contains'\u003C/span>],\n            \u003Cspan class=\"hljs-attr\">options\u003C/span>: filterConfig.\u003Cspan class=\"hljs-property\">options\u003C/span> || [],\n            \u003Cspan class=\"hljs-attr\">label\u003C/span>: filterConfig.\u003Cspan class=\"hljs-property\">label\u003C/span> || column,\n            ...filterConfig\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createAdvancedFilterUI\u003C/span>(\u003Cspan class=\"hljs-params\">\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\">'advanced-filters'\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="filter-header">\n                <h3>Advanced Filters</h3>\n                <button class="toggle-filters" id="toggleAdvanced">Show Filters</button>\n            </div>\n            <div class="filter-panel" id="filterPanel" style="display: none;">\n                <div class="filter-controls" id="filterControls"></div>\n                <div class="filter-actions">\n                    <button class="apply-filters" id="applyFilters">Apply Filters</button>\n                    <button class="clear-filters" id="clearAdvancedFilters">Clear All</button>\n                    <button class="save-filter-set" id="saveFilterSet">Save Filter Set</button>\n                </div>\n            </div>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Insert before the table\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(container, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupAdvancedFilterEvents\u003C/span>(container);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupAdvancedFilterEvents\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toggleButton = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#toggleAdvanced'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterPanel = container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#filterPanel'\u003C/span>);\n        \n        toggleButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isVisible = filterPanel.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> !== \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            filterPanel.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = isVisible ? \u003Cspan class=\"hljs-string\">'none'\u003C/span> : \u003Cspan class=\"hljs-string\">'block'\u003C/span>;\n            toggleButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = isVisible ? \u003Cspan class=\"hljs-string\">'Show Filters'\u003C/span> : \u003Cspan class=\"hljs-string\">'Hide Filters'\u003C/span>;\n        });\n        \n        container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#applyFilters'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAdvancedFilters\u003C/span>();\n        });\n        \n        container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#clearAdvancedFilters'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearAllAdvancedFilters\u003C/span>();\n        });\n        \n        container.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'#saveFilterSet'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">saveFilterSet\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createFilterControl\u003C/span>(\u003Cspan class=\"hljs-params\">column, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controlContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        controlContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-control'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (config.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                controlContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextFilter\u003C/span>(column, config);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select'\u003C/span>:\n                controlContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createSelectFilter\u003C/span>(column, config);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'multiselect'\u003C/span>:\n                controlContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createMultiSelectFilter\u003C/span>(column, config);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'range'\u003C/span>:\n                controlContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRangeFilter\u003C/span>(column, config);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n                controlContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDateFilter\u003C/span>(column, config);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'daterange'\u003C/span>:\n                controlContainer.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDateRangeFilter\u003C/span>(column, config);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> controlContainer;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTextFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="filter-group">\n                <label class="filter-label">\u003Cspan class=\"hljs-subst\">${config.label}\u003C/span></label>\n                <div class="text-filter-container">\n                    <select class="filter-operator" data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>">\n                        \u003Cspan class=\"hljs-subst\">${config.operators.map(op => \n                            \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${op}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.getOperatorLabel(op)}\u003C/span></option>`\u003C/span>\n                        ).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </select>\n                    <input type="text" \n                           class="filter-value" \n                           data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>" \n                           placeholder="Enter \u003Cspan class=\"hljs-subst\">${config.label.toLowerCase()}\u003C/span>...">\n                </div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createSelectFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="filter-group">\n                <label class="filter-label">\u003Cspan class=\"hljs-subst\">${config.label}\u003C/span></label>\n                <select class="filter-select" data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>">\n                    <option value="">All \u003Cspan class=\"hljs-subst\">${config.label}\u003C/span></option>\n                    \u003Cspan class=\"hljs-subst\">${config.options.map(option => \n                        \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${option.value || option}\u003C/span>">\u003Cspan class=\"hljs-subst\">${option.label || option}\u003C/span></option>`\u003C/span>\n                    ).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                </select>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createMultiSelectFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="filter-group">\n                <label class="filter-label">\u003Cspan class=\"hljs-subst\">${config.label}\u003C/span></label>\n                <div class="multiselect-container">\n                    <button class="multiselect-toggle" data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>">\n                        Select \u003Cspan class=\"hljs-subst\">${config.label}\u003C/span>\n                        <span class="multiselect-count"></span>\n                    </button>\n                    <div class="multiselect-dropdown" style="display: none;">\n                        \u003Cspan class=\"hljs-subst\">${config.options.map(option => \u003Cspan class=\"hljs-string\">`\n                            <label class="multiselect-option">\n                                <input type="checkbox" \n                                       value="\u003Cspan class=\"hljs-subst\">${option.value || option}\u003C/span>" \n                                       data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>">\n                                <span>\u003Cspan class=\"hljs-subst\">${option.label || option}\u003C/span></span>\n                            </label>\n                        `\u003C/span>).join(\u003Cspan class=\"hljs-string\">''\u003C/span>)}\u003C/span>\n                    </div>\n                </div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="filter-group">\n                <label class="filter-label">\u003Cspan class=\"hljs-subst\">${config.label}\u003C/span></label>\n                <div class="range-filter-container">\n                    <input type="number" \n                           class="range-min" \n                           data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>" \n                           placeholder="Min \u003Cspan class=\"hljs-subst\">${config.label.toLowerCase()}\u003C/span>"\n                           min="\u003Cspan class=\"hljs-subst\">${config.min || \u003Cspan class=\"hljs-number\">0\u003C/span>}\u003C/span>"\n                           max="\u003Cspan class=\"hljs-subst\">${config.max || \u003Cspan class=\"hljs-number\">100\u003C/span>}\u003C/span>">\n                    <span class="range-separator">to</span>\n                    <input type="number" \n                           class="range-max" \n                           data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>" \n                           placeholder="Max \u003Cspan class=\"hljs-subst\">${config.label.toLowerCase()}\u003C/span>"\n                           min="\u003Cspan class=\"hljs-subst\">${config.min || \u003Cspan class=\"hljs-number\">0\u003C/span>}\u003C/span>"\n                           max="\u003Cspan class=\"hljs-subst\">${config.max || \u003Cspan class=\"hljs-number\">100\u003C/span>}\u003C/span>">\n                </div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createDateRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <div class="filter-group">\n                <label class="filter-label">\u003Cspan class=\"hljs-subst\">${config.label}\u003C/span></label>\n                <div class="date-range-container">\n                    <input type="date" \n                           class="date-start" \n                           data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>">\n                    <span class="date-separator">to</span>\n                    <input type="date" \n                           class="date-end" \n                           data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>">\n                </div>\n            </div>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getOperatorLabel\u003C/span>(\u003Cspan class=\"hljs-params\">operator\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> labels = {\n            \u003Cspan class=\"hljs-string\">'equals'\u003C/span>: \u003Cspan class=\"hljs-string\">'Equals'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'contains'\u003C/span>: \u003Cspan class=\"hljs-string\">'Contains'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'startsWith'\u003C/span>: \u003Cspan class=\"hljs-string\">'Starts With'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'endsWith'\u003C/span>: \u003Cspan class=\"hljs-string\">'Ends With'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'greaterThan'\u003C/span>: \u003Cspan class=\"hljs-string\">'Greater Than'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'lessThan'\u003C/span>: \u003Cspan class=\"hljs-string\">'Less Than'\u003C/span>,\n            \u003Cspan class=\"hljs-string\">'regex'\u003C/span>: \u003Cspan class=\"hljs-string\">'Regex Pattern'\u003C/span>\n        };\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> labels[operator] || operator;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">applyAdvancedFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Collect all filter values\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-control'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">control\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> column = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-column]'\u003C/span>)?.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!column) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filterDefinitions\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(column);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!config) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterValue = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractFilterValue\u003C/span>(control, config);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filterValue) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, filterValue);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Apply filters to table\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterTableData\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractFilterValue\u003C/span>(\u003Cspan class=\"hljs-params\">control, config\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (config.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> operator = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-operator'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-value'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> value ? { operator, value } : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> selectValue = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-select'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> selectValue ? { \u003Cspan class=\"hljs-attr\">operator\u003C/span>: \u003Cspan class=\"hljs-string\">'equals'\u003C/span>, \u003Cspan class=\"hljs-attr\">value\u003C/span>: selectValue } : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'multiselect'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> checkedOptions = [...control.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'input[type="checkbox"]:checked'\u003C/span>)]\n                    .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cb\u003C/span> =>\u003C/span> cb.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> checkedOptions.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? { \u003Cspan class=\"hljs-attr\">operator\u003C/span>: \u003Cspan class=\"hljs-string\">'in'\u003C/span>, \u003Cspan class=\"hljs-attr\">value\u003C/span>: checkedOptions } : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'range'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> min = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.range-min'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> max = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.range-max'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (min || max) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                        \u003Cspan class=\"hljs-attr\">operator\u003C/span>: \u003Cspan class=\"hljs-string\">'between'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: { \u003Cspan class=\"hljs-attr\">min\u003C/span>: min || -\u003Cspan class=\"hljs-title class_\">Infinity\u003C/span>, \u003Cspan class=\"hljs-attr\">max\u003C/span>: max || \u003Cspan class=\"hljs-title class_\">Infinity\u003C/span> }\n                    };\n                }\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'daterange'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> startDate = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.date-start'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> endDate = control.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.date-end'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (startDate || endDate) {\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                        \u003Cspan class=\"hljs-attr\">operator\u003C/span>: \u003Cspan class=\"hljs-string\">'dateRange'\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">value\u003C/span>: { \u003Cspan class=\"hljs-attr\">start\u003C/span>: startDate, \u003Cspan class=\"hljs-attr\">end\u003C/span>: endDate }\n                    };\n                }\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">filterTableData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \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\">let\u003C/span> shouldShow = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [column, filter] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>"]`\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell) \u003Cspan class=\"hljs-keyword\">continue\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> operator = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filterOperators\u003C/span>[filter.\u003Cspan class=\"hljs-property\">operator\u003C/span>];\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (operator && !\u003Cspan class=\"hljs-title function_\">operator\u003C/span>(cellValue, filter.\u003Cspan class=\"hljs-property\">value\u003C/span>)) {\n                    shouldShow = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                }\n            }\n            \n            row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = shouldShow ? \u003Cspan class=\"hljs-string\">''\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (shouldShow) visibleCount++;\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilterResults\u003C/span>(visibleCount, rows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateFilterResults\u003C/span>(\u003Cspan class=\"hljs-params\">visible, total\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> resultInfo = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-results-info'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!resultInfo) {\n            resultInfo = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            resultInfo.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-results-info'\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(resultInfo, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (visible === total) {\n            resultInfo.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Showing all \u003Cspan class=\"hljs-subst\">${total}\u003C/span> items`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            resultInfo.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visible}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> items`\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearAllAdvancedFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Reset all filter controls\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-control input'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">input\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (input.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'checkbox'\u003C/span>) {\n                input.\u003Cspan class=\"hljs-property\">checked\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                input.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-control select'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">select\u003C/span> =>\u003C/span> {\n            select.\u003Cspan class=\"hljs-property\">selectedIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Show all rows\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\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        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilterResults\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>, \n                                 \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">saveFilterSet\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterSet = {\n            \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-title function_\">prompt\u003C/span>(\u003Cspan class=\"hljs-string\">'Enter name for this filter set:'\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">filters\u003C/span>: \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">fromEntries\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>),\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>().\u003Cspan class=\"hljs-title function_\">toISOString\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filterSet.\u003Cspan class=\"hljs-property\">name\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> savedSets = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">parse\u003C/span>(\u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">getItem\u003C/span>(\u003Cspan class=\"hljs-string\">'tableFilterSets'\u003C/span>) || \u003Cspan class=\"hljs-string\">'[]'\u003C/span>);\n            savedSets.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(filterSet);\n            \u003Cspan class=\"hljs-variable language_\">localStorage\u003C/span>.\u003Cspan class=\"hljs-title function_\">setItem\u003C/span>(\u003Cspan class=\"hljs-string\">'tableFilterSets'\u003C/span>, \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(savedSets));\n            \n            \u003Cspan class=\"hljs-title function_\">alert\u003C/span>(\u003Cspan class=\"hljs-string\">`Filter set "\u003Cspan class=\"hljs-subst\">${filterSet.name}\u003C/span>" saved successfully!`\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">loadFilterSet\u003C/span>(\u003Cspan class=\"hljs-params\">filterSet\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearAllAdvancedFilters\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Apply saved filters\u003C/span>\n        \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(filterSet.\u003Cspan class=\"hljs-property\">filters\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[column, filter]\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, filter);\n            \u003Cspan class=\"hljs-comment\">// Update UI controls to reflect loaded filters\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilterControlsFromState\u003C/span>(column, filter);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterTableData\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateFilterControlsFromState\u003C/span>(\u003Cspan class=\"hljs-params\">column, filter\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> control = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`.filter-control [data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>"]`\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!control) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> config = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filterDefinitions\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(column);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!config) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Update UI based on filter type and value\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// Implementation would vary based on filter type\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (config.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                control.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-control'\u003C/span>).\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-operator'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = filter.\u003Cspan class=\"hljs-property\">operator\u003C/span>;\n                control.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-control'\u003C/span>).\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-value'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = filter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'select'\u003C/span>:\n                control.\u003Cspan class=\"hljs-property\">value\u003C/span> = filter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-comment\">// Add cases for other filter types...\u003C/span>\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced CSS for advanced filters\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> advancedFilterStyles = \u003Cspan class=\"hljs-string\">`\n.advanced-filters {\n    margin: 20px 0;\n    border: 1px solid #e1e5e9;\n    border-radius: 8px;\n    background-color: #fafbfc;\n}\n\n.filter-header {\n    padding: 15px 20px;\n    border-bottom: 1px solid #e1e5e9;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.filter-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n}\n\n.toggle-filters {\n    padding: 6px 12px;\n    background-color: #f6f8fa;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.filter-panel {\n    padding: 20px;\n}\n\n.filter-controls {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 20px;\n    margin-bottom: 20px;\n}\n\n.filter-group {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.filter-label {\n    font-weight: 500;\n    font-size: 14px;\n    color: #24292f;\n}\n\n.text-filter-container {\n    display: flex;\n    gap: 8px;\n}\n\n.filter-operator {\n    flex: 0 0 auto;\n    width: 120px;\n}\n\n.filter-value {\n    flex: 1;\n}\n\n.range-filter-container {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.range-separator,\n.date-separator {\n    color: #656d76;\n    font-size: 14px;\n}\n\n.multiselect-container {\n    position: relative;\n}\n\n.multiselect-toggle {\n    width: 100%;\n    padding: 8px 12px;\n    background-color: white;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    text-align: left;\n    cursor: pointer;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n\n.multiselect-dropdown {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background-color: white;\n    border: 1px solid #d0d7de;\n    border-top: none;\n    border-radius: 0 0 6px 6px;\n    max-height: 200px;\n    overflow-y: auto;\n    z-index: 10;\n}\n\n.multiselect-option {\n    display: flex;\n    align-items: center;\n    padding: 8px 12px;\n    cursor: pointer;\n    gap: 8px;\n}\n\n.multiselect-option:hover {\n    background-color: #f6f8fa;\n}\n\n.filter-actions {\n    display: flex;\n    gap: 10px;\n    justify-content: flex-end;\n}\n\n.filter-actions button {\n    padding: 8px 16px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.apply-filters {\n    background-color: #2da44e;\n    color: white;\n    border-color: #2da44e;\n}\n\n.apply-filters:hover {\n    background-color: #2c974b;\n}\n\n.filter-results-info {\n    margin: 10px 0;\n    font-size: 14px;\n    color: #656d76;\n    text-align: right;\n}\n\n.priority-badge,\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n    text-transform: uppercase;\n}\n\n.priority-badge.high {\n    background-color: #ffeef0;\n    color: #d1242f;\n}\n\n.priority-badge.medium {\n    background-color: #fff8e1;\n    color: #bf8700;\n}\n\n.priority-badge.low {\n    background-color: #f0f9ff;\n    color: #0969da;\n}\n\n.status-badge.active {\n    background-color: #dcfdf7;\n    color: #059669;\n}\n\n.status-badge.in-development {\n    background-color: #fef3c7;\n    color: #d97706;\n}\n\n.status-badge.completed {\n    background-color: #dcfce7;\n    color: #16a34a;\n}\n\n.status-badge.testing {\n    background-color: #e0e7ff;\n    color: #4338ca;\n}\n\n.status-badge.planning {\n    background-color: #f3f4f6;\n    color: #6b7280;\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject advanced filter styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> styleSheet = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\nstyleSheet.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = advancedFilterStyles;\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(styleSheet);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"server-side-integration-patterns\">Server-Side Integration Patterns\u003C/h2>\n\u003Ch3 id=\"api-based-filtering-and-sorting\">API-Based Filtering and Sorting\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// server-side-integration.js - Backend integration for large datasets\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">ServerSideTableManager\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">apiEndpoint, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">apiEndpoint\u003C/span> = apiEndpoint;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">pageSize\u003C/span>: \u003Cspan class=\"hljs-number\">25\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableServerSort\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableServerFilter\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">cacheResults\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalPages\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalItems\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span> = {};\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = {};\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\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_\">createServerTableUI\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupServerSideEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadInitialData\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createServerTableUI\u003C/span>(\u003Cspan class=\"hljs-params\">\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\">'server-side-table-container'\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <div class="server-table-controls">\n                <div class="search-section">\n                    <input type="text" \n                           id="serverSearch" \n                           class="server-search-input" \n                           placeholder="Search across all data...">\n                    <button id="serverSearchBtn" class="search-button">Search</button>\n                </div>\n                \n                <div class="filter-section">\n                    <select id="serverCategoryFilter" class="server-filter-select">\n                        <option value="">All Categories</option>\n                    </select>\n                    <select id="serverStatusFilter" class="server-filter-select">\n                        <option value="">All Statuses</option>\n                    </select>\n                    <button id="clearServerFilters" class="clear-button">Clear Filters</button>\n                </div>\n                \n                <div class="pagination-info">\n                    <span id="serverPaginationInfo"></span>\n                </div>\n            </div>\n            \n            <div class="server-table-wrapper">\n                <div class="loading-overlay" id="loadingOverlay" style="display: none;">\n                    <div class="loading-spinner"></div>\n                    <span>Loading data...</span>\n                </div>\n                \n                <table class="server-side-table" id="serverTable">\n                    <thead>\n                        <tr>\n                            <th data-column="name" class="sortable-header">\n                                Name\n                                <span class="sort-icon"></span>\n                            </th>\n                            <th data-column="category" class="sortable-header">\n                                Category\n                                <span class="sort-icon"></span>\n                            </th>\n                            <th data-column="status" class="sortable-header">\n                                Status\n                                <span class="sort-icon"></span>\n                            </th>\n                            <th data-column="priority" class="sortable-header">\n                                Priority\n                                <span class="sort-icon"></span>\n                            </th>\n                            <th data-column="date" class="sortable-header">\n                                Date\n                                <span class="sort-icon"></span>\n                            </th>\n                            <th data-column="size" class="sortable-header">\n                                Size\n                                <span class="sort-icon"></span>\n                            </th>\n                        </tr>\n                    </thead>\n                    <tbody id="serverTableBody">\n                    </tbody>\n                </table>\n            </div>\n            \n            <div class="server-pagination" id="serverPagination">\n                <button id="firstPage" class="page-button">First</button>\n                <button id="prevPage" class="page-button">Previous</button>\n                <div class="page-numbers" id="pageNumbers"></div>\n                <button id="nextPage" class="page-button">Next</button>\n                <button id="lastPage" class="page-button">Last</button>\n            </div>\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">body\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(container);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupServerSideEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Search functionality\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverSearch'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverSearchBtn'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> searchTimeout;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">handleSearch\u003C/span> = (\u003Cspan class=\"hljs-params\">\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_\">performSearch\u003C/span>(searchInput.\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\">debounceDelay\u003C/span>);\n        };\n        \n        searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, handleSearch);\n        searchButton.\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_\">performSearch\u003C/span>(searchInput.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\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\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(searchInput.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Sorting functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverTable'\u003C/span>).\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\">const\u003C/span> header = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-title function_\">closest\u003C/span>(\u003Cspan class=\"hljs-string\">'.sortable-header'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleServerSort\u003C/span>(header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Filtering functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverCategoryFilter'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setServerFilter\u003C/span>(\u003Cspan class=\"hljs-string\">'category'\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverStatusFilter'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setServerFilter\u003C/span>(\u003Cspan class=\"hljs-string\">'status'\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'clearServerFilters'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearAllServerFilters\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Pagination functionality\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupPaginationEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupPaginationEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'firstPage'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToPage\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'prevPage'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToPage\u003C/span>(\u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>));\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'nextPage'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToPage\u003C/span>(\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\">totalPages\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>));\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'lastPage'\u003C/span>).\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToPage\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalPages\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadInitialData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">loadFilterOptions\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>(\u003Cspan class=\"hljs-params\">resetPage = \u003Cspan class=\"hljs-literal\">false\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (resetPage) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> = \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> params = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">URLSearchParams\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">page\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">pageSize\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pageSize\u003C/span>,\n            ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>,\n            ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Check cache first\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cacheKey = params.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">cacheResults\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(cacheKey)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cachedData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(cacheKey);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderServerData\u003C/span>(cachedData);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> cachedData;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setLoading\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.apiEndpoint}\u003C/span>?\u003Cspan class=\"hljs-subst\">${params}\u003C/span>`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!response.\u003Cspan class=\"hljs-property\">ok\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">throw\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Error\u003C/span>(\u003Cspan class=\"hljs-string\">`HTTP error! status: \u003Cspan class=\"hljs-subst\">${response.status}\u003C/span>`\u003C/span>);\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Cache the response\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">cacheResults\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(cacheKey, data);\n                \n                \u003Cspan class=\"hljs-comment\">// Limit cache size\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span> > \u003Cspan class=\"hljs-number\">50\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstKey = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">keys\u003C/span>().\u003Cspan class=\"hljs-title function_\">next\u003C/span>().\u003Cspan class=\"hljs-property\">value\u003C/span>;\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(firstKey);\n                }\n            }\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderServerData\u003C/span>(data);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> data;\n            \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Error fetching data:'\u003C/span>, error);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleError\u003C/span>(error);\n        } \u003Cspan class=\"hljs-keyword\">finally\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setLoading\u003C/span>(\u003Cspan class=\"hljs-literal\">false\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderServerData\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverTableBody'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!data.\u003Cspan class=\"hljs-property\">items\u003C/span> || data.\u003Cspan class=\"hljs-property\">items\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            tbody.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                <tr>\n                    <td colspan="6" class="no-data">\n                        No data found matching your criteria.\n                    </td>\n                </tr>\n            `\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updatePagination\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        tbody.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = data.\u003Cspan class=\"hljs-property\">items\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`\n            <tr>\n                <td>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(item.name)}\u003C/span></td>\n                <td>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.escapeHtml(item.category)}\u003C/span></td>\n                <td><span class="status-badge status-\u003Cspan class=\"hljs-subst\">${item.status.toLowerCase().replace(/\\s+/g, \u003Cspan class=\"hljs-string\">'-'\u003C/span>)}\u003C/span>">\u003Cspan class=\"hljs-subst\">${item.status}\u003C/span></span></td>\n                <td><span class="priority-badge priority-\u003Cspan class=\"hljs-subst\">${item.priority}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.formatPriority(item.priority)}\u003C/span></span></td>\n                <td>\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.formatDate(item.date)}\u003C/span></td>\n                <td>\u003Cspan class=\"hljs-subst\">${item.size}\u003C/span> MB</td>\n            </tr>\n        `\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalPages\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(data.\u003Cspan class=\"hljs-property\">total\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pageSize\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalItems\u003C/span> = data.\u003Cspan class=\"hljs-property\">total\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updatePagination\u003C/span>(data.\u003Cspan class=\"hljs-property\">total\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalPages\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updatePagination\u003C/span>(\u003Cspan class=\"hljs-params\">total, currentPage, totalPages\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> paginationInfo = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverPaginationInfo'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> start = total === \u003Cspan class=\"hljs-number\">0\u003C/span> ? \u003Cspan class=\"hljs-number\">0\u003C/span> : (currentPage - \u003Cspan class=\"hljs-number\">1\u003C/span>) * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pageSize\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> end = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(currentPage * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">pageSize\u003C/span>, total);\n        \n        paginationInfo.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${start}\u003C/span>-\u003Cspan class=\"hljs-subst\">${end}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> results`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Update pagination buttons\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'firstPage'\u003C/span>).\u003Cspan class=\"hljs-property\">disabled\u003C/span> = currentPage === \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'prevPage'\u003C/span>).\u003Cspan class=\"hljs-property\">disabled\u003C/span> = currentPage === \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'nextPage'\u003C/span>).\u003Cspan class=\"hljs-property\">disabled\u003C/span> = currentPage === totalPages || totalPages === \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'lastPage'\u003C/span>).\u003Cspan class=\"hljs-property\">disabled\u003C/span> = currentPage === totalPages || totalPages === \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Update page numbers\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderPageNumbers\u003C/span>(currentPage, totalPages);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderPageNumbers\u003C/span>(\u003Cspan class=\"hljs-params\">currentPage, totalPages\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> pageNumbers = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'pageNumbers'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxVisible = \u003Cspan class=\"hljs-number\">5\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> startPage = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, currentPage - \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(maxVisible / \u003Cspan class=\"hljs-number\">2\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> endPage = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(totalPages, startPage + maxVisible - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Adjust start page if we're near the end\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (endPage - startPage + \u003Cspan class=\"hljs-number\">1\u003C/span> < maxVisible) {\n            startPage = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, endPage - maxVisible + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> html = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startPage; i <= endPage; i++) {\n            html += \u003Cspan class=\"hljs-string\">`\n                <button class="page-number \u003Cspan class=\"hljs-subst\">${i === currentPage ? \u003Cspan class=\"hljs-string\">'active'\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>" \n                        data-page="\u003Cspan class=\"hljs-subst\">${i}\u003C/span>">\u003Cspan class=\"hljs-subst\">${i}\u003C/span></button>\n            `\u003C/span>;\n        }\n        \n        pageNumbers.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = html;\n        \n        \u003Cspan class=\"hljs-comment\">// Add click events to page numbers\u003C/span>\n        pageNumbers.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.page-number'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">button\u003C/span> =>\u003C/span> {\n            button.\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\">const\u003C/span> page = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">page\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">goToPage\u003C/span>(page);\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-params\">searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">search\u003C/span> = searchTerm.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">handleServerSort\u003C/span>(\u003Cspan class=\"hljs-params\">column\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span> === column) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span> = column;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">direction\u003C/span> = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">setServerFilter\u003C/span>(\u003Cspan class=\"hljs-params\">filterType, value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">delete\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>[filterType];\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>[filterType] = value;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">clearAllServerFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span> = {};\n        \n        \u003Cspan class=\"hljs-comment\">// Reset UI\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverSearch'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverCategoryFilter'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverStatusFilter'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>(\u003Cspan class=\"hljs-literal\">true\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">goToPage\u003C/span>(\u003Cspan class=\"hljs-params\">page\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (page !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> && page >= \u003Cspan class=\"hljs-number\">1\u003C/span> && page <= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">totalPages\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> = page;\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear all sort indicators\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-icon'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">icon\u003C/span> =>\u003C/span> {\n            icon.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sort-icon'\u003C/span>;\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Set active sort indicator\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentSort.column}\u003C/span>"] .sort-icon`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (header) {\n                header.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`sort-icon active \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.currentSort.direction}\u003C/span>`\u003C/span>;\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">loadFilterOptions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> response = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.apiEndpoint}\u003C/span>/filters`\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterData = \u003Cspan class=\"hljs-keyword\">await\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Populate category filter\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> categoryFilter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverCategoryFilter'\u003C/span>);\n            categoryFilter.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<option value="">All Categories</option>'\u003C/span> +\n                filterData.\u003Cspan class=\"hljs-property\">categories\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cat\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${cat}\u003C/span>">\u003Cspan class=\"hljs-subst\">${cat}\u003C/span></option>`\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Populate status filter\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> statusFilter = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverStatusFilter'\u003C/span>);\n            statusFilter.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'<option value="">All Statuses</option>'\u003C/span> +\n                filterData.\u003Cspan class=\"hljs-property\">statuses\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">status\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`<option value="\u003Cspan class=\"hljs-subst\">${status}\u003C/span>">\u003Cspan class=\"hljs-subst\">${status}\u003C/span></option>`\u003C/span>).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n                \n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (error) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Could not load filter options:'\u003C/span>, error);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setLoading\u003C/span>(\u003Cspan class=\"hljs-params\">isLoading\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">isLoading\u003C/span> = isLoading;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> overlay = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'loadingOverlay'\u003C/span>);\n        overlay.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = isLoading ? \u003Cspan class=\"hljs-string\">'flex'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Disable interactive elements while loading\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.server-table-controls input, .server-table-controls select, .server-table-controls button, .sortable-header'\u003C/span>);\n        controls.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">control\u003C/span> =>\u003C/span> {\n            control.\u003Cspan class=\"hljs-property\">disabled\u003C/span> = isLoading;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isLoading) {\n                control.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">pointerEvents\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                control.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">pointerEvents\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleError\u003C/span>(\u003Cspan class=\"hljs-params\">error\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverTableBody'\u003C/span>);\n        tbody.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            <tr>\n                <td colspan="6" class="error-message">\n                    <div class="error-content">\n                        <strong>Error loading data</strong>\n                        <p>\u003Cspan class=\"hljs-subst\">${error.message}\u003C/span></p>\n                        <button class="retry-button" onclick="this.closest('tr').style.display='none'; location.reload()">\n                            Retry\n                        </button>\n                    </div>\n                </td>\n            </tr>\n        `\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Utility methods\u003C/span>\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    \u003Cspan class=\"hljs-title function_\">formatDate\u003C/span>(\u003Cspan class=\"hljs-params\">dateString\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(dateString).\u003Cspan class=\"hljs-title function_\">toLocaleDateString\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatPriority\u003C/span>(\u003Cspan class=\"hljs-params\">priority\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> priorities = { \u003Cspan class=\"hljs-number\">1\u003C/span>: \u003Cspan class=\"hljs-string\">'High'\u003C/span>, \u003Cspan class=\"hljs-number\">2\u003C/span>: \u003Cspan class=\"hljs-string\">'Medium'\u003C/span>, \u003Cspan class=\"hljs-number\">3\u003C/span>: \u003Cspan class=\"hljs-string\">'Low'\u003C/span> };\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> priorities[priority] || priority;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getCurrentState\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">page\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">filters\u003C/span>: { ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span> },\n            \u003Cspan class=\"hljs-attr\">sort\u003C/span>: { ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> }\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">restoreState\u003C/span>(\u003Cspan class=\"hljs-params\">state\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentPage\u003C/span> = state.\u003Cspan class=\"hljs-property\">page\u003C/span> || \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span> = state.\u003Cspan class=\"hljs-property\">filters\u003C/span> || {};\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = state.\u003Cspan class=\"hljs-property\">sort\u003C/span> || {};\n        \n        \u003Cspan class=\"hljs-comment\">// Update UI to reflect state\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateUIFromState\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fetchData\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateUIFromState\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\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">search\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverSearch'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">search\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">category\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverCategoryFilter'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">category\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">status\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'serverStatusFilter'\u003C/span>).\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFilters\u003C/span>.\u003Cspan class=\"hljs-property\">status\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearCache\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Server-side styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> serverSideStyles = \u003Cspan class=\"hljs-string\">`\n.server-side-table-container {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;\n    margin: 20px 0;\n}\n\n.server-table-controls {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: center;\n    margin-bottom: 20px;\n    padding: 20px;\n    background-color: #f6f8fa;\n    border-radius: 8px;\n}\n\n.search-section {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n}\n\n.server-search-input {\n    padding: 8px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    font-size: 14px;\n    min-width: 300px;\n}\n\n.search-button,\n.clear-button {\n    padding: 8px 16px;\n    background-color: #2da44e;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.clear-button {\n    background-color: #f6f8fa;\n    color: #24292f;\n    border: 1px solid #d0d7de;\n}\n\n.search-button:hover {\n    background-color: #2c974b;\n}\n\n.clear-button:hover {\n    background-color: #f1f3f4;\n}\n\n.filter-section {\n    display: flex;\n    gap: 10px;\n    align-items: center;\n}\n\n.server-filter-select {\n    padding: 8px 12px;\n    border: 1px solid #d0d7de;\n    border-radius: 6px;\n    font-size: 14px;\n    background-color: white;\n}\n\n.pagination-info {\n    margin-left: auto;\n    font-size: 14px;\n    color: #656d76;\n}\n\n.server-table-wrapper {\n    position: relative;\n    overflow-x: auto;\n    border: 1px solid #d0d7de;\n    border-radius: 8px;\n}\n\n.loading-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(255, 255, 255, 0.9);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    z-index: 10;\n    gap: 15px;\n}\n\n.loading-spinner {\n    width: 32px;\n    height: 32px;\n    border: 3px solid #f3f4f6;\n    border-top: 3px solid #2da44e;\n    border-radius: 50%;\n    animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n.server-side-table {\n    width: 100%;\n    border-collapse: collapse;\n    background-color: white;\n}\n\n.server-side-table th,\n.server-side-table td {\n    padding: 12px;\n    text-align: left;\n    border-bottom: 1px solid #e1e5e9;\n}\n\n.server-side-table th {\n    background-color: #f6f8fa;\n    font-weight: 600;\n    position: relative;\n}\n\n.sortable-header {\n    cursor: pointer;\n    user-select: none;\n    padding-right: 30px;\n}\n\n.sortable-header:hover {\n    background-color: #f1f3f4;\n}\n\n.sort-icon {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    opacity: 0.3;\n    font-size: 12px;\n}\n\n.sort-icon.active {\n    opacity: 1;\n}\n\n.sort-icon.asc::after {\n    content: "▲";\n}\n\n.sort-icon.desc::after {\n    content: "▼";\n}\n\n.sort-icon:not(.active)::after {\n    content: "↕";\n}\n\n.server-pagination {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 8px;\n    margin-top: 20px;\n    padding: 20px;\n}\n\n.page-button,\n.page-number {\n    padding: 8px 12px;\n    border: 1px solid #d0d7de;\n    background-color: white;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.page-button:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-number.active {\n    background-color: #2da44e;\n    color: white;\n    border-color: #2da44e;\n}\n\n.page-button:hover:not(:disabled),\n.page-number:hover:not(.active) {\n    background-color: #f6f8fa;\n}\n\n.no-data,\n.error-message {\n    text-align: center;\n    padding: 40px;\n    color: #656d76;\n    font-style: italic;\n}\n\n.error-content {\n    display: flex;\n    flex-direction: column;\n    gap: 10px;\n    align-items: center;\n}\n\n.retry-button {\n    padding: 8px 16px;\n    background-color: #2da44e;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    cursor: pointer;\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject server-side styles\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> serverStyleSheet = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\nserverStyleSheet.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = serverSideStyles;\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(serverStyleSheet);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-static-site-generators\">Integration with Static Site Generators\u003C/h2>\n\u003Cp>Interactive table functionality integrates seamlessly with comprehensive documentation systems. When combined with \u003Ca href=\"/blog/markdown-navigation-menus-site-structure-complete-guide\">navigation menu structures and site organization\u003C/a>, dynamic filtering and sorting enable sophisticated content discovery experiences that scale effectively with growing documentation repositories.\u003C/p>\n\u003Cp>For advanced content presentation, interactive tables work effectively with \u003Ca href=\"/blog/markdown-custom-css-classes-styling-complete-guide\">custom CSS styling frameworks\u003C/a> to create branded documentation interfaces that maintain consistent visual identity while providing powerful data manipulation capabilities that enhance user engagement and information accessibility.\u003C/p>\n\u003Cp>When building comprehensive content management systems, table interactivity complements \u003Ca href=\"/blog/markdown-performance-optimization-rendering-speed-guide\">performance optimization strategies\u003C/a> by implementing efficient client-side processing that reduces server load while maintaining responsive user experiences across different device types and connection speeds.\u003C/p>\n\u003Ch3 id=\"jekyll-integration-example\">Jekyll Integration Example\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/interactive-table.html - Jekyll template for interactive tables -->\n<div class="interactive-table-container" data-table-config='{{ include.config | jsonify }}'>\n    {% if include.search %}\n    <div class="table-controls">\n        <input type="text" class="table-search" placeholder="Search {{ include.title | default: 'table' }}...">\n        {% if include.filters %}\n        <div class="table-filters">\n            {% for filter in include.filters %}\n            <select class="table-filter" data-column="{{ filter.column }}">\n                <option value="">All {{ filter.label }}</option>\n                {% for option in filter.options %}\n                <option value="{{ option.value | default: option }}">{{ option.label | default: option }}</option>\n                {% endfor %}\n            </select>\n            {% endfor %}\n        </div>\n        {% endif %}\n        <button class="clear-filters">Clear Filters</button>\n    </div>\n    {% endif %}\n    \n    <div class="table-wrapper">\n        <table class="interactive-table">\n            <thead>\n                <tr>\n                    {% for header in include.headers %}\n                    <th data-column="{{ header.key }}" \n                        data-type="{{ header.type | default: 'string' }}" \n                        {% if header.sortable != false %}class="sortable"{% endif %}>\n                        {{ header.label | default: header.key }}\n                        {% if header.sortable != false %}\n                        <span class="sort-indicator"></span>\n                        {% endif %}\n                    </th>\n                    {% endfor %}\n                </tr>\n            </thead>\n            <tbody>\n                {% for row in include.data %}\n                <tr>\n                    {% for header in include.headers %}\n                    <td data-column="{{ header.key }}">\n                        {% assign cell_value = row[header.key] %}\n                        {% case header.type %}\n                        {% when 'date' %}\n                            {{ cell_value | date: "%B %d, %Y" }}\n                        {% when 'currency' %}\n                            ${{ cell_value | round: 2 }}\n                        {% when 'boolean' %}\n                            {% if cell_value %}✅{% else %}❌{% endif %}\n                        {% when 'link' %}\n                            <a href="{{ cell_value.url }}" {% if cell_value.external %}target="_blank" rel="noopener"{% endif %}>\n                                {{ cell_value.text | default: cell_value.url }}\n                            </a>\n                        {% when 'badge' %}\n                            <span class="badge badge-{{ cell_value | slugify }}">{{ cell_value }}</span>\n                        {% else %}\n                            {{ cell_value }}\n                        {% endcase %}\n                    </td>\n                    {% endfor %}\n                </tr>\n                {% endfor %}\n            </tbody>\n        </table>\n    </div>\n    \n    {% if include.pagination %}\n    <div class="table-pagination">\n        <div class="pagination-info">\n            <span class="results-count"></span>\n        </div>\n        <div class="pagination-controls">\n            <button class="page-btn" data-page="first">First</button>\n            <button class="page-btn" data-page="prev">Previous</button>\n            <div class="page-numbers"></div>\n            <button class="page-btn" data-page="next">Next</button>\n            <button class="page-btn" data-page="last">Last</button>\n        </div>\n    </div>\n    {% endif %}\n</div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    // Initialize interactive tables\n    document.querySelectorAll('.interactive-table-container').forEach(container => {\n        const config = JSON.parse(container.dataset.tableConfig || '{}');\n        new InteractiveTable(container.querySelector('.interactive-table'), config);\n    });\n});\n</script>\n\u003C/code>\u003C/pre>\u003Ch3 id=\"hugo-shortcode-implementation\">Hugo Shortcode Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-go\">{{\u003Cspan class=\"hljs-comment\">/* layouts/shortcodes/interactive-table.html - Hugo shortcode for interactive tables */\u003C/span>}}\n{{ $data := .Get \u003Cspan class=\"hljs-string\">"data"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> (.Get \u003Cspan class=\"hljs-number\">0\u003C/span>) }}\n{{ $headers := .Get \u003Cspan class=\"hljs-string\">"headers"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">""\u003C/span> }}\n{{ $searchable := .Get \u003Cspan class=\"hljs-string\">"searchable"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n{{ $sortable := .Get \u003Cspan class=\"hljs-string\">"sortable"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n{{ $filterable := .Get \u003Cspan class=\"hljs-string\">"filterable"\u003C/span> | \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-string\">"false"\u003C/span> }}\n\n{{ $tableId := printf \u003Cspan class=\"hljs-string\">"table_%d"\u003C/span> (now.Unix) }}\n{{ $tableData := index .Site.Data $data }}\n\n<div class=\u003Cspan class=\"hljs-string\">"hugo-interactive-table"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $tableId }}_container"\u003C/span>>\n    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $searchable \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n    <div class=\u003Cspan class=\"hljs-string\">"table-controls"\u003C/span>>\n        <input \u003Cspan class=\"hljs-keyword\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n               class=\u003Cspan class=\"hljs-string\">"global-search"\u003C/span> \n               placeholder=\u003Cspan class=\"hljs-string\">"Search table..."\u003C/span> \n               data-table=\u003Cspan class=\"hljs-string\">"{{ $tableId }}"\u003C/span>>\n        \n        {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $filterable \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n        <div class=\u003Cspan class=\"hljs-string\">"filter-controls"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $tableId }}_filters"\u003C/span>>\n            <!-- Filters will be populated by JavaScript -->\n        </div>\n        {{ end }}\n        \n        <div class=\u003Cspan class=\"hljs-string\">"table-info"\u003C/span>>\n            <span class=\u003Cspan class=\"hljs-string\">"row-count"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $tableId }}_count"\u003C/span>></span>\n        </div>\n    </div>\n    {{ end }}\n    \n    <table class=\u003Cspan class=\"hljs-string\">"interactive-data-table"\u003C/span> id=\u003Cspan class=\"hljs-string\">"{{ $tableId }}"\u003C/span>>\n        <thead>\n            <tr>\n                {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $key, $value := (index $tableData \u003Cspan class=\"hljs-number\">0\u003C/span>) }}\n                <th data-column=\u003Cspan class=\"hljs-string\">"{{ $key }}"\u003C/span> \n                    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $sortable \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}class=\u003Cspan class=\"hljs-string\">"sortable-column"\u003C/span>{{ end }}>\n                    {{ humanize $key }}\n                    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> eq $sortable \u003Cspan class=\"hljs-string\">"true"\u003C/span> }}\n                    <span class=\u003Cspan class=\"hljs-string\">"sort-icon"\u003C/span> data-column=\u003Cspan class=\"hljs-string\">"{{ $key }}"\u003C/span>></span>\n                    {{ end }}\n                </th>\n                {{ end }}\n            </tr>\n        </thead>\n        <tbody>\n            {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $tableData }}\n            <tr>\n                {{ \u003Cspan class=\"hljs-keyword\">range\u003C/span> $key, $value := . }}\n                <td data-column=\u003Cspan class=\"hljs-string\">"{{ $key }}"\u003C/span>>\n                    {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> reflect.IsMap $value }}\n                        {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $value.url }}\n                            <a href=\u003Cspan class=\"hljs-string\">"{{ $value.url }}"\u003C/span> \n                               {{ \u003Cspan class=\"hljs-keyword\">if\u003C/span> $value.external }}target=\u003Cspan class=\"hljs-string\">"_blank"\u003C/span> rel=\u003Cspan class=\"hljs-string\">"noopener"\u003C/span>{{ end }}>\n                                {{ $value.text | \u003Cspan class=\"hljs-keyword\">default\u003C/span> $value.url }}\n                            </a>\n                        {{ \u003Cspan class=\"hljs-keyword\">else\u003C/span> }}\n                            {{ $value | jsonify }}\n                        {{ end }}\n                    {{ \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> reflect.IsSlice $value }}\n                        {{ delimit $value \u003Cspan class=\"hljs-string\">", "\u003C/span> }}\n                    {{ \u003Cspan class=\"hljs-keyword\">else\u003C/span> }}\n                        {{ $value }}\n                    {{ end }}\n                </td>\n                {{ end }}\n            </tr>\n            {{ end }}\n        </tbody>\n    </table>\n</div>\n\n<script>\n(function() {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tableId = \u003Cspan class=\"hljs-string\">'{{ $tableId }}'\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> container = document.getElementById(tableId + \u003Cspan class=\"hljs-string\">'_container'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = document.getElementById(tableId);\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (table && typeof InteractiveTable !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n        \u003Cspan class=\"hljs-built_in\">new\u003C/span> InteractiveTable(table, {\n            enableSearch: {{ $searchable }},\n            enableSort: {{ $sortable }},\n            enableFilter: {{ $filterable }},\n            containerId: tableId + \u003Cspan class=\"hljs-string\">'_container'\u003C/span>\n        });\n    }\n})();\n</script>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"performance-considerations-and-optimization\">Performance Considerations and Optimization\u003C/h2>\n\u003Ch3 id=\"memory-management-for-large-datasets\">Memory Management for Large Datasets\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// performance-optimized-table.js - Memory-efficient table handling\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceOptimizedTable\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = tableElement;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">virtualScrolling\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">lazyLoading\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxVisibleRows\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">20\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableWorker\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleData\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportStart\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportEnd\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-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_\">setupVirtualScrolling\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">initializeWorker\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupEventListeners\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrolling\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create virtual scrolling container\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scroll-container'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">'400px'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflowY\u003C/span> = \u003Cspan class=\"hljs-string\">'auto'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create virtual content\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualContent\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-content'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Move table into virtual container\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualContent\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Setup scroll event with throttling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> scrollTimeout;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(scrollTimeout);\n            scrollTimeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleVirtualScroll\u003C/span>();\n            }, \u003Cspan class=\"hljs-number\">16\u003C/span>); \u003Cspan class=\"hljs-comment\">// ~60fps\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">initializeWorker\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableWorker\u003C/span> || !\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Worker\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> workerScript = \u003Cspan class=\"hljs-string\">`\n            self.onmessage = function(e) {\n                const { type, data, options } = e.data;\n                \n                switch (type) {\n                    case 'FILTER_DATA':\n                        const filtered = filterData(data.items, data.filters, options);\n                        self.postMessage({ type: 'FILTER_RESULT', data: filtered });\n                        break;\n                        \n                    case 'SORT_DATA':\n                        const sorted = sortData(data.items, data.column, data.direction, data.type);\n                        self.postMessage({ type: 'SORT_RESULT', data: sorted });\n                        break;\n                        \n                    case 'SEARCH_DATA':\n                        const searchResult = searchData(data.items, data.query, options);\n                        self.postMessage({ type: 'SEARCH_RESULT', data: searchResult });\n                        break;\n                }\n            };\n            \n            function filterData(items, filters, options) {\n                return items.filter(item => {\n                    for (const [column, filter] of Object.entries(filters)) {\n                        const value = String(item[column] || '').toLowerCase();\n                        const filterValue = String(filter).toLowerCase();\n                        \n                        if (!value.includes(filterValue)) {\n                            return false;\n                        }\n                    }\n                    return true;\n                });\n            }\n            \n            function sortData(items, column, direction, type) {\n                return items.sort((a, b) => {\n                    let aVal = a[column];\n                    let bVal = b[column];\n                    \n                    switch (type) {\n                        case 'number':\n                            aVal = parseFloat(aVal) || 0;\n                            bVal = parseFloat(bVal) || 0;\n                            break;\n                        case 'date':\n                            aVal = new Date(aVal);\n                            bVal = new Date(bVal);\n                            break;\n                        default:\n                            aVal = String(aVal).toLowerCase();\n                            bVal = String(bVal).toLowerCase();\n                    }\n                    \n                    let comparison = 0;\n                    if (aVal < bVal) comparison = -1;\n                    if (aVal > bVal) comparison = 1;\n                    \n                    return direction === 'desc' ? -comparison : comparison;\n                });\n            }\n            \n            function searchData(items, query, options) {\n                const searchTerm = query.toLowerCase();\n                return items.filter(item => {\n                    const searchableText = Object.values(item).join(' ').toLowerCase();\n                    return searchableText.includes(searchTerm);\n                });\n            }\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> blob = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([workerScript], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'application/javascript'\u003C/span> });\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span>(\u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(blob));\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-property\">onmessage\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleWorkerMessage\u003C/span>(e.\u003Cspan class=\"hljs-property\">data\u003C/span>);\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span> = data;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [...data];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualScroll\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleVirtualScroll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerHeight = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\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\">// Estimated row height\u003C/span>\n        \n        \u003Cspan class=\"hljs-comment\">// Calculate visible range\u003C/span>\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            startIndex + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(containerHeight / rowHeight) + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span>,\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n        );\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportStart\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, startIndex - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportEnd\u003C/span> = endIndex;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateScrollerHeight\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportStart\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportEnd\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Create row HTML\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowsHTML = visibleRows.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> actualIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportStart\u003C/span> + index;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, value]\u003C/span>) =>\u003C/span> \n                \u003Cspan class=\"hljs-string\">`<td data-column="\u003Cspan class=\"hljs-subst\">${key}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.formatCellValue(key, value)}\u003C/span></td>`\u003C/span>\n            ).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<tr data-index="\u003Cspan class=\"hljs-subst\">${actualIndex}\u003C/span>" style="transform: translateY(\u003Cspan class=\"hljs-subst\">${actualIndex * \u003Cspan class=\"hljs-number\">40\u003C/span>}\u003C/span>px)">\u003Cspan class=\"hljs-subst\">${cells}\u003C/span></tr>`\u003C/span>;\n        }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        tbody.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = rowsHTML;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateScrollerHeight\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalHeight = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> * \u003Cspan class=\"hljs-number\">40\u003C/span>; \u003Cspan class=\"hljs-comment\">// Estimated total height\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">virtualContent\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${totalHeight}\u003C/span>px`\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Chunked data processing for large datasets\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">processLargeDataset\u003C/span>(\u003Cspan class=\"hljs-params\">data, operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunks = [];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> chunkSize = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < data.\u003Cspan class=\"hljs-property\">length\u003C/span>; i += chunkSize) {\n            chunks.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(data.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(i, i + chunkSize));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = [];\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> chunk \u003Cspan class=\"hljs-keyword\">of\u003C/span> chunks) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processChunk\u003C/span>(chunk, operation);\n            results.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(...result);\n            \n            \u003Cspan class=\"hljs-comment\">// Yield control to prevent UI blocking\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">resolve\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(resolve, \u003Cspan class=\"hljs-number\">0\u003C/span>));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">processChunk\u003C/span>(\u003Cspan class=\"hljs-params\">chunk, operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">resolve\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>) {\n                \u003Cspan class=\"hljs-comment\">// Use web worker for processing\u003C/span>\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">postMessage\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: operation.\u003Cspan class=\"hljs-property\">type\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: { \u003Cspan class=\"hljs-attr\">items\u003C/span>: chunk, ...operation.\u003Cspan class=\"hljs-property\">data\u003C/span> },\n                    \u003Cspan class=\"hljs-attr\">options\u003C/span>: operation.\u003Cspan class=\"hljs-property\">options\u003C/span> || {}\n                });\n                \n                \u003Cspan class=\"hljs-comment\">// Worker will handle the response\u003C/span>\n                \u003Cspan class=\"hljs-title function_\">resolve\u003C/span>([]);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Fallback to main thread processing\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processChunkSync\u003C/span>(chunk, operation);\n                \u003Cspan class=\"hljs-title function_\">resolve\u003C/span>(result);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processChunkSync\u003C/span>(\u003Cspan class=\"hljs-params\">chunk, operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (operation.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'FILTER_DATA'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> chunk.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [column, filter] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(operation.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>)) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(item[column] || \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterValue = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(filter).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                        \n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!value.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filterValue)) {\n                            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                        }\n                    }\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                });\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'SEARCH_DATA'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchTerm = operation.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">query\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> chunk.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">item\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchableText = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(item).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">' '\u003C/span>).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> searchableText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(searchTerm);\n                });\n                \n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> chunk;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleWorkerMessage\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (message.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'FILTER_RESULT'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'SORT_RESULT'\u003C/span>:\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'SEARCH_RESULT'\u003C/span>:\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = message.\u003Cspan class=\"hljs-property\">data\u003C/span>;\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualScroll\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">async\u003C/span> \u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\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\">chunkSize\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-keyword\">await\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processLargeDataset\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'SEARCH_DATA'\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: { query }\n            });\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">postMessage\u003C/span>({\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'SEARCH_DATA'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: { \u003Cspan class=\"hljs-attr\">items\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span>, query }\n                });\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processChunkSync\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span>, {\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'SEARCH_DATA'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">data\u003C/span>: { query }\n                });\n            }\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualScroll\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateVirtualScroll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrolling\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleVirtualScroll\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderAllRows\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderAllRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowsHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\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 = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, value]\u003C/span>) =>\u003C/span> \n                \u003Cspan class=\"hljs-string\">`<td data-column="\u003Cspan class=\"hljs-subst\">${key}\u003C/span>">\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.formatCellValue(key, value)}\u003C/span></td>`\u003C/span>\n            ).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">`<tr data-index="\u003Cspan class=\"hljs-subst\">${index}\u003C/span>">\u003Cspan class=\"hljs-subst\">${cells}\u003C/span></tr>`\u003C/span>;\n        }).\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n        \n        tbody.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = rowsHTML;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">formatCellValue\u003C/span>(\u003Cspan class=\"hljs-params\">column, value\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Implement cell formatting logic\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Memory management\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>.\u003Cspan class=\"hljs-title function_\">terminate\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Clear data references\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleData\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Remove event listeners\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleVirtualScroll\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Performance monitoring\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getPerformanceMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">totalRows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span>?.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">filteredRows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>?.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">visibleRows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportEnd\u003C/span> - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportStart\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">memoryUsage\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">isUsingWorker\u003C/span>: !!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">worker\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">isVirtualScrolling\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScrolling\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">estimateMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Rough estimation of memory usage\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataSize = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allData\u003C/span> || []).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filteredSize = \u003Cspan class=\"hljs-title class_\">JSON\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringify\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> || []).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">totalData\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.round(dataSize / \u003Cspan class=\"hljs-number\">1024\u003C/span>)}\u003C/span>KB`\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">filteredData\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-built_in\">Math\u003C/span>.round(filteredSize / \u003Cspan class=\"hljs-number\">1024\u003C/span>)}\u003C/span>KB`\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">estimated\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Performance monitoring utility\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">TablePerformanceMonitor\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">renderTimes\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">searchTimes\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">filterTimes\u003C/span>: [],\n            \u003Cspan class=\"hljs-attr\">sortTimes\u003C/span>: []\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">startMeasurement\u003C/span>(\u003Cspan class=\"hljs-params\">operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            operation,\n            \u003Cspan class=\"hljs-attr\">startTime\u003C/span>: performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">startMemory\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span> ? performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">endMeasurement\u003C/span>(\u003Cspan class=\"hljs-params\">measurement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endTime = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> endMemory = performance.\u003Cspan class=\"hljs-property\">memory\u003C/span> ? performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = {\n            \u003Cspan class=\"hljs-attr\">operation\u003C/span>: measurement.\u003Cspan class=\"hljs-property\">operation\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">duration\u003C/span>: endTime - measurement.\u003Cspan class=\"hljs-property\">startTime\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">memoryDelta\u003C/span>: endMemory - measurement.\u003Cspan class=\"hljs-property\">startMemory\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">timestamp\u003C/span>: \u003Cspan class=\"hljs-title class_\">Date\u003C/span>.\u003Cspan class=\"hljs-title function_\">now\u003C/span>()\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>[measurement.\u003Cspan class=\"hljs-property\">operation\u003C/span> + \u003Cspan class=\"hljs-string\">'Times'\u003C/span>].\u003Cspan class=\"hljs-title function_\">push\u003C/span>(result);\n        \n        \u003Cspan class=\"hljs-comment\">// Keep only last 100 measurements\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>[measurement.\u003Cspan class=\"hljs-property\">operation\u003C/span> + \u003Cspan class=\"hljs-string\">'Times'\u003C/span>].\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">100\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>[measurement.\u003Cspan class=\"hljs-property\">operation\u003C/span> + \u003Cspan class=\"hljs-string\">'Times'\u003C/span>].\u003Cspan class=\"hljs-title function_\">shift\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getAveragePerformance\u003C/span>(\u003Cspan class=\"hljs-params\">operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> times = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>[operation + \u003Cspan class=\"hljs-string\">'Times'\u003C/span>] || [];\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (times.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgDuration = times.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, t\u003C/span>) =>\u003C/span> sum + t.\u003Cspan class=\"hljs-property\">duration\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>) / times.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> avgMemory = times.\u003Cspan class=\"hljs-title function_\">reduce\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">sum, t\u003C/span>) =>\u003C/span> sum + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">abs\u003C/span>(t.\u003Cspan class=\"hljs-property\">memoryDelta\u003C/span>), \u003Cspan class=\"hljs-number\">0\u003C/span>) / times.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            operation,\n            \u003Cspan class=\"hljs-attr\">averageDuration\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(avgDuration * \u003Cspan class=\"hljs-number\">100\u003C/span>) / \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">averageMemoryDelta\u003C/span>: \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">round\u003C/span>(avgMemory / \u003Cspan class=\"hljs-number\">1024\u003C/span>), \u003Cspan class=\"hljs-comment\">// KB\u003C/span>\n            \u003Cspan class=\"hljs-attr\">sampleCount\u003C/span>: times.\u003Cspan class=\"hljs-property\">length\u003C/span>\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generatePerformanceReport\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> operations = [\u003Cspan class=\"hljs-string\">'render'\u003C/span>, \u003Cspan class=\"hljs-string\">'search'\u003C/span>, \u003Cspan class=\"hljs-string\">'filter'\u003C/span>, \u003Cspan class=\"hljs-string\">'sort'\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> report = {};\n        \n        operations.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">op\u003C/span> =>\u003C/span> {\n            report[op] = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAveragePerformance\u003C/span>(op);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> report;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-implementation-issues\">Troubleshooting Common Implementation Issues\u003C/h2>\n\u003Ch3 id=\"browser-compatibility-problems\">Browser Compatibility Problems\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Interactive features not working in older browsers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// browser-compatibility.js - Cross-browser compatibility layer\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">CompatibilityLayer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-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_\">polyfillIntersectionObserver\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">polyfillCustomEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">polyfillArrayMethods\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleIECompatibility\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">polyfillIntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">IntersectionObserver\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Fallback for lazy loading\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">IntersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">callback, options\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observe\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n                    \u003Cspan class=\"hljs-comment\">// Simple visibility check fallback\u003C/span>\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">checkVisibility\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = element.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isVisible = rect.\u003Cspan class=\"hljs-property\">top\u003C/span> < \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">innerHeight\u003C/span> && rect.\u003Cspan class=\"hljs-property\">bottom\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                        \n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isVisible) {\n                            \u003Cspan class=\"hljs-title function_\">callback\u003C/span>([{\n                                \u003Cspan class=\"hljs-attr\">target\u003C/span>: element,\n                                \u003Cspan class=\"hljs-attr\">isIntersecting\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n                            }]);\n                        }\n                    };\n                    \n                    \u003Cspan class=\"hljs-comment\">// Check on scroll\u003C/span>\n                    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, checkVisibility);\n                    \u003Cspan class=\"hljs-title function_\">checkVisibility\u003C/span>(); \u003Cspan class=\"hljs-comment\">// Initial check\u003C/span>\n                };\n                \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">disconnect\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n                    \u003Cspan class=\"hljs-comment\">// Cleanup would go here\u003C/span>\n                };\n            };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">polyfillCustomEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">CustomEvent\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-params\">event, params\u003C/span>) {\n                params = params || { \u003Cspan class=\"hljs-attr\">bubbles\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, \u003Cspan class=\"hljs-attr\">cancelable\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, \u003Cspan class=\"hljs-attr\">detail\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span> };\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> evt = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'CustomEvent'\u003C/span>);\n                evt.\u003Cspan class=\"hljs-title function_\">initCustomEvent\u003C/span>(event, params.\u003Cspan class=\"hljs-property\">bubbles\u003C/span>, params.\u003Cspan class=\"hljs-property\">cancelable\u003C/span>, params.\u003Cspan class=\"hljs-property\">detail\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> evt;\n            }\n            \n            \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span> = \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">Event\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">CustomEvent\u003C/span> = \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">polyfillArrayMethods\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Array.from polyfill\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">from\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">from\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">arrayLike, mapFn, thisArg\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> items = \u003Cspan class=\"hljs-title class_\">Object\u003C/span>(arrayLike);\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> len = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(items.\u003Cspan class=\"hljs-property\">length\u003C/span>) || \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>(len);\n                \n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < len; i++) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i \u003Cspan class=\"hljs-keyword\">in\u003C/span> items) {\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (mapFn) {\n                            result[i] = mapFn.\u003Cspan class=\"hljs-title function_\">call\u003C/span>(thisArg, items[i], i);\n                        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                            result[i] = items[i];\n                        }\n                    }\n                }\n                \n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n            };\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Array.includes polyfill\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>.\u003Cspan class=\"hljs-property\">includes\u003C/span>) {\n            \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>.\u003Cspan class=\"hljs-property\">includes\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">searchElement\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(searchElement) !== -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n            };\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleIECompatibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Check if IE\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> isIE = navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(\u003Cspan class=\"hljs-string\">'MSIE'\u003C/span>) !== -\u003Cspan class=\"hljs-number\">1\u003C/span> || \n                   navigator.\u003Cspan class=\"hljs-property\">userAgent\u003C/span>.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(\u003Cspan class=\"hljs-string\">'Trident/'\u003C/span>) !== -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isIE) {\n            \u003Cspan class=\"hljs-comment\">// Add IE-specific handling\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">documentElement\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> += \u003Cspan class=\"hljs-string\">' ie-browser'\u003C/span>;\n            \n            \u003Cspan class=\"hljs-comment\">// Object.assign polyfill\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-property\">assign\u003C/span>) {\n                \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-property\">assign\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">target\u003C/span>) {\n                    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i < \u003Cspan class=\"hljs-variable language_\">arguments\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n                        \u003Cspan class=\"hljs-keyword\">const\u003C/span> source = \u003Cspan class=\"hljs-variable language_\">arguments\u003C/span>[i];\n                        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> key \u003Cspan class=\"hljs-keyword\">in\u003C/span> source) {\n                            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>.\u003Cspan class=\"hljs-property\">hasOwnProperty\u003C/span>.\u003Cspan class=\"hljs-title function_\">call\u003C/span>(source, key)) {\n                                target[key] = source[key];\n                            }\n                        }\n                    }\n                    \u003Cspan class=\"hljs-keyword\">return\u003C/span> target;\n                };\n            }\n        }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Fallback for modern features\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">createCompatibleEventListener\u003C/span>(\u003Cspan class=\"hljs-params\">element, event, handler, options\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element.\u003Cspan class=\"hljs-property\">addEventListener\u003C/span>) {\n            element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(event, handler, options);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element.\u003Cspan class=\"hljs-property\">attachEvent\u003C/span>) {\n            element.\u003Cspan class=\"hljs-title function_\">attachEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'on'\u003C/span> + event, handler);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCompatibleQuerySelector\u003C/span>(\u003Cspan class=\"hljs-params\">selector\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">querySelectorAll\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(selector);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Fallback for very old browsers\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> elements = [];\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> allElements = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementsByTagName\u003C/span>(\u003Cspan class=\"hljs-string\">'*'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">0\u003C/span>; i < allElements.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n                \u003Cspan class=\"hljs-comment\">// Simple class selector fallback\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (selector.\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(\u003Cspan class=\"hljs-string\">'.'\u003C/span>)) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> className = selector.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allElements[i].\u003Cspan class=\"hljs-property\">className\u003C/span>.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(className) !== -\u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                        elements.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(allElements[i]);\n                    }\n                }\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> elements;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getCompatibleStyles\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">getComputedStyle\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">getComputedStyle\u003C/span>(element);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element.\u003Cspan class=\"hljs-property\">currentStyle\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> element.\u003Cspan class=\"hljs-property\">currentStyle\u003C/span>;\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {};\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize compatibility layer\u003C/span>\n\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CompatibilityLayer\u003C/span>();\n\u003C/code>\u003C/pre>\u003Ch3 id=\"performance-issues-with-large-tables\">Performance Issues with Large Tables\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Browser becomes unresponsive with large datasets\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// performance-solutions.js - Solutions for large table performance\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">LargeTableOptimizer\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">table, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = table;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">maxRowsBeforeVirtualization\u003C/span>: \u003Cspan class=\"hljs-number\">1000\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">useWebWorkers\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableProgressiveLoading\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">100\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-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_\">determineOptimizationStrategy\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">determineOptimizationStrategy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowCount = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowCount > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxRowsBeforeVirtualization\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementVirtualization\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (rowCount > \u003Cspan class=\"hljs-number\">500\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementProgressiveLoading\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">implementBasicOptimizations\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementVirtualization\u003C/span>(\u003Cspan class=\"hljs-params\">\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 large dataset'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Convert table to virtual scrolling\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> virtualContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        virtualContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-container'\u003C/span>;\n        virtualContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">'500px'\u003C/span>;\n        virtualContainer.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'auto'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(virtualContainer, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        virtualContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Implement virtual scrolling logic\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupVirtualScrolling\u003C/span>(virtualContainer);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementProgressiveLoading\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Implementing progressive loading'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \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        allRows.\u003Cspan class=\"hljs-title function_\">forEach\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        \n        \u003Cspan class=\"hljs-comment\">// Show rows progressively\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> currentIndex = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">showNextChunk\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\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>(currentIndex + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>, allRows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = currentIndex; i < endIndex; i++) {\n                allRows[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            }\n            \n            currentIndex = endIndex;\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentIndex < allRows.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(showNextChunk);\n            }\n        };\n        \n        \u003Cspan class=\"hljs-title function_\">showNextChunk\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">implementBasicOptimizations\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Implementing basic optimizations'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Use CSS transforms for better performance\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">willChange\u003C/span> = \u003Cspan class=\"hljs-string\">'transform'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">contain\u003C/span> = \u003Cspan class=\"hljs-string\">'layout style paint'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Optimize reflows\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">tableLayout\u003C/span> = \u003Cspan class=\"hljs-string\">'fixed'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Enable hardware acceleration\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">'translateZ(0)'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setupVirtualScrolling\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> allRows = \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        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHeight = \u003Cspan class=\"hljs-number\">40\u003C/span>; \u003Cspan class=\"hljs-comment\">// Estimated\u003C/span>\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleStart = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleEnd = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\u003Cspan class=\"hljs-number\">50\u003C/span>, allRows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-comment\">// Hide all rows\u003C/span>\n            allRows.\u003Cspan class=\"hljs-title function_\">forEach\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            \n            \u003Cspan class=\"hljs-comment\">// Show only visible rows\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = visibleStart; i < visibleEnd; i++) {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (allRows[i]) {\n                    allRows[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    allRows[i].\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">`translateY(\u003Cspan class=\"hljs-subst\">${i * rowHeight}\u003C/span>px)`\u003C/span>;\n                }\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Set container height\u003C/span>\n            tbody.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${allRows.length * rowHeight}\u003C/span>px`\u003C/span>;\n            tbody.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'relative'\u003C/span>;\n        };\n        \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> scrollTop = container.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerHeight = container.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n            \n            visibleStart = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(scrollTop / rowHeight);\n            visibleEnd = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n                visibleStart + \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(containerHeight / rowHeight) + \u003Cspan class=\"hljs-number\">10\u003C/span>,\n                allRows.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            );\n            \n            \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-title function_\">renderVisibleRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Memory leak prevention\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">cleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Remove event listeners\u003C/span>\n        \u003Cspan class=\"hljs-comment\">// Clear references\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Automatic optimization based on table size\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'DOMContentLoaded'\u003C/span>, \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.interactive-table'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">table\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">LargeTableOptimizer\u003C/span>(table);\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Interactive Markdown table filtering and sorting transforms static documentation into dynamic, user-centric experiences that enhance content discovery and data exploration capabilities. By implementing comprehensive client-side filtering algorithms, server-side integration patterns, and performance optimization strategies, technical teams can create sophisticated documentation systems that scale efficiently while providing engaging user interactions that improve information accessibility and comprehension.\u003C/p>\n\u003Cp>The key to successful interactive table implementation lies in balancing functionality with performance, choosing appropriate optimization strategies based on dataset size, and maintaining accessibility standards that ensure inclusive user experiences. Whether you're building documentation platforms, data visualization tools, or content management systems, the techniques covered in this guide provide the foundation for creating professional interactive table experiences that meet modern user expectations.\u003C/p>\n\u003Cp>Remember to test your implementations across different browsers and devices, implement proper error handling and loading states, and optimize performance based on your specific use case and data characteristics. With proper interactive filtering and sorting implementation, your Markdown-based content systems can deliver rich, dynamic experiences that engage users while maintaining the simplicity and portability that makes Markdown such an effective format for structured content presentation.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-implement-interactive-table-features","Why Implement Interactive Table Features?",2,{"id":20,"text":21,"level":18},"foundation-interactive-table-implementation","Foundation Interactive Table Implementation",{"id":23,"text":24,"level":18},"advanced-filtering-techniques","Advanced Filtering Techniques",{"id":26,"text":27,"level":18},"server-side-integration-patterns","Server-Side Integration Patterns",{"id":29,"text":30,"level":18},"integration-with-static-site-generators","Integration with Static Site Generators",{"id":32,"text":33,"level":18},"performance-considerations-and-optimization","Performance Considerations and Optimization",{"id":35,"text":36,"level":18},"troubleshooting-common-implementation-issues","Troubleshooting Common Implementation Issues",{"id":38,"text":39,"level":18},"conclusion","Conclusion",[],[42,50,58],{"slug":43,"title":44,"description":45,"excerpt":46,"date":47,"category":9,"author":10,"keywords":48,"readingMinutes":49},"markdown-table-sorting-filtering-interactive-guide","Markdown Table Sorting and Filtering: Complete Guide for Interactive Data Tables and Dynamic Content Management","Master advanced table sorting and filtering techniques in Markdown for interactive data presentations. Learn JavaScript integration, CSS styling, component frameworks, and platform-specific implementations for professional data management.","Advanced table sorting and filtering in Markdown enables dynamic data presentations that transform static content into interactive experiences, allowing users to organize, search, and analyze…","2025-09-21","markdown table sorting, interactive markdown tables, table filtering markdown, dynamic tables markdown, sortable markdown tables, table javascript integration, advanced markdown tables, data table markdown",33,{"slug":51,"title":52,"description":53,"excerpt":54,"date":55,"category":9,"author":10,"keywords":56,"readingMinutes":57},"markdown-table-data-filtering-search-complete-guide","Markdown Table Data Filtering and Search: Complete Guide for Interactive Content Discovery and Dynamic Data Navigation","Master table data filtering and search capabilities in Markdown for enhanced content discovery. Learn JavaScript integration, advanced filtering techniques, and responsive search implementations for interactive documentation.","Table data filtering and search capabilities in Markdown enable dynamic content discovery that transforms static tabular information into interactive, searchable interfaces allowing users to…","2025-12-16","markdown table filtering, table search functionality, interactive markdown tables, data filtering markdown, table javascript integration, searchable tables markdown, dynamic table filtering, markdown table navigation",30,{"slug":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":65},"markdown-table-data-formatting-and-styling-complete-guide","Markdown Table Data Formatting and Styling: Complete Guide for Professional Data Presentation","Master advanced Markdown table data formatting techniques for professional presentations, including numeric formatting, data alignment, conditional styling, and responsive design patterns. Create publication-ready data tables with consistent styling.","Advanced Markdown table data formatting and styling enables professional data presentation that transforms raw information into comprehensible, visually appealing tables suitable for reports,…","2025-11-18","markdown table formatting, data presentation markdown, table styling, numeric formatting tables, markdown data visualization, professional table design, responsive markdown tables, table data alignment",16,1792184942782]