[{"data":1,"prerenderedAt":65},["Reactive",2],{"blog-post-markdown-table-data-filtering-search-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-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","Tutorial","Matthew Rathbone","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,"\u003Cp>Table data filtering and search capabilities in Markdown enable dynamic content discovery that transforms static tabular information into interactive, searchable interfaces allowing users to efficiently navigate large datasets, locate specific information, and customize their viewing experience. While standard Markdown tables provide basic data presentation, advanced filtering and search implementations using JavaScript integration, responsive design patterns, and progressive enhancement create sophisticated data exploration tools that maintain accessibility while delivering powerful user interactions.\u003C/p>\n\u003Ch2 id=\"why-implement-table-filtering-and-search\">Why Implement Table Filtering and Search?\u003C/h2>\n\u003Cp>Interactive table capabilities provide essential benefits for content navigation:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Information Discovery\u003C/strong>: Enable users to quickly locate specific data points within large datasets\u003C/li>\n\u003Cli>\u003Cstrong>Content Customization\u003C/strong>: Allow filtering based on user preferences and requirements\u003C/li>\n\u003Cli>\u003Cstrong>Improved Usability\u003C/strong>: Reduce cognitive load by presenting only relevant information\u003C/li>\n\u003Cli>\u003Cstrong>Enhanced Performance\u003C/strong>: Display manageable subsets of data without overwhelming users\u003C/li>\n\u003Cli>\u003Cstrong>Accessibility\u003C/strong>: Maintain keyboard navigation and screen reader compatibility\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-javascript-integration\">Foundation JavaScript Integration\u003C/h2>\n\u003Ch3 id=\"basic-search-implementation\">Basic Search Implementation\u003C/h3>\n\u003Cp>Setting up fundamental search functionality for Markdown tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-search.js - Basic table search implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableSearch\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableSelector, 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_\">querySelector\u003C/span>(tableSelector);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">searchInputId\u003C/span>: \u003Cspan class=\"hljs-string\">'table-search'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">highlightClass\u003C/span>: \u003Cspan class=\"hljs-string\">'search-highlight'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">noResultsMessage\u003C/span>: \u003Cspan class=\"hljs-string\">'No matching records found'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">caseSensitive\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">searchColumns\u003C/span>: \u003Cspan class=\"hljs-string\">'all'\u003C/span>, \u003Cspan class=\"hljs-comment\">// 'all' or array of column indices\u003C/span>\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">debounceTimer\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-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Table not found:'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableSelector\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createSearchInput\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cacheOriginalRows\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createSearchInput\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Create search container\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create search input\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">searchInputId\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-search-input'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Search table data...'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Search table content'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Create search icon\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchIcon = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n        searchIcon.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-icon'\u003C/span>;\n        searchIcon.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'🔍'\u003C/span>;\n        searchIcon.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Create clear button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> clearButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        clearButton.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'button'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-clear'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'✕'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Clear search'\u003C/span>);\n        clearButton.\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\">// Assemble search container\u003C/span>\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchIcon);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(clearButton);\n        \n        \u003Cspan class=\"hljs-comment\">// Insert before 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>(searchContainer, \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-property\">clearButton\u003C/span> = clearButton;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cacheOriginalRows\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\">if\u003C/span> (tbody) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span> = \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>)).\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-attr\">element\u003C/span>: row,\n                \u003Cspan class=\"hljs-attr\">data\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractRowData\u003C/span>(row),\n                \u003Cspan class=\"hljs-attr\">visible\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n            }));\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractRowData\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td, th'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> ({\n            \u003Cspan class=\"hljs-attr\">text\u003C/span>: cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(),\n            \u003Cspan class=\"hljs-attr\">html\u003C/span>: cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span>\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Search input events\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleSearch\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_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\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-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearSearch\u003C/span>();\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Clear button event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">clearButton\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_\">clearSearch\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Show/hide clear button based on input\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">clearButton\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> ? \u003Cspan class=\"hljs-string\">'block'\u003C/span> : \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Clear previous debounce timer\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">debounceTimer\u003C/span>) {\n            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">debounceTimer\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Debounce search execution\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">debounceTimer\u003C/span> = \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>(query);\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    \u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchTerm = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">caseSensitive\u003C/span> ? query : query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!searchTerm.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeNoResultsMessage\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearHighlights\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rowData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">searchInRow\u003C/span>(rowData, searchTerm);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (matches.\u003Cspan class=\"hljs-property\">found\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightMatches\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>, matches.\u003Cspan class=\"hljs-property\">positions\u003C/span>);\n                visibleCount++;\n                rowData.\u003Cspan class=\"hljs-property\">visible\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideRow\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n                rowData.\u003Cspan class=\"hljs-property\">visible\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Handle no results\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (visibleCount === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showNoResultsMessage\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeNoResultsMessage\u003C/span>();\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Emit search event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emitSearchEvent\u003C/span>(searchTerm, visibleCount);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">searchInRow\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = {\n            \u003Cspan class=\"hljs-attr\">found\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">positions\u003C/span>: []\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnsToSearch = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getSearchColumns\u003C/span>();\n        \n        rowData.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, columnIndex\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (columnsToSearch.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(columnIndex)) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellText = cell.\u003Cspan class=\"hljs-property\">text\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> matchIndex = cellText.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(searchTerm);\n                \n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (matchIndex !== -\u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    matches.\u003Cspan class=\"hljs-property\">found\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                    matches.\u003Cspan class=\"hljs-property\">positions\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                        columnIndex,\n                        \u003Cspan class=\"hljs-attr\">startIndex\u003C/span>: matchIndex,\n                        \u003Cspan class=\"hljs-attr\">endIndex\u003C/span>: matchIndex + searchTerm.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                        \u003Cspan class=\"hljs-attr\">originalText\u003C/span>: cellText\n                    });\n                }\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> matches;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getSearchColumns\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\">searchColumns\u003C/span> === \u003Cspan class=\"hljs-string\">'all'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>({\u003Cspan class=\"hljs-attr\">length\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>[\u003Cspan class=\"hljs-number\">0\u003C/span>]?.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> || \u003Cspan class=\"hljs-number\">0\u003C/span>}, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">_, i\u003C/span>) =>\u003C/span> i);\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">searchColumns\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightMatches\u003C/span>(\u003Cspan class=\"hljs-params\">row, positions\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearHighlights\u003C/span>(row);\n        \n        positions.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">position\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-property\">children\u003C/span>[position.\u003Cspan class=\"hljs-property\">columnIndex\u003C/span>];\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">find\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">r\u003C/span> =>\u003C/span> r.\u003Cspan class=\"hljs-property\">element\u003C/span> === row)\n                    .\u003Cspan class=\"hljs-property\">data\u003C/span>[position.\u003Cspan class=\"hljs-property\">columnIndex\u003C/span>].\u003Cspan class=\"hljs-property\">html\u003C/span>;\n                \n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlightedHTML = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">addHighlight\u003C/span>(\n                    originalHTML,\n                    position.\u003Cspan class=\"hljs-property\">startIndex\u003C/span>,\n                    position.\u003Cspan class=\"hljs-property\">endIndex\u003C/span>\n                );\n                \n                cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = highlightedHTML;\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">addHighlight\u003C/span>(\u003Cspan class=\"hljs-params\">html, startIndex, endIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simple text highlighting - in production, use a proper HTML parser\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = html;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, startIndex) +\n               \u003Cspan class=\"hljs-string\">`<mark class="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.highlightClass}\u003C/span>">`\u003C/span> +\n               text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(startIndex, endIndex) +\n               \u003Cspan class=\"hljs-string\">'</mark>'\u003C/span> +\n               text.\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(endIndex);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearHighlights\u003C/span>(\u003Cspan class=\"hljs-params\">specificRow = \u003Cspan class=\"hljs-literal\">null\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = specificRow ? [specificRow] : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">r\u003C/span> =>\u003C/span> r.\u003Cspan class=\"hljs-property\">element\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\">const\u003C/span> highlights = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">`.\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.highlightClass}\u003C/span>`\u003C/span>);\n            highlights.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">highlight\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> parent = highlight.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>;\n                parent.\u003Cspan class=\"hljs-title function_\">replaceChild\u003C/span>(\n                    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextNode\u003C/span>(highlight.\u003Cspan class=\"hljs-property\">textContent\u003C/span>),\n                    highlight\n                );\n                parent.\u003Cspan class=\"hljs-title function_\">normalize\u003C/span>();\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\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        row.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hideRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rowData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n            rowData.\u003Cspan class=\"hljs-property\">visible\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showNoResultsMessage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeNoResultsMessage\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> noResultsRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        noResultsRow.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'no-results-row'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> noResultsCell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n        noResultsCell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'colspan'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getColumnCount\u003C/span>());\n        noResultsCell.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'no-results-message'\u003C/span>;\n        noResultsCell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">noResultsMessage\u003C/span>;\n        \n        noResultsRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(noResultsCell);\n        tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(noResultsRow);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">removeNoResultsMessage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> noResultsRow = \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\">'.no-results-row'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (noResultsRow) {\n            noResultsRow.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getColumnCount\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstRow = \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\">'tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> firstRow ? firstRow.\u003Cspan class=\"hljs-property\">children\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> : \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearSearch\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">clearButton\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-title function_\">showAllRows\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeNoResultsMessage\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearHighlights\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emitSearchEvent\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">emitSearchEvent\u003C/span>(\u003Cspan class=\"hljs-params\">query, resultCount\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'tableSearch'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: {\n                query,\n                resultCount,\n                \u003Cspan class=\"hljs-attr\">totalRows\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">search\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = query;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(query);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">visible\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getSearchStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visible = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>().\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">total\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">visible\u003C/span>: visible,\n            \u003Cspan class=\"hljs-attr\">hidden\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - visible,\n            \u003Cspan class=\"hljs-attr\">searchTerm\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>\n        };\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize search for all tables with search capability\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-comment\">// Auto-initialize tables with data-searchable attribute\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchableTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table[data-searchable]'\u003C/span>);\n    \n    searchableTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">table, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchId = \u003Cspan class=\"hljs-string\">`table-search-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableSearch\u003C/span>(\u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${table.id || table.className}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">searchInputId\u003C/span>: searchId\n        });\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-filtering-system\">Advanced Filtering System\u003C/h3>\n\u003Cp>Implementing comprehensive filtering capabilities with multiple criteria:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// table-filter.js - Advanced filtering system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableFilter\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableSelector, 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_\">querySelector\u003C/span>(tableSelector);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">filterContainerId\u003C/span>: \u003Cspan class=\"hljs-string\">'table-filters'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableColumnFilters\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableGlobalSearch\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableDateFiltering\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableNumberFiltering\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">enableCategoryFiltering\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">filterPosition\u003C/span>: \u003Cspan class=\"hljs-string\">'top'\u003C/span>, \u003Cspan class=\"hljs-comment\">// 'top' or 'bottom'\u003C/span>\n            ...options\n        };\n        \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\">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\">originalRows\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnTypes\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-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">error\u003C/span>(\u003Cspan class=\"hljs-string\">'Table not found'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">analyzeTableStructure\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cacheOriginalData\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createFilterInterface\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindEvents\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">analyzeTableStructure\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \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 tr, tr'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!headerRow) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(headerRow.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th, td'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> firstDataRow = \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 tr, tr:nth-child(2)'\u003C/span>);\n        \n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnName = header.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> sampleData = firstDataRow?.\u003Cspan class=\"hljs-property\">children\u003C/span>[index]?.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnType = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">detectColumnType\u003C/span>(sampleData, columnName);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(index, {\n                \u003Cspan class=\"hljs-attr\">name\u003C/span>: columnName,\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: columnType,\n                \u003Cspan class=\"hljs-attr\">index\u003C/span>: index\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">detectColumnType\u003C/span>(\u003Cspan class=\"hljs-params\">sampleData, columnName\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> name = columnName.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Date detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'date'\u003C/span>) || name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'time'\u003C/span>) || \u003Cspan class=\"hljs-regexp\">/^\\d{4}-\\d{2}-\\d{2}/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(sampleData)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Number detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'price'\u003C/span>) || name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'amount'\u003C/span>) || name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'count'\u003C/span>) ||\n            \u003Cspan class=\"hljs-regexp\">/^[\\$£€]?[\\d,]+\\.?\\d*$/\u003C/span>.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(sampleData.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\d.,\\$£€]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>))) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Status/Category detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'status'\u003C/span>) || name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'category'\u003C/span>) || name.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'type'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'category'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Boolean detection\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> ([\u003Cspan class=\"hljs-string\">'yes'\u003C/span>, \u003Cspan class=\"hljs-string\">'no'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>, \u003Cspan class=\"hljs-string\">'active'\u003C/span>, \u003Cspan class=\"hljs-string\">'inactive'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(sampleData.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>())) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cacheOriginalData\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> rows = tbody ? tbody.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\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\">'tr:not(:first-child)'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(rows).\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-attr\">element\u003C/span>: row,\n            \u003Cspan class=\"hljs-attr\">data\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractRowData\u003C/span>(row),\n            \u003Cspan class=\"hljs-attr\">visible\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">matchesFilters\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n        }));\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">extractRowData\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-property\">children\u003C/span>).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> text = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnInfo = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(index);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">raw\u003C/span>: text,\n                \u003Cspan class=\"hljs-attr\">processed\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">processDataByType\u003C/span>(text, columnInfo?.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>),\n                \u003Cspan class=\"hljs-attr\">type\u003C/span>: columnInfo?.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">processDataByType\u003C/span>(\u003Cspan class=\"hljs-params\">value, type\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                \u003Cspan class=\"hljs-keyword\">const\u003C/span> numValue = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(value.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\d.-]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>));\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(numValue) ? \u003Cspan class=\"hljs-number\">0\u003C/span> : numValue;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> dateValue = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value);\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(dateValue.\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>()) ? \u003Cspan class=\"hljs-literal\">null\u003C/span> : dateValue;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> [\u003Cspan class=\"hljs-string\">'yes'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>, \u003Cspan class=\"hljs-string\">'active'\u003C/span>, \u003Cspan class=\"hljs-string\">'1'\u003C/span>].\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(value.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n            \n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createFilterInterface\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterContainer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createFilterContainer\u003C/span>();\n        \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\">enableGlobalSearch\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createGlobalSearchFilter\u003C/span>(filterContainer);\n        }\n        \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\">enableColumnFilters\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createColumnFilters\u003C/span>(filterContainer);\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createFilterControls\u003C/span>(filterContainer);\n        \n        \u003Cspan class=\"hljs-comment\">// Position filter container\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\">filterPosition\u003C/span> === \u003Cspan class=\"hljs-string\">'bottom'\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>(filterContainer, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">nextSibling\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\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>(filterContainer, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createFilterContainer\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\">id\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">filterContainerId\u003C/span>;\n        container.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'table-filter-container'\u003C/span>;\n        container.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'search'\u003C/span>);\n        container.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Table filtering controls'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createGlobalSearchFilter\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchSection = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchSection.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-section global-search'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchLabel = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'label'\u003C/span>);\n        searchLabel.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Search: '\u003C/span>;\n        searchLabel.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-label'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input global-search-input'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Search all columns...'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Search table content'\u003C/span>);\n        \n        searchLabel.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        searchSection.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchLabel);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchSection);\n        \n        \u003Cspan class=\"hljs-comment\">// Store filter reference\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>(\u003Cspan class=\"hljs-string\">'global-search'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'global-search'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: searchInput,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind search event\u003C/span>\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_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-string\">'global-search'\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createColumnFilters\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filtersSection = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        filtersSection.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-section column-filters'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filtersTitle = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'h4'\u003C/span>);\n        filtersTitle.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Column Filters:'\u003C/span>;\n        filtersTitle.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filters-title'\u003C/span>;\n        filtersSection.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filtersTitle);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filtersGrid = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        filtersGrid.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filters-grid'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">columnInfo, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createColumnFilter\u003C/span>(columnInfo);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filterElement) {\n                filtersGrid.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filterElement);\n            }\n        });\n        \n        filtersSection.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filtersGrid);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filtersSection);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createColumnFilter\u003C/span>(\u003Cspan class=\"hljs-params\">columnInfo\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { name, type, index } = columnInfo;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterWrapper = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        filterWrapper.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">`filter-column filter-\u003Cspan class=\"hljs-subst\">${type}\u003C/span>`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> label = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'label'\u003C/span>);\n        label.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = name + \u003Cspan class=\"hljs-string\">': '\u003C/span>;\n        label.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-label'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> filterElement;\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (type) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'category'\u003C/span>:\n                filterElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createCategoryFilter\u003C/span>(index);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number'\u003C/span>:\n                filterElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createNumberRangeFilter\u003C/span>(index);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n                filterElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDateRangeFilter\u003C/span>(index);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>:\n                filterElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createBooleanFilter\u003C/span>(index);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                filterElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextFilter\u003C/span>(index);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filterElement) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">isArray\u003C/span>(filterElement)) {\n                filterElement.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> label.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(el));\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                label.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(filterElement);\n            }\n            filterWrapper.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(label);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> filterElement ? filterWrapper : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createCategoryFilter\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> uniqueValues = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getUniqueValuesForColumn\u003C/span>(columnIndex);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> select = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'select'\u003C/span>);\n        select.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input category-filter'\u003C/span>;\n        select.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">`Filter by \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.columnTypes.get(columnIndex).name}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Add default option\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> defaultOption = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'option'\u003C/span>);\n        defaultOption.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        defaultOption.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'All'\u003C/span>;\n        select.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(defaultOption);\n        \n        \u003Cspan class=\"hljs-comment\">// Add unique values\u003C/span>\n        uniqueValues.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">value\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> option = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'option'\u003C/span>);\n            option.\u003Cspan class=\"hljs-property\">value\u003C/span> = value;\n            option.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = value;\n            select.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(option);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Store filter reference\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>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'category'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: select,\n            \u003Cspan class=\"hljs-attr\">columnIndex\u003C/span>: columnIndex,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind change event\u003C/span>\n        select.\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_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> select;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createNumberRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> { min, max } = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getNumericRangeForColumn\u003C/span>(columnIndex);\n        \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\">'range-filter-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> minInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        minInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'number'\u003C/span>;\n        minInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input range-min'\u003C/span>;\n        minInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">`Min (\u003Cspan class=\"hljs-subst\">${min}\u003C/span>)`\u003C/span>;\n        minInput.\u003Cspan class=\"hljs-property\">min\u003C/span> = min;\n        minInput.\u003Cspan class=\"hljs-property\">max\u003C/span> = max;\n        minInput.\u003Cspan class=\"hljs-property\">step\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getStepValue\u003C/span>(min, max);\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        maxInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'number'\u003C/span>;\n        maxInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input range-max'\u003C/span>;\n        maxInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">`Max (\u003Cspan class=\"hljs-subst\">${max}\u003C/span>)`\u003C/span>;\n        maxInput.\u003Cspan class=\"hljs-property\">min\u003C/span> = min;\n        maxInput.\u003Cspan class=\"hljs-property\">max\u003C/span> = max;\n        maxInput.\u003Cspan class=\"hljs-property\">step\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getStepValue\u003C/span>(min, max);\n        \n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(minInput);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextNode\u003C/span>(\u003Cspan class=\"hljs-string\">' - '\u003C/span>));\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(maxInput);\n        \n        \u003Cspan class=\"hljs-comment\">// Store filter reference\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>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'number-range'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: { \u003Cspan class=\"hljs-attr\">min\u003C/span>: minInput, \u003Cspan class=\"hljs-attr\">max\u003C/span>: maxInput },\n            \u003Cspan class=\"hljs-attr\">columnIndex\u003C/span>: columnIndex,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: { \u003Cspan class=\"hljs-attr\">min\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-attr\">max\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span> }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind change events\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">updateRange\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> minVal = minInput.\u003Cspan class=\"hljs-property\">value\u003C/span> ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(minInput.\u003Cspan class=\"hljs-property\">value\u003C/span>) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxVal = maxInput.\u003Cspan class=\"hljs-property\">value\u003C/span> ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(maxInput.\u003Cspan class=\"hljs-property\">value\u003C/span>) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, { \u003Cspan class=\"hljs-attr\">min\u003C/span>: minVal, \u003Cspan class=\"hljs-attr\">max\u003C/span>: maxVal });\n        };\n        \n        minInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, updateRange);\n        maxInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>, updateRange);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createDateRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\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\">'date-filter-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> fromInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        fromInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'date'\u003C/span>;\n        fromInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input date-from'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> toInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        toInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'date'\u003C/span>;\n        toInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input date-to'\u003C/span>;\n        \n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(fromInput);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createTextNode\u003C/span>(\u003Cspan class=\"hljs-string\">' to '\u003C/span>));\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(toInput);\n        \n        \u003Cspan class=\"hljs-comment\">// Store filter reference\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>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'date-range'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: { \u003Cspan class=\"hljs-attr\">from\u003C/span>: fromInput, \u003Cspan class=\"hljs-attr\">to\u003C/span>: toInput },\n            \u003Cspan class=\"hljs-attr\">columnIndex\u003C/span>: columnIndex,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: { \u003Cspan class=\"hljs-attr\">from\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-attr\">to\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span> }\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind change events\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">updateDateRange\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> fromVal = fromInput.\u003Cspan class=\"hljs-property\">value\u003C/span> ? \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(fromInput.\u003Cspan class=\"hljs-property\">value\u003C/span>) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> toVal = toInput.\u003Cspan class=\"hljs-property\">value\u003C/span> ? \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(toInput.\u003Cspan class=\"hljs-property\">value\u003C/span>) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, { \u003Cspan class=\"hljs-attr\">from\u003C/span>: fromVal, \u003Cspan class=\"hljs-attr\">to\u003C/span>: toVal });\n        };\n        \n        fromInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, updateDateRange);\n        toInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'change'\u003C/span>, updateDateRange);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> container;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createBooleanFilter\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> select = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'select'\u003C/span>);\n        select.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input boolean-filter'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> options = [\n            { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>, \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-string\">'All'\u003C/span> },\n            { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'true'\u003C/span>, \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-string\">'Yes/True/Active'\u003C/span> },\n            { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'false'\u003C/span>, \u003Cspan class=\"hljs-attr\">text\u003C/span>: \u003Cspan class=\"hljs-string\">'No/False/Inactive'\u003C/span> }\n        ];\n        \n        options.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">option\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> optionElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'option'\u003C/span>);\n            optionElement.\u003Cspan class=\"hljs-property\">value\u003C/span> = option.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n            optionElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = option.\u003Cspan class=\"hljs-property\">text\u003C/span>;\n            select.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(optionElement);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Store filter reference\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>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: select,\n            \u003Cspan class=\"hljs-attr\">columnIndex\u003C/span>: columnIndex,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind change event\u003C/span>\n        select.\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_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> select;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createTextFilter\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> input = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        input.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        input.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-input text-filter'\u003C/span>;\n        input.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Filter text...'\u003C/span>;\n        input.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">`Filter \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.columnTypes.get(columnIndex).name}\u003C/span>`\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Store filter reference\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>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">element\u003C/span>: input,\n            \u003Cspan class=\"hljs-attr\">columnIndex\u003C/span>: columnIndex,\n            \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Bind input event with debounce\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> textTimeout;\n        input.\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>(textTimeout);\n            textTimeout = \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_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-string\">`column-\u003Cspan class=\"hljs-subst\">${columnIndex}\u003C/span>`\u003C/span>, e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> input;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createFilterControls\u003C/span>(\u003Cspan class=\"hljs-params\">container\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> controlsSection = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        controlsSection.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-controls'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> clearButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        clearButton.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'button'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-button clear-filters'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Clear All Filters'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearAllFilters\u003C/span>());\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> resultCount = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n        resultCount.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-result-count'\u003C/span>;\n        resultCount.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        \n        controlsSection.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(clearButton);\n        controlsSection.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(resultCount);\n        container.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(controlsSection);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultCountElement\u003C/span> = resultCount;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultCount\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getUniqueValuesForColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> values = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = row.\u003Cspan class=\"hljs-property\">data\u003C/span>[columnIndex]?.\u003Cspan class=\"hljs-property\">raw\u003C/span> || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cellValue) {\n                values.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(cellValue);\n            }\n        });\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(values).\u003Cspan class=\"hljs-title function_\">sort\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getNumericRangeForColumn\u003C/span>(\u003Cspan class=\"hljs-params\">columnIndex\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> min = \u003Cspan class=\"hljs-title class_\">Infinity\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> max = -\u003Cspan class=\"hljs-title class_\">Infinity\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = row.\u003Cspan class=\"hljs-property\">data\u003C/span>[columnIndex]?.\u003Cspan class=\"hljs-property\">processed\u003C/span>;\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> cellValue === \u003Cspan class=\"hljs-string\">'number'\u003C/span> && !\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(cellValue)) {\n                min = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(min, cellValue);\n                max = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(max, cellValue);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n            \u003Cspan class=\"hljs-attr\">min\u003C/span>: min === \u003Cspan class=\"hljs-title class_\">Infinity\u003C/span> ? \u003Cspan class=\"hljs-number\">0\u003C/span> : min,\n            \u003Cspan class=\"hljs-attr\">max\u003C/span>: max === -\u003Cspan class=\"hljs-title class_\">Infinity\u003C/span> ? \u003Cspan class=\"hljs-number\">100\u003C/span> : max\n        };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getStepValue\u003C/span>(\u003Cspan class=\"hljs-params\">min, max\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> range = max - min;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (range > \u003Cspan class=\"hljs-number\">1000\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">10\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (range > \u003Cspan class=\"hljs-number\">100\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (range > \u003Cspan class=\"hljs-number\">10\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0.1\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0.01\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateFilter\u003C/span>(\u003Cspan class=\"hljs-params\">filterKey, value\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>(filterKey, value);\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-keyword\">let\u003C/span> visibleCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">rowMatchesAllFilters\u003C/span>(row);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (matches) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(row.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n                row.\u003Cspan class=\"hljs-property\">visible\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">matchesFilters\u003C/span> = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n                visibleCount++;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideRow\u003C/span>(row.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n                row.\u003Cspan class=\"hljs-property\">visible\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">matchesFilters\u003C/span> = \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultCount\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">emitFilterEvent\u003C/span>(visibleCount);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">rowMatchesAllFilters\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [filterKey, filterValue] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeFilters\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!filterValue && filterValue !== \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">continue\u003C/span>; \u003Cspan class=\"hljs-comment\">// Skip empty filters\u003C/span>\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">rowMatchesFilter\u003C/span>(row, filterKey, 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-title function_\">rowMatchesFilter\u003C/span>(\u003Cspan class=\"hljs-params\">row, filterKey, filterValue\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filterKey === \u003Cspan class=\"hljs-string\">'global-search'\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">rowMatchesGlobalSearch\u003C/span>(row, filterValue);\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> match = filterKey.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/column-(\\d+)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!match) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnIndex = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(match[\u003Cspan class=\"hljs-number\">1\u003C/span>]);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellData = row.\u003Cspan class=\"hljs-property\">data\u003C/span>[columnIndex];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filter = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(filterKey);\n        \n        \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (filter.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'category'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellData.\u003Cspan class=\"hljs-property\">raw\u003C/span> === filterValue;\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellData.\u003Cspan class=\"hljs-property\">processed\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filterValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number-range'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> numValue = cellData.\u003Cspan class=\"hljs-property\">processed\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> { min, max } = filterValue;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> (!min || numValue >= min) && (!max || numValue <= max);\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date-range'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> dateValue = cellData.\u003Cspan class=\"hljs-property\">processed\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!dateValue) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> { \u003Cspan class=\"hljs-keyword\">from\u003C/span>, to } = filterValue;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> (!\u003Cspan class=\"hljs-keyword\">from\u003C/span> || dateValue >= \u003Cspan class=\"hljs-keyword\">from\u003C/span>) && (!to || dateValue <= to);\n            \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> boolValue = cellData.\u003Cspan class=\"hljs-property\">processed\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> filterValue === \u003Cspan class=\"hljs-string\">''\u003C/span> || boolValue === (filterValue === \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-attr\">default\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">rowMatchesGlobalSearch\u003C/span>(\u003Cspan class=\"hljs-params\">row, searchTerm\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lowerSearchTerm = searchTerm.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> row.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> \n            cell.\u003Cspan class=\"hljs-property\">raw\u003C/span>.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lowerSearchTerm)\n        );\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\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        row.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hideRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\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\">activeFilters\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Reset all filter inputs\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">filter\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (filter.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'global-search'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'category'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>:\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number-range'\u003C/span>:\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">min\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">max\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date-range'\u003C/span>:\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">from\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">to\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n        });\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_\">updateResultCount\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">visible\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultCountElement\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \n            \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visibleRows}\u003C/span> of \u003Cspan class=\"hljs-subst\">${totalRows}\u003C/span> rows`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">emitFilterEvent\u003C/span>(\u003Cspan class=\"hljs-params\">visibleCount\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'tableFilter'\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">detail\u003C/span>: {\n                visibleCount,\n                \u003Cspan class=\"hljs-attr\">totalCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">activeFilters\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            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">getFilteredRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">visible\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">exportFilteredData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">columnTypes\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>()).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">col\u003C/span> =>\u003C/span> col.\u003Cspan class=\"hljs-property\">name\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> rows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getFilteredRows\u003C/span>().\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> \n            row.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">raw\u003C/span>)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> { headers, rows };\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">setFilter\u003C/span>(\u003Cspan class=\"hljs-params\">filterKey, value\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filter = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(filterKey);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filter) {\n            \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (filter.\u003Cspan class=\"hljs-property\">type\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'category'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>:\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = value;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'global-search'\u003C/span>:\n                    filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = value;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'number-range'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">min\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">min\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = value.\u003Cspan class=\"hljs-property\">min\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">max\u003C/span> !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">max\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = value.\u003Cspan class=\"hljs-property\">max\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date-range'\u003C/span>:\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">from\u003C/span>) filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">from\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = value.\u003Cspan class=\"hljs-property\">from\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value.\u003Cspan class=\"hljs-property\">to\u003C/span>) filter.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">to\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = value.\u003Cspan class=\"hljs-property\">to\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilter\u003C/span>(filterKey, value);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize filterable tables\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-keyword\">const\u003C/span> filterableTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table[data-filterable]'\u003C/span>);\n    \n    filterableTables.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">table, index\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableFilter\u003C/span>(\u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${table.id || \u003Cspan class=\"hljs-string\">'table-'\u003C/span> + index}\u003C/span>`\u003C/span>);\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"responsive-search-interface\">Responsive Search Interface\u003C/h2>\n\u003Ch3 id=\"mobile-optimized-search-controls\">Mobile-Optimized Search Controls\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* responsive-table-search.css - Mobile-first search styling */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Base search styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-search-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">40px\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">6px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: inherit;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease, box-shadow \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.search-icon\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">24px\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\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">pointer-events\u003C/span>: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.search-clear\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n    \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">24px\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\">background\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">18px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.search-clear\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.search-clear\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Filter container styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-filter-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-number\">4px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0\u003C/span>,\u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-section\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-section\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:last-child\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filters-title\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">12px\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filters-grid\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: grid;\n    \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>fr;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-column\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-label\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-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\">#ced4da\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: border-color \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease, box-shadow \u003Cspan class=\"hljs-number\">0.15s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-comment\">/* Range filter styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.range-filter-container\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.date-filter-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.range-filter-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.filter-input\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.date-filter-container\u003C/span> \u003Cspan class=\"hljs-selector-class\">.filter-input\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">100px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Filter controls */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.filter-controls\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: space-between;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">margin-top\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding-top\u003C/span>: \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-button\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span> \u003Cspan class=\"hljs-number\">16px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: pointer;\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: background-color \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#0056b3\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-button\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-button\u003C/span>\u003Cspan class=\"hljs-selector-class\">.clear-filters\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-button\u003C/span>\u003Cspan class=\"hljs-selector-class\">.clear-filters\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#545b62\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.filter-result-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\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Search highlighting */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.search-highlight\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff3cd\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#856404\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* No results message */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.no-results-row\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.no-results-message\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">24px\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">font-style\u003C/span>: italic;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">576px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.filters-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(\u003Cspan class=\"hljs-number\">2\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.filter-column\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: row;\n        \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n        \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.filter-label\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">margin-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">120px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.filters-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(\u003Cspan class=\"hljs-number\">3\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.range-filter-container\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.date-filter-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: nowrap;\n    }\n}\n\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">992px\u003C/span>) {\n    \u003Cspan class=\"hljs-selector-class\">.filters-grid\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">grid-template-columns\u003C/span>: \u003Cspan class=\"hljs-built_in\">repeat\u003C/span>(\u003Cspan class=\"hljs-number\">4\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>fr);\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">14px\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* High contrast mode */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-contrast\u003C/span>: high) {\n    \u003Cspan class=\"hljs-selector-class\">.table-search-container\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-filter-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#fff\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.filter-input\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.filter-input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">3px\u003C/span> \u003Cspan class=\"hljs-number\">#ffff00\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-selector-class\">.search-highlight\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffff00\u003C/span>;\n        \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced motion preferences */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">prefers-reduced-motion\u003C/span>: reduce) {\n    \u003Cspan class=\"hljs-selector-class\">.filter-input\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.filter-button\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.search-clear\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Focus management for keyboard navigation */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.filter-container\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:focus\u003C/span>-within {\n    \u003Cspan class=\"hljs-attribute\">outline\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">outline-offset\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n    \u003Cspan class=\"hljs-selector-class\">.table-search-container\u003C/span>,\n    \u003Cspan class=\"hljs-selector-class\">.table-filter-container\u003C/span> {\n        \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n    }\n}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"progressive-enhancement\">Progressive Enhancement\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- progressive-table-enhancement.html -->\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>Enhanced Markdown Table Example\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">title\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">link\u003C/span> \u003Cspan class=\"hljs-attr\">rel\u003C/span>=\u003Cspan class=\"hljs-string\">"stylesheet"\u003C/span> \u003Cspan class=\"hljs-attr\">href\u003C/span>=\u003Cspan class=\"hljs-string\">"responsive-table-search.css"\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-comment\"><!-- Basic Markdown table that works without JavaScript -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"product-table"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"markdown-table"\u003C/span> \u003Cspan class=\"hljs-attr\">data-searchable\u003C/span> \u003Cspan class=\"hljs-attr\">data-filterable\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>>\u003C/span>Product Name\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>>\u003C/span>Category\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>>\u003C/span>Price\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>>\u003C/span>Stock\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>>\u003C/span>Status\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>>\u003C/span>Release Date\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>>\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\">td\u003C/span>>\u003C/span>Wireless Headphones Pro\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Electronics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$199.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>45\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2024-01-15\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\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\">tr\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Office Chair Deluxe\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Furniture\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$399.00\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>12\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Limited\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2023-11-22\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\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\">tr\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Laptop Stand Adjustable\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Accessories\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$89.95\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>0\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Inactive\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2024-03-08\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\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\">tr\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Desk Organizer Premium\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Office Supplies\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$49.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>28\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2024-05-12\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\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\">tr\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Monitor Arm Dual\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Accessories\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$159.95\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>18\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2024-02-29\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\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\">tr\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Keyboard Mechanical RGB\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Electronics\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>$129.99\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>35\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>Active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>2023-12-10\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\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\">tbody\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n\n    \u003Cspan class=\"hljs-comment\"><!-- Enhanced features loaded progressively -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C/span>>\u003C/span>\u003Cspan class=\"language-javascript\">\n        \u003Cspan class=\"hljs-comment\">// Feature detection and progressive enhancement\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'querySelector'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> && \u003Cspan class=\"hljs-string\">'addEventListener'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Load enhanced functionality\u003C/span>\n            \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>.\u003Cspan class=\"hljs-title function_\">all\u003C/span>([\n                \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'./table-search.js'\u003C/span>),\n                \u003Cspan class=\"hljs-keyword\">import\u003C/span>(\u003Cspan class=\"hljs-string\">'./table-filter.js'\u003C/span>)\n            ]).\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[SearchModule, FilterModule]\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-comment\">// Initialize search functionality\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">SearchModule\u003C/span>.\u003Cspan class=\"hljs-title class_\">MarkdownTableSearch\u003C/span>(\u003Cspan class=\"hljs-string\">'#product-table'\u003C/span>, {\n                    \u003Cspan class=\"hljs-attr\">highlightClass\u003C/span>: \u003Cspan class=\"hljs-string\">'search-highlight'\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: \u003Cspan class=\"hljs-number\">250\u003C/span>\n                });\n\n                \u003Cspan class=\"hljs-comment\">// Initialize filtering functionality  \u003C/span>\n                \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">FilterModule\u003C/span>.\u003Cspan class=\"hljs-title class_\">MarkdownTableFilter\u003C/span>(\u003Cspan class=\"hljs-string\">'#product-table'\u003C/span>, {\n                    \u003Cspan class=\"hljs-attr\">enableGlobalSearch\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>, \u003Cspan class=\"hljs-comment\">// Using separate search\u003C/span>\n                    \u003Cspan class=\"hljs-attr\">enableColumnFilters\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n                    \u003Cspan class=\"hljs-attr\">filterPosition\u003C/span>: \u003Cspan class=\"hljs-string\">'top'\u003C/span>\n                });\n\n                \u003Cspan class=\"hljs-comment\">// Add export functionality\u003C/span>\n                \u003Cspan class=\"hljs-title function_\">addExportFeatures\u003C/span>();\n            }).\u003Cspan class=\"hljs-title function_\">catch\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">error\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Enhanced features not available:'\u003C/span>, error);\n                \u003Cspan class=\"hljs-comment\">// Fallback to basic functionality\u003C/span>\n            });\n        }\n\n        \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">addExportFeatures\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'product-table'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-filter-container'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!filterContainer) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> exportButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n            exportButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Export Filtered Data'\u003C/span>;\n            exportButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'filter-button export-button'\u003C/span>;\n            exportButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, exportFilteredData);\n\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> controls = filterContainer.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.filter-controls'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (controls) {\n                controls.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(exportButton);\n            }\n        }\n\n        \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">exportFilteredData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n            \u003Cspan class=\"hljs-comment\">// Get the filter instance\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> table = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">getElementById\u003C/span>(\u003Cspan class=\"hljs-string\">'product-table'\u003C/span>);\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterEvent = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'getFilteredData'\u003C/span>);\n            table.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(filterEvent);\n\n            \u003Cspan class=\"hljs-comment\">// This is a simplified export - in production, use a proper library\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(table.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>))\n                .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> !== \u003Cspan class=\"hljs-string\">'none'\u003C/span>);\n\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> csvContent = \u003Cspan class=\"hljs-title function_\">generateCSV\u003C/span>(visibleRows);\n            \u003Cspan class=\"hljs-title function_\">downloadCSV\u003C/span>(csvContent, \u003Cspan class=\"hljs-string\">'filtered-table-data.csv'\u003C/span>);\n        }\n\n        \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">generateCSV\u003C/span>(\u003Cspan class=\"hljs-params\">rows\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'#product-table thead th'\u003C/span>))\n                .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${th.textContent.trim()}\u003C/span>"`\u003C/span>);\n\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> csvRows = [headers.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\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\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>))\n                    .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">td\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${td.textContent.trim().replace(/\u003Cspan class=\"hljs-string\">"/g, '"\u003C/span>\u003Cspan class=\"hljs-string\">"')}"\u003C/span>\u003Cspan class=\"hljs-string\">`);\n                csvRows.push(cells.join(','));\n            });\n\n            return csvRows.join('\\n');\n        }\n\n        function downloadCSV(content, filename) {\n            const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });\n            const link = document.createElement('a');\n            \n            if (link.download !== undefined) {\n                const url = URL.createObjectURL(blob);\n                link.setAttribute('href', url);\n                link.setAttribute('download', filename);\n                link.style.visibility = 'hidden';\n                document.body.appendChild(link);\n                link.click();\n                document.body.removeChild(link);\n            }\n        }\n\n        // Accessibility enhancements\n        document.addEventListener('DOMContentLoaded', function() {\n            // Add skip link for keyboard users\n            const skipLink = document.createElement('a');\n            skipLink.href = '#product-table';\n            skipLink.textContent = 'Skip to table';\n            skipLink.className = 'skip-link';\n            skipLink.style.cssText = `\u003C/span>\n                position: absolute;\n                left: -9999px;\n                background: #\u003Cspan class=\"hljs-number\">000\u003C/span>;\n                color: #fff;\n                padding: 8px;\n                text-decoration: none;\n                z-index: \u003Cspan class=\"hljs-number\">1000\u003C/span>;\n            \u003Cspan class=\"hljs-string\">`;\n            \n            skipLink.addEventListener('focus', () => {\n                skipLink.style.left = '0';\n            });\n            \n            skipLink.addEventListener('blur', () => {\n                skipLink.style.left = '-9999px';\n            });\n            \n            document.body.insertBefore(skipLink, document.body.firstChild);\n\n            // Add table caption for screen readers\n            const table = document.getElementById('product-table');\n            const caption = document.createElement('caption');\n            caption.textContent = 'Product inventory with search and filtering capabilities';\n            caption.style.cssText = `\u003C/span>\n                position: absolute;\n                left: -9999px;\n                width: 1px;\n                height: 1px;\n                overflow: hidden;\n            \u003Cspan class=\"hljs-string\">`;\n            table.insertBefore(caption, table.firstChild);\n        });\n    \u003C/span>\u003C/span>\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>\u003Ch2 id=\"advanced-search-features\">Advanced Search Features\u003C/h2>\n\u003Ch3 id=\"fuzzy-search-implementation\">Fuzzy Search Implementation\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// fuzzy-search.js - Advanced fuzzy search capabilities\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">FuzzyTableSearch\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableSelector, 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_\">querySelector\u003C/span>(tableSelector);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.6\u003C/span>, \u003Cspan class=\"hljs-comment\">// Similarity threshold (0-1)\u003C/span>\n            \u003Cspan class=\"hljs-attr\">maxDistance\u003C/span>: \u003Cspan class=\"hljs-number\">3\u003C/span>, \u003Cspan class=\"hljs-comment\">// Maximum edit distance\u003C/span>\n            \u003Cspan class=\"hljs-attr\">enableSoundex\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>, \u003Cspan class=\"hljs-comment\">// Phonetic matching\u003C/span>\n            \u003Cspan class=\"hljs-attr\">enableSynonyms\u003C/span>: \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">synonyms\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(), \u003Cspan class=\"hljs-comment\">// Word synonyms\u003C/span>\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchIndex\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\">originalRows\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-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">buildSearchIndex\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createSearchInterface\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">buildSearchIndex\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        \n        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, rowIndex\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchableText = cells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\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\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({\n                \u003Cspan class=\"hljs-attr\">element\u003C/span>: row,\n                \u003Cspan class=\"hljs-attr\">text\u003C/span>: searchableText,\n                \u003Cspan class=\"hljs-attr\">tokens\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">tokenize\u003C/span>(searchableText),\n                \u003Cspan class=\"hljs-attr\">soundex\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSoundex\u003C/span> ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">soundex\u003C/span>(searchableText) : \u003Cspan class=\"hljs-literal\">null\u003C/span>\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createSearchInterface\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'fuzzy-search-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'fuzzy-search-input'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">'Fuzzy search (try typos!)...'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> resultsInfo = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        resultsInfo.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-results-info'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestionsList = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        suggestionsList.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-suggestions'\u003C/span>;\n        suggestionsList.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        \n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(suggestionsList);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(resultsInfo);\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>(searchContainer, \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-property\">searchInput\u003C/span> = searchInput;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsInfo\u003C/span> = resultsInfo;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\u003C/span> = suggestionsList;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindSearchEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsInfo\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindSearchEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> searchTimeout;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\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_\">performFuzzySearch\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n            }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\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-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowDown'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateSuggestions\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'ArrowUp'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">navigateSuggestions\u003C/span>(-\u003Cspan class=\"hljs-number\">1\u003C/span>);\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \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_\">selectActiveSuggestion\u003C/span>();\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideSuggestions\u003C/span>();\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performFuzzySearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideSuggestions\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsInfo\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">fuzzyMatch\u003C/span>(query);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">displayResults\u003C/span>(results);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showSuggestions\u003C/span>(query, results);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsInfo\u003C/span>(results.\u003Cspan class=\"hljs-property\">length\u003C/span>, query);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">fuzzyMatch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> queryTokens = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">tokenize\u003C/span>(query);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> querySoundex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">enableSoundex\u003C/span> ? \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">soundex\u003C/span>(query) : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> results = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\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> scores = [];\n            \n            \u003Cspan class=\"hljs-comment\">// Token-based matching\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> tokenScore = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateTokenScore\u003C/span>(queryTokens, row.\u003Cspan class=\"hljs-property\">tokens\u003C/span>);\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">score\u003C/span>: tokenScore, \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'token'\u003C/span> });\n            \n            \u003Cspan class=\"hljs-comment\">// Levenshtein distance\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> editScore = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateEditScore\u003C/span>(query, row.\u003Cspan class=\"hljs-property\">text\u003C/span>);\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">score\u003C/span>: editScore, \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'edit'\u003C/span> });\n            \n            \u003Cspan class=\"hljs-comment\">// Soundex matching\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (querySoundex && row.\u003Cspan class=\"hljs-property\">soundex\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> soundexScore = querySoundex === row.\u003Cspan class=\"hljs-property\">soundex\u003C/span> ? \u003Cspan class=\"hljs-number\">1\u003C/span> : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n                scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">score\u003C/span>: soundexScore, \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'soundex'\u003C/span> });\n            }\n            \n            \u003Cspan class=\"hljs-comment\">// Substring matching\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> substringScore = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateSubstringScore\u003C/span>(query, row.\u003Cspan class=\"hljs-property\">text\u003C/span>);\n            scores.\u003Cspan class=\"hljs-title function_\">push\u003C/span>({ \u003Cspan class=\"hljs-attr\">score\u003C/span>: substringScore, \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'substring'\u003C/span> });\n            \n            \u003Cspan class=\"hljs-comment\">// Calculate weighted average\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> finalScore = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">calculateWeightedScore\u003C/span>(scores);\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">row\u003C/span>: row,\n                \u003Cspan class=\"hljs-attr\">score\u003C/span>: finalScore,\n                \u003Cspan class=\"hljs-attr\">index\u003C/span>: index,\n                \u003Cspan class=\"hljs-attr\">details\u003C/span>: scores\n            };\n        }).\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> result.\u003Cspan class=\"hljs-property\">score\u003C/span> >= \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">threshold\u003C/span>)\n          .\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> b.\u003Cspan class=\"hljs-property\">score\u003C/span> - a.\u003Cspan class=\"hljs-property\">score\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> results;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateTokenScore\u003C/span>(\u003Cspan class=\"hljs-params\">queryTokens, rowTokens\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (queryTokens.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span> || rowTokens.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> matchCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        queryTokens.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">qToken\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> bestMatch = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(...rowTokens.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rToken\u003C/span> =>\u003C/span> \n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringSimilarity\u003C/span>(qToken, rToken)\n            ));\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (bestMatch > \u003Cspan class=\"hljs-number\">0.7\u003C/span>) matchCount++;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> matchCount / queryTokens.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateEditScore\u003C/span>(\u003Cspan class=\"hljs-params\">query, text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> distance = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">levenshteinDistance\u003C/span>(\n            query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>(), \n            text.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, query.\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\">maxDistance\u003C/span>)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxLength = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(query.\u003Cspan class=\"hljs-property\">length\u003C/span>, text.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">1\u003C/span> - (distance / maxLength);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateSubstringScore\u003C/span>(\u003Cspan class=\"hljs-params\">query, text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lowerQuery = query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lowerText = text.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (lowerText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lowerQuery)) {\n            \u003Cspan class=\"hljs-comment\">// Bonus for exact substring match\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0.9\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Partial word matching\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> words = lowerText.\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> matchingWords = words.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">word\u003C/span> =>\u003C/span> \n            word.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lowerQuery) || lowerQuery.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(word)\n        );\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> matchingWords.\u003Cspan class=\"hljs-property\">length\u003C/span> / words.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">calculateWeightedScore\u003C/span>(\u003Cspan class=\"hljs-params\">scores\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> weights = {\n            \u003Cspan class=\"hljs-attr\">token\u003C/span>: \u003Cspan class=\"hljs-number\">0.4\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">edit\u003C/span>: \u003Cspan class=\"hljs-number\">0.3\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">substring\u003C/span>: \u003Cspan class=\"hljs-number\">0.2\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">soundex\u003C/span>: \u003Cspan class=\"hljs-number\">0.1\u003C/span>\n        };\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> weightedSum = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> totalWeight = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        scores.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">{ score, type }\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> weight = weights[type] || \u003Cspan class=\"hljs-number\">0.1\u003C/span>;\n            weightedSum += score * weight;\n            totalWeight += weight;\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> totalWeight > \u003Cspan class=\"hljs-number\">0\u003C/span> ? weightedSum / totalWeight : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">tokenize\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> text.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()\n                  .\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[^\\w\\s]/g\u003C/span>, \u003Cspan class=\"hljs-string\">' '\u003C/span>)\n                  .\u003Cspan class=\"hljs-title function_\">split\u003C/span>(\u003Cspan class=\"hljs-regexp\">/\\s+/\u003C/span>)\n                  .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">token\u003C/span> =>\u003C/span> token.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">soundex\u003C/span>(\u003Cspan class=\"hljs-params\">text\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Simplified soundex algorithm\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tokens = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">tokenize\u003C/span>(text);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tokens.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">token\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">let\u003C/span> soundex = token.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>).\u003Cspan class=\"hljs-title function_\">toUpperCase\u003C/span>();\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> mapping = {\n                \u003Cspan class=\"hljs-string\">'bfpv'\u003C/span>: \u003Cspan class=\"hljs-string\">'1'\u003C/span>, \u003Cspan class=\"hljs-string\">'cgjkqsxz'\u003C/span>: \u003Cspan class=\"hljs-string\">'2'\u003C/span>, \u003Cspan class=\"hljs-string\">'dt'\u003C/span>: \u003Cspan class=\"hljs-string\">'3'\u003C/span>,\n                \u003Cspan class=\"hljs-string\">'l'\u003C/span>: \u003Cspan class=\"hljs-string\">'4'\u003C/span>, \u003Cspan class=\"hljs-string\">'mn'\u003C/span>: \u003Cspan class=\"hljs-string\">'5'\u003C/span>, \u003Cspan class=\"hljs-string\">'r'\u003C/span>: \u003Cspan class=\"hljs-string\">'6'\u003C/span>\n            };\n            \n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i < token.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> char = token.\u003Cspan class=\"hljs-title function_\">charAt\u003C/span>(i).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [chars, code] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(mapping)) {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (chars.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(char)) {\n                        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (soundex.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(-\u003Cspan class=\"hljs-number\">1\u003C/span>) !== code) {\n                            soundex += code;\n                        }\n                        \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                    }\n                }\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (soundex.\u003Cspan class=\"hljs-property\">length\u003C/span> >= \u003Cspan class=\"hljs-number\">4\u003C/span>) \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n            }\n            \n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> (soundex + \u003Cspan class=\"hljs-string\">'000'\u003C/span>).\u003Cspan class=\"hljs-title function_\">substring\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">4\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_\">levenshteinDistance\u003C/span>(\u003Cspan class=\"hljs-params\">str1, str2\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> matrix = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>(str2.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">fill\u003C/span>().\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \n            \u003Cspan class=\"hljs-title class_\">Array\u003C/span>(str1.\u003Cspan class=\"hljs-property\">length\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>).\u003Cspan class=\"hljs-title function_\">fill\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>)\n        );\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 <= str1.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) matrix[\u003Cspan class=\"hljs-number\">0\u003C/span>][i] = i;\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> j = \u003Cspan class=\"hljs-number\">0\u003C/span>; j <= str2.\u003Cspan class=\"hljs-property\">length\u003C/span>; j++) matrix[j][\u003Cspan class=\"hljs-number\">0\u003C/span>] = j;\n        \n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> j = \u003Cspan class=\"hljs-number\">1\u003C/span>; j <= str2.\u003Cspan class=\"hljs-property\">length\u003C/span>; j++) {\n            \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-number\">1\u003C/span>; i <= str1.\u003Cspan class=\"hljs-property\">length\u003C/span>; i++) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> cost = str1[i - \u003Cspan class=\"hljs-number\">1\u003C/span>] === str2[j - \u003Cspan class=\"hljs-number\">1\u003C/span>] ? \u003Cspan class=\"hljs-number\">0\u003C/span> : \u003Cspan class=\"hljs-number\">1\u003C/span>;\n                matrix[j][i] = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n                    matrix[j - \u003Cspan class=\"hljs-number\">1\u003C/span>][i] + \u003Cspan class=\"hljs-number\">1\u003C/span>,     \u003Cspan class=\"hljs-comment\">// deletion\u003C/span>\n                    matrix[j][i - \u003Cspan class=\"hljs-number\">1\u003C/span>] + \u003Cspan class=\"hljs-number\">1\u003C/span>,     \u003Cspan class=\"hljs-comment\">// insertion\u003C/span>\n                    matrix[j - \u003Cspan class=\"hljs-number\">1\u003C/span>][i - \u003Cspan class=\"hljs-number\">1\u003C/span>] + cost \u003Cspan class=\"hljs-comment\">// substitution\u003C/span>\n                );\n            }\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> matrix[str2.\u003Cspan class=\"hljs-property\">length\u003C/span>][str1.\u003Cspan class=\"hljs-property\">length\u003C/span>];\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">stringSimilarity\u003C/span>(\u003Cspan class=\"hljs-params\">str1, str2\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> longer = str1.\u003Cspan class=\"hljs-property\">length\u003C/span> > str2.\u003Cspan class=\"hljs-property\">length\u003C/span> ? str1 : str2;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> shorter = str1.\u003Cspan class=\"hljs-property\">length\u003C/span> > str2.\u003Cspan class=\"hljs-property\">length\u003C/span> ? str2 : str1;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (longer.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">1.0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> editDistance = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">levenshteinDistance\u003C/span>(longer, shorter);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> (longer.\u003Cspan class=\"hljs-property\">length\u003C/span> - editDistance) / longer.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">displayResults\u003C/span>(\u003Cspan class=\"hljs-params\">results\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> isVisible = results.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> result.\u003Cspan class=\"hljs-property\">index\u003C/span> === index);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isVisible) {\n                row.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>);\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                row.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n                row.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n            }\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showSuggestions\u003C/span>(\u003Cspan class=\"hljs-params\">query, results\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (results.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span> || results.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideSuggestions\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Generate search suggestions based on partial matches\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">generateSuggestions\u003C/span>(query, results);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (suggestions.\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-title function_\">renderSuggestions\u003C/span>(suggestions);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\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\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideSuggestions\u003C/span>();\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">generateSuggestions\u003C/span>(\u003Cspan class=\"hljs-params\">query, results\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>();\n        \n        results.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">result\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-comment\">// Extract words that might be good suggestions\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> words = result.\u003Cspan class=\"hljs-property\">row\u003C/span>.\u003Cspan class=\"hljs-property\">tokens\u003C/span>;\n            words.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">word\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (word.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">2\u003C/span> && \n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">stringSimilarity\u003C/span>(query, word) > \u003Cspan class=\"hljs-number\">0.5\u003C/span> &&\n                    word !== query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>()) {\n                    suggestions.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(word);\n                }\n            });\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(suggestions).\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">5\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">renderSuggestions\u003C/span>(\u003Cspan class=\"hljs-params\">suggestions\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \n        suggestions.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">suggestion, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestionElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n            suggestionElement.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-suggestion'\u003C/span>;\n            suggestionElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = suggestion;\n            suggestionElement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'option'\u003C/span>);\n            suggestionElement.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n            \n            suggestionElement.\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_\">selectSuggestion\u003C/span>(suggestion);\n            });\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(suggestionElement);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">navigateSuggestions\u003C/span>(\u003Cspan class=\"hljs-params\">direction\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-suggestion'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (suggestions.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Remove previous active state\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> >= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            suggestions[\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span>].\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Update index\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> += direction;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> < \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> = suggestions.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> >= suggestions.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add active state\u003C/span>\n        suggestions[\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span>].\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'active'\u003C/span>);\n        suggestions[\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span>].\u003Cspan class=\"hljs-title function_\">scrollIntoView\u003C/span>({\n            \u003Cspan class=\"hljs-attr\">block\u003C/span>: \u003Cspan class=\"hljs-string\">'nearest'\u003C/span>\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">selectActiveSuggestion\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestions = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.search-suggestion'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> >= \u003Cspan class=\"hljs-number\">0\u003C/span> && \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span> < suggestions.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> suggestion = suggestions[\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">activeSuggestionIndex\u003C/span>].\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">selectSuggestion\u003C/span>(suggestion);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">selectSuggestion\u003C/span>(\u003Cspan class=\"hljs-params\">suggestion\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = suggestion;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideSuggestions\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performFuzzySearch\u003C/span>(suggestion);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hideSuggestions\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">suggestionsList\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\">activeSuggestionIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\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\">element\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n            row.\u003Cspan class=\"hljs-property\">element\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateResultsInfo\u003C/span>(\u003Cspan class=\"hljs-params\">visibleCount = \u003Cspan class=\"hljs-literal\">null\u003C/span>, query = \u003Cspan class=\"hljs-string\">''\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> count = visibleCount !== \u003Cspan class=\"hljs-literal\">null\u003C/span> ? visibleCount : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (query) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsInfo\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \n                \u003Cspan class=\"hljs-string\">`Found \u003Cspan class=\"hljs-subst\">${count}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> rows matching "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsInfo\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">`Showing all \u003Cspan class=\"hljs-subst\">${total}\u003C/span> rows`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsInfo\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Enhanced CSS for fuzzy search\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> fuzzySearchStyles = \u003Cspan class=\"hljs-string\">`\n.fuzzy-search-container {\n    position: relative;\n    margin-bottom: 1rem;\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.fuzzy-search-input {\n    width: 100%;\n    padding: 12px 16px;\n    border: 2px solid #e9ecef;\n    border-radius: 8px;\n    font-size: 16px;\n    background: white;\n    transition: border-color 0.2s ease;\n}\n\n.fuzzy-search-input:focus {\n    outline: none;\n    border-color: #007bff;\n    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);\n}\n\n.search-suggestions {\n    position: absolute;\n    top: 100%;\n    left: 0;\n    right: 0;\n    background: white;\n    border: 1px solid #e9ecef;\n    border-radius: 0 0 8px 8px;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    z-index: 1000;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.search-suggestion {\n    padding: 12px 16px;\n    cursor: pointer;\n    border-bottom: 1px solid #f8f9fa;\n    transition: background-color 0.15s ease;\n}\n\n.search-suggestion:hover,\n.search-suggestion.active {\n    background-color: #f8f9fa;\n}\n\n.search-suggestion:last-child {\n    border-bottom: none;\n}\n\n.search-results-info {\n    margin-top: 8px;\n    font-size: 14px;\n    color: #6c757d;\n    font-weight: 500;\n}\n\n@media (max-width: 768px) {\n    .fuzzy-search-input {\n        font-size: 16px; /* Prevent zoom on iOS */\n    }\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject CSS\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n    style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = fuzzySearchStyles;\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n}\n\n\u003Cspan class=\"hljs-comment\">// Auto-initialize fuzzy search\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-keyword\">const\u003C/span> fuzzySearchTables = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'table[data-fuzzy-search]'\u003C/span>);\n    \n    fuzzySearchTables.\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_\">FuzzyTableSearch\u003C/span>(\u003Cspan class=\"hljs-string\">`#\u003Cspan class=\"hljs-subst\">${table.id}\u003C/span>`\u003C/span>, {\n            \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">threshold\u003C/span>) || \u003Cspan class=\"hljs-number\">0.6\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">maxDistance\u003C/span>: \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(table.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">maxDistance\u003C/span>) || \u003Cspan class=\"hljs-number\">3\u003C/span>\n        });\n    });\n});\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-documentation\">Integration with Modern Documentation\u003C/h2>\n\u003Cp>Table data filtering and search capabilities integrate seamlessly with comprehensive Markdown workflows. When combined with \u003Ca href=\"/blog/markdown-table-responsive-design-mobile-optimization-complete-guide\">table responsive design techniques\u003C/a>, interactive search functionality maintains usability across all device sizes while providing consistent filtering experiences that adapt to different screen constraints.\u003C/p>\n\u003Cp>For complex data presentation requirements, filtering systems work effectively with \u003Ca href=\"/blog/markdown-table-column-width-alignment-complete-guide\">table column alignment and width controls\u003C/a> to create sophisticated data exploration interfaces that maintain visual organization while enabling dynamic content manipulation.\u003C/p>\n\u003Cp>When building comprehensive documentation systems, table search capabilities complement \u003Ca href=\"/blog/markdown-automation-workflows-complete-guide\">automation workflows\u003C/a> by enabling automated index generation, search optimization, and content discovery features that scale effectively with growing datasets.\u003C/p>\n\u003Ch2 id=\"performance-optimization\">Performance Optimization\u003C/h2>\n\u003Ch3 id=\"virtual-scrolling-for-large-datasets\">Virtual Scrolling for Large Datasets\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// virtual-table-search.js - Performance optimization for large datasets\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualTableSearch\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableSelector, data, options = {}\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(tableSelector);\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-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">rowHeight\u003C/span>: \u003Cspan class=\"hljs-number\">40\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">visibleRows\u003C/span>: \u003Cspan class=\"hljs-number\">20\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">bufferRows\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">searchDebounce\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>,\n            ...options\n        };\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\u003C/span> = \u003Cspan class=\"hljs-string\">''\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_\">createVirtualTable\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createSearchInterface\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createVirtualTable\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create table wrapper\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\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\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table-wrapper'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n            height: \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.visibleRows * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px;\n            overflow: auto;\n            position: relative;\n        `\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create virtual table\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_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-table'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Create header (always visible)\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createHeader\u003C/span>();\n        \n        \u003Cspan class=\"hljs-comment\">// Create body container\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Create spacer for scrolling\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spacer\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-title function_\">updateSpacerHeight\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\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\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spacer\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Bind scroll event\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createHeader\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> thead = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'thead'\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Assuming first data row contains headers\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            \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>]).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">key\u003C/span> =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> th = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>);\n                th.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = key;\n                th.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cssText\u003C/span> = \u003Cspan class=\"hljs-string\">`\n                    position: sticky;\n                    top: 0;\n                    background: #f8f9fa;\n                    z-index: 10;\n                    padding: 8px 12px;\n                    border-bottom: 2px solid #dee2e6;\n                `\u003C/span>;\n                headerRow.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(th);\n            });\n        }\n        \n        thead.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(headerRow);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(thead);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createSearchInterface\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-search-container'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        searchInput.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-search-input'\u003C/span>;\n        searchInput.\u003Cspan class=\"hljs-property\">placeholder\u003C/span> = \u003Cspan class=\"hljs-string\">`Search \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.data.length}\u003C/span> records...`\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> resultCount = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'span'\u003C/span>);\n        resultCount.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-search-count'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSearchCount\u003C/span>(resultCount);\n        \n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchInput);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(resultCount);\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(searchContainer, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Bind search events\u003C/span>\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_\">performSearch\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\">searchDebounce\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span> = searchInput;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultCount\u003C/span> = resultCount;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\u003C/span> = query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\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>];\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-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-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>(row).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">value\u003C/span> =>\u003C/span> \n                    \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\u003C/span>)\n                );\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Reset scroll position\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSpacerHeight\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSearchCount\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleScroll\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Use requestAnimationFrame for smooth scrolling\u003C/span>\n        \u003Cspan class=\"hljs-title function_\">requestAnimationFrame\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>();\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerHeight = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalRows = \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-comment\">// Calculate visible range with buffer\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>) - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferRows\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span> = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(totalRows, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span> + (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferRows\u003C/span> * \u003Cspan class=\"hljs-number\">2\u003C/span>));\n        \n        \u003Cspan class=\"hljs-comment\">// Clear current rows\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        \n        \u003Cspan class=\"hljs-comment\">// Render visible rows\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span>; i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">endIndex\u003C/span>; i++) {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (i < \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRow\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>[i], i);\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row);\n            }\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Position table to create virtual scrolling effect\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> offsetY = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">startIndex\u003C/span> * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\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\">`translateY(\u003Cspan class=\"hljs-subst\">${offsetY}\u003C/span>px)`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createRow\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, index\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> tr = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n        tr.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.rowHeight}\u003C/span>px`\u003C/span>;\n        tr.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'data-index'\u003C/span>, index);\n        \n        \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(rowData).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">[key, value]\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> td = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            td.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = value;\n            td.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">padding\u003C/span> = \u003Cspan class=\"hljs-string\">'8px 12px'\u003C/span>;\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\">searchQuery\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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\u003C/span>)) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightText\u003C/span>(td, \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value), \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\u003C/span>);\n            }\n            \n            tr.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(td);\n        });\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> tr;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">highlightText\u003C/span>(\u003Cspan class=\"hljs-params\">element, text, query\u003C/span>) {\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\">${query}\u003C/span>)`\u003C/span>, \u003Cspan class=\"hljs-string\">'gi'\u003C/span>);\n        element.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = text.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(regex, \u003Cspan class=\"hljs-string\">'<mark class="search-highlight">$1</mark>'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSpacerHeight\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-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">spacer\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    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateSearchCount\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultCount\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \n            \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.filteredData.length}\u003C/span> of \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.data.length}\u003C/span> records`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-params\">newData\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = newData;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performSearch\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchQuery\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getFilteredData\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">scrollToIndex\u003C/span>(\u003Cspan class=\"hljs-params\">index\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetScrollTop = index * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">rowHeight\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tableWrapper\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span> = targetScrollTop;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Performance monitoring\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> = \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\">observers\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">startTiming\u003C/span>(\u003Cspan class=\"hljs-params\">operation\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(operation, performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>());\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">endTiming\u003C/span>(\u003Cspan class=\"hljs-params\">operation\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> startTime = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(operation);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (startTime) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> duration = performance.\u003Cspan class=\"hljs-title function_\">now\u003C/span>() - startTime;\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${operation}\u003C/span>: \u003Cspan class=\"hljs-subst\">${duration.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span>ms`\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Emit performance event\u003C/span>\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> event = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'tablePerformance'\u003C/span>, {\n                \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { operation, duration }\n            });\n            \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(event);\n            \n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">metrics\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(operation);\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> duration;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">observeTable\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement, callback\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'IntersectionObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> {\n                entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n                    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (callback) {\n                        \u003Cspan class=\"hljs-title function_\">callback\u003C/span>(entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>, entry.\u003Cspan class=\"hljs-property\">intersectionRatio\u003C/span>);\n                    }\n                });\n            }, {\n                \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: [\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.25\u003C/span>, \u003Cspan class=\"hljs-number\">0.5\u003C/span>, \u003Cspan class=\"hljs-number\">0.75\u003C/span>, \u003Cspan class=\"hljs-number\">1\u003C/span>]\n            });\n            \n            observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>(tableElement);\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(tableElement, observer);\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">measureMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-string\">'memory'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> performance) {\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">used\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">total\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">totalJSHeapSize\u003C/span>,\n                \u003Cspan class=\"hljs-attr\">limit\u003C/span>: performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>.\u003Cspan class=\"hljs-property\">jsHeapSizeLimit\u003C/span>\n            };\n        }\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cleanup\u003C/span>(\u003Cspan class=\"hljs-params\">tableElement\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(tableElement);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (observer) {\n            observer.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">observers\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(tableElement);\n        }\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// Global performance monitor instance\u003C/span>\n\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">tablePerformanceMonitor\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">TablePerformanceMonitor\u003C/span>();\n\u003C/code>\u003C/pre>\u003Ch2 id=\"accessibility-implementation\">Accessibility Implementation\u003C/h2>\n\u003Ch3 id=\"screen-reader-optimization\">Screen Reader Optimization\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// accessible-table-search.js - Accessibility-focused implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">AccessibleTableSearch\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">tableSelector, 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_\">querySelector\u003C/span>(tableSelector);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n            \u003Cspan class=\"hljs-attr\">announceResults\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">liveRegionDelay\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">keyboardNavigation\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n            \u003Cspan class=\"hljs-attr\">focusManagement\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\">searchInput\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span> = [];\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\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-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">enhanceTableAccessibility\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createAccessibleSearchInterface\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindAccessibilityEvents\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">cacheTableData\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">enhanceTableAccessibility\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Ensure table has proper ARIA attributes\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'table'\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Add table caption if not present\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">if\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\">'caption'\u003C/span>)) {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> caption = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'caption'\u003C/span>);\n            caption.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Data table with search functionality'\u003C/span>;\n            caption.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>; \u003Cspan class=\"hljs-comment\">// Screen reader only\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">insertBefore\u003C/span>(caption, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-property\">firstChild\u003C/span>);\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Enhance header cells\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'thead th'\u003C/span>);\n        headers.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">header, index\u003C/span>) =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!header.\u003Cspan class=\"hljs-property\">id\u003C/span>) {\n                header.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">`col-header-\u003Cspan class=\"hljs-subst\">${index}\u003C/span>`\u003C/span>;\n            }\n            header.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'scope'\u003C/span>, \u003Cspan class=\"hljs-string\">'col'\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Enhance data cells\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        rows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, rowIndex\u003C/span>) =>\u003C/span> {\n            row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'row'\u003C/span>);\n            \n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n            cells.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">cell, cellIndex\u003C/span>) =>\u003C/span> {\n                cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'cell'\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Associate with column header\u003C/span>\n                \u003Cspan class=\"hljs-keyword\">const\u003C/span> headerId = headers[cellIndex]?.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (headerId) {\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingHeaders = cell.\u003Cspan class=\"hljs-title function_\">getAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'headers'\u003C/span>) || \u003Cspan class=\"hljs-string\">''\u003C/span>;\n                    \u003Cspan class=\"hljs-keyword\">const\u003C/span> newHeaders = existingHeaders ? \n                        \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${existingHeaders}\u003C/span> \u003Cspan class=\"hljs-subst\">${headerId}\u003C/span>`\u003C/span> : headerId;\n                    cell.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'headers'\u003C/span>, newHeaders);\n                }\n            });\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">createAccessibleSearchInterface\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchContainer = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'accessible-search-container'\u003C/span>;\n        searchContainer.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'role'\u003C/span>, \u003Cspan class=\"hljs-string\">'search'\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Table search controls'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Search label and input\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchLabel = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'label'\u003C/span>);\n        searchLabel.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Search table data: '\u003C/span>;\n        searchLabel.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-label'\u003C/span>;\n        searchLabel.\u003Cspan class=\"hljs-property\">htmlFor\u003C/span> = \u003Cspan class=\"hljs-string\">'accessible-table-search'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'input'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'accessible-table-search'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'accessible-search-input'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-describedby'\u003C/span>, \u003Cspan class=\"hljs-string\">'search-instructions search-results'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'autocomplete'\u003C/span>, \u003Cspan class=\"hljs-string\">'off'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'spellcheck'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Search instructions\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> instructions = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        instructions.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'search-instructions'\u003C/span>;\n        instructions.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-instructions'\u003C/span>;\n        instructions.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Type to filter table rows. Use arrow keys to navigate results.'\u003C/span>;\n        \n        \u003Cspan class=\"hljs-comment\">// Clear button\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> clearButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'button'\u003C/span>);\n        clearButton.\u003Cspan class=\"hljs-property\">type\u003C/span> = \u003Cspan class=\"hljs-string\">'button'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-clear-button'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Clear search'\u003C/span>;\n        clearButton.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Clear search and show all results'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Search results summary\u003C/span>\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> resultsDiv = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n        resultsDiv.\u003Cspan class=\"hljs-property\">id\u003C/span> = \u003Cspan class=\"hljs-string\">'search-results'\u003C/span>;\n        resultsDiv.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'search-results-summary'\u003C/span>;\n        resultsDiv.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'polite'\u003C/span>);\n        resultsDiv.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Live region for announcements\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\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\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'sr-only'\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-live'\u003C/span>, \u003Cspan class=\"hljs-string\">'assertive'\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-atomic'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-comment\">// Assemble interface\u003C/span>\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(searchLabel);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(clearButton);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(instructions);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(resultsDiv);\n        searchContainer.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\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>(searchContainer, \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-property\">clearButton\u003C/span> = clearButton;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsDiv\u003C/span> = resultsDiv;\n        \n        \u003Cspan class=\"hljs-comment\">// Initial results summary\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsSummary\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">bindAccessibilityEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> searchTimeout;\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> announceTimeout;\n        \n        \u003Cspan class=\"hljs-comment\">// Search input events\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\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            \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(announceTimeout);\n            \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_\">performAccessibleSearch\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n                \n                \u003Cspan class=\"hljs-comment\">// Delayed announcement for better UX\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\">announceResults\u003C/span>) {\n                    announceTimeout = \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_\">announceSearchResults\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\">liveRegionDelay\u003C/span>);\n                }\n            }, \u003Cspan class=\"hljs-number\">300\u003C/span>);\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Keyboard navigation\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\">keyboardNavigation\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\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_\">handleSearchKeyboard\u003C/span>(e);\n            });\n            \n            \u003Cspan class=\"hljs-comment\">// Table 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_\">handleTableKeyboard\u003C/span>(e);\n            });\n        }\n        \n        \u003Cspan class=\"hljs-comment\">// Clear button\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">clearButton\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_\">clearSearch\u003C/span>();\n        });\n        \n        \u003Cspan class=\"hljs-comment\">// Focus management\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\">focusManagement\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'focus'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleSearchKeyboard\u003C/span>(\u003Cspan class=\"hljs-params\">e\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getVisibleRows\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\">if\u003C/span> (visibleRows.\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-title function_\">focusTableRow\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n                }\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Escape'\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_\">clearSearch\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusTableRow\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n                }\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">handleTableKeyboard\u003C/span>(\u003Cspan class=\"hljs-params\">e\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getVisibleRows\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\">'ArrowUp'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> <= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n                } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusTableRow\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                }\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \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\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> < visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n                    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">focusTableRow\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                }\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Home'\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_\">focusTableRow\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'End'\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_\">focusTableRow\u003C/span>(visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n                \n            \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'Escape'\u003C/span>:\n                e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n                \u003Cspan class=\"hljs-keyword\">break\u003C/span>;\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">focusTableRow\u003C/span>(\u003Cspan class=\"hljs-params\">index\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>();\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (index >= \u003Cspan class=\"hljs-number\">0\u003C/span> && index < visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span>) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> = index;\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = visibleRows[index];\n            \n            \u003Cspan class=\"hljs-comment\">// Make row focusable temporarily\u003C/span>\n            row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>, \u003Cspan class=\"hljs-string\">'-1'\u003C/span>);\n            row.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n            \n            \u003Cspan class=\"hljs-comment\">// Announce row content\u003C/span>\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">announceRowContent\u003C/span>(row, index + \u003Cspan class=\"hljs-number\">1\u003C/span>, visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n            \n            \u003Cspan class=\"hljs-comment\">// Remove tabindex from other rows\u003C/span>\n            visibleRows.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">otherRow, otherIndex\u003C/span>) =>\u003C/span> {\n                \u003Cspan class=\"hljs-keyword\">if\u003C/span> (otherIndex !== index) {\n                    otherRow.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'tabindex'\u003C/span>);\n                }\n            });\n        }\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceRowContent\u003C/span>(\u003Cspan class=\"hljs-params\">row, position, total\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>));\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> content = cells.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\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\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \n            \u003Cspan class=\"hljs-string\">`Row \u003Cspan class=\"hljs-subst\">${position}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span>: \u003Cspan class=\"hljs-subst\">${content}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">performAccessibleSearch\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>();\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsSummary\u003C/span>();\n            \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> lowerQuery = query.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> visibleCount = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rowData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> matches = rowData.\u003Cspan class=\"hljs-property\">searchableText\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(lowerQuery);\n            \n            \u003Cspan class=\"hljs-keyword\">if\u003C/span> (matches) {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n                visibleCount++;\n            } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n                \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">hideRow\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n            }\n        });\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsSummary\u003C/span>(visibleCount, query);\n        \n        \u003Cspan class=\"hljs-comment\">// Reset focus index when search changes\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\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        row.\u003Cspan class=\"hljs-title function_\">removeAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">hideRow\u003C/span>(\u003Cspan class=\"hljs-params\">row\u003C/span>) {\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'none'\u003C/span>;\n        row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'true'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">rowData\u003C/span> =>\u003C/span> {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showRow\u003C/span>(rowData.\u003Cspan class=\"hljs-property\">element\u003C/span>);\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody tr'\u003C/span>))\n            .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> !== \u003Cspan class=\"hljs-string\">'none'\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">cacheTableData\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        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span> = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(rows).\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_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>));\n            \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchableText = cells\n                .\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>())\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\">return\u003C/span> {\n                \u003Cspan class=\"hljs-attr\">element\u003C/span>: row,\n                \u003Cspan class=\"hljs-attr\">searchableText\u003C/span>: searchableText\n            };\n        });\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">updateResultsSummary\u003C/span>(\u003Cspan class=\"hljs-params\">visibleCount = \u003Cspan class=\"hljs-literal\">null\u003C/span>, query = \u003Cspan class=\"hljs-string\">''\u003C/span>\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> count = visibleCount !== \u003Cspan class=\"hljs-literal\">null\u003C/span> ? visibleCount : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> summaryText;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (query) {\n            summaryText = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${count}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> rows match "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            summaryText = \u003Cspan class=\"hljs-string\">`Showing all \u003Cspan class=\"hljs-subst\">${total}\u003C/span> rows`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">resultsDiv\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = summaryText;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceSearchResults\u003C/span>(\u003Cspan class=\"hljs-params\">query\u003C/span>) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleRows = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">getVisibleRows\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> count = visibleRows.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">originalRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> announcement;\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!query) {\n            announcement = \u003Cspan class=\"hljs-string\">`Showing all \u003Cspan class=\"hljs-subst\">${total}\u003C/span> rows`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (count === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n            announcement = \u003Cspan class=\"hljs-string\">`No results found for "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (count === \u003Cspan class=\"hljs-number\">1\u003C/span>) {\n            announcement = \u003Cspan class=\"hljs-string\">`1 result found for "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"`\u003C/span>;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n            announcement = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${count}\u003C/span> results found for "\u003Cspan class=\"hljs-subst\">${query}\u003C/span>"`\u003C/span>;\n        }\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = announcement;\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">clearSearch\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">showAllRows\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateResultsSummary\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentFocusIndex\u003C/span> = -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n        \n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \u003Cspan class=\"hljs-string\">'Search cleared, showing all rows'\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n    \u003Cspan class=\"hljs-title function_\">setFocus\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchInput\u003C/span>.\u003Cspan class=\"hljs-title function_\">focus\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-title function_\">announceMessage\u003C/span>(\u003Cspan class=\"hljs-params\">message\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">liveRegion\u003C/span>.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = message;\n    }\n}\n\n\u003Cspan class=\"hljs-comment\">// CSS for accessibility features\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> accessibilityStyles = \u003Cspan class=\"hljs-string\">`\n.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n}\n\n.accessible-search-container {\n    margin-bottom: 1rem;\n    padding: 16px;\n    background: #f8f9fa;\n    border-radius: 8px;\n    border: 1px solid #e9ecef;\n}\n\n.search-label {\n    display: block;\n    font-weight: 600;\n    margin-bottom: 8px;\n    color: #495057;\n}\n\n.accessible-search-input {\n    width: 100%;\n    max-width: 400px;\n    padding: 12px;\n    border: 2px solid #ced4da;\n    border-radius: 4px;\n    font-size: 16px;\n    margin-bottom: 8px;\n}\n\n.accessible-search-input:focus {\n    outline: none;\n    border-color: #007bff;\n    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);\n}\n\n.search-clear-button {\n    margin-left: 8px;\n    padding: 12px 16px;\n    background: #6c757d;\n    color: white;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n.search-clear-button:hover {\n    background: #545b62;\n}\n\n.search-clear-button:focus {\n    outline: 2px solid #007bff;\n    outline-offset: 2px;\n}\n\n.search-instructions {\n    font-size: 14px;\n    color: #6c757d;\n    margin: 8px 0;\n}\n\n.search-results-summary {\n    font-weight: 500;\n    color: #495057;\n    margin-top: 8px;\n}\n\n/* High contrast mode */\n@media (prefers-contrast: high) {\n    .accessible-search-container {\n        border: 2px solid #000;\n        background: #fff;\n    }\n    \n    .accessible-search-input {\n        border: 2px solid #000;\n    }\n    \n    .accessible-search-input:focus {\n        box-shadow: 0 0 0 3px #ffff00;\n        border-color: #000;\n    }\n}\n\n/* Focus indicators for keyboard navigation */\ntbody tr[tabindex]:focus {\n    outline: 2px solid #007bff;\n    outline-offset: -2px;\n    background-color: rgba(0, 123, 255, 0.1);\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n    .accessible-search-input,\n    .search-clear-button {\n        transition: none;\n    }\n}\n`\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Inject CSS\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> style = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'style'\u003C/span>);\n    style.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = accessibilityStyles;\n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-property\">head\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(style);\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Table data filtering and search capabilities transform static Markdown tables into dynamic, interactive content discovery systems that enhance user experience while maintaining accessibility and performance standards. Through progressive enhancement, intelligent search algorithms, and comprehensive filtering options, documentation creators can build sophisticated data exploration tools that scale effectively with content growth while serving diverse user needs.\u003C/p>\n\u003Cp>The key to successful implementation lies in balancing functionality with usability, ensuring that enhanced features improve rather than complicate the user experience. Whether you're building product catalogs, documentation indexes, or data dashboards, the techniques covered in this guide provide the foundation for creating searchable, filterable table systems that engage users while maintaining the simplicity and portability that make Markdown an ideal format for structured content.\u003C/p>\n\u003Cp>Remember to implement features progressively, prioritize keyboard accessibility, and optimize performance for large datasets. With proper table filtering and search implementation, your Markdown documentation becomes a powerful platform for content discovery that serves both casual browsers and power users seeking specific information within comprehensive datasets.\u003C/p>\n",[15,19,22,25,28,31,34,37],{"id":16,"text":17,"level":18},"why-implement-table-filtering-and-search","Why Implement Table Filtering and Search?",2,{"id":20,"text":21,"level":18},"foundation-javascript-integration","Foundation JavaScript Integration",{"id":23,"text":24,"level":18},"responsive-search-interface","Responsive Search Interface",{"id":26,"text":27,"level":18},"advanced-search-features","Advanced Search Features",{"id":29,"text":30,"level":18},"integration-with-modern-documentation","Integration with Modern Documentation",{"id":32,"text":33,"level":18},"performance-optimization","Performance Optimization",{"id":35,"text":36,"level":18},"accessibility-implementation","Accessibility Implementation",{"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-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","markdown table filtering, markdown table sorting, interactive markdown tables, dynamic table filtering, table search functionality, sortable markdown tables, table data manipulation, interactive documentation",32,{"slug":59,"title":60,"description":61,"excerpt":62,"date":63,"category":9,"author":10,"keywords":64,"readingMinutes":12},"markdown-anchor-links-scrollspy-navigation-complete-guide","Markdown Anchor Links and ScrollSpy Navigation: Complete Guide for Dynamic Content Navigation and Interactive Document Structure","Master Markdown anchor links and ScrollSpy navigation for creating dynamic, interactive documentation with automatic table of contents, smooth scrolling, and real-time section highlighting. Learn implementation strategies and best practices.","Advanced Markdown anchor links and ScrollSpy navigation enable sophisticated interactive documentation that automatically tracks user scroll position, highlights active sections, and provides…","2025-10-20","markdown anchor links, scrollspy navigation, markdown table of contents, dynamic navigation, anchor link generation, markdown section navigation, interactive documentation, smooth scrolling markdown",1792184945841]