[{"data":1,"prerenderedAt":69},["Reactive",2],{"blog-post-markdown-table-sorting-filtering-interactive-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":43,"related":44},"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","Tutorial","Matthew Rathbone","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,"\u003Cp>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 information efficiently. While standard Markdown tables provide basic data structure, implementing sorting and filtering capabilities through JavaScript integration, CSS enhancements, and component frameworks creates professional data management systems that rival dedicated database interfaces.\u003C/p>\n\u003Ch2 id=\"why-implement-interactive-table-features-in-markdown\">Why Implement Interactive Table Features in Markdown?\u003C/h2>\n\u003Cp>Interactive table functionality provides essential benefits for data-driven content:\u003C/p>\n\u003Cul>\n\u003Cli>\u003Cstrong>Enhanced User Experience\u003C/strong>: Enable readers to customize data views and find specific information quickly\u003C/li>\n\u003Cli>\u003Cstrong>Professional Data Presentation\u003C/strong>: Create sophisticated interfaces that handle complex datasets effectively  \u003C/li>\n\u003Cli>\u003Cstrong>Dynamic Content Management\u003C/strong>: Allow real-time data manipulation without page refreshes or external tools\u003C/li>\n\u003Cli>\u003Cstrong>Improved Accessibility\u003C/strong>: Provide multiple ways to navigate and understand tabular information\u003C/li>\n\u003Cli>\u003Cstrong>Scalable Information Architecture\u003C/strong>: Handle large datasets efficiently with client-side processing\u003C/li>\n\u003C/ul>\n\u003Ch2 id=\"foundation-table-structure-for-interactive-enhancement\">Foundation Table Structure for Interactive Enhancement\u003C/h2>\n\u003Ch3 id=\"basic-markdown-table-with-enhanced-markup\">Basic Markdown Table with Enhanced Markup\u003C/h3>\n\u003Cp>Creating semantic table structures that support JavaScript enhancement:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-markdown\">\u003Cspan class=\"hljs-section\"># Enhanced Table Structure Examples\u003C/span>\n\n\u003Cspan class=\"hljs-section\">## Customer Data Management Table\u003C/span>\n\n| Customer ID | Name | Email | Registration Date | Status | Total Orders | Revenue |\n|-------------|------|-------|------------------|---------|--------------|---------|\n| CU001 | Alice Johnson | alice@example.com | 2024-01-15 | Active | 12 | $1,250.50 |\n| CU002 | Bob Smith | bob@techcorp.com | 2024-02-03 | Inactive | 3 | $345.75 |\n| CU003 | Carol Davis | c.davis@startup.io | 2024-01-28 | Active | 8 | $890.25 |\n| CU004 | David Wilson | david.w@enterprise.net | 2024-03-10 | Active | 15 | $2,150.00 |\n| CU005 | Eva Martinez | eva.m@consulting.com | 2024-02-14 | Active | 6 | $672.30 |\n| CU006 | Frank Thompson | frank@digital.agency | 2024-01-05 | Inactive | 2 | $198.60 |\n\n\u003Cspan class=\"hljs-section\">## Product Inventory Table  \u003C/span>\n\n| Product Code | Product Name | Category | Stock Quantity | Unit Price | Supplier | Last Restocked |\n|--------------|--------------|----------|----------------|------------|----------|----------------|\n| PR001 | Wireless Headphones | Electronics | 45 | $79.99 | TechSupplier | 2024-03-15 |\n| PR002 | Ergonomic Keyboard | Electronics | 23 | $129.50 | OfficeGear | 2024-03-20 |\n| PR003 | Standing Desk | Furniture | 8 | $399.00 | WorkSpace | 2024-03-01 |\n| PR004 | Monitor Stand | Accessories | 67 | $34.95 | DeskTools | 2024-03-18 |\n| PR005 | USB-C Hub | Electronics | 31 | $49.99 | TechSupplier | 2024-03-22 |\n| PR006 | Office Chair | Furniture | 12 | $245.00 | WorkSpace | 2024-02-28 |\n\n\u003Cspan class=\"hljs-section\">## Project Management Dashboard\u003C/span>\n\n| Project | Status | Team Lead | Start Date | Due Date | Completion % | Budget | Spent |\n|---------|---------|----------|------------|----------|--------------|---------|--------|\n| Website Redesign | In Progress | Sarah Chen | 2024-01-10 | 2024-04-15 | 65% | $25,000 | $16,250 |\n| Mobile App | Planning | Mike Rodriguez | 2024-03-01 | 2024-08-30 | 15% | $45,000 | $6,750 |\n| Database Migration | Completed | Anna Kumar | 2023-11-15 | 2024-02-28 | 100% | $15,000 | $14,800 |\n| API Integration | On Hold | Tom Jackson | 2024-02-01 | 2024-05-15 | 25% | $20,000 | $5,000 |\n| Security Audit | In Progress | Lisa Wang | 2024-03-10 | 2024-04-30 | 40% | $12,000 | $4,800 |\n\u003C/code>\u003C/pre>\u003Ch3 id=\"html-table-structure-with-enhanced-attributes\">HTML Table Structure with Enhanced Attributes\u003C/h3>\n\u003Cp>Adding semantic markup and data attributes for JavaScript targeting:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-html\">\u003Cspan class=\"hljs-comment\"><!-- Enhanced HTML table with sorting and filtering support -->\u003C/span>\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"interactive-table-container"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"customer-data-table"\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-controls"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"search-controls"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"table-search"\u003C/span>>\u003C/span>Search:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \n        \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"table-search"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Search customers..."\u003C/span> \n        \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-search-input"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">data-table-target\u003C/span>=\u003Cspan class=\"hljs-string\">"customer-table"\u003C/span>\n      >\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"filter-controls"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"status-filter"\u003C/span>>\u003C/span>Status:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"status-filter"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-filter"\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>All Statuses\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"Active"\u003C/span>>\u003C/span>Active\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"Inactive"\u003C/span>>\u003C/span>Inactive\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"date-filter"\u003C/span>>\u003C/span>Registration Date:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \n        \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"date"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"date-from"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-date-filter"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"registration_date"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">data-filter-type\u003C/span>=\u003Cspan class=\"hljs-string\">"from"\u003C/span>\n      >\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span> \n        \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"date"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"date-to"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-date-filter"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"registration_date"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">data-filter-type\u003C/span>=\u003Cspan class=\"hljs-string\">"to"\u003C/span>\n      >\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"display-controls"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">for\u003C/span>=\u003Cspan class=\"hljs-string\">"rows-per-page"\u003C/span>>\u003C/span>Rows per page:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"rows-per-page"\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-control"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"10"\u003C/span>>\u003C/span>10\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"25"\u003C/span> \u003Cspan class=\"hljs-attr\">selected\u003C/span>>\u003C/span>25\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"50"\u003C/span>>\u003C/span>50\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">"100"\u003C/span>>\u003C/span>100\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \n    \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"customer-table"\u003C/span> \n    \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-table filterable-table"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">data-table-type\u003C/span>=\u003Cspan class=\"hljs-string\">"customer-data"\u003C/span>\n    \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Customer data management table"\u003C/span>\n  >\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> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"customer_id"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Customer ID"\u003C/span>\n        >\u003C/span>\n          Customer ID\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Name"\u003C/span>\n        >\u003C/span>\n          Name\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Email"\u003C/span>\n        >\u003C/span>\n          Email\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"registration_date"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"date"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Registration Date"\u003C/span>\n        >\u003C/span>\n          Registration Date\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Status"\u003C/span>\n        >\u003C/span>\n          Status\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"total_orders"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"number"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Total Orders"\u003C/span>\n        >\u003C/span>\n          Total Orders\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"revenue"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">data-type\u003C/span>=\u003Cspan class=\"hljs-string\">"currency"\u003C/span> \n          \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sortable-header"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">tabindex\u003C/span>=\u003Cspan class=\"hljs-string\">"0"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">role\u003C/span>=\u003Cspan class=\"hljs-string\">"button"\u003C/span>\n          \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Sort by Revenue"\u003C/span>\n        >\u003C/span>\n          Revenue\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator"\u003C/span> \u003Cspan class=\"hljs-attr\">aria-hidden\u003C/span>=\u003Cspan class=\"hljs-string\">"true"\u003C/span>>\u003C/span>\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">thead\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span> \u003Cspan class=\"hljs-attr\">data-row-id\u003C/span>=\u003Cspan class=\"hljs-string\">"CU001"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"customer_id"\u003C/span>>\u003C/span>CU001\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Alice Johnson\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span>>\u003C/span>alice@example.com\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"registration_date"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"2024-01-15"\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\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"total_orders"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"12"\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"revenue"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"1250.50"\u003C/span>>\u003C/span>$1,250.50\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> \u003Cspan class=\"hljs-attr\">data-row-id\u003C/span>=\u003Cspan class=\"hljs-string\">"CU002"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"customer_id"\u003C/span>>\u003C/span>CU002\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Bob Smith\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span>>\u003C/span>bob@techcorp.com\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"registration_date"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"2024-02-03"\u003C/span>>\u003C/span>2024-02-03\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"total_orders"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>3\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"revenue"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"345.75"\u003C/span>>\u003C/span>$345.75\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> \u003Cspan class=\"hljs-attr\">data-row-id\u003C/span>=\u003Cspan class=\"hljs-string\">"CU003"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"customer_id"\u003C/span>>\u003C/span>CU003\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"name"\u003C/span>>\u003C/span>Carol Davis\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"email"\u003C/span>>\u003C/span>c.davis@startup.io\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"registration_date"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"2024-01-28"\u003C/span>>\u003C/span>2024-01-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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"status"\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"total_orders"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"8"\u003C/span>>\u003C/span>8\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> \u003Cspan class=\"hljs-attr\">data-column\u003C/span>=\u003Cspan class=\"hljs-string\">"revenue"\u003C/span> \u003Cspan class=\"hljs-attr\">data-sort-value\u003C/span>=\u003Cspan class=\"hljs-string\">"890.25"\u003C/span>>\u003C/span>$890.25\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-comment\"><!-- Additional rows would continue here -->\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tbody\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">table\u003C/span>>\u003C/span>\n  \n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"table-pagination"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"customer-pagination"\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-info"\u003C/span>>\u003C/span>\n      Showing \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-start"\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span> to \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-end"\u003C/span>>\u003C/span>25\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span> \n      of \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-total"\u003C/span>>\u003C/span>100\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span> entries\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-controls"\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \n        \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-prev"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-btn"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Previous page"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">disabled\u003C/span>\n      >\u003C/span>\n        Previous\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-numbers"\u003C/span> \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-numbers"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-number active"\u003C/span> \u003Cspan class=\"hljs-attr\">data-page\u003C/span>=\u003Cspan class=\"hljs-string\">"1"\u003C/span>>\u003C/span>1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-number"\u003C/span> \u003Cspan class=\"hljs-attr\">data-page\u003C/span>=\u003Cspan class=\"hljs-string\">"2"\u003C/span>>\u003C/span>2\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-number"\u003C/span> \u003Cspan class=\"hljs-attr\">data-page\u003C/span>=\u003Cspan class=\"hljs-string\">"3"\u003C/span>>\u003C/span>3\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-ellipsis"\u003C/span>>\u003C/span>...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-number"\u003C/span> \u003Cspan class=\"hljs-attr\">data-page\u003C/span>=\u003Cspan class=\"hljs-string\">"4"\u003C/span>>\u003C/span>4\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      \n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \n        \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-next"\u003C/span> \n        \u003Cspan class=\"hljs-attr\">class\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-btn"\u003C/span>\n        \u003Cspan class=\"hljs-attr\">aria-label\u003C/span>=\u003Cspan class=\"hljs-string\">"Next page"\u003C/span>\n      >\u003C/span>\n        Next\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"javascript-implementation-for-table-interactivity\">JavaScript Implementation for Table Interactivity\u003C/h2>\n\u003Ch3 id=\"comprehensive-table-sorting-system\">Comprehensive Table Sorting System\u003C/h3>\n\u003Cp>Professional sorting implementation with multiple data type support:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// advanced-table-sorting.js - Complete table sorting system\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableSorter\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\">tbody\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headers\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\">'th.sortable-header'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\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\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">multiSort\u003C/span>: options.\u003Cspan class=\"hljs-property\">multiSort\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">defaultSort\u003C/span>: options.\u003Cspan class=\"hljs-property\">defaultSort\u003C/span> || \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortIndicators\u003C/span>: options.\u003Cspan class=\"hljs-property\">sortIndicators\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">animationDuration\u003C/span>: options.\u003Cspan class=\"hljs-property\">animationDuration\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\">sortState\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\">currentSort\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_\">bindHeaderEvents\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSortIndicators\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\">defaultSort\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySorting\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">defaultSort\u003C/span>);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Keyboard accessibility\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n      header.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span> || e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">' '\u003C/span>) {\n          e.\u003Cspan class=\"hljs-title function_\">preventDefault\u003C/span>();\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleHeaderClick\u003C/span>(e);\n        }\n      });\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindHeaderEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n      header.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleHeaderClick\u003C/span>(e));\n      header.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">cursor\u003C/span> = \u003Cspan class=\"hljs-string\">'pointer'\u003C/span>;\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleHeaderClick\u003C/span>(\u003Cspan class=\"hljs-params\">e\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> header = e.\u003Cspan class=\"hljs-property\">currentTarget\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> column = header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> dataType = header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">type\u003C/span> || \u003Cspan class=\"hljs-string\">'text'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> sortDirection = \u003Cspan class=\"hljs-string\">'asc'\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\">multiSort\u003C/span> || !e.\u003Cspan class=\"hljs-property\">ctrlKey\u003C/span> && !e.\u003Cspan class=\"hljs-property\">metaKey\u003C/span>) {\n      \u003Cspan class=\"hljs-comment\">// Single column sort\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(column) === \u003Cspan class=\"hljs-string\">'asc'\u003C/span>) {\n        sortDirection = \u003Cspan class=\"hljs-string\">'desc'\u003C/span>;\n      }\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = [];\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-comment\">// Multi-column sort\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> currentDirection = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(column);\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span>) {\n        sortDirection = \u003Cspan class=\"hljs-string\">'desc'\u003C/span>;\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (currentDirection === \u003Cspan class=\"hljs-string\">'desc'\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(column);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">sort\u003C/span> =>\u003C/span> sort.\u003Cspan class=\"hljs-property\">column\u003C/span> !== column);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySorting\u003C/span>();\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n      }\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, sortDirection);\n    \n    \u003Cspan class=\"hljs-comment\">// Update current sort array for multi-sort\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">sort\u003C/span> =>\u003C/span> sort.\u003Cspan class=\"hljs-property\">column\u003C/span> === column);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortConfig = { column, \u003Cspan class=\"hljs-attr\">direction\u003C/span>: sortDirection, \u003Cspan class=\"hljs-attr\">type\u003C/span>: dataType };\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>[existingIndex] = sortConfig;\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">multiSort\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = [sortConfig];\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(sortConfig);\n      }\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySorting\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">applySorting\u003C/span>(\u003Cspan class=\"hljs-params\">sortConfig = \u003Cspan class=\"hljs-literal\">null\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortConfigs = sortConfig ? [sortConfig] : \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortConfigs.\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_\">restoreOriginalOrder\u003C/span>();\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortedRows = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>].\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> config \u003Cspan class=\"hljs-keyword\">of\u003C/span> sortConfigs) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> result = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">compareRows\u003C/span>(a, b, config);\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (result !== \u003Cspan class=\"hljs-number\">0\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> result;\n      }\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">animateRowChanges\u003C/span>(sortedRows);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">compareRows\u003C/span>(\u003Cspan class=\"hljs-params\">rowA, rowB, { column, direction, type }\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellA = rowA.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellB = rowB.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${column}\u003C/span>"]`\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> valueA = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractSortValue\u003C/span>(cellA, type);\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> valueB = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">extractSortValue\u003C/span>(cellB, type);\n    \n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> comparison = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">compareValues\u003C/span>(valueA, valueB, type);\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> direction === \u003Cspan class=\"hljs-string\">'desc'\u003C/span> ? -comparison : comparison;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">extractSortValue\u003C/span>(\u003Cspan class=\"hljs-params\">cell, type\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Check for explicit sort value\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortValue = cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortValue\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortValue !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">convertValue\u003C/span>(sortValue, type);\n    }\n    \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\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">convertValue\u003C/span>(text, type);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">convertValue\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> numMatch = value.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/([\\d,]+\\.?\\d*)/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> numMatch ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(numMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>].\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/,/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)) : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'currency'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> currencyMatch = value.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[\\d,]+\\.?\\d*/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> currencyMatch ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(currencyMatch[\u003Cspan class=\"hljs-number\">0\u003C/span>].\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/,/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>)) : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'date'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value);\n        \n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'percentage'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> percentMatch = value.\u003Cspan class=\"hljs-title function_\">match\u003C/span>(\u003Cspan class=\"hljs-regexp\">/(\\d+\\.?\\d*)%/\u003C/span>);\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> percentMatch ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(percentMatch[\u003Cspan class=\"hljs-number\">1\u003C/span>]) : \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> value.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'true'\u003C/span> || value.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>() === \u003Cspan class=\"hljs-string\">'yes'\u003C/span> || value === \u003Cspan class=\"hljs-string\">'1'\u003C/span>;\n        \n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'text'\u003C/span>:\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_\">compareValues\u003C/span>(\u003Cspan class=\"hljs-params\">a, b, type\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (type === \u003Cspan class=\"hljs-string\">'date'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> a.\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>() - b.\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> a === \u003Cspan class=\"hljs-string\">'number'\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> b === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> a - b;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> a === \u003Cspan class=\"hljs-string\">'boolean'\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> b === \u003Cspan class=\"hljs-string\">'boolean'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> a === b ? \u003Cspan class=\"hljs-number\">0\u003C/span> : a ? \u003Cspan class=\"hljs-number\">1\u003C/span> : -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> a.\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(b);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">animateRowChanges\u003C/span>(\u003Cspan class=\"hljs-params\">newOrder\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\">animationDuration\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceRows\u003C/span>(newOrder);\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Add animation classes\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transition\u003C/span> = \u003Cspan class=\"hljs-string\">`transform \u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.animationDuration}\u003C/span>ms ease`\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Calculate position changes\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> positions = \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\">rows\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      positions.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(row, index);\n    });\n    \n    newOrder.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">row, newIndex\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> oldIndex = positions.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(row);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> offset = (newIndex - oldIndex) * row.\u003Cspan class=\"hljs-property\">offsetHeight\u003C/span>;\n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">`translateY(\u003Cspan class=\"hljs-subst\">${offset}\u003C/span>px)`\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Complete animation and reorder DOM\u003C/span>\n    \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_\">replaceRows\u003C/span>(newOrder);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transition\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">transform\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      });\n    }, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">animationDuration\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">replaceRows\u003C/span>(\u003Cspan class=\"hljs-params\">newOrder\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> fragment = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDocumentFragment\u003C/span>();\n    newOrder.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> fragment.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row));\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(fragment);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span> = newOrder;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">restoreOriginalOrder\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalOrder = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rows\u003C/span>].\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> aIndex = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(a.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalIndex\u003C/span> || \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> bIndex = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(b.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalIndex\u003C/span> || \u003Cspan class=\"hljs-string\">'0'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> aIndex - bIndex;\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">replaceRows\u003C/span>(originalOrder);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupSortIndicators\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\">sortIndicators\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = header.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n        indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'↕️'\u003C/span>;\n        indicator.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Not sorted'\u003C/span>);\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateSortIndicators\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\">sortIndicators\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Reset all indicators\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">headers\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">header\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> indicator = header.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.sort-indicator'\u003C/span>);\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> column = header.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (indicator) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortDirection = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(column);\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">sort\u003C/span> =>\u003C/span> sort.\u003Cspan class=\"hljs-property\">column\u003C/span> === column);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortDirection) {\n          \u003Cspan class=\"hljs-keyword\">const\u003C/span> arrow = sortDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'↑'\u003C/span> : \u003Cspan class=\"hljs-string\">'↓'\u003C/span>;\n          \u003Cspan class=\"hljs-keyword\">const\u003C/span> number = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">multiSort\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1\u003C/span> \n            ? \u003Cspan class=\"hljs-string\">` \u003Cspan class=\"hljs-subst\">${sortIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>;\n          \n          indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = arrow + number;\n          indicator.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \n            \u003Cspan class=\"hljs-string\">`Sorted \u003Cspan class=\"hljs-subst\">${sortDirection === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'ascending'\u003C/span> : \u003Cspan class=\"hljs-string\">'descending'\u003C/span>}\u003C/span>\u003Cspan class=\"hljs-subst\">${number ? \u003Cspan class=\"hljs-string\">`, priority \u003Cspan class=\"hljs-subst\">${sortIndex + \u003Cspan class=\"hljs-number\">1\u003C/span>}\u003C/span>`\u003C/span> : \u003Cspan class=\"hljs-string\">''\u003C/span>}\u003C/span>`\u003C/span>\n          );\n          \n          header.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(\u003Cspan class=\"hljs-string\">'sorted'\u003C/span>, \u003Cspan class=\"hljs-string\">`sorted-\u003Cspan class=\"hljs-subst\">${sortDirection}\u003C/span>`\u003C/span>);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n          indicator.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">'↕️'\u003C/span>;\n          indicator.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-label'\u003C/span>, \u003Cspan class=\"hljs-string\">'Not sorted'\u003C/span>);\n          header.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>(\u003Cspan class=\"hljs-string\">'sorted'\u003C/span>, \u003Cspan class=\"hljs-string\">'sorted-asc'\u003C/span>, \u003Cspan class=\"hljs-string\">'sorted-desc'\u003C/span>);\n        }\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">sortByColumn\u003C/span>(\u003Cspan class=\"hljs-params\">column, direction = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>, type = \u003Cspan class=\"hljs-string\">'text'\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, direction);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = [{ column, direction, type }];\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySorting\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">addSort\u003C/span>(\u003Cspan class=\"hljs-params\">column, direction = \u003Cspan class=\"hljs-string\">'asc'\u003C/span>, type = \u003Cspan class=\"hljs-string\">'text'\u003C/span>\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\">multiSort\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">sortByColumn\u003C/span>(column, direction, type);\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(column, direction);\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingIndex = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-title function_\">findIndex\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">sort\u003C/span> =>\u003C/span> sort.\u003Cspan class=\"hljs-property\">column\u003C/span> === column);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> sortConfig = { column, direction, type };\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingIndex >= \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>[existingIndex] = sortConfig;\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(sortConfig);\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applySorting\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">clearSort\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span> = [];\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">restoreOriginalOrder\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateSortIndicators\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">getSortState\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n      \u003Cspan class=\"hljs-attr\">sorts\u003C/span>: [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">currentSort\u003C/span>],\n      \u003Cspan class=\"hljs-attr\">sortMap\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">sortState\u003C/span>)\n    };\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Initialize table sorting\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\">// Basic sorting initialization\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> basicTable = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableSorter\u003C/span>(\u003Cspan class=\"hljs-string\">'#customer-table'\u003C/span>, {\n    \u003Cspan class=\"hljs-attr\">defaultSort\u003C/span>: { \u003Cspan class=\"hljs-attr\">column\u003C/span>: \u003Cspan class=\"hljs-string\">'name'\u003C/span>, \u003Cspan class=\"hljs-attr\">direction\u003C/span>: \u003Cspan class=\"hljs-string\">'asc'\u003C/span>, \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'text'\u003C/span> },\n    \u003Cspan class=\"hljs-attr\">animationDuration\u003C/span>: \u003Cspan class=\"hljs-number\">250\u003C/span>\n  });\n  \n  \u003Cspan class=\"hljs-comment\">// Multi-sort enabled table\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> advancedTable = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableSorter\u003C/span>(\u003Cspan class=\"hljs-string\">'#product-table'\u003C/span>, {\n    \u003Cspan class=\"hljs-attr\">multiSort\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">sortIndicators\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n    \u003Cspan class=\"hljs-attr\">animationDuration\u003C/span>: \u003Cspan class=\"hljs-number\">300\u003C/span>\n  });\n  \n  \u003Cspan class=\"hljs-comment\">// Project management table with custom sorting\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> projectTable = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MarkdownTableSorter\u003C/span>(\u003Cspan class=\"hljs-string\">'#project-table'\u003C/span>, {\n    \u003Cspan class=\"hljs-attr\">defaultSort\u003C/span>: { \u003Cspan class=\"hljs-attr\">column\u003C/span>: \u003Cspan class=\"hljs-string\">'due_date'\u003C/span>, \u003Cspan class=\"hljs-attr\">direction\u003C/span>: \u003Cspan class=\"hljs-string\">'asc'\u003C/span>, \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'date'\u003C/span> },\n    \u003Cspan class=\"hljs-attr\">multiSort\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n  });\n});\n\u003C/code>\u003C/pre>\u003Ch3 id=\"advanced-filtering-implementation\">Advanced Filtering Implementation\u003C/h3>\n\u003Cp>Comprehensive filtering system with multiple filter types:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// advanced-table-filtering.js - Complete table 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\">tbody\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'tbody'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\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\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>));\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span> = [...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\u003C/span>];\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">searchDelay\u003C/span>: options.\u003Cspan class=\"hljs-property\">searchDelay\u003C/span> || \u003Cspan class=\"hljs-number\">300\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">caseSensitive\u003C/span>: options.\u003Cspan class=\"hljs-property\">caseSensitive\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">searchHighlight\u003C/span>: options.\u003Cspan class=\"hljs-property\">searchHighlight\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">liveFilter\u003C/span>: options.\u003Cspan class=\"hljs-property\">liveFilter\u003C/span> !== \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      ...options\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Map\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimeout\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupSearchFilter\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupColumnFilters\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupDateRangeFilters\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">bindFilterEvents\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Store original row indices for restoration\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\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      row.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalIndex\u003C/span> = index;\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupSearchFilter\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-table-target="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!searchInput) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \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>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimeout\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\">liveFilter\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimeout\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_\">setSearchFilter\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\">searchDelay\u003C/span>);\n      }\n    });\n    \n    searchInput.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'keydown'\u003C/span>, \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (e.\u003Cspan class=\"hljs-property\">key\u003C/span> === \u003Cspan class=\"hljs-string\">'Enter'\u003C/span>) {\n        \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTimeout\u003C/span>);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setSearchFilter\u003C/span>(e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>);\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupColumnFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> columnFilters = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-filter'\u003C/span>);\n    \n    columnFilters.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">filter\u003C/span> =>\u003C/span> {\n      filter.\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-keyword\">const\u003C/span> column = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeFilter\u003C/span>(column);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setColumnFilter\u003C/span>(column, value, \u003Cspan class=\"hljs-string\">'exact'\u003C/span>);\n        }\n      });\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupDateRangeFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> dateFilters = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-date-filter'\u003C/span>);\n    \n    dateFilters.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">filter\u003C/span> =>\u003C/span> {\n      filter.\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-keyword\">const\u003C/span> column = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">column\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterType = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">filterType\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = e.\u003Cspan class=\"hljs-property\">target\u003C/span>.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (value === \u003Cspan class=\"hljs-string\">''\u003C/span>) {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeDateRangeFilter\u003C/span>(column, filterType);\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setDateRangeFilter\u003C/span>(column, filterType, value);\n        }\n      });\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">bindFilterEvents\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Custom filter events\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\">'filterChange'\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_\">applyAllFilters\u003C/span>();\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Reset filter button\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> resetButton = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-reset-table="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (resetButton) {\n      resetButton.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">clearAllFilters\u003C/span>();\n      });\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setSearchFilter\u003C/span>(\u003Cspan class=\"hljs-params\">searchTerm\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span> = searchTerm;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Dispatch custom event\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'searchFilter'\u003C/span>, {\n      \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { searchTerm, \u003Cspan class=\"hljs-attr\">resultCount\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> }\n    }));\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setColumnFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, value, operator = \u003Cspan class=\"hljs-string\">'exact'\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterKey = \u003Cspan class=\"hljs-string\">`column_\u003Cspan class=\"hljs-subst\">${column}\u003C/span>`\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>(filterKey, {\n      \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'column'\u003C/span>,\n      column,\n      value,\n      operator\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setDateRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, rangeType, value\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterKey = \u003Cspan class=\"hljs-string\">`date_\u003Cspan class=\"hljs-subst\">${column}\u003C/span>_\u003Cspan class=\"hljs-subst\">${rangeType}\u003C/span>`\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>(filterKey, {\n      \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'dateRange'\u003C/span>,\n      column,\n      rangeType,\n      \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(value)\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setNumericRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, min, max\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterKey = \u003Cspan class=\"hljs-string\">`numeric_\u003Cspan class=\"hljs-subst\">${column}\u003C/span>`\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>(filterKey, {\n      \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'numericRange'\u003C/span>,\n      column,\n      \u003Cspan class=\"hljs-attr\">min\u003C/span>: min !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span> ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(min) : \u003Cspan class=\"hljs-literal\">null\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">max\u003C/span>: max !== \u003Cspan class=\"hljs-literal\">undefined\u003C/span> ? \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(max) : \u003Cspan class=\"hljs-literal\">null\u003C/span>\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setCustomFilter\u003C/span>(\u003Cspan class=\"hljs-params\">key, filterFunction\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>(key, {\n      \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'custom'\u003C/span>,\n      filterFunction\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">removeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">key\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Handle column filter shorthand\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!key.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'_'\u003C/span>)) {\n      key = \u003Cspan class=\"hljs-string\">`column_\u003Cspan class=\"hljs-subst\">${key}\u003C/span>`\u003C/span>;\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(key);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">removeDateRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">column, rangeType\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterKey = \u003Cspan class=\"hljs-string\">`date_\u003Cspan class=\"hljs-subst\">${column}\u003C/span>_\u003Cspan class=\"hljs-subst\">${rangeType}\u003C/span>`\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(filterKey);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\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\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Clear UI elements\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchInput = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-table-target="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (searchInput) searchInput.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-filter'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">filter\u003C/span> =>\u003C/span> {\n      filter.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-date-filter'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">filter\u003C/span> =>\u003C/span> {\n      filter.\u003Cspan class=\"hljs-property\">value\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">applyAllFilters\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-comment\">// Apply search filter\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span> && !\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchesSearch\u003C/span>(row, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>)) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n      }\n      \n      \u003Cspan class=\"hljs-comment\">// Apply all other filters\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> filter \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>()) {\n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchesFilter\u003C/span>(row, filter)) {\n          \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n    });\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateTableDisplay\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateFilterStats\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Highlight search terms if enabled\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">searchHighlight\u003C/span> && \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">highlightSearchTerms\u003C/span>();\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeHighlights\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">matchesSearch\u003C/span>(\u003Cspan class=\"hljs-params\">row, searchTerm\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchText = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">caseSensitive\u003C/span> ? searchTerm : searchTerm.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(cells).\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellText = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">caseSensitive\u003C/span> \n        ? cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>() \n        : cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>().\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n      \n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellText.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(searchText);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">matchesFilter\u003C/span>(\u003Cspan class=\"hljs-params\">row, filter\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\">'column'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchesColumnFilter\u003C/span>(row, filter);\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'dateRange'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchesDateRangeFilter\u003C/span>(row, filter);\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'numericRange'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">matchesNumericRangeFilter\u003C/span>(row, filter);\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'custom'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> filter.\u003Cspan class=\"hljs-title function_\">filterFunction\u003C/span>(row);\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_\">matchesColumnFilter\u003C/span>(\u003Cspan class=\"hljs-params\">row, filter\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${filter.column}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterValue = filter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">switch\u003C/span> (filter.\u003Cspan class=\"hljs-property\">operator\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'exact'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellValue === filterValue;\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'contains'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filterValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'startsWith'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">startsWith\u003C/span>(filterValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'endsWith'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">endsWith\u003C/span>(filterValue.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>());\n      \u003Cspan class=\"hljs-keyword\">case\u003C/span> \u003Cspan class=\"hljs-string\">'regex'\u003C/span>:\n        \u003Cspan class=\"hljs-keyword\">try\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>(filterValue, \u003Cspan class=\"hljs-string\">'i'\u003C/span>);\n          \u003Cspan class=\"hljs-keyword\">return\u003C/span> regex.\u003Cspan class=\"hljs-title function_\">test\u003C/span>(cellValue);\n        } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> {\n          \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n        }\n      \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_\">matchesDateRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">row, filter\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${filter.column}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortValue\u003C/span> || cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellDate = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(cellValue);\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(cellDate.\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>())) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filter.\u003Cspan class=\"hljs-property\">rangeType\u003C/span> === \u003Cspan class=\"hljs-string\">'from'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> fromFilters = \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\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n        .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">f\u003C/span> =>\u003C/span> f.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'dateRange'\u003C/span> && f.\u003Cspan class=\"hljs-property\">column\u003C/span> === filter.\u003Cspan class=\"hljs-property\">column\u003C/span> && f.\u003Cspan class=\"hljs-property\">rangeType\u003C/span> === \u003Cspan class=\"hljs-string\">'to'\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> toFilter = fromFilters.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? fromFilters[\u003Cspan class=\"hljs-number\">0\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (toFilter) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellDate >= filter.\u003Cspan class=\"hljs-property\">value\u003C/span> && cellDate <= toFilter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellDate >= filter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n      }\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filter.\u003Cspan class=\"hljs-property\">rangeType\u003C/span> === \u003Cspan class=\"hljs-string\">'to'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> fromFilters = \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\">filters\u003C/span>.\u003Cspan class=\"hljs-title function_\">values\u003C/span>())\n        .\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">f\u003C/span> =>\u003C/span> f.\u003Cspan class=\"hljs-property\">type\u003C/span> === \u003Cspan class=\"hljs-string\">'dateRange'\u003C/span> && f.\u003Cspan class=\"hljs-property\">column\u003C/span> === filter.\u003Cspan class=\"hljs-property\">column\u003C/span> && f.\u003Cspan class=\"hljs-property\">rangeType\u003C/span> === \u003Cspan class=\"hljs-string\">'from'\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> fromFilter = fromFilters.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span> ? fromFilters[\u003Cspan class=\"hljs-number\">0\u003C/span>] : \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (fromFilter) {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellDate >= fromFilter.\u003Cspan class=\"hljs-property\">value\u003C/span> && cellDate <= filter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellDate <= filter.\u003Cspan class=\"hljs-property\">value\u003C/span>;\n      }\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">matchesNumericRangeFilter\u003C/span>(\u003Cspan class=\"hljs-params\">row, filter\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = row.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-column="\u003Cspan class=\"hljs-subst\">${filter.column}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!cell) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cellValue = cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">sortValue\u003C/span> || cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> numValue = \u003Cspan class=\"hljs-built_in\">parseFloat\u003C/span>(cellValue.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(\u003Cspan class=\"hljs-regexp\">/[$,]/g\u003C/span>, \u003Cspan class=\"hljs-string\">''\u003C/span>));\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-built_in\">isNaN\u003C/span>(numValue)) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filter.\u003Cspan class=\"hljs-property\">min\u003C/span> !== \u003Cspan class=\"hljs-literal\">null\u003C/span> && numValue < filter.\u003Cspan class=\"hljs-property\">min\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (filter.\u003Cspan class=\"hljs-property\">max\u003C/span> !== \u003Cspan class=\"hljs-literal\">null\u003C/span> && numValue > filter.\u003Cspan class=\"hljs-property\">max\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">false\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateTableDisplay\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Hide all rows first\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">'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-comment\">// Show visible rows\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> {\n      row.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">display\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      row.\u003Cspan class=\"hljs-title function_\">setAttribute\u003C/span>(\u003Cspan class=\"hljs-string\">'aria-hidden'\u003C/span>, \u003Cspan class=\"hljs-string\">'false'\u003C/span>);\n    });\n    \n    \u003Cspan class=\"hljs-comment\">// Update empty state\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateEmptyState\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateEmptyState\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> existingEmptyRow = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.empty-state-row'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (existingEmptyRow) {\n      existingEmptyRow.\u003Cspan class=\"hljs-title function_\">remove\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> === \u003Cspan class=\"hljs-number\">0\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> colCount = \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\">'th'\u003C/span>).\u003Cspan class=\"hljs-property\">length\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> emptyRow = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n      emptyRow.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'empty-state-row'\u003C/span>;\n      emptyRow.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">`\n        <td colspan="\u003Cspan class=\"hljs-subst\">${colCount}\u003C/span>" class="empty-state-message">\n          No results found. Try adjusting your search or filter criteria.\n        </td>\n      `\u003C/span>;\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(emptyRow);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateFilterStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> statsElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">`[data-filter-stats="\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.table.id}\u003C/span>"]`\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!statsElement) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> total = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> visible = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> filtered = total - visible;\n    \n    statsElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = filtered > \u003Cspan class=\"hljs-number\">0\u003C/span> \n      ? \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visible}\u003C/span> of \u003Cspan class=\"hljs-subst\">${total}\u003C/span> entries (\u003Cspan class=\"hljs-subst\">${filtered}\u003C/span> filtered out)`\u003C/span>\n      : \u003Cspan class=\"hljs-string\">`Showing \u003Cspan class=\"hljs-subst\">${visible}\u003C/span> entries`\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">highlightSearchTerms\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\">searchTerm\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> searchRegex = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">RegExp\u003C/span>(\u003Cspan class=\"hljs-string\">`(\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.searchTerm}\u003C/span>)`\u003C/span>, \u003Cspan class=\"hljs-string\">'gi'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\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> 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\u003C/span> =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> originalText = cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> highlightedText = originalText.\u003Cspan class=\"hljs-title function_\">replace\u003C/span>(searchRegex, \u003Cspan class=\"hljs-string\">'<mark class="search-highlight">$1</mark>'\u003C/span>);\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (highlightedText !== originalText) {\n          cell.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = highlightedText;\n          cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalText\u003C/span> = originalText;\n        }\n      });\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">removeHighlights\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">tbody\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'[data-original-text]'\u003C/span>).\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> {\n      cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalText\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">delete\u003C/span> cell.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">originalText\u003C/span>;\n    });\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Public API methods\u003C/span>\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\">visibleRows\u003C/span>];\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">getFilterStats\u003C/span>(\u003Cspan class=\"hljs-params\">\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\">allRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">visible\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">filtered\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">allRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">activeFilters\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filters\u003C/span>.\u003Cspan class=\"hljs-property\">size\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">hasSearch\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">searchTerm\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">0\u003C/span>\n    };\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">exportFilteredData\u003C/span>(\u003Cspan class=\"hljs-params\">format = \u003Cspan class=\"hljs-string\">'csv'\u003C/span>\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> headers = \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">table\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'th'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">th\u003C/span> =>\u003C/span> \n      th.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()\n    );\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> data = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRows\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-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(row.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>)).\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">td\u003C/span> =>\u003C/span> \n        td.\u003Cspan class=\"hljs-property\">textContent\u003C/span>.\u003Cspan class=\"hljs-title function_\">trim\u003C/span>()\n      );\n    });\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (format === \u003Cspan class=\"hljs-string\">'csv'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportToCSV\u003C/span>(headers, data);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (format === \u003Cspan class=\"hljs-string\">'json'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">exportToJSON\u003C/span>(headers, data);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">exportToCSV\u003C/span>(\u003Cspan class=\"hljs-params\">headers, data\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> csvContent = [\n      headers.\u003Cspan class=\"hljs-title function_\">join\u003C/span>(\u003Cspan class=\"hljs-string\">','\u003C/span>),\n      ...data.\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-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">cell\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-string\">`"\u003Cspan class=\"hljs-subst\">${cell.replace(/\u003Cspan class=\"hljs-string\">"/g, '"\u003C/span>\u003Cspan class=\"hljs-string\">"')}"\u003C/span>\u003Cspan class=\"hljs-string\">`).join(',')\n      )\n    ].join('\\n');\n    \n    return csvContent;\n  }\n  \n  exportToJSON(headers, data) {\n    const jsonData = data.map(row => {\n      const obj = {};\n      headers.forEach((header, index) => {\n        obj[header] = row[index];\n      });\n      return obj;\n    });\n    \n    return JSON.stringify(jsonData, null, 2);\n  }\n}\n\n// Initialize table filtering\ndocument.addEventListener('DOMContentLoaded', function() {\n  // Basic filtering\n  const customerFilter = new MarkdownTableFilter('#customer-table', {\n    searchDelay: 250,\n    searchHighlight: true,\n    liveFilter: true\n  });\n  \n  // Advanced filtering with custom filters\n  const productFilter = new MarkdownTableFilter('#product-table', {\n    caseSensitive: false,\n    searchHighlight: true\n  });\n  \n  // Add custom low stock filter\n  productFilter.setCustomFilter('low_stock', (row) => {\n    const stockCell = row.querySelector('[data-column="stock_quantity"]');\n    const stock = parseInt(stockCell.textContent);\n    return stock < 10;\n  });\n});\u003C/span>\u003C/span>\u003C/span>\n\u003C/code>\u003C/pre>\u003Ch2 id=\"css-styling-for-interactive-tables\">CSS Styling for Interactive Tables\u003C/h2>\n\u003Ch3 id=\"professional-table-design-with-interactive-elements\">Professional Table Design with Interactive Elements\u003C/h3>\n\u003Cp>Comprehensive styling for sortable and filterable tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-css\">\u003Cspan class=\"hljs-comment\">/* interactive-table-styles.css - Professional table styling */\u003C/span>\n\n\u003Cspan class=\"hljs-comment\">/* Container and Layout */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.interactive-table-container\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#ffffff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">8px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> \u003Cspan class=\"hljs-number\">1px\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\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">0.1\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">2rem\u003C/span> \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: -apple-system, BlinkMacSystemFont, \u003Cspan class=\"hljs-string\">'Segoe UI'\u003C/span>, sans-serif;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table Controls */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.search-controls\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.filter-controls\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.display-controls\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\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.search-controls\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\">250px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-search-input\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">flex\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\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\">0.9rem\u003C/span>;\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\">#80bdff\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\">0.2rem\u003C/span> \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-number\">123\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.25\u003C/span>);\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-filter\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.pagination-control\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\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\">background\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-date-filter\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\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\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Table Styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">100%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-collapse\u003C/span>: collapse;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\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\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: left;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  user-select: none;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\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\">.sortable-header\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}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\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\">#80bdff\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\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sorted\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1565c0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sorted-asc\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e8f5e8\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sorted-desc\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffeaa7\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">margin-left\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.8em\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: opacity \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span>,\n\u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>\u003Cspan class=\"hljs-selector-class\">.sorted\u003C/span> \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">1\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\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\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tbody\u003C/span> \u003Cspan class=\"hljs-selector-tag\">tr\u003C/span>\u003Cspan class=\"hljs-selector-attr\">[aria-hidden=\u003Cspan class=\"hljs-string\">"true"\u003C/span>]\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\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-color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffeb3b\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.1em\u003C/span> \u003Cspan class=\"hljs-number\">0.2em\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>: bold;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Empty State */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.empty-state-row\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">3rem\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-selector-class\">.empty-state-message\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#f8f9fa\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> dashed \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Pagination */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-pagination\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\">1rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\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\">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}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-info\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\">0.9rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-controls\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\">0.5rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-btn\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\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\">0.9rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:hover\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:not\u003C/span>(\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span>) {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#e9ecef\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#adb5bd\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-btn\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">:disabled\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">opacity\u003C/span>: \u003Cspan class=\"hljs-number\">0.5\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">cursor\u003C/span>: not-allowed;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-numbers\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-number\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.75rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#dee2e6\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#495057\u003C/span>;\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\">0.9rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">min-width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: all \u003Cspan class=\"hljs-number\">0.2s\u003C/span> ease;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-number\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\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#adb5bd\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-number\u003C/span>\u003Cspan class=\"hljs-selector-class\">.active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">background-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: white;\n  \u003Cspan class=\"hljs-attribute\">border-color\u003C/span>: \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.pagination-ellipsis\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#6c757d\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">align-self\u003C/span>: flex-end;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Filter Statistics */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.filter-stats\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.75rem\u003C/span> \u003Cspan class=\"hljs-number\">1.5rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#e3f2fd\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#bbdefb\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#1565c0\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Status Indicators */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.status-active\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#28a745\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-inactive\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#dc3545\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.status-pending\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">color\u003C/span>: \u003Cspan class=\"hljs-number\">#ffc107\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">600\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Data Type Specific Styling */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.currency-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.number-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, monospace;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.date-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">font-family\u003C/span>: \u003Cspan class=\"hljs-string\">'SF Mono'\u003C/span>, monospace;\n  \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9em\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.percentage-cell\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: right;\n  \u003Cspan class=\"hljs-attribute\">font-weight\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>;\n}\n\n\u003Cspan class=\"hljs-comment\">/* Loading States */\u003C/span>\n\u003Cspan class=\"hljs-selector-class\">.table-loading\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: relative;\n  \u003Cspan class=\"hljs-attribute\">overflow\u003C/span>: hidden;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.table-loading\u003C/span>\u003Cspan class=\"hljs-selector-pseudo\">::after\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">content\u003C/span>: \u003Cspan class=\"hljs-string\">''\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">position\u003C/span>: absolute;\n  \u003Cspan class=\"hljs-attribute\">top\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">left\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">right\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">bottom\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-built_in\">rgba\u003C/span>(\u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">255\u003C/span>, \u003Cspan class=\"hljs-number\">0.8\u003C/span>);\n  \u003Cspan class=\"hljs-attribute\">display\u003C/span>: flex;\n  \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: center;\n  \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.loading-spinner\u003C/span> {\n  \u003Cspan class=\"hljs-attribute\">width\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">height\u003C/span>: \u003Cspan class=\"hljs-number\">40px\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#f3f3f3\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-top\u003C/span>: \u003Cspan class=\"hljs-number\">4px\u003C/span> solid \u003Cspan class=\"hljs-number\">#007bff\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">50%\u003C/span>;\n  \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: spin \u003Cspan class=\"hljs-number\">1s\u003C/span> linear infinite;\n}\n\n\u003Cspan class=\"hljs-keyword\">@keyframes\u003C/span> spin {\n  \u003Cspan class=\"hljs-number\">0%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">0deg\u003C/span>); }\n  \u003Cspan class=\"hljs-number\">100%\u003C/span> { \u003Cspan class=\"hljs-attribute\">transform\u003C/span>: \u003Cspan class=\"hljs-built_in\">rotate\u003C/span>(\u003Cspan class=\"hljs-number\">360deg\u003C/span>); }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Responsive Design */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> (\u003Cspan class=\"hljs-attribute\">max-width\u003C/span>: \u003Cspan class=\"hljs-number\">768px\u003C/span>) {\n  \u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: stretch;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.search-controls\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.filter-controls\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.display-controls\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    \u003Cspan class=\"hljs-attribute\">align-items\u003C/span>: stretch;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.interactive-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">margin\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span> -\u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">border-radius\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">0.9rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">padding\u003C/span>: \u003Cspan class=\"hljs-number\">0.5rem\u003C/span> \u003Cspan class=\"hljs-number\">0.25rem\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.table-pagination\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex-direction\u003C/span>: column;\n    \u003Cspan class=\"hljs-attribute\">gap\u003C/span>: \u003Cspan class=\"hljs-number\">1rem\u003C/span>;\n    \u003Cspan class=\"hljs-attribute\">text-align\u003C/span>: center;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.pagination-controls\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">flex-wrap\u003C/span>: wrap;\n    \u003Cspan class=\"hljs-attribute\">justify-content\u003C/span>: center;\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\">.sortable-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">2px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom\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\">#f0f0f0\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">border-bottom\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#666\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.search-highlight\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background-color\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    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Reduced Motion */\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\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">td\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.sortable-header\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.pagination-btn\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.pagination-number\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">transition\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.loading-spinner\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">animation\u003C/span>: none;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">/* Print Styles */\u003C/span>\n\u003Cspan class=\"hljs-keyword\">@media\u003C/span> print {\n  \u003Cspan class=\"hljs-selector-class\">.table-controls\u003C/span>,\n  \u003Cspan class=\"hljs-selector-class\">.table-pagination\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.interactive-table-container\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">box-shadow\u003C/span>: none;\n    \u003Cspan class=\"hljs-attribute\">border\u003C/span>: \u003Cspan class=\"hljs-number\">1px\u003C/span> solid \u003Cspan class=\"hljs-number\">#000\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">font-size\u003C/span>: \u003Cspan class=\"hljs-number\">12px\u003C/span>;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sortable-table\u003C/span> \u003Cspan class=\"hljs-selector-tag\">th\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">background\u003C/span>: \u003Cspan class=\"hljs-number\">#f0f0f0\u003C/span> \u003Cspan class=\"hljs-meta\">!important\u003C/span>;\n    -webkit-print-\u003Cspan class=\"hljs-attribute\">color\u003C/span>-adjust: exact;\n  }\n  \n  \u003Cspan class=\"hljs-selector-class\">.sort-indicator\u003C/span> {\n    \u003Cspan class=\"hljs-attribute\">display\u003C/span>: none;\n  }\n}\n\u003C/code>\u003C/pre>\u003Ch2 id=\"platform-specific-integration\">Platform-Specific Integration\u003C/h2>\n\u003Ch3 id=\"github-pages-and-jekyll-enhancement\">GitHub Pages and Jekyll Enhancement\u003C/h3>\n\u003Cpre>\u003Ccode class=\"hljs language-liquid\"><!-- _includes/interactive-table.html -->\n{% assign table_id = include.id | default: "interactive-table" %}\n{% assign data_source = include.data | default: page.table_data %}\n{% assign sortable = include.sortable | default: true %}\n{% assign filterable = include.filterable | default: true %}\n{% assign searchable = include.searchable | default: true %}\n\n<div class="interactive-table-container" id="{{ table_id }}-container">\n  {% if filterable or searchable %}\n  <div class="table-controls">\n    {% if searchable %}\n    <div class="search-controls">\n      <label for="{{ table_id }}-search">Search:</label>\n      <input \n        type="text" \n        id="{{ table_id }}-search" \n        placeholder="Search table..." \n        class="table-search-input"\n        data-table-target="{{ table_id }}"\n      >\n    </div>\n    {% endif %}\n    \n    {% if filterable and include.filters %}\n    <div class="filter-controls">\n      {% for filter in include.filters %}\n      <label for="{{ table_id }}-{{ filter.column }}">{{ filter.label }}:</label>\n      {% if filter.type == "select" %}\n      <select id="{{ table_id }}-{{ filter.column }}" class="table-filter" data-column="{{ filter.column }}">\n        <option value="">All {{ filter.label }}</option>\n        {% for option in filter.options %}\n        <option value="{{ option.value }}">{{ option.label }}</option>\n        {% endfor %}\n      </select>\n      {% elsif filter.type == "date" %}\n      <input \n        type="date" \n        id="{{ table_id }}-{{ filter.column }}-from" \n        class="table-date-filter" \n        data-column="{{ filter.column }}"\n        data-filter-type="from"\n        placeholder="From date"\n      >\n      <input \n        type="date" \n        id="{{ table_id }}-{{ filter.column }}-to" \n        class="table-date-filter" \n        data-column="{{ filter.column }}"\n        data-filter-type="to"\n        placeholder="To date"\n      >\n      {% endif %}\n      {% endfor %}\n    </div>\n    {% endif %}\n  </div>\n  {% endif %}\n\n  <table \n    id="{{ table_id }}" \n    class="{% if sortable %}sortable-table{% endif %} {% if filterable %}filterable-table{% endif %}"\n    data-table-type="{{ include.type | default: 'data' }}"\n  >\n    <thead>\n      <tr>\n        {% for column in data_source.columns %}\n        <th \n          {% if sortable %}\n          data-column="{{ column.key }}" \n          data-type="{{ column.type | default: 'text' }}" \n          class="sortable-header"\n          tabindex="0"\n          role="button"\n          aria-label="Sort by {{ column.label }}"\n          {% endif %}\n        >\n          {{ column.label }}\n          {% if sortable %}<span class="sort-indicator" aria-hidden="true"></span>{% endif %}\n        </th>\n        {% endfor %}\n      </tr>\n    </thead>\n    <tbody>\n      {% for row in data_source.rows %}\n      <tr data-row-id="{{ row.id | default: forloop.index }}">\n        {% for column in data_source.columns %}\n        {% assign cell_value = row[column.key] %}\n        <td \n          data-column="{{ column.key }}"\n          {% if column.type == "number" or column.type == "currency" %}\n          data-sort-value="{{ cell_value | remove: '$' | remove: ',' }}"\n          class="{{ column.type }}-cell"\n          {% elsif column.type == "date" %}\n          data-sort-value="{{ cell_value }}"\n          class="date-cell"\n          {% endif %}\n        >\n          {% if column.format == "currency" %}\n            ${{ cell_value | number_with_precision: precision: 2 }}\n          {% elsif column.format == "percentage" %}\n            {{ cell_value }}%\n          {% elsif column.format == "date" %}\n            {{ cell_value | date: "%Y-%m-%d" }}\n          {% else %}\n            {{ cell_value }}\n          {% endif %}\n        </td>\n        {% endfor %}\n      </tr>\n      {% endfor %}\n    </tbody>\n  </table>\n</div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n  {% if sortable %}\n  new MarkdownTableSorter('#{{ table_id }}', {\n    {% if include.multi_sort %}multiSort: true,{% endif %}\n    {% if include.default_sort %}\n    defaultSort: {\n      column: '{{ include.default_sort.column }}',\n      direction: '{{ include.default_sort.direction | default: "asc" }}',\n      type: '{{ include.default_sort.type | default: "text" }}'\n    },\n    {% endif %}\n    animationDuration: {{ include.animation_duration | default: 250 }}\n  });\n  {% endif %}\n  \n  {% if filterable %}\n  new MarkdownTableFilter('#{{ table_id }}', {\n    searchDelay: {{ include.search_delay | default: 300 }},\n    searchHighlight: {{ include.search_highlight | default: true }},\n    liveFilter: {{ include.live_filter | default: true }}\n  });\n  {% endif %}\n});\n</script>\n\u003C/code>\u003C/pre>\u003Cp>\u003Cstrong>Jekyll Usage Example\u003C/strong>:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-meta\">---\u003C/span>\n\u003Cspan class=\"hljs-attr\">title:\u003C/span> \u003Cspan class=\"hljs-string\">"Customer Data Management"\u003C/span>\n\u003Cspan class=\"hljs-attr\">table_data:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">columns:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">key:\u003C/span> \u003Cspan class=\"hljs-string\">"customer_id"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">label:\u003C/span> \u003Cspan class=\"hljs-string\">"Customer ID"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">type:\u003C/span> \u003Cspan class=\"hljs-string\">"text"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">key:\u003C/span> \u003Cspan class=\"hljs-string\">"name"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">label:\u003C/span> \u003Cspan class=\"hljs-string\">"Name"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">type:\u003C/span> \u003Cspan class=\"hljs-string\">"text"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">key:\u003C/span> \u003Cspan class=\"hljs-string\">"email"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">label:\u003C/span> \u003Cspan class=\"hljs-string\">"Email"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">type:\u003C/span> \u003Cspan class=\"hljs-string\">"text"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">key:\u003C/span> \u003Cspan class=\"hljs-string\">"registration_date"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">label:\u003C/span> \u003Cspan class=\"hljs-string\">"Registration Date"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">type:\u003C/span> \u003Cspan class=\"hljs-string\">"date"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">key:\u003C/span> \u003Cspan class=\"hljs-string\">"status"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">label:\u003C/span> \u003Cspan class=\"hljs-string\">"Status"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">type:\u003C/span> \u003Cspan class=\"hljs-string\">"text"\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">key:\u003C/span> \u003Cspan class=\"hljs-string\">"revenue"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">label:\u003C/span> \u003Cspan class=\"hljs-string\">"Revenue"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">type:\u003C/span> \u003Cspan class=\"hljs-string\">"currency"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">format:\u003C/span> \u003Cspan class=\"hljs-string\">"currency"\u003C/span>\n  \u003Cspan class=\"hljs-attr\">rows:\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">id:\u003C/span> \u003Cspan class=\"hljs-string\">"CU001"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">customer_id:\u003C/span> \u003Cspan class=\"hljs-string\">"CU001"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Alice Johnson"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">email:\u003C/span> \u003Cspan class=\"hljs-string\">"alice@example.com"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">registration_date:\u003C/span> \u003Cspan class=\"hljs-string\">"2024-01-15"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">status:\u003C/span> \u003Cspan class=\"hljs-string\">"Active"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">revenue:\u003C/span> \u003Cspan class=\"hljs-number\">1250.50\u003C/span>\n    \u003Cspan class=\"hljs-bullet\">-\u003C/span> \u003Cspan class=\"hljs-attr\">id:\u003C/span> \u003Cspan class=\"hljs-string\">"CU002"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">customer_id:\u003C/span> \u003Cspan class=\"hljs-string\">"CU002"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">name:\u003C/span> \u003Cspan class=\"hljs-string\">"Bob Smith"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">email:\u003C/span> \u003Cspan class=\"hljs-string\">"bob@techcorp.com"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">registration_date:\u003C/span> \u003Cspan class=\"hljs-string\">"2024-02-03"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">status:\u003C/span> \u003Cspan class=\"hljs-string\">"Inactive"\u003C/span>\n      \u003Cspan class=\"hljs-attr\">revenue:\u003C/span> \u003Cspan class=\"hljs-number\">345.75\u003C/span>\n\u003Cspan class=\"hljs-meta\">---\u003C/span>\n\u003C/code>\u003C/pre>\u003Cpre>\u003Ccode class=\"hljs language-liquid\">{% include interactive-table.html\n   id="customer-management"\n   sortable=true\n   filterable=true\n   searchable=true\n   multi_sort=true\n   search_highlight=true\n   default_sort.column="name"\n   default_sort.direction="asc"\n   filters=site.data.customer_filters\n%}\n\u003C/code>\u003C/pre>\u003Ch3 id=\"react-component-integration\">React Component Integration\u003C/h3>\n\u003Cp>Modern React component for Markdown table enhancement:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-jsx\">\u003Cspan class=\"hljs-comment\">// InteractiveMarkdownTable.jsx - React component for enhanced tables\u003C/span>\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-title class_\">React\u003C/span>, { useState, useEffect, useMemo, useCallback } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'react'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> { \u003Cspan class=\"hljs-title class_\">ChevronUpIcon\u003C/span>, \u003Cspan class=\"hljs-title class_\">ChevronDownIcon\u003C/span>, \u003Cspan class=\"hljs-title class_\">MagnifyingGlassIcon\u003C/span> } \u003Cspan class=\"hljs-keyword\">from\u003C/span> \u003Cspan class=\"hljs-string\">'@heroicons/react/24/outline'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">InteractiveMarkdownTable\u003C/span> = (\u003Cspan class=\"hljs-params\">{ \n  data, \n  columns,\n  sortable = \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n  filterable = \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n  searchable = \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n  pagination = \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n  pageSize = \u003Cspan class=\"hljs-number\">10\u003C/span>,\n  className = \u003Cspan class=\"hljs-string\">""\u003C/span>,\n  onRowClick,\n  onSelectionChange\n}\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [sortConfig, setSortConfig] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>({ \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-literal\">null\u003C/span>, \u003Cspan class=\"hljs-attr\">direction\u003C/span>: \u003Cspan class=\"hljs-string\">'asc'\u003C/span> });\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [searchTerm, setSearchTerm] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-string\">''\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [filters, setFilters] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>({});\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [currentPage, setCurrentPage] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> [selectedRows, setSelectedRows] = \u003Cspan class=\"hljs-title function_\">useState\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>());\n\n  \u003Cspan class=\"hljs-comment\">// Memoized filtered and sorted data\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> processedData = \u003Cspan class=\"hljs-title function_\">useMemo\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> filteredData = [...data];\n\n    \u003Cspan class=\"hljs-comment\">// Apply search filter\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (searchTerm) {\n      filteredData = filteredData.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span>\n        columns.\u003Cspan class=\"hljs-title function_\">some\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">column\u003C/span> =>\u003C/span>\n          \u003Cspan class=\"hljs-title class_\">String\u003C/span>(row[column.\u003Cspan class=\"hljs-property\">key\u003C/span>] || \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>().\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(searchTerm.\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>())\n        )\n      );\n    }\n\n    \u003Cspan class=\"hljs-comment\">// Apply column filters\u003C/span>\n    \u003Cspan class=\"hljs-title class_\">Object\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>(filters).\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\">if\u003C/span> (value) {\n        filteredData = filteredData.\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\">const\u003C/span> cellValue = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(row[key] || \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n          \u003Cspan class=\"hljs-keyword\">const\u003C/span> filterValue = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(value).\u003Cspan class=\"hljs-title function_\">toLowerCase\u003C/span>();\n          \u003Cspan class=\"hljs-keyword\">return\u003C/span> cellValue.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(filterValue);\n        });\n      }\n    });\n\n    \u003Cspan class=\"hljs-comment\">// Apply sorting\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortConfig.\u003Cspan class=\"hljs-property\">key\u003C/span>) {\n      filteredData.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">a, b\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> aValue = a[sortConfig.\u003Cspan class=\"hljs-property\">key\u003C/span>];\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> bValue = b[sortConfig.\u003Cspan class=\"hljs-property\">key\u003C/span>];\n        \n        \u003Cspan class=\"hljs-keyword\">let\u003C/span> comparison = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> aValue === \u003Cspan class=\"hljs-string\">'number'\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> bValue === \u003Cspan class=\"hljs-string\">'number'\u003C/span>) {\n          comparison = aValue - bValue;\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> \u003Cspan class=\"hljs-keyword\">if\u003C/span> (aValue \u003Cspan class=\"hljs-keyword\">instanceof\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span> && bValue \u003Cspan class=\"hljs-keyword\">instanceof\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>) {\n          comparison = aValue.\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>() - bValue.\u003Cspan class=\"hljs-title function_\">getTime\u003C/span>();\n        } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n          comparison = \u003Cspan class=\"hljs-title class_\">String\u003C/span>(aValue || \u003Cspan class=\"hljs-string\">''\u003C/span>).\u003Cspan class=\"hljs-title function_\">localeCompare\u003C/span>(\u003Cspan class=\"hljs-title class_\">String\u003C/span>(bValue || \u003Cspan class=\"hljs-string\">''\u003C/span>));\n        }\n        \n        \u003Cspan class=\"hljs-keyword\">return\u003C/span> sortConfig.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'desc'\u003C/span> ? -comparison : comparison;\n      });\n    }\n\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> filteredData;\n  }, [data, searchTerm, filters, sortConfig, columns]);\n\n  \u003Cspan class=\"hljs-comment\">// Pagination logic\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> paginatedData = \u003Cspan class=\"hljs-title function_\">useMemo\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!pagination) \u003Cspan class=\"hljs-keyword\">return\u003C/span> processedData;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = (currentPage - \u003Cspan class=\"hljs-number\">1\u003C/span>) * pageSize;\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> processedData.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(startIndex, startIndex + pageSize);\n  }, [processedData, currentPage, pageSize, pagination]);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> totalPages = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">ceil\u003C/span>(processedData.\u003Cspan class=\"hljs-property\">length\u003C/span> / pageSize);\n\n  \u003Cspan class=\"hljs-comment\">// Event handlers\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> handleSort = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">key\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!sortable) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-title function_\">setSortConfig\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">current\u003C/span> =>\u003C/span> ({\n      key,\n      \u003Cspan class=\"hljs-attr\">direction\u003C/span>: current.\u003Cspan class=\"hljs-property\">key\u003C/span> === key && current.\u003Cspan class=\"hljs-property\">direction\u003C/span> === \u003Cspan class=\"hljs-string\">'asc'\u003C/span> ? \u003Cspan class=\"hljs-string\">'desc'\u003C/span> : \u003Cspan class=\"hljs-string\">'asc'\u003C/span>\n    }));\n  }, [sortable]);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> handleFilterChange = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">key, value\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">setFilters\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">current\u003C/span> =>\u003C/span> ({ ...current, [key]: value }));\n    \u003Cspan class=\"hljs-title function_\">setCurrentPage\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n  }, []);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> handleSearch = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">term\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-title function_\">setSearchTerm\u003C/span>(term);\n    \u003Cspan class=\"hljs-title function_\">setCurrentPage\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>);\n  }, []);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> handleRowSelect = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">rowId, isSelected\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> newSelection = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(selectedRows);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isSelected) {\n      newSelection.\u003Cspan class=\"hljs-title function_\">add\u003C/span>(rowId);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      newSelection.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(rowId);\n    }\n    \u003Cspan class=\"hljs-title function_\">setSelectedRows\u003C/span>(newSelection);\n    onSelectionChange?.(\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-title function_\">from\u003C/span>(newSelection));\n  }, [selectedRows, onSelectionChange]);\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> handleSelectAll = \u003Cspan class=\"hljs-title function_\">useCallback\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">isSelected\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (isSelected) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> allIds = paginatedData.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">row\u003C/span> =>\u003C/span> row.\u003Cspan class=\"hljs-property\">id\u003C/span>);\n      \u003Cspan class=\"hljs-title function_\">setSelectedRows\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(allIds));\n      onSelectionChange?.(allIds);\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-title function_\">setSelectedRows\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>());\n      onSelectionChange?.([]);\n    }\n  }, [paginatedData, onSelectionChange]);\n\n  \u003Cspan class=\"hljs-comment\">// Render sort indicator\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">renderSortIndicator\u003C/span> = (\u003Cspan class=\"hljs-params\">columnKey\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (sortConfig.\u003Cspan class=\"hljs-property\">key\u003C/span> !== columnKey) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator neutral"\u003C/span>>\u003C/span>⇅\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>;\n    }\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"sort-indicator active"\u003C/span>>\u003C/span>\n        {sortConfig.direction === 'asc' ? \n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ChevronUpIcon\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"w-4 h-4"\u003C/span> />\u003C/span> : \n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">ChevronDownIcon\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"w-4 h-4"\u003C/span> />\u003C/span>\n        }\n      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n    );\n  };\n\n  \u003Cspan class=\"hljs-comment\">// Render pagination controls\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">renderPagination\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!pagination || totalPages <= \u003Cspan class=\"hljs-number\">1\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> pageNumbers = [];\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> maxVisiblePages = \u003Cspan class=\"hljs-number\">5\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> startPage = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, currentPage - \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(maxVisiblePages / \u003Cspan class=\"hljs-number\">2\u003C/span>));\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> endPage = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(totalPages, startPage + maxVisiblePages - \u003Cspan class=\"hljs-number\">1\u003C/span>);\n\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (endPage - startPage + \u003Cspan class=\"hljs-number\">1\u003C/span> < maxVisiblePages) {\n      startPage = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">max\u003C/span>(\u003Cspan class=\"hljs-number\">1\u003C/span>, endPage - maxVisiblePages + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n    }\n\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startPage; i <= endPage; i++) {\n      pageNumbers.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(i);\n    }\n\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-container"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-info"\u003C/span>>\u003C/span>\n          Showing {((currentPage - 1) * pageSize) + 1} to{' '}\n          {Math.min(currentPage * pageSize, processedData.length)} of{' '}\n          {processedData.length} entries\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n        \n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-controls"\u003C/span>>\u003C/span>\n          \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>\n            \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> setCurrentPage(p => Math.max(1, p - 1))}\n            disabled={currentPage === 1}\n            className="pagination-btn"\n          >\n            Previous\n          \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n          \n          {startPage > 1 && (\n            \u003Cspan class=\"hljs-tag\"><>\u003C/span>\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> setCurrentPage(1)} className="pagination-number">1\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n              {startPage > 2 && \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-ellipsis"\u003C/span>>\u003C/span>...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>}\n            \u003Cspan class=\"hljs-tag\"></>\u003C/span>\n          )}\n          \n          {pageNumbers.map(number => (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span>\n              \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{number}\u003C/span>\n              \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> setCurrentPage(number)}\n              className={`pagination-number ${number === currentPage ? 'active' : ''}`}\n            >\n              {number}\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n          ))}\n          \n          {endPage < totalPages && (\n            \u003Cspan class=\"hljs-tag\"><>\u003C/span>\n              {endPage < totalPages - 1 && \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"pagination-ellipsis"\u003C/span>>\u003C/span>...\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>}\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">button\u003C/span> \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> setCurrentPage(totalPages)} className="pagination-number">\n                {totalPages}\n              \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">button\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></>\u003C/span>\u003C/span>\n          )}\n          \n          <button\n            onClick={\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-title function_\">setCurrentPage\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">p\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(totalPages, p + \u003Cspan class=\"hljs-number\">1\u003C/span>))}\n            disabled={currentPage === totalPages}\n            className=\u003Cspan class=\"hljs-string\">"pagination-btn"\u003C/span>\n          >\n            \u003Cspan class=\"hljs-title class_\">Next\u003C/span>\n          </button>\n        </div>\n      </div>\n    );\n  };\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">interactive-markdown-table\u003C/span> ${\u003Cspan class=\"hljs-attr\">className\u003C/span>}`}>\u003C/span>\n      {/* Controls */}\n      {(searchable || filterable) && (\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"table-controls"\u003C/span>>\u003C/span>\n          {searchable && (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"search-controls"\u003C/span>>\u003C/span>\n              \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"search-input-wrapper"\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">MagnifyingGlassIcon\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"search-icon"\u003C/span> />\u003C/span>\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"text"\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">placeholder\u003C/span>=\u003Cspan class=\"hljs-string\">"Search table..."\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">{searchTerm}\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">onChange\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> handleSearch(e.target.value)}\n                  className="search-input"\n                />\n              \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n          )}\n          \n          {filterable && (\n            \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"filter-controls"\u003C/span>>\u003C/span>\n              {columns\n                .filter(column => column.filterable)\n                .map(column => (\n                  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{column.key}\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"filter-group"\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">label\u003C/span> \u003Cspan class=\"hljs-attr\">htmlFor\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">filter-\u003C/span>${\u003Cspan class=\"hljs-attr\">column.key\u003C/span>}`}>\u003C/span>{column.label}:\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">label\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">select\u003C/span>\n                      \u003Cspan class=\"hljs-attr\">id\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">filter-\u003C/span>${\u003Cspan class=\"hljs-attr\">column.key\u003C/span>}`}\n                      \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">{filters[column.key]\u003C/span> || ''}\n                      \u003Cspan class=\"hljs-attr\">onChange\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> handleFilterChange(column.key, e.target.value)}\n                      className="filter-select"\n                    >\n                      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">""\u003C/span>>\u003C/span>All\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n                      {column.filterOptions?.map(option => (\n                        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">option\u003C/span> \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{option.value}\u003C/span> \u003Cspan class=\"hljs-attr\">value\u003C/span>=\u003Cspan class=\"hljs-string\">{option.value}\u003C/span>>\u003C/span>\n                          {option.label}\n                        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">option\u003C/span>>\u003C/span>\n                      ))}\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">select\u003C/span>>\u003C/span>\n                  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n                ))}\n            \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n          )}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n      )}\n\n      {/* Table */}\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"table-wrapper"\u003C/span>>\u003C/span>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">table\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"data-table"\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              {onSelectionChange && (\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"select-column"\u003C/span>>\u003C/span>\n                  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span>\n                    \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span>\n                    \u003Cspan class=\"hljs-attr\">checked\u003C/span>=\u003Cspan class=\"hljs-string\">{selectedRows.size\u003C/span> === \u003Cspan class=\"hljs-string\">paginatedData.length\u003C/span> && \u003Cspan class=\"hljs-attr\">paginatedData.length\u003C/span> >\u003C/span> 0}\n                    onChange={(e) => handleSelectAll(e.target.checked)}\n                    aria-label="Select all rows"\n                  />\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n              )}\n              {columns.map(column => (\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">th\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{column.key}\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`${\u003Cspan class=\"hljs-attr\">sortable\u003C/span> && \u003Cspan class=\"hljs-attr\">column.sortable\u003C/span> !== \u003Cspan class=\"hljs-string\">false\u003C/span> ? '\u003Cspan class=\"hljs-attr\">sortable\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''} ${\u003Cspan class=\"hljs-attr\">column.className\u003C/span> || ''}`}\n                  \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> column.sortable !== false && handleSort(column.key)}\n                  role={sortable && column.sortable !== false ? 'button' : undefined}\n                  tabIndex={sortable && column.sortable !== false ? 0 : undefined}\n                  onKeyDown={(e) => {\n                    if (sortable && column.sortable !== false && (e.key === 'Enter' || e.key === ' ')) {\n                      e.preventDefault();\n                      handleSort(column.key);\n                    }\n                  }}\n                >\n                  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"header-content"\u003C/span>>\u003C/span>\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>{column.label}\u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\n                    {sortable && column.sortable !== false && renderSortIndicator(column.key)}\n                  \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">th\u003C/span>>\u003C/span>\n              ))}\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            {paginatedData.length === 0 ? (\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> \u003Cspan class=\"hljs-attr\">colSpan\u003C/span>=\u003Cspan class=\"hljs-string\">{columns.length\u003C/span> + (\u003Cspan class=\"hljs-attr\">onSelectionChange\u003C/span> ? \u003Cspan class=\"hljs-attr\">1\u003C/span> \u003Cspan class=\"hljs-attr\">:\u003C/span> \u003Cspan class=\"hljs-attr\">0\u003C/span>)} \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"empty-state"\u003C/span>>\u003C/span>\n                  No data found. Try adjusting your search or filter criteria.\n                \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            ) : (\n              paginatedData.map(row => (\n                \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">tr\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{row.id}\u003C/span>\n                  \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`${\u003Cspan class=\"hljs-attr\">selectedRows.has\u003C/span>(\u003Cspan class=\"hljs-attr\">row.id\u003C/span>) ? '\u003Cspan class=\"hljs-attr\">selected\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''} ${\u003Cspan class=\"hljs-attr\">onRowClick\u003C/span> ? '\u003Cspan class=\"hljs-attr\">clickable\u003C/span>' \u003Cspan class=\"hljs-attr\">:\u003C/span> ''}`}\n                  \u003Cspan class=\"hljs-attr\">onClick\u003C/span>=\u003Cspan class=\"hljs-string\">{()\u003C/span> =>\u003C/span> onRowClick?.(row)}\n                >\n                  {onSelectionChange && (\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">"select-column"\u003C/span>>\u003C/span>\n                      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">input\u003C/span>\n                        \u003Cspan class=\"hljs-attr\">type\u003C/span>=\u003Cspan class=\"hljs-string\">"checkbox"\u003C/span>\n                        \u003Cspan class=\"hljs-attr\">checked\u003C/span>=\u003Cspan class=\"hljs-string\">{selectedRows.has(row.id)}\u003C/span>\n                        \u003Cspan class=\"hljs-attr\">onChange\u003C/span>=\u003Cspan class=\"hljs-string\">{(e)\u003C/span> =>\u003C/span> handleRowSelect(row.id, e.target.checked)}\n                        onClick={(e) => e.stopPropagation()}\n                        aria-label={`Select row ${row.id}`}\n                      />\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                  )}\n                  {columns.map(column => (\n                    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">td\u003C/span> \u003Cspan class=\"hljs-attr\">key\u003C/span>=\u003Cspan class=\"hljs-string\">{column.key}\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{column.className\u003C/span> || ''}>\u003C/span>\n                      {column.render ? column.render(row[column.key], row) : row[column.key]}\n                    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">td\u003C/span>>\u003C/span>\n                  ))}\n                \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">tr\u003C/span>>\u003C/span>\n              ))\n            )}\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      \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\n\n      {/* Pagination */}\n      {renderPagination()}\n    \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">div\u003C/span>>\u003C/span>\u003C/span>\n  );\n};\n\n\u003Cspan class=\"hljs-keyword\">export\u003C/span> \u003Cspan class=\"hljs-keyword\">default\u003C/span> \u003Cspan class=\"hljs-title class_\">InteractiveMarkdownTable\u003C/span>;\n\n\u003Cspan class=\"hljs-comment\">// Usage Example Component\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">TableDemo\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> sampleData = [\n    {\n      \u003Cspan class=\"hljs-attr\">id\u003C/span>: \u003Cspan class=\"hljs-string\">'CU001'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">customerID\u003C/span>: \u003Cspan class=\"hljs-string\">'CU001'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">name\u003C/span>: \u003Cspan class=\"hljs-string\">'Alice Johnson'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">email\u003C/span>: \u003Cspan class=\"hljs-string\">'alice@example.com'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">registrationDate\u003C/span>: \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Date\u003C/span>(\u003Cspan class=\"hljs-string\">'2024-01-15'\u003C/span>),\n      \u003Cspan class=\"hljs-attr\">status\u003C/span>: \u003Cspan class=\"hljs-string\">'Active'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">totalOrders\u003C/span>: \u003Cspan class=\"hljs-number\">12\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">revenue\u003C/span>: \u003Cspan class=\"hljs-number\">1250.50\u003C/span>\n    },\n    \u003Cspan class=\"hljs-comment\">// ... more data\u003C/span>\n  ];\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> columns = [\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'customerID'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Customer ID'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    },\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'name'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Name'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    },\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'email'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Email'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>\n    },\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'registrationDate'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Registration Date'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> value.\u003Cspan class=\"hljs-title function_\">toLocaleDateString\u003C/span>()\n    },\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'status'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Status'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">filterable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">filterOptions\u003C/span>: [\n        { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'Active'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Active'\u003C/span> },\n        { \u003Cspan class=\"hljs-attr\">value\u003C/span>: \u003Cspan class=\"hljs-string\">'Inactive'\u003C/span>, \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Inactive'\u003C/span> }\n      ],\n      \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> (\n        \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">span\u003C/span> \u003Cspan class=\"hljs-attr\">className\u003C/span>=\u003Cspan class=\"hljs-string\">{\u003C/span>`\u003Cspan class=\"hljs-attr\">status\u003C/span> \u003Cspan class=\"hljs-attr\">status-\u003C/span>${\u003Cspan class=\"hljs-attr\">value.toLowerCase\u003C/span>()}`}>\u003C/span>\n          {value}\n        \u003Cspan class=\"hljs-tag\"></\u003Cspan class=\"hljs-name\">span\u003C/span>>\u003C/span>\u003C/span>\n      )\n    },\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'totalOrders'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Total Orders'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'number-column'\u003C/span>\n    },\n    {\n      \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'revenue'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">label\u003C/span>: \u003Cspan class=\"hljs-string\">'Revenue'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'currency-column'\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">render\u003C/span>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">value\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-string\">`$\u003Cspan class=\"hljs-subst\">${value.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span>`\u003C/span>\n    }\n  ];\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">handleRowClick\u003C/span> = (\u003Cspan class=\"hljs-params\">row\u003C/span>) => {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Row clicked:'\u003C/span>, row);\n  };\n\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">handleSelectionChange\u003C/span> = (\u003Cspan class=\"hljs-params\">selectedIds\u003C/span>) => {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Selection changed:'\u003C/span>, selectedIds);\n  };\n\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n    \u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">InteractiveMarkdownTable\u003C/span>\n      \u003Cspan class=\"hljs-attr\">data\u003C/span>=\u003Cspan class=\"hljs-string\">{sampleData}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">columns\u003C/span>=\u003Cspan class=\"hljs-string\">{columns}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">sortable\u003C/span>=\u003Cspan class=\"hljs-string\">{true}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">filterable\u003C/span>=\u003Cspan class=\"hljs-string\">{true}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">searchable\u003C/span>=\u003Cspan class=\"hljs-string\">{true}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">pagination\u003C/span>=\u003Cspan class=\"hljs-string\">{true}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">pageSize\u003C/span>=\u003Cspan class=\"hljs-string\">{10}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">onRowClick\u003C/span>=\u003Cspan class=\"hljs-string\">{handleRowClick}\u003C/span>\n      \u003Cspan class=\"hljs-attr\">onSelectionChange\u003C/span>=\u003Cspan class=\"hljs-string\">{handleSelectionChange}\u003C/span>\n    />\u003C/span>\u003C/span>\n  );\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"integration-with-modern-workflows\">Integration with Modern Workflows\u003C/h2>\n\u003Cp>Interactive table sorting and filtering integrates seamlessly with comprehensive Markdown documentation systems. When combined with \u003Ca href=\"/blog/markdown-table-column-width-alignment-complete-guide\">advanced table formatting techniques\u003C/a>, dynamic table functionality creates sophisticated data management interfaces that maintain professional presentation standards while enabling powerful user interactions.\u003C/p>\n\u003Cp>For comprehensive content management systems, table interactivity works effectively with \u003Ca href=\"/blog/markdown-custom-css-classes-styling-complete-guide\">custom CSS styling frameworks\u003C/a> to create branded data interfaces that scale across different platforms while preserving design consistency and user experience quality throughout complex documentation workflows.\u003C/p>\n\u003Cp>When managing large-scale data presentations, interactive table features complement \u003Ca href=\"/blog/markdown-responsive-images-complete-guide\">responsive design techniques\u003C/a> to ensure optimal functionality across desktop and mobile devices while maintaining accessibility standards and performance optimization for efficient data processing.\u003C/p>\n\u003Ch2 id=\"performance-optimization-and-best-practices\">Performance Optimization and Best Practices\u003C/h2>\n\u003Ch3 id=\"efficient-data-processing\">Efficient Data Processing\u003C/h3>\n\u003Cp>Optimizing table performance for large datasets:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// performance-optimized-table.js - High-performance table implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedInteractiveTable\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">selector, 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>(selector);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">virtualScroll\u003C/span>: options.\u003Cspan class=\"hljs-property\">virtualScroll\u003C/span> || \u003Cspan class=\"hljs-literal\">false\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">itemHeight\u003C/span>: options.\u003Cspan class=\"hljs-property\">itemHeight\u003C/span> || \u003Cspan class=\"hljs-number\">50\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: options.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span> || \u003Cspan class=\"hljs-number\">5\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">debounceDelay\u003C/span>: options.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span> || \u003Cspan class=\"hljs-number\">150\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: options.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span> || \u003Cspan class=\"hljs-number\">100\u003C/span>,\n      ...options\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span> = [];\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = [];\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span> = { \u003Cspan class=\"hljs-attr\">start\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">end\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> };\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewportHeight\u003C/span> = \u003Cspan class=\"hljs-number\">0\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Performance tracking\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">performanceMetrics\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">filterTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">sortTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">renderTime\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>\n    };\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">init\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">init\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupVirtualScroll\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\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_\">setupVirtualScroll\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\">virtualScroll\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-scroll-container'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.viewportHeight || \u003Cspan class=\"hljs-number\">400\u003C/span>}\u003C/span>px`\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">overflow\u003C/span> = \u003Cspan class=\"hljs-string\">'auto'\u003C/span>;\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span> = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'div'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">className\u003C/span> = \u003Cspan class=\"hljs-string\">'virtual-viewport'\u003C/span>;\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>);\n    \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\">scrollContainer\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'scroll'\u003C/span>, \n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleVirtualScroll\u003C/span>(), \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">debounceDelay\u003C/span>)\n    );\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupPerformanceMonitoring\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Web Vitals monitoring\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceObserver\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> observer = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">PerformanceObserver\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">list\u003C/span>) =>\u003C/span> {\n        \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> entry \u003Cspan class=\"hljs-keyword\">of\u003C/span> list.\u003Cspan class=\"hljs-title function_\">getEntries\u003C/span>()) {\n          \u003Cspan class=\"hljs-keyword\">if\u003C/span> (entry.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'table-'\u003C/span>)) {\n            \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">`Table performance: \u003Cspan class=\"hljs-subst\">${entry.name}\u003C/span> took \u003Cspan class=\"hljs-subst\">${entry.duration}\u003C/span>ms`\u003C/span>);\n          }\n        }\n      });\n      \n      observer.\u003Cspan class=\"hljs-title function_\">observe\u003C/span>({ \u003Cspan class=\"hljs-attr\">entryTypes\u003C/span>: [\u003Cspan class=\"hljs-string\">'measure'\u003C/span>] });\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setData\u003C/span>(\u003Cspan class=\"hljs-params\">data\u003C/span>) {\n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-data-set-start'\u003C/span>);\n    \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    \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\">virtualScroll\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualScrollHeight\u003C/span>();\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVirtualRows\u003C/span>();\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderAllRows\u003C/span>();\n    }\n    \n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-data-set-end'\u003C/span>);\n    performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(\u003Cspan class=\"hljs-string\">'table-data-set'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-data-set-start'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-data-set-end'\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">filterData\u003C/span>(\u003Cspan class=\"hljs-params\">filterFunction\u003C/span>) {\n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-filter-start'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Use Web Workers for large datasets\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\">10000\u003C/span> && \u003Cspan class=\"hljs-keyword\">typeof\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span> !== \u003Cspan class=\"hljs-string\">'undefined'\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">filterDataWithWorker\u003C/span>(filterFunction);\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>(filterFunction);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>();\n    }\n    \n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-filter-end'\u003C/span>);\n    performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(\u003Cspan class=\"hljs-string\">'table-filter'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-filter-start'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-filter-end'\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">filterDataWithWorker\u003C/span>(\u003Cspan class=\"hljs-params\">filterFunction\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> worker = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span>(\u003Cspan class=\"hljs-variable constant_\">URL\u003C/span>.\u003Cspan class=\"hljs-title function_\">createObjectURL\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Blob\u003C/span>([\u003Cspan class=\"hljs-string\">`\n      self.onmessage = function(e) {\n        const { data, filterFunctionString } = e.data;\n        const filterFunction = new Function('return ' + filterFunctionString)();\n        const filteredData = data.filter(filterFunction);\n        self.postMessage(filteredData);\n      };\n    `\u003C/span>], { \u003Cspan class=\"hljs-attr\">type\u003C/span>: \u003Cspan class=\"hljs-string\">'application/javascript'\u003C/span> })));\n    \n    worker.\u003Cspan class=\"hljs-title function_\">postMessage\u003C/span>({\n      \u003Cspan class=\"hljs-attr\">data\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">data\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">filterFunctionString\u003C/span>: filterFunction.\u003Cspan class=\"hljs-title function_\">toString\u003C/span>()\n    });\n    \n    worker.\u003Cspan class=\"hljs-property\">onmessage\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = e.\u003Cspan class=\"hljs-property\">data\u003C/span>;\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>();\n      worker.\u003Cspan class=\"hljs-title function_\">terminate\u003C/span>();\n    };\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">sortData\u003C/span>(\u003Cspan class=\"hljs-params\">compareFn\u003C/span>) {\n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-sort-start'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Use TimSort implementation for better performance\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span> = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">timsort\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>, compareFn);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateDisplay\u003C/span>();\n    \n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-sort-end'\u003C/span>);\n    performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(\u003Cspan class=\"hljs-string\">'table-sort'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-sort-start'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-sort-end'\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// TimSort implementation for efficient sorting\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">timsort\u003C/span>(\u003Cspan class=\"hljs-params\">arr, compareFn\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Simplified TimSort - in production, use a full implementation\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> arr.\u003Cspan class=\"hljs-title function_\">sort\u003C/span>(compareFn);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleVirtualScroll\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\">virtualScroll\u003C/span>) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> scrollTop = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">scrollTop\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> viewportHeight = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">scrollContainer\u003C/span>.\u003Cspan class=\"hljs-property\">clientHeight\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> startIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>(scrollTop / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">itemHeight\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span> - \u003Cspan class=\"hljs-number\">1\u003C/span>,\n      \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">floor\u003C/span>((scrollTop + viewportHeight) / \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">itemHeight\u003C/span>) + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">bufferSize\u003C/span>\n    );\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (startIndex !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span>.\u003Cspan class=\"hljs-property\">start\u003C/span> || endIndex !== \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span>.\u003Cspan class=\"hljs-property\">end\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span> = { \u003Cspan class=\"hljs-attr\">start\u003C/span>: startIndex, \u003Cspan class=\"hljs-attr\">end\u003C/span>: endIndex };\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVirtualRows\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">renderVirtualRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render-start'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> fragment = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDocumentFragment\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleData = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-title function_\">slice\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span>.\u003Cspan class=\"hljs-property\">start\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span>.\u003Cspan class=\"hljs-property\">end\u003C/span> + \u003Cspan class=\"hljs-number\">1\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Batch DOM updates\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-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n      \n      visibleData.\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> rowElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(row, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">visibleRange\u003C/span>.\u003Cspan class=\"hljs-property\">start\u003C/span> + index);\n        rowElement.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">position\u003C/span> = \u003Cspan class=\"hljs-string\">'absolute'\u003C/span>;\n        rowElement.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">top\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.visibleRange.start + index) * \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.options.itemHeight}\u003C/span>px`\u003C/span>;\n        rowElement.\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.itemHeight}\u003C/span>px`\u003C/span>;\n        \n        fragment.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(rowElement);\n      });\n      \n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(fragment);\n      \n      performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render-end'\u003C/span>);\n      performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-render-start'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-render-end'\u003C/span>);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">renderAllRows\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render-all-start'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> tbody = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\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> fragment = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createDocumentFragment\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Process in chunks to avoid blocking the UI\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">processChunk\u003C/span> = (\u003Cspan class=\"hljs-params\">startIndex\u003C/span>) => {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> endIndex = \u003Cspan class=\"hljs-title class_\">Math\u003C/span>.\u003Cspan class=\"hljs-title function_\">min\u003C/span>(startIndex + \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">chunkSize\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">let\u003C/span> i = startIndex; i < endIndex; i++) {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> row = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">filteredData\u003C/span>[i], i);\n        fragment.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(row);\n      }\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (endIndex < \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-comment\">// Process next chunk\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-title function_\">processChunk\u003C/span>(endIndex), \u003Cspan class=\"hljs-number\">0\u003C/span>);\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Finished processing all rows\u003C/span>\n        tbody.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n        tbody.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(fragment);\n        \n        performance.\u003Cspan class=\"hljs-title function_\">mark\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render-all-end'\u003C/span>);\n        performance.\u003Cspan class=\"hljs-title function_\">measure\u003C/span>(\u003Cspan class=\"hljs-string\">'table-render-all'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-render-all-start'\u003C/span>, \u003Cspan class=\"hljs-string\">'table-render-all-end'\u003C/span>);\n      }\n    };\n    \n    \u003Cspan class=\"hljs-title function_\">processChunk\u003C/span>(\u003Cspan class=\"hljs-number\">0\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, index\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> 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\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span> = index;\n    \n    \u003Cspan class=\"hljs-comment\">// Create cells based on column configuration\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">columns\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">column\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> = rowData[column.\u003Cspan class=\"hljs-property\">key\u003C/span>];\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column.\u003Cspan class=\"hljs-property\">className\u003C/span>) {\n        td.\u003Cspan class=\"hljs-property\">className\u003C/span> = column.\u003Cspan class=\"hljs-property\">className\u003C/span>;\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_\">updateVirtualScrollHeight\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\">virtualScroll\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\">itemHeight\u003C/span>;\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">viewport\u003C/span>.\u003Cspan class=\"hljs-property\">style\u003C/span>.\u003Cspan class=\"hljs-property\">height\u003C/span> = \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${totalHeight}\u003C/span>px`\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\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">virtualScroll\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateVirtualScrollHeight\u003C/span>();\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderVirtualRows\u003C/span>();\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">renderAllRows\u003C/span>();\n    }\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateStats\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateStats\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> statsElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-stats'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (statsElement) {\n      statsElement.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = \n        \u003Cspan class=\"hljs-string\">`Showing \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> entries`\u003C/span>;\n    }\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Utility functions\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">debounce\u003C/span>(\u003Cspan class=\"hljs-params\">func, wait\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> timeout;\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span> \u003Cspan class=\"hljs-title function_\">executedFunction\u003C/span>(\u003Cspan class=\"hljs-params\">...args\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">later\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n        \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n        \u003Cspan class=\"hljs-title function_\">func\u003C/span>(...args);\n      };\n      \u003Cspan class=\"hljs-built_in\">clearTimeout\u003C/span>(timeout);\n      timeout = \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(later, wait);\n    };\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">throttle\u003C/span>(\u003Cspan class=\"hljs-params\">func, limit\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> inThrottle;\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> args = \u003Cspan class=\"hljs-variable language_\">arguments\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> context = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!inThrottle) {\n        func.\u003Cspan class=\"hljs-title function_\">apply\u003C/span>(context, args);\n        inThrottle = \u003Cspan class=\"hljs-literal\">true\u003C/span>;\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> inThrottle = \u003Cspan class=\"hljs-literal\">false\u003C/span>, limit);\n      }\n    };\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">getPerformanceMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> measures = performance.\u003Cspan class=\"hljs-title function_\">getEntriesByType\u003C/span>(\u003Cspan class=\"hljs-string\">'measure'\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> measures.\u003Cspan class=\"hljs-title function_\">filter\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">measure\u003C/span> =>\u003C/span> measure.\u003Cspan class=\"hljs-property\">name\u003C/span>.\u003Cspan class=\"hljs-title function_\">includes\u003C/span>(\u003Cspan class=\"hljs-string\">'table-'\u003C/span>));\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">clearPerformanceMetrics\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    performance.\u003Cspan class=\"hljs-title function_\">clearMeasures\u003C/span>();\n    performance.\u003Cspan class=\"hljs-title function_\">clearMarks\u003C/span>();\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage with performance monitoring\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> optimizedTable = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">OptimizedInteractiveTable\u003C/span>(\u003Cspan class=\"hljs-string\">'#large-data-table'\u003C/span>, {\n  \u003Cspan class=\"hljs-attr\">virtualScroll\u003C/span>: \u003Cspan class=\"hljs-literal\">true\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">itemHeight\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">10\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">chunkSize\u003C/span>: \u003Cspan class=\"hljs-number\">50\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">viewportHeight\u003C/span>: \u003Cspan class=\"hljs-number\">400\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">columns\u003C/span>: [\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'id'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'id-column'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'name'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'name-column'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'email'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'email-column'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'status'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'status-column'\u003C/span> }\n  ]\n});\n\n\u003Cspan class=\"hljs-comment\">// Load large dataset\u003C/span>\n\u003Cspan class=\"hljs-title function_\">fetch\u003C/span>(\u003Cspan class=\"hljs-string\">'/api/large-dataset'\u003C/span>)\n  .\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">response\u003C/span> =>\u003C/span> response.\u003Cspan class=\"hljs-title function_\">json\u003C/span>())\n  .\u003Cspan class=\"hljs-title function_\">then\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">data\u003C/span> =>\u003C/span> {\n    optimizedTable.\u003Cspan class=\"hljs-title function_\">setData\u003C/span>(data);\n    \n    \u003Cspan class=\"hljs-comment\">// Monitor performance\u003C/span>\n    \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> metrics = optimizedTable.\u003Cspan class=\"hljs-title function_\">getPerformanceMetrics\u003C/span>();\n      \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">table\u003C/span>(metrics.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">m\u003C/span> =>\u003C/span> ({ \u003Cspan class=\"hljs-attr\">name\u003C/span>: m.\u003Cspan class=\"hljs-property\">name\u003C/span>, \u003Cspan class=\"hljs-attr\">duration\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${m.duration.toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span>ms`\u003C/span> })));\n    }, \u003Cspan class=\"hljs-number\">1000\u003C/span>);\n  });\n\u003C/code>\u003C/pre>\u003Ch3 id=\"memory-management\">Memory Management\u003C/h3>\n\u003Cp>Efficient memory usage for interactive tables:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// memory-efficient-table.js - Memory-optimized table implementation\u003C/span>\n\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title class_\">MemoryEfficientTable\u003C/span> {\n  \u003Cspan class=\"hljs-title function_\">constructor\u003C/span>(\u003Cspan class=\"hljs-params\">selector, 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>(selector);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span> = {\n      \u003Cspan class=\"hljs-attr\">maxCachedRows\u003C/span>: options.\u003Cspan class=\"hljs-property\">maxCachedRows\u003C/span> || \u003Cspan class=\"hljs-number\">1000\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">recycleThreshold\u003C/span>: options.\u003Cspan class=\"hljs-property\">recycleThreshold\u003C/span> || \u003Cspan class=\"hljs-number\">0.8\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">cleanupInterval\u003C/span>: options.\u003Cspan class=\"hljs-property\">cleanupInterval\u003C/span> || \u003Cspan class=\"hljs-number\">30000\u003C/span>, \u003Cspan class=\"hljs-comment\">// 30 seconds\u003C/span>\n      ...options\n    };\n    \n    \u003Cspan class=\"hljs-comment\">// Memory management\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\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\">unusedElements\u003C/span> = [];\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span> = { \u003Cspan class=\"hljs-attr\">cached\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span>, \u003Cspan class=\"hljs-attr\">total\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> };\n    \n    \u003Cspan class=\"hljs-comment\">// Cleanup timer\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cleanupTimer\u003C/span> = \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performMemoryCleanup\u003C/span>(), \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">cleanupInterval\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Observer for memory pressure\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupMemoryPressureObserver\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-comment\">// Set up intersection observer for visible rows\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span> = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">IntersectionObserver\u003C/span>(\n      \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">entries\u003C/span>) =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(entries),\n      { \u003Cspan class=\"hljs-attr\">root\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>, \u003Cspan class=\"hljs-attr\">threshold\u003C/span>: \u003Cspan class=\"hljs-number\">0\u003C/span> }\n    );\n    \n    \u003Cspan class=\"hljs-comment\">// Monitor memory usage\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">monitorMemoryUsage\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupMemoryPressureObserver\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-comment\">// Monitor memory pressure and clean up aggressively when needed\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">checkMemoryPressure\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> memInfo = performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>;\n        \u003Cspan class=\"hljs-keyword\">const\u003C/span> usageRatio = memInfo.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span> / memInfo.\u003Cspan class=\"hljs-property\">jsHeapSizeLimit\u003C/span>;\n        \n        \u003Cspan class=\"hljs-keyword\">if\u003C/span> (usageRatio > \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">recycleThreshold\u003C/span>) {\n          \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performAggressiveCleanup\u003C/span>();\n        }\n      };\n      \n      \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(checkMemoryPressure, \u003Cspan class=\"hljs-number\">5000\u003C/span>);\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">createRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">rowData, index\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Try to reuse an existing element\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">let\u003C/span> rowElement = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-title function_\">pop\u003C/span>();\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!rowElement) {\n      rowElement = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'tr'\u003C/span>);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">setupRowElement\u003C/span>(rowElement);\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Update element with new data\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">updateRowElement\u003C/span>(rowElement, rowData, index);\n    \n    \u003Cspan class=\"hljs-comment\">// Cache element for potential reuse\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(index, rowElement);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">cached\u003C/span>++;\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> rowElement;\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">setupRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Set up event listeners and basic structure\u003C/span>\n    element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleRowClick\u003C/span>.\u003Cspan class=\"hljs-title function_\">bind\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>));\n    \n    \u003Cspan class=\"hljs-comment\">// Create cell elements\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">columns\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">createElement\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n      element.\u003Cspan class=\"hljs-title function_\">appendChild\u003C/span>(cell);\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">updateRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">element, rowData, index\u003C/span>) {\n    element.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span> = index;\n    element.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">rowId\u003C/span> = rowData.\u003Cspan class=\"hljs-property\">id\u003C/span>;\n    \n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> cells = element.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'td'\u003C/span>);\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">options\u003C/span>.\u003Cspan class=\"hljs-property\">columns\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">column, colIndex\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> cell = cells[colIndex];\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> value = rowData[column.\u003Cspan class=\"hljs-property\">key\u003C/span>];\n      \n      \u003Cspan class=\"hljs-comment\">// Efficient text update\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> !== value) {\n        cell.\u003Cspan class=\"hljs-property\">textContent\u003C/span> = value;\n      }\n      \n      \u003Cspan class=\"hljs-comment\">// Update class names if needed\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (column.\u003Cspan class=\"hljs-property\">className\u003C/span> && !cell.\u003Cspan class=\"hljs-property\">classList\u003C/span>.\u003Cspan class=\"hljs-title function_\">contains\u003C/span>(column.\u003Cspan class=\"hljs-property\">className\u003C/span>)) {\n        cell.\u003Cspan class=\"hljs-property\">className\u003C/span> = column.\u003Cspan class=\"hljs-property\">className\u003C/span>;\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">removeRowElement\u003C/span>(\u003Cspan class=\"hljs-params\">index\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> element = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">get\u003C/span>(index);\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element) {\n      \u003Cspan class=\"hljs-comment\">// Remove from DOM\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (element.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>) {\n        element.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeChild\u003C/span>(element);\n      }\n      \n      \u003Cspan class=\"hljs-comment\">// Unobserve for intersection\u003C/span>\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">unobserve\u003C/span>(element);\n      \n      \u003Cspan class=\"hljs-comment\">// Add to reuse pool if under limit\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\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\">maxCachedRows\u003C/span> / \u003Cspan class=\"hljs-number\">2\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-title function_\">push\u003C/span>(element);\n      } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n        \u003Cspan class=\"hljs-comment\">// Completely remove to free memory\u003C/span>\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroyElement\u003C/span>(element);\n      }\n      \n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(index);\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">cached\u003C/span>--;\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">destroyElement\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Remove all event listeners\u003C/span>\n    element.\u003Cspan class=\"hljs-title function_\">removeEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">handleRowClick\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Clear references\u003C/span>\n    element.\u003Cspan class=\"hljs-property\">innerHTML\u003C/span> = \u003Cspan class=\"hljs-string\">''\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Additional cleanup for potential memory leaks\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> key \u003Cspan class=\"hljs-keyword\">in\u003C/span> element.\u003Cspan class=\"hljs-property\">dataset\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">delete\u003C/span> element.\u003Cspan class=\"hljs-property\">dataset\u003C/span>[key];\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleIntersection\u003C/span>(\u003Cspan class=\"hljs-params\">entries\u003C/span>) {\n    entries.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">entry\u003C/span> =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowElement = entry.\u003Cspan class=\"hljs-property\">target\u003C/span>;\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> index = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(rowElement.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span>);\n      \n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!entry.\u003Cspan class=\"hljs-property\">isIntersecting\u003C/span>) {\n        \u003Cspan class=\"hljs-comment\">// Row is no longer visible - consider for cleanup\u003C/span>\n        \u003Cspan class=\"hljs-built_in\">setTimeout\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n          \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">isRowVisible\u003C/span>(rowElement)) {\n            \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeRowElement\u003C/span>(index);\n          }\n        }, \u003Cspan class=\"hljs-number\">1000\u003C/span>); \u003Cspan class=\"hljs-comment\">// Delay cleanup to avoid thrashing\u003C/span>\n      }\n    });\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">isRowVisible\u003C/span>(\u003Cspan class=\"hljs-params\">element\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rect = element.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> containerRect = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">getBoundingClientRect\u003C/span>();\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> (\n      rect.\u003Cspan class=\"hljs-property\">bottom\u003C/span> >= containerRect.\u003Cspan class=\"hljs-property\">top\u003C/span> &&\n      rect.\u003Cspan class=\"hljs-property\">top\u003C/span> <= containerRect.\u003Cspan class=\"hljs-property\">bottom\u003C/span>\n    );\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">performMemoryCleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Clean up unused elements\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> unusedCount = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> targetCount = \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\">options\u003C/span>.\u003Cspan class=\"hljs-property\">maxCachedRows\u003C/span> * \u003Cspan class=\"hljs-number\">0.5\u003C/span>);\n    \n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (unusedCount > targetCount) {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> elementsToRemove = \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-title function_\">splice\u003C/span>(targetCount);\n      elementsToRemove.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroyElement\u003C/span>(element));\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Clean up cached elements that are no longer in DOM\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [index, element] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()) {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!element.\u003Cspan class=\"hljs-property\">parentNode\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">delete\u003C/span>(index);\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">cached\u003C/span>--;\n      }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Force garbage collection if available\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">gc\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">gc\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">performAggressiveCleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Memory pressure detected, performing aggressive cleanup'\u003C/span>);\n    \n    \u003Cspan class=\"hljs-comment\">// Remove all unused elements\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-title function_\">forEach\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">element\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">destroyElement\u003C/span>(element));\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span> = [];\n    \n    \u003Cspan class=\"hljs-comment\">// Remove cached elements not currently visible\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleElements = \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\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'tr[data-index]'\u003C/span>));\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> visibleIndices = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Set\u003C/span>(visibleElements.\u003Cspan class=\"hljs-title function_\">map\u003C/span>(\u003Cspan class=\"hljs-function\">\u003Cspan class=\"hljs-params\">el\u003C/span> =>\u003C/span> \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(el.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span>)));\n    \n    \u003Cspan class=\"hljs-keyword\">for\u003C/span> (\u003Cspan class=\"hljs-keyword\">const\u003C/span> [index, element] \u003Cspan class=\"hljs-keyword\">of\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">entries\u003C/span>()) {\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (!visibleIndices.\u003Cspan class=\"hljs-title function_\">has\u003C/span>(index)) {\n        \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">removeRowElement\u003C/span>(index);\n      }\n    }\n    \n    \u003Cspan class=\"hljs-comment\">// Trigger garbage collection\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">gc\u003C/span>) {\n      \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">gc\u003C/span>();\n    }\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">monitorMemoryUsage\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)) \u003Cspan class=\"hljs-keyword\">return\u003C/span>;\n    \n    \u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">const\u003C/span> memInfo = performance.\u003Cspan class=\"hljs-property\">memory\u003C/span>;\n      \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">total\u003C/span> = memInfo.\u003Cspan class=\"hljs-property\">usedJSHeapSize\u003C/span>;\n      \n      \u003Cspan class=\"hljs-comment\">// Log memory usage in development\u003C/span>\n      \u003Cspan class=\"hljs-keyword\">if\u003C/span> (process.\u003Cspan class=\"hljs-property\">env\u003C/span>.\u003Cspan class=\"hljs-property\">NODE_ENV\u003C/span> === \u003Cspan class=\"hljs-string\">'development'\u003C/span>) {\n        \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">log\u003C/span>(\u003Cspan class=\"hljs-string\">'Table memory usage:'\u003C/span>, {\n          \u003Cspan class=\"hljs-attr\">cached\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">cached\u003C/span>,\n          \u003Cspan class=\"hljs-attr\">unused\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n          \u003Cspan class=\"hljs-attr\">total\u003C/span>: \u003Cspan class=\"hljs-string\">`\u003Cspan class=\"hljs-subst\">${(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.memoryUsage.total / \u003Cspan class=\"hljs-number\">1024\u003C/span> / \u003Cspan class=\"hljs-number\">1024\u003C/span>).toFixed(\u003Cspan class=\"hljs-number\">2\u003C/span>)}\u003C/span> MB`\u003C/span>\n        });\n      }\n    }, \u003Cspan class=\"hljs-number\">10000\u003C/span>);\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">handleRowClick\u003C/span>(\u003Cspan class=\"hljs-params\">event\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowElement = event.\u003Cspan class=\"hljs-property\">currentTarget\u003C/span>;\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> index = \u003Cspan class=\"hljs-built_in\">parseInt\u003C/span>(rowElement.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">index\u003C/span>);\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> rowId = rowElement.\u003Cspan class=\"hljs-property\">dataset\u003C/span>.\u003Cspan class=\"hljs-property\">rowId\u003C/span>;\n    \n    \u003Cspan class=\"hljs-comment\">// Emit custom event\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span>.\u003Cspan class=\"hljs-title function_\">dispatchEvent\u003C/span>(\u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">CustomEvent\u003C/span>(\u003Cspan class=\"hljs-string\">'rowClick'\u003C/span>, {\n      \u003Cspan class=\"hljs-attr\">detail\u003C/span>: { index, rowId, \u003Cspan class=\"hljs-attr\">element\u003C/span>: rowElement }\n    }));\n  }\n  \n  \u003Cspan class=\"hljs-comment\">// Public API\u003C/span>\n  \u003Cspan class=\"hljs-title function_\">getMemoryUsage\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> {\n      ...\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">unused\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span>.\u003Cspan class=\"hljs-property\">length\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">total\u003C/span>: \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">memoryUsage\u003C/span>.\u003Cspan class=\"hljs-property\">total\u003C/span>\n    };\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">forceCleanup\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performAggressiveCleanup\u003C/span>();\n  }\n  \n  \u003Cspan class=\"hljs-title function_\">destroy\u003C/span>(\u003Cspan class=\"hljs-params\">\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Clean up all resources\u003C/span>\n    \u003Cspan class=\"hljs-built_in\">clearInterval\u003C/span>(\u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">cleanupTimer\u003C/span>);\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">intersectionObserver\u003C/span>.\u003Cspan class=\"hljs-title function_\">disconnect\u003C/span>();\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">performAggressiveCleanup\u003C/span>();\n    \n    \u003Cspan class=\"hljs-comment\">// Remove all remaining elements\u003C/span>\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">rowElementCache\u003C/span>.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">unusedElements\u003C/span> = [];\n    \n    \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-property\">container\u003C/span> = \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n  }\n}\n\n\u003Cspan class=\"hljs-comment\">// Usage with memory monitoring\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> memoryEfficientTable = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">MemoryEfficientTable\u003C/span>(\u003Cspan class=\"hljs-string\">'#memory-optimized-table'\u003C/span>, {\n  \u003Cspan class=\"hljs-attr\">maxCachedRows\u003C/span>: \u003Cspan class=\"hljs-number\">500\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">recycleThreshold\u003C/span>: \u003Cspan class=\"hljs-number\">0.7\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">cleanupInterval\u003C/span>: \u003Cspan class=\"hljs-number\">15000\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">columns\u003C/span>: [\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'id'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'id-column'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'name'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'name-column'\u003C/span> },\n    { \u003Cspan class=\"hljs-attr\">key\u003C/span>: \u003Cspan class=\"hljs-string\">'status'\u003C/span>, \u003Cspan class=\"hljs-attr\">className\u003C/span>: \u003Cspan class=\"hljs-string\">'status-column'\u003C/span> }\n  ]\n});\n\n\u003Cspan class=\"hljs-comment\">// Monitor memory usage\u003C/span>\n\u003Cspan class=\"hljs-built_in\">setInterval\u003C/span>(\u003Cspan class=\"hljs-function\">() =>\u003C/span> {\n  \u003Cspan class=\"hljs-keyword\">const\u003C/span> usage = memoryEfficientTable.\u003Cspan class=\"hljs-title function_\">getMemoryUsage\u003C/span>();\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (usage.\u003Cspan class=\"hljs-property\">cached\u003C/span> > \u003Cspan class=\"hljs-number\">800\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'High memory usage detected, forcing cleanup'\u003C/span>);\n    memoryEfficientTable.\u003Cspan class=\"hljs-title function_\">forceCleanup\u003C/span>();\n  }\n}, \u003Cspan class=\"hljs-number\">5000\u003C/span>);\n\u003C/code>\u003C/pre>\u003Ch2 id=\"troubleshooting-common-issues\">Troubleshooting Common Issues\u003C/h2>\n\u003Ch3 id=\"performance-problems-with-large-datasets\">Performance Problems with Large Datasets\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Table becomes slow and unresponsive with large amounts of data\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Implement Virtual Scrolling\u003C/strong>:\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Virtual scrolling for large datasets\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">handleLargeDataset\u003C/span> = (\u003Cspan class=\"hljs-params\">data\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (data.\u003Cspan class=\"hljs-property\">length\u003C/span> > \u003Cspan class=\"hljs-number\">1000\u003C/span>) {\n    \u003Cspan class=\"hljs-comment\">// Enable virtual scrolling\u003C/span>\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> virtualTable = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">VirtualScrollTable\u003C/span>(\u003Cspan class=\"hljs-string\">'#large-table'\u003C/span>, {\n      \u003Cspan class=\"hljs-attr\">itemHeight\u003C/span>: \u003Cspan class=\"hljs-number\">40\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">bufferSize\u003C/span>: \u003Cspan class=\"hljs-number\">5\u003C/span>,\n      \u003Cspan class=\"hljs-attr\">data\u003C/span>: data\n    });\n  }\n};\n\u003C/code>\u003C/pre>\u003Col start=\"2\">\n\u003Cli>\u003Cstrong>Use Web Workers for Processing\u003C/strong>:\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Offload processing to Web Workers\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">processDataInWorker\u003C/span> = (\u003Cspan class=\"hljs-params\">data, operation\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Promise\u003C/span>(\u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">resolve\u003C/span>) =>\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">const\u003C/span> worker = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">Worker\u003C/span>(\u003Cspan class=\"hljs-string\">'/js/table-worker.js'\u003C/span>);\n    worker.\u003Cspan class=\"hljs-title function_\">postMessage\u003C/span>({ data, operation });\n    worker.\u003Cspan class=\"hljs-property\">onmessage\u003C/span> = \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">e\u003C/span>) =>\u003C/span> {\n      \u003Cspan class=\"hljs-title function_\">resolve\u003C/span>(e.\u003Cspan class=\"hljs-property\">data\u003C/span>);\n      worker.\u003Cspan class=\"hljs-title function_\">terminate\u003C/span>();\n    };\n  });\n};\n\u003C/code>\u003C/pre>\u003Ch3 id=\"memory-leaks-in-dynamic-tables\">Memory Leaks in Dynamic Tables\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Memory usage increases over time with frequent updates\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Implement Proper Cleanup\u003C/strong>:\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Cleanup function for table updates\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">cleanupTable\u003C/span> = (\u003Cspan class=\"hljs-params\">\u003C/span>) => {\n  \u003Cspan class=\"hljs-comment\">// Remove event listeners\u003C/span>\n  \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelectorAll\u003C/span>(\u003Cspan class=\"hljs-string\">'.table-row'\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-title function_\">removeEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, handleRowClick);\n  });\n  \n  \u003Cspan class=\"hljs-comment\">// Clear cached elements\u003C/span>\n  rowCache.\u003Cspan class=\"hljs-title function_\">clear\u003C/span>();\n  \n  \u003Cspan class=\"hljs-comment\">// Force garbage collection if available\u003C/span>\n  \u003Cspan class=\"hljs-keyword\">if\u003C/span> (\u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-property\">gc\u003C/span>) {\n    \u003Cspan class=\"hljs-variable language_\">window\u003C/span>.\u003Cspan class=\"hljs-title function_\">gc\u003C/span>();\n  }\n};\n\u003C/code>\u003C/pre>\u003Col start=\"2\">\n\u003Cli>\u003Cstrong>Use WeakMaps for References\u003C/strong>:\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Use WeakMap to avoid memory leaks\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> rowHandlers = \u003Cspan class=\"hljs-keyword\">new\u003C/span> \u003Cspan class=\"hljs-title class_\">WeakMap\u003C/span>();\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">attachRowHandler\u003C/span> = (\u003Cspan class=\"hljs-params\">element, handler\u003C/span>) => {\n  rowHandlers.\u003Cspan class=\"hljs-title function_\">set\u003C/span>(element, handler);\n  element.\u003Cspan class=\"hljs-title function_\">addEventListener\u003C/span>(\u003Cspan class=\"hljs-string\">'click'\u003C/span>, handler);\n};\n\u003C/code>\u003C/pre>\u003Ch3 id=\"cross-browser-compatibility-issues\">Cross-Browser Compatibility Issues\u003C/h3>\n\u003Cp>\u003Cstrong>Problem\u003C/strong>: Table functionality works differently across browsers\u003C/p>\n\u003Cp>\u003Cstrong>Solutions\u003C/strong>:\u003C/p>\n\u003Col>\n\u003Cli>\u003Cstrong>Feature Detection\u003C/strong>:\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Feature detection for table features\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title class_\">TableFeatureDetector\u003C/span> = {\n  \u003Cspan class=\"hljs-attr\">supportsIntersectionObserver\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-attr\">supportsPerformanceObserver\u003C/span>: \u003Cspan class=\"hljs-string\">'PerformanceObserver'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n  \u003Cspan class=\"hljs-attr\">supportsWebWorkers\u003C/span>: \u003Cspan class=\"hljs-string\">'Worker'\u003C/span> \u003Cspan class=\"hljs-keyword\">in\u003C/span> \u003Cspan class=\"hljs-variable language_\">window\u003C/span>,\n  \n  \u003Cspan class=\"hljs-title function_\">getCompatibleImplementation\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\">supportsIntersectionObserver\u003C/span>) {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">EnhancedTable\u003C/span>;\n    } \u003Cspan class=\"hljs-keyword\">else\u003C/span> {\n      \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-title class_\">BasicTable\u003C/span>;\n    }\n  }\n};\n\u003C/code>\u003C/pre>\u003Col start=\"2\">\n\u003Cli>\u003Cstrong>Polyfills and Fallbacks\u003C/strong>:\u003C/li>\n\u003C/ol>\n\u003Cpre>\u003Ccode class=\"hljs language-javascript\">\u003Cspan class=\"hljs-comment\">// Polyfill for older browsers\u003C/span>\n\u003Cspan class=\"hljs-keyword\">if\u003C/span> (!\u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>.\u003Cspan class=\"hljs-property\">includes\u003C/span>) {\n  \u003Cspan class=\"hljs-title class_\">Array\u003C/span>.\u003Cspan class=\"hljs-property\">\u003Cspan class=\"hljs-keyword\">prototype\u003C/span>\u003C/span>.\u003Cspan class=\"hljs-property\">includes\u003C/span> = \u003Cspan class=\"hljs-keyword\">function\u003C/span>(\u003Cspan class=\"hljs-params\">searchElement\u003C/span>) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">this\u003C/span>.\u003Cspan class=\"hljs-title function_\">indexOf\u003C/span>(searchElement) !== -\u003Cspan class=\"hljs-number\">1\u003C/span>;\n  };\n}\n\n\u003Cspan class=\"hljs-comment\">// Fallback for missing APIs\u003C/span>\n\u003Cspan class=\"hljs-keyword\">const\u003C/span> \u003Cspan class=\"hljs-title function_\">safeQuerySelector\u003C/span> = (\u003Cspan class=\"hljs-params\">selector\u003C/span>) => {\n  \u003Cspan class=\"hljs-keyword\">try\u003C/span> {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-variable language_\">document\u003C/span>.\u003Cspan class=\"hljs-title function_\">querySelector\u003C/span>(selector);\n  } \u003Cspan class=\"hljs-keyword\">catch\u003C/span> (e) {\n    \u003Cspan class=\"hljs-variable language_\">console\u003C/span>.\u003Cspan class=\"hljs-title function_\">warn\u003C/span>(\u003Cspan class=\"hljs-string\">'Selector not supported:'\u003C/span>, selector);\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> \u003Cspan class=\"hljs-literal\">null\u003C/span>;\n  }\n};\n\u003C/code>\u003C/pre>\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>Advanced table sorting and filtering in Markdown transforms static data presentations into dynamic, interactive experiences that empower users to explore and analyze information efficiently. By implementing comprehensive JavaScript functionality, professional CSS styling, and performance optimization techniques, content creators can build sophisticated data interfaces that rival dedicated database applications while maintaining the simplicity and portability of Markdown.\u003C/p>\n\u003Cp>The key to successful interactive table implementation lies in balancing functionality with performance, ensuring accessibility compliance, and providing intuitive user experiences that scale effectively across different platforms and datasets. Whether you're creating documentation systems, data dashboards, or content management interfaces, the techniques covered in this guide provide the foundation for professional table functionality that enhances both usability and engagement.\u003C/p>\n\u003Cp>Remember to test your implementations across different browsers and devices, monitor performance with large datasets, and implement proper memory management to ensure smooth operation. With well-implemented sorting and filtering capabilities, your Markdown tables become powerful tools for data exploration that maintain the flexibility and simplicity that makes Markdown an ideal choice for content creation workflows.\u003C/p>\n",[15,19,22,25,28,31,34,37,40],{"id":16,"text":17,"level":18},"why-implement-interactive-table-features-in-markdown","Why Implement Interactive Table Features in Markdown?",2,{"id":20,"text":21,"level":18},"foundation-table-structure-for-interactive-enhancement","Foundation Table Structure for Interactive Enhancement",{"id":23,"text":24,"level":18},"javascript-implementation-for-table-interactivity","JavaScript Implementation for Table Interactivity",{"id":26,"text":27,"level":18},"css-styling-for-interactive-tables","CSS Styling for Interactive Tables",{"id":29,"text":30,"level":18},"platform-specific-integration","Platform-Specific Integration",{"id":32,"text":33,"level":18},"integration-with-modern-workflows","Integration with Modern Workflows",{"id":35,"text":36,"level":18},"performance-optimization-and-best-practices","Performance Optimization and Best Practices",{"id":38,"text":39,"level":18},"troubleshooting-common-issues","Troubleshooting Common Issues",{"id":41,"text":42,"level":18},"conclusion","Conclusion",[],[45,53,61],{"slug":46,"title":47,"description":48,"excerpt":49,"date":50,"category":9,"author":10,"keywords":51,"readingMinutes":52},"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":54,"title":55,"description":56,"excerpt":57,"date":58,"category":9,"author":10,"keywords":59,"readingMinutes":60},"markdown-table-data-filtering-search-complete-guide","Markdown Table Data Filtering and Search: Complete Guide for Interactive Content Discovery and Dynamic Data Navigation","Master table data filtering and search capabilities in Markdown for enhanced content discovery. Learn JavaScript integration, advanced filtering techniques, and responsive search implementations for interactive documentation.","Table data filtering and search capabilities in Markdown enable dynamic content discovery that transforms static tabular information into interactive, searchable interfaces allowing users to…","2025-12-16","markdown table filtering, table search functionality, interactive markdown tables, data filtering markdown, table javascript integration, searchable tables markdown, dynamic table filtering, markdown table navigation",30,{"slug":62,"title":63,"description":64,"excerpt":65,"date":66,"category":9,"author":10,"keywords":67,"readingMinutes":68},"markdown-table-data-validation-quality-assurance-guide","Markdown Table Data Validation and Quality Assurance: Complete Guide for Content Integrity and Data Quality Management","Master advanced Markdown table data validation techniques for content integrity, quality assurance, and automated data verification. Learn validation rules, data quality checks, and error detection for professional documentation systems.","Advanced Markdown table data validation and quality assurance systems enable sophisticated content management workflows that ensure data integrity, maintain consistency standards, and provide…","2025-11-10","markdown table validation, data quality assurance, table content verification, markdown data integrity, table validation rules, content quality control, markdown table testing, data validation automation",31,1792184942055]