all-purpose-table 1.0.10 → 1.1.0

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import { useState, useRef, useMemo, useEffect, Fragment as Fragment$1 } from 'react';
+import { useState, useRef, useMemo, useEffect, useLayoutEffect, Fragment as Fragment$1 } from 'react';
+import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // #style-inject:#style-inject
@@ -24,7 +25,239 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles.css
-styleInject(":root {\n  --apt-color-primary: #371f1f;\n  --apt-color-border: #d1d5db;\n  --apt-color-bg: white;\n  --apt-color-bg-secondary: #e5e7eb;\n  --apt-color-bg-hover: #f3f4f6;\n  --apt-color-text: #1f2937;\n  --apt-color-text-muted: #6b7280;\n  --apt-color-text-muted-light: #9ca3af;\n  --apt-color-accent: #9333ea;\n  --apt-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  --apt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --apt-resizer-color: #bbb;\n  --apt-resizer-hover-color: #888;\n  --apt-th-sortable-hover: #d1d5db;\n  --apt-btn-bg: white;\n  --apt-btn-hover-bg: #d1d5db;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --apt-color-primary: #eee;\n    --apt-color-border: #333;\n    --apt-color-bg: #1e1e1e;\n    --apt-color-bg-secondary: #333;\n    --apt-color-bg-hover: rgba(126, 126, 126, 0.15);\n    --apt-color-text: #eee;\n    --apt-color-text-muted: #d1d5db;\n    --apt-color-text-muted-light: #444;\n    --apt-color-accent: #a855f7;\n    --apt-resizer-color: #666;\n    --apt-resizer-hover-color: #999;\n    --apt-th-sortable-hover: #444;\n    --apt-btn-bg: #444;\n    --apt-btn-hover-bg: #555;\n  }\n}\nhtml.dark,\n.dark,\n:root.dark {\n  --apt-color-primary: #eee;\n  --apt-color-border: #333;\n  --apt-color-bg: #1e1e1e;\n  --apt-color-bg-secondary: #333;\n  --apt-color-bg-hover: rgba(126, 126, 126, 0.15);\n  --apt-color-text: #eee;\n  --apt-color-text-muted: #d1d5db;\n  --apt-color-text-muted-light: #444;\n  --apt-color-accent: #a855f7;\n  --apt-resizer-color: #666;\n  --apt-resizer-hover-color: #999;\n  --apt-th-sortable-hover: #444;\n  --apt-btn-bg: #444;\n  --apt-btn-hover-bg: #555;\n}\nhtml.light,\n.light,\n:root.light {\n  --apt-color-primary: #371f1f;\n  --apt-color-border: #d1d5db;\n  --apt-color-bg: white;\n  --apt-color-bg-secondary: #e5e7eb;\n  --apt-color-bg-hover: #f3f4f6;\n  --apt-color-text: #1f2937;\n  --apt-color-text-muted: #6b7280;\n  --apt-color-text-muted-light: #9ca3af;\n  --apt-color-accent: #9333ea;\n  --apt-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  --apt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --apt-resizer-color: #bbb;\n  --apt-resizer-hover-color: #888;\n  --apt-th-sortable-hover: #d1d5db;\n  --apt-btn-bg: white;\n  --apt-btn-hover-bg: #d1d5db;\n}\n.apt-table-container {\n  color: var(--apt-color-text);\n  border-radius: 6px;\n  margin: 0;\n  padding: 0;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg);\n  box-shadow: var(--apt-shadow);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.apt-empty-state {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 48px 0;\n  color: var(--apt-color-text-muted-light);\n}\n.apt-scroll-area {\n  flex-grow: 1;\n  overflow: auto;\n}\n.apt-table {\n  width: 100%;\n  text-align: left;\n  font-size: 0.75rem;\n  table-layout: fixed;\n  border-collapse: collapse;\n  border-spacing: 0;\n  margin: 0;\n  padding: 0;\n}\n.apt-thead {\n  position: sticky;\n  top: 0;\n  background-color: var(--apt-color-bg-secondary);\n  z-index: 10;\n}\n.apt-th {\n  position: relative;\n  padding: 12px 8px;\n  border: none;\n}\n.apt-th-sortable {\n  cursor: pointer;\n}\n.apt-th-sortable:hover {\n  background-color: var(--apt-th-sortable-hover);\n}\n.apt-th-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.apt-resizer {\n  position: absolute;\n  right: 0;\n  top: 4px;\n  height: 80%;\n  width: 3px;\n  border-radius: 2px;\n  cursor: col-resize;\n  user-select: none;\n  touch-action: none;\n  background-color: var(--apt-resizer-color);\n}\n.apt-resizer:hover,\n.apt-th:hover .apt-resizer {\n  background-color: var(--apt-resizer-hover-color);\n}\n.apt-tbody {\n  border: none;\n}\n.apt-tbody tr {\n  border: none;\n}\n.apt-row {\n  transition: background-color 0.15s;\n}\n.apt-row:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-row-expanded {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-td {\n  padding: 4px 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n}\n.apt-td-actions {\n  padding: 4px 8px;\n  border: none;\n}\n.apt-footer {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  align-items: center;\n  padding: 8px;\n  background-color: var(--apt-color-bg-secondary);\n}\n.apt-footer-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.apt-footer-center {\n  justify-self: center;\n  font-size: 0.875rem;\n  color: var(--apt-color-text);\n}\n.apt-footer-right {\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.apt-rows-label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--apt-color-text-muted);\n}\n.apt-rows-select {\n  padding: 4px 8px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n  background-color: var(--apt-btn-bg);\n  color: var(--apt-color-text);\n  border: 1px solid var(--apt-color-border);\n}\n.apt-btn {\n  padding: 4px 12px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n  background-color: var(--apt-btn-bg);\n  color: var(--apt-color-text);\n  border: 0;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n.apt-btn:hover:not(:disabled) {\n  background-color: var(--apt-btn-hover-bg);\n}\n.apt-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.apt-sort-icon {\n  display: inline-block;\n  margin-left: 4px;\n  width: 14px;\n  height: 14px;\n  opacity: 0.3;\n}\n.apt-sort-icon-active {\n  opacity: 1;\n}\n.apt-column-toggle-container {\n  position: relative;\n}\n.apt-column-toggle-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  border-radius: 8px;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg-hover);\n  padding: 8px 12px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--apt-color-primary);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n.apt-column-toggle-btn:hover {\n  background-color: var(--apt-color-bg-secondary);\n}\n.apt-column-toggle-btn:focus {\n  outline: none;\n}\n.apt-column-toggle-icon {\n  font-size: 1.125rem;\n}\n.apt-column-toggle-count {\n  font-size: 0.75rem;\n  opacity: 0.7;\n}\n.apt-column-toggle-menu {\n  position: absolute;\n  right: 0;\n  margin-top: 8px;\n  width: 288px;\n  border-radius: 8px;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg);\n  box-shadow: var(--apt-shadow-lg);\n  z-index: 50;\n  max-height: 384px;\n  overflow-y: auto;\n}\n.apt-column-toggle-menu-inner {\n  padding: 12px;\n}\n.apt-column-toggle-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--apt-color-border);\n  padding-bottom: 8px;\n}\n.apt-column-toggle-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--apt-color-primary);\n}\n.apt-column-toggle-select-all {\n  font-size: 0.75rem;\n  color: var(--apt-color-accent);\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-decoration: none;\n}\n.apt-column-toggle-select-all:hover {\n  text-decoration: underline;\n}\n.apt-column-toggle-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.apt-column-toggle-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 4px;\n  transition: background-color 0.15s;\n}\n.apt-column-toggle-item:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-column-toggle-checkbox {\n  width: 16px;\n  height: 16px;\n  color: var(--apt-color-accent);\n  border-radius: 12px;\n  cursor: pointer;\n  accent-color: var(--apt-color-accent);\n}\n.apt-column-toggle-label {\n  font-size: 0.875rem;\n  color: var(--apt-color-primary);\n  flex: 1;\n}\n.apt-flex {\n  display: flex;\n}\n.apt-items-center {\n  align-items: center;\n}\n.apt-gap-2 {\n  gap: 8px;\n}\n");
+styleInject(':root {\n  --apt-color-primary: #371f1f;\n  --apt-color-border: #d1d5db;\n  --apt-color-border-subtle: #eceff3;\n  --apt-color-bg: white;\n  --apt-color-bg-secondary: #e5e7eb;\n  --apt-color-bg-hover: #f3f4f6;\n  --apt-color-row-stripe: #f9fafb;\n  --apt-color-text: #1f2937;\n  --apt-color-text-muted: #6b7280;\n  --apt-color-text-muted-light: #9ca3af;\n  --apt-color-accent: #9333ea;\n  --apt-color-accent-soft: rgba(147, 51, 234, 0.12);\n  --apt-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  --apt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --apt-resizer-color: #bbb;\n  --apt-resizer-hover-color: #888;\n  --apt-th-sortable-hover: #d1d5db;\n  --apt-btn-bg: white;\n  --apt-btn-hover-bg: #d1d5db;\n}\n@media (prefers-color-scheme: dark) {\n  :root {\n    --apt-color-primary: #eee;\n    --apt-color-border: #333;\n    --apt-color-border-subtle: #2a2a2a;\n    --apt-color-bg: #1e1e1e;\n    --apt-color-bg-secondary: #333;\n    --apt-color-bg-hover: rgba(126, 126, 126, 0.15);\n    --apt-color-row-stripe: rgba(255, 255, 255, 0.03);\n    --apt-color-text: #eee;\n    --apt-color-text-muted: #d1d5db;\n    --apt-color-text-muted-light: #444;\n    --apt-color-accent: #a855f7;\n    --apt-color-accent-soft: rgba(168, 85, 247, 0.2);\n    --apt-resizer-color: #666;\n    --apt-resizer-hover-color: #999;\n    --apt-th-sortable-hover: #444;\n    --apt-btn-bg: #444;\n    --apt-btn-hover-bg: #555;\n  }\n}\nhtml.dark,\n.dark,\n:root.dark {\n  --apt-color-primary: #eee;\n  --apt-color-border: #333;\n  --apt-color-border-subtle: #2a2a2a;\n  --apt-color-bg: #1e1e1e;\n  --apt-color-bg-secondary: #333;\n  --apt-color-bg-hover: rgba(126, 126, 126, 0.15);\n  --apt-color-row-stripe: rgba(255, 255, 255, 0.03);\n  --apt-color-text: #eee;\n  --apt-color-text-muted: #d1d5db;\n  --apt-color-text-muted-light: #444;\n  --apt-color-accent: #a855f7;\n  --apt-color-accent-soft: rgba(168, 85, 247, 0.2);\n  --apt-resizer-color: #666;\n  --apt-resizer-hover-color: #999;\n  --apt-th-sortable-hover: #444;\n  --apt-btn-bg: #444;\n  --apt-btn-hover-bg: #555;\n}\nhtml.light,\n.light,\n:root.light {\n  --apt-color-primary: #371f1f;\n  --apt-color-border: #d1d5db;\n  --apt-color-border-subtle: #eceff3;\n  --apt-color-bg: white;\n  --apt-color-bg-secondary: #e5e7eb;\n  --apt-color-bg-hover: #f3f4f6;\n  --apt-color-row-stripe: #f9fafb;\n  --apt-color-text: #1f2937;\n  --apt-color-text-muted: #6b7280;\n  --apt-color-text-muted-light: #9ca3af;\n  --apt-color-accent: #9333ea;\n  --apt-color-accent-soft: rgba(147, 51, 234, 0.12);\n  --apt-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  --apt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  --apt-resizer-color: #bbb;\n  --apt-resizer-hover-color: #888;\n  --apt-th-sortable-hover: #d1d5db;\n  --apt-btn-bg: white;\n  --apt-btn-hover-bg: #d1d5db;\n}\n.apt-table-container {\n  color: var(--apt-color-text);\n  border-radius: 6px;\n  margin: 0;\n  padding: 0;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg);\n  box-shadow: var(--apt-shadow);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n.apt-empty-state {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 48px 0;\n  color: var(--apt-color-text-muted-light);\n}\n.apt-scroll-area {\n  flex-grow: 1;\n  overflow: auto;\n}\n.apt-no-matches {\n  text-align: center;\n  padding: 32px 8px;\n  color: var(--apt-color-text-muted-light);\n  white-space: normal;\n}\n.apt-table {\n  width: 100%;\n  text-align: left;\n  font-size: 0.75rem;\n  table-layout: fixed;\n  border-collapse: collapse;\n  border-spacing: 0;\n  margin: 0;\n  padding: 0;\n}\n.apt-thead {\n  position: sticky;\n  top: 0;\n  background-color: var(--apt-color-bg-secondary);\n  z-index: 10;\n}\n.apt-th {\n  position: relative;\n  padding: 10px 12px;\n  border: none;\n  border-bottom: 2px solid var(--apt-color-border);\n  font-weight: 600;\n  font-size: 0.7rem;\n  letter-spacing: 0.03em;\n  text-transform: uppercase;\n  color: var(--apt-color-text-muted);\n  user-select: none;\n}\n.apt-th-sortable {\n  cursor: pointer;\n}\n.apt-th-sortable:hover {\n  background-color: var(--apt-th-sortable-hover);\n}\n.apt-th-content {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 2px;\n}\n.apt-th-label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.apt-resizer {\n  position: absolute;\n  right: -3px;\n  top: 0;\n  height: 100%;\n  width: 7px;\n  cursor: col-resize;\n  user-select: none;\n  touch-action: none;\n  z-index: 2;\n  background-color: transparent;\n}\n.apt-resizer::after {\n  content: "";\n  position: absolute;\n  right: 3px;\n  top: 20%;\n  height: 60%;\n  width: 2px;\n  border-radius: 2px;\n  background-color: transparent;\n  transition: background-color 0.15s;\n}\n.apt-th:hover .apt-resizer::after {\n  background-color: var(--apt-resizer-color);\n}\n.apt-resizer:hover::after {\n  background-color: var(--apt-color-accent);\n}\n.apt-th-spacer,\n.apt-td-spacer {\n  padding: 0;\n  border: none;\n}\n.apt-tbody {\n  border: none;\n}\n.apt-tbody tr {\n  border: none;\n}\n.apt-row {\n  transition: background-color 0.15s;\n}\n.apt-row:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-row-expanded {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-td {\n  padding: 6px 12px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: none;\n}\n.apt-td-actions {\n  padding: 6px 12px;\n  border: none;\n}\n.apt-footer {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  align-items: center;\n  padding: 8px;\n  background-color: var(--apt-color-bg-secondary);\n}\n.apt-footer-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.apt-footer-center {\n  justify-self: center;\n  font-size: 0.875rem;\n  color: var(--apt-color-text);\n}\n.apt-footer-right {\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.apt-rows-label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--apt-color-text-muted);\n}\n.apt-rows-select {\n  padding: 4px 8px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n  background-color: var(--apt-btn-bg);\n  color: var(--apt-color-text);\n  border: 1px solid var(--apt-color-border);\n}\n.apt-btn {\n  padding: 4px 12px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n  background-color: var(--apt-btn-bg);\n  color: var(--apt-color-text);\n  border: 0;\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n.apt-btn:hover:not(:disabled) {\n  background-color: var(--apt-btn-hover-bg);\n}\n.apt-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.apt-sort-icon {\n  display: inline-block;\n  margin-left: 4px;\n  width: 14px;\n  height: 14px;\n  opacity: 0.3;\n}\n.apt-sort-icon-active {\n  opacity: 1;\n}\n.apt-column-toggle-container {\n  position: relative;\n}\n.apt-column-toggle-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  border-radius: 8px;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg-hover);\n  padding: 8px 12px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--apt-color-primary);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n.apt-column-toggle-btn:hover {\n  background-color: var(--apt-color-bg-secondary);\n}\n.apt-column-toggle-btn:focus {\n  outline: none;\n}\n.apt-column-toggle-icon {\n  font-size: 1.125rem;\n}\n.apt-column-toggle-count {\n  font-size: 0.75rem;\n  opacity: 0.7;\n}\n.apt-column-toggle-menu {\n  position: absolute;\n  right: 0;\n  margin-top: 8px;\n  width: 288px;\n  border-radius: 8px;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg);\n  box-shadow: var(--apt-shadow-lg);\n  z-index: 50;\n  max-height: 384px;\n  overflow-y: auto;\n}\n.apt-column-toggle-menu-inner {\n  padding: 12px;\n}\n.apt-column-toggle-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n  border-bottom: 1px solid var(--apt-color-border);\n  padding-bottom: 8px;\n}\n.apt-column-toggle-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--apt-color-primary);\n}\n.apt-column-toggle-select-all {\n  font-size: 0.75rem;\n  color: var(--apt-color-accent);\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-decoration: none;\n}\n.apt-column-toggle-select-all:hover {\n  text-decoration: underline;\n}\n.apt-column-toggle-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.apt-column-toggle-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 4px;\n  transition: background-color 0.15s;\n}\n.apt-column-toggle-item:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-column-toggle-checkbox {\n  width: 16px;\n  height: 16px;\n  color: var(--apt-color-accent);\n  border-radius: 12px;\n  cursor: pointer;\n  accent-color: var(--apt-color-accent);\n}\n.apt-column-toggle-label {\n  font-size: 0.875rem;\n  color: var(--apt-color-primary);\n  flex: 1;\n}\n.apt-striped .apt-row.apt-row-alt {\n  background-color: var(--apt-color-row-stripe);\n}\n.apt-dividers .apt-tbody .apt-row > td {\n  border-bottom: 1px solid var(--apt-color-border-subtle);\n}\n.apt-bordered .apt-th:not(.apt-th-spacer),\n.apt-bordered .apt-td:not(.apt-td-spacer) {\n  border-right: 1px solid var(--apt-color-border-subtle);\n}\n.apt-bordered .apt-th:not(.apt-th-spacer) {\n  border-right-color: var(--apt-color-border);\n}\n.apt-compact .apt-th {\n  padding: 6px 8px;\n}\n.apt-compact .apt-td,\n.apt-compact .apt-td-actions {\n  padding: 2px 8px;\n}\n.apt-row:hover,\n.apt-striped .apt-row.apt-row-alt:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-filter-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: auto;\n  padding: 2px;\n  width: 18px;\n  height: 18px;\n  border: none;\n  border-radius: 4px;\n  background: transparent;\n  color: var(--apt-color-text-muted-light);\n  cursor: pointer;\n  opacity: 0.6;\n  transition:\n    background-color 0.15s,\n    color 0.15s,\n    opacity 0.15s;\n}\n.apt-th:hover .apt-filter-btn {\n  opacity: 1;\n}\n.apt-filter-btn:hover {\n  background-color: var(--apt-color-accent-soft);\n  color: var(--apt-color-accent);\n}\n.apt-filter-btn-active {\n  opacity: 1;\n  color: var(--apt-color-accent);\n  background-color: var(--apt-color-accent-soft);\n}\n.apt-filter-icon {\n  display: block;\n  width: 12px;\n  height: 12px;\n}\n.apt-filter-popover {\n  position: fixed;\n  z-index: 1000;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--apt-color-border);\n  border-radius: 8px;\n  background-color: var(--apt-color-bg);\n  color: var(--apt-color-text);\n  box-shadow: var(--apt-shadow-lg);\n  padding: 8px;\n  font-size: 0.8125rem;\n  text-transform: none;\n  letter-spacing: normal;\n  font-weight: 400;\n}\n.apt-filter-sort-row {\n  display: flex;\n  gap: 6px;\n  margin-bottom: 8px;\n}\n.apt-filter-sort-btn {\n  flex: 1;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  padding: 5px 8px;\n  border: 1px solid var(--apt-color-border);\n  border-radius: 6px;\n  background-color: var(--apt-btn-bg);\n  color: var(--apt-color-text);\n  font-size: 0.75rem;\n  cursor: pointer;\n  transition: background-color 0.15s, border-color 0.15s;\n}\n.apt-filter-sort-btn:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-filter-sort-btn-active {\n  border-color: var(--apt-color-accent);\n  color: var(--apt-color-accent);\n  background-color: var(--apt-color-accent-soft);\n}\n.apt-filter-sort-icon {\n  width: 11px;\n  height: 11px;\n}\n.apt-filter-search-wrap {\n  margin-bottom: 6px;\n}\n.apt-filter-search {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 6px 8px;\n  border: 1px solid var(--apt-color-border);\n  border-radius: 6px;\n  background-color: var(--apt-color-bg);\n  color: var(--apt-color-text);\n  font-size: 0.8125rem;\n  outline: none;\n}\n.apt-filter-search:focus {\n  border-color: var(--apt-color-accent);\n  box-shadow: 0 0 0 2px var(--apt-color-accent-soft);\n}\n.apt-filter-list {\n  max-height: 200px;\n  overflow-y: auto;\n  margin: 2px 0;\n}\n.apt-filter-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.apt-filter-item:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n.apt-filter-item-all {\n  border-bottom: 1px solid var(--apt-color-border-subtle);\n  border-radius: 0;\n  margin-bottom: 2px;\n  padding-bottom: 6px;\n  font-weight: 600;\n}\n.apt-filter-checkbox {\n  width: 15px;\n  height: 15px;\n  flex-shrink: 0;\n  cursor: pointer;\n  accent-color: var(--apt-color-accent);\n}\n.apt-filter-item-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.apt-filter-empty {\n  padding: 12px 6px;\n  text-align: center;\n  color: var(--apt-color-text-muted);\n  font-size: 0.75rem;\n}\n.apt-filter-footer {\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--apt-color-border-subtle);\n}\n.apt-filter-clear {\n  padding: 5px 10px;\n  border: none;\n  border-radius: 6px;\n  background: transparent;\n  color: var(--apt-color-accent);\n  font-size: 0.75rem;\n  cursor: pointer;\n}\n.apt-filter-clear:hover:not(:disabled) {\n  text-decoration: underline;\n}\n.apt-filter-clear:disabled {\n  color: var(--apt-color-text-muted-light);\n  cursor: not-allowed;\n}\n.apt-filter-done {\n  padding: 5px 14px;\n  border: none;\n  border-radius: 6px;\n  background-color: var(--apt-color-accent);\n  color: #fff;\n  font-size: 0.75rem;\n  cursor: pointer;\n  transition: opacity 0.15s;\n}\n.apt-filter-done:hover {\n  opacity: 0.9;\n}\n.apt-flex {\n  display: flex;\n}\n.apt-items-center {\n  align-items: center;\n}\n.apt-gap-2 {\n  gap: 8px;\n}\n');
+var FilterIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: "M1 2h10L7 6.5V11L5 9.5V6.5L1 2z" })
+  }
+);
+var SortAscIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: "M6 2L2 7h8L6 2z" })
+  }
+);
+var SortDescIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsx("path", { d: "M6 10l4-5H2l4 5z" })
+  }
+);
+var POPOVER_WIDTH = 240;
+var ColumnFilter = ({
+  columnKey,
+  label,
+  distinctValues,
+  search,
+  excluded,
+  sortConfig,
+  isSortable = true,
+  onSort,
+  onSearchChange,
+  onExcludedChange,
+  onClear
+}) => {
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const buttonRef = useRef(null);
+  const popoverRef = useRef(null);
+  const masterRef = useRef(null);
+  const isActive = search.trim() !== "" || excluded.size > 0;
+  const sortDir = sortConfig && sortConfig.key === columnKey ? sortConfig.direction : null;
+  const visibleValues = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    if (!q) return distinctValues;
+    return distinctValues.filter((v) => v.toLowerCase().includes(q));
+  }, [distinctValues, search]);
+  const allVisibleSelected = visibleValues.length > 0 && visibleValues.every((v) => !excluded.has(v));
+  const someVisibleSelected = visibleValues.some((v) => !excluded.has(v));
+  useLayoutEffect(() => {
+    if (!open || !buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    let left = rect.right - POPOVER_WIDTH;
+    const maxLeft = window.innerWidth - POPOVER_WIDTH - 8;
+    if (left > maxLeft) left = maxLeft;
+    if (left < 8) left = 8;
+    setPos({ top: rect.bottom + 6, left });
+  }, [open]);
+  useEffect(() => {
+    if (masterRef.current) {
+      masterRef.current.indeterminate = someVisibleSelected && !allVisibleSelected;
+    }
+  }, [someVisibleSelected, allVisibleSelected, open]);
+  useEffect(() => {
+    if (!open) return void 0;
+    const onDown = (e) => {
+      const target = e.target;
+      if (popoverRef.current?.contains(target)) return;
+      if (buttonRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    const onScroll = () => setOpen(false);
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [open]);
+  const toggleValue = (value) => {
+    const next = new Set(excluded);
+    if (next.has(value)) next.delete(value);
+    else next.add(value);
+    onExcludedChange(next);
+  };
+  const toggleAllVisible = () => {
+    const next = new Set(excluded);
+    if (allVisibleSelected) {
+      visibleValues.forEach((v) => next.add(v));
+    } else {
+      visibleValues.forEach((v) => next.delete(v));
+    }
+    onExcludedChange(next);
+  };
+  const handleClear = () => {
+    onClear();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: buttonRef,
+        type: "button",
+        className: `apt-filter-btn ${isActive ? "apt-filter-btn-active" : ""}`,
+        "aria-label": `Filter ${label}`,
+        "aria-expanded": open,
+        onClick: (e) => {
+          e.stopPropagation();
+          setOpen((v) => !v);
+        },
+        children: /* @__PURE__ */ jsx(FilterIcon, { className: "apt-filter-icon" })
+      }
+    ),
+    open && pos && typeof document !== "undefined" && createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: popoverRef,
+          className: "apt-filter-popover",
+          style: { top: pos.top, left: pos.left, width: POPOVER_WIDTH },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            isSortable && /* @__PURE__ */ jsxs("div", { className: "apt-filter-sort-row", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: `apt-filter-sort-btn ${sortDir === "asc" ? "apt-filter-sort-btn-active" : ""}`,
+                  onClick: () => onSort("asc"),
+                  children: [
+                    /* @__PURE__ */ jsx(SortAscIcon, { className: "apt-filter-sort-icon" }),
+                    /* @__PURE__ */ jsx("span", { children: "Asc" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: `apt-filter-sort-btn ${sortDir === "desc" ? "apt-filter-sort-btn-active" : ""}`,
+                  onClick: () => onSort("desc"),
+                  children: [
+                    /* @__PURE__ */ jsx(SortDescIcon, { className: "apt-filter-sort-icon" }),
+                    /* @__PURE__ */ jsx("span", { children: "Desc" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "apt-filter-search-wrap", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: "apt-filter-search",
+                placeholder: "Search\u2026",
+                value: search,
+                autoFocus: true,
+                onChange: (e) => onSearchChange(e.target.value)
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("label", { className: "apt-filter-item apt-filter-item-all", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: masterRef,
+                  type: "checkbox",
+                  className: "apt-filter-checkbox",
+                  checked: allVisibleSelected,
+                  onChange: toggleAllVisible
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "apt-filter-item-label", children: search.trim() ? "Select all (filtered)" : "Select all" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "apt-filter-list", children: visibleValues.length === 0 ? /* @__PURE__ */ jsx("div", { className: "apt-filter-empty", children: "No matches" }) : visibleValues.map((value) => /* @__PURE__ */ jsxs("label", { className: "apt-filter-item", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  className: "apt-filter-checkbox",
+                  checked: !excluded.has(value),
+                  onChange: () => toggleValue(value)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "apt-filter-item-label", title: value, children: value === "" ? "(Blanks)" : value })
+            ] }, value)) }),
+            /* @__PURE__ */ jsxs("div", { className: "apt-filter-footer", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "apt-filter-clear",
+                  onClick: handleClear,
+                  disabled: !isActive,
+                  children: "Clear filter"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "apt-filter-done",
+                  onClick: () => setOpen(false),
+                  children: "Done"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var ColumnFilter_default = ColumnFilter;
 var SortIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -58,21 +291,31 @@ var SortDownIcon = ({ className }) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("path", { d: "M6 10l4-5H2l4 5z" })
   }
 );
+function parseNumericWidth(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) return value;
+  if (typeof value === "string") {
+    const parsed = parseFloat(value);
+    if (!Number.isNaN(parsed)) return parsed;
+  }
+  return null;
+}
 function loadStoredColumnWidths(columnWidthsStorageKey, fallback) {
-  if (!columnWidthsStorageKey || typeof window === "undefined") return fallback;
+  if (!columnWidthsStorageKey || typeof window === "undefined")
+    return { widths: fallback, hadStored: false };
   try {
     const raw = window.localStorage.getItem(columnWidthsStorageKey);
-    if (!raw) return fallback;
+    if (!raw) return { widths: fallback, hadStored: false };
     const parsed = JSON.parse(raw);
-    if (!parsed || typeof parsed !== "object") return fallback;
+    if (!parsed || typeof parsed !== "object")
+      return { widths: fallback, hadStored: false };
     const next = { ...fallback };
-    Object.keys(next).forEach((key) => {
-      const val = parsed[key];
-      if (typeof val === "number" || typeof val === "string") next[key] = val;
+    Object.keys(parsed).forEach((key) => {
+      const num = parseNumericWidth(parsed[key]);
+      if (num !== null) next[key] = num;
     });
-    return next;
+    return { widths: next, hadStored: true };
   } catch {
-    return fallback;
+    return { widths: fallback, hadStored: false };
   }
 }
 var Table = ({
@@ -93,17 +336,25 @@ var Table = ({
   onRowsPerPageChange,
   expandedRowId,
   renderExpandedRow,
-  renderFullRow
+  renderFullRow,
+  filterable = false,
+  striped = false,
+  dividers = false,
+  bordered = false,
+  density = "default"
 }) => {
   const [sortConfig, setSortConfig] = useState(
     initialSort || null
   );
   const [currentPage, setCurrentPage] = useState(1);
   const [columnWidths, setColumnWidths] = useState({});
+  const [columnsFrozen, setColumnsFrozen] = useState(false);
+  const [columnFilters, setColumnFilters] = useState({});
   const [expandedColumns, setExpandedColumns] = useState(
     () => /* @__PURE__ */ new Set()
   );
   const initialColumnWidthsRef = useRef({});
+  const suppressHeaderClickRef = useRef(false);
   const tableRef = useRef(null);
   const textMeasureContextRef = useRef(null);
   const [isMobile, setIsMobile] = useState(() => {
@@ -114,15 +365,34 @@ var Table = ({
   useEffect(() => {
     const initialWidths = {};
     headers.forEach((header) => {
-      initialWidths[header.accessor] = header.width;
+      const w = parseNumericWidth(header.width);
+      if (w !== null) initialWidths[header.accessor] = w;
     });
     initialColumnWidthsRef.current = initialWidths;
-    setColumnWidths(
-      loadStoredColumnWidths(columnWidthsStorageKey, initialWidths)
+    const { widths, hadStored } = loadStoredColumnWidths(
+      columnWidthsStorageKey,
+      initialWidths
     );
+    setColumnWidths(widths);
+    setColumnsFrozen(hadStored);
     setExpandedColumns(/* @__PURE__ */ new Set());
+    setColumnFilters({});
     setCurrentPage(1);
   }, [headers, columnWidthsStorageKey]);
+  useLayoutEffect(() => {
+    if (!columnsFrozen || !tableRef.current) return;
+    const missing = headers.some((h) => columnWidths[h.accessor] == null);
+    if (!missing) return;
+    const cells = tableRef.current.tHead?.rows?.[0]?.cells;
+    const next = { ...columnWidths };
+    headers.forEach((header, idx) => {
+      if (next[header.accessor] == null) {
+        const cell = cells?.[idx];
+        if (cell) next[header.accessor] = cell.offsetWidth;
+      }
+    });
+    setColumnWidths(next);
+  }, [columnsFrozen, headers, columnWidths]);
   useEffect(() => {
     if (!columnWidthsStorageKey || typeof window === "undefined") return;
     if (Object.keys(columnWidths).length === 0) return;
@@ -151,14 +421,6 @@ var Table = ({
     })();
     return ctx ? ctx.measureText(String(text ?? "")).width : 0;
   };
-  const parseWidthValue = (value, fallback) => {
-    if (typeof value === "number" && !Number.isNaN(value)) return value;
-    if (typeof value === "string") {
-      const parsed = parseFloat(value);
-      if (!Number.isNaN(parsed)) return parsed;
-    }
-    return fallback;
-  };
   const rows = useMemo(() => {
     if (!Array.isArray(manualRowData)) return [];
     const src = manualRowData.filter(Boolean).filter((r) => typeof r === "object");
@@ -186,11 +448,43 @@ var Table = ({
       return base;
     });
   }, [manualRowData, headers]);
+  const distinctValuesByColumn = useMemo(() => {
+    const map = {};
+    const anyFilterable = headers.some((h) => h.isFilterable ?? filterable);
+    if (!anyFilterable) return map;
+    headers.forEach((header) => {
+      if (!(header.isFilterable ?? filterable)) return;
+      const set = /* @__PURE__ */ new Set();
+      rows.forEach((r) => set.add(String(r[header.accessor] ?? "")));
+      const arr = Array.from(set);
+      arr.sort(
+        (a, b) => a.localeCompare(b, void 0, { numeric: true, sensitivity: "base" })
+      );
+      map[header.accessor] = arr;
+    });
+    return map;
+  }, [rows, headers, filterable]);
+  const filteredRows = useMemo(() => {
+    const active = Object.entries(columnFilters).filter(
+      ([, f]) => f.search.trim() !== "" || f.excluded.size > 0
+    );
+    if (active.length === 0) return rows;
+    return rows.filter(
+      (row) => active.every(([accessor, filter]) => {
+        const val = String(row[accessor] ?? "");
+        if (filter.search.trim() !== "" && !val.toLowerCase().includes(filter.search.trim().toLowerCase())) {
+          return false;
+        }
+        if (filter.excluded.size > 0 && filter.excluded.has(val)) return false;
+        return true;
+      })
+    );
+  }, [rows, columnFilters]);
   const sortedRows = useMemo(() => {
     if (!sortConfig || !sortConfig.key) {
-      return rows;
+      return filteredRows;
     }
-    const sortableRows = [...rows];
+    const sortableRows = [...filteredRows];
     sortableRows.sort((a, b) => {
       const aVal = a[sortConfig.key];
       const bVal = b[sortConfig.key];
@@ -203,7 +497,7 @@ var Table = ({
       return 0;
     });
     return sortableRows;
-  }, [rows, sortConfig]);
+  }, [filteredRows, sortConfig]);
   const effectiveShouldPaginate = shouldPaginate && sortedRows.length > rowsPerPage;
   const totalPages = effectiveShouldPaginate ? Math.ceil(sortedRows.length / rowsPerPage) : 1;
   const safePage = totalPages > 0 ? Math.min(currentPage, totalPages) : 1;
@@ -221,6 +515,50 @@ var Table = ({
     setSortConfig({ key, direction });
     setCurrentPage(1);
   };
+  const setColumnSearch = (accessor, value) => {
+    setColumnFilters((prev) => ({
+      ...prev,
+      [accessor]: {
+        search: value,
+        excluded: prev[accessor]?.excluded ?? /* @__PURE__ */ new Set()
+      }
+    }));
+    setCurrentPage(1);
+  };
+  const setColumnExcluded = (accessor, next) => {
+    setColumnFilters((prev) => ({
+      ...prev,
+      [accessor]: {
+        search: prev[accessor]?.search ?? "",
+        excluded: next
+      }
+    }));
+    setCurrentPage(1);
+  };
+  const clearColumnFilter = (accessor) => {
+    setColumnFilters((prev) => {
+      if (!prev[accessor]) return prev;
+      const next = { ...prev };
+      delete next[accessor];
+      return next;
+    });
+    setCurrentPage(1);
+  };
+  const setColumnSort = (accessor, direction) => {
+    setSortConfig({ key: accessor, direction });
+    setCurrentPage(1);
+  };
+  const freezeCurrentWidths = () => {
+    const next = { ...columnWidths };
+    const cells = tableRef.current?.tHead?.rows?.[0]?.cells;
+    headers.forEach((header, idx) => {
+      if (next[header.accessor] == null) {
+        const cell = cells?.[idx];
+        if (cell) next[header.accessor] = cell.offsetWidth;
+      }
+    });
+    return next;
+  };
   const autoSizeColumn = (colIndex, header) => {
     if (!tableRef.current) return;
     const tableEl = tableRef.current;
@@ -244,15 +582,11 @@ var Table = ({
         Math.ceil(measureTextWidth(r[header.accessor]))
       );
     });
-    const minWidthPx = parseWidthValue(
-      header?.minWidth,
-      parseWidthValue(minColWidth, 50)
-    );
+    const minWidthPx = parseNumericWidth(header?.minWidth) ?? minColWidth;
     const finalWidth = Math.max(maxWidth + 12, minWidthPx);
-    setColumnWidths((prev) => ({
-      ...prev,
-      [header.accessor]: `${finalWidth}px`
-    }));
+    const frozen = freezeCurrentWidths();
+    setColumnsFrozen(true);
+    setColumnWidths({ ...frozen, [header.accessor]: finalWidth });
   };
   const resetColumnWidth = (accessor) => {
     const regularWidth = initialColumnWidthsRef.current[accessor];
@@ -266,6 +600,10 @@ var Table = ({
     });
   };
   const handleHeaderClick = (header, colIndex) => {
+    if (suppressHeaderClickRef.current) {
+      suppressHeaderClickRef.current = false;
+      return;
+    }
     if (mobileAutoSizeOnHeaderClick && isMobile) {
       const isExpanded = expandedColumns.has(header.accessor);
       if (isExpanded) {
@@ -296,12 +634,16 @@ var Table = ({
   };
   const handleMouseDown = (e, accessor) => {
     e.preventDefault();
+    suppressHeaderClickRef.current = true;
     const startX = e.clientX;
     const th = e.target.closest("th");
     if (!th) return;
     const header = headers.find((h) => h.accessor === accessor);
-    const minResizeWidth = parseWidthValue(header?.minWidth, minColWidth);
-    const startWidth = th.offsetWidth;
+    const minResizeWidth = parseNumericWidth(header?.minWidth) ?? minColWidth;
+    const frozen = freezeCurrentWidths();
+    const startWidth = frozen[accessor] ?? th.offsetWidth;
+    setColumnsFrozen(true);
+    setColumnWidths(frozen);
     document.body.style.cursor = "col-resize";
     document.body.style.userSelect = "none";
     const handleMouseMove = (moveEvent) => {
@@ -310,7 +652,7 @@ var Table = ({
       const finalWidth = Math.max(newWidth, minResizeWidth);
       setColumnWidths((prev) => ({
         ...prev,
-        [accessor]: `${finalWidth}px`
+        [accessor]: finalWidth
       }));
     };
     const handleMouseUp = () => {
@@ -318,106 +660,147 @@ var Table = ({
       document.body.style.userSelect = "";
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
+      window.setTimeout(() => {
+        suppressHeaderClickRef.current = false;
+      }, 0);
     };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
   };
+  const containerClassName = [
+    "apt-table-container",
+    striped && "apt-striped",
+    dividers && "apt-dividers",
+    bordered && "apt-bordered",
+    density === "compact" && "apt-compact"
+  ].filter(Boolean).join(" ");
+  const noData = rows.length === 0;
+  const noMatches = !noData && sortedRows.length === 0;
   const containerStyle = {
-    height: sortedRows.length === 0 ? height : !effectiveShouldPaginate ? "auto" : height,
+    height: noData ? height : !effectiveShouldPaginate ? "auto" : height,
     maxHeight: !effectiveShouldPaginate ? height : void 0
   };
-  return /* @__PURE__ */ jsx("div", { className: "apt-table-container", style: containerStyle, children: sortedRows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "apt-empty-state", children: "No rows to display." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  const spanCount = headers.length + (columnsFrozen ? 1 : 0);
+  return /* @__PURE__ */ jsx("div", { className: containerClassName, style: containerStyle, children: noData ? /* @__PURE__ */ jsx("div", { className: "apt-empty-state", children: "No rows to display." }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: "apt-scroll-area", children: /* @__PURE__ */ jsxs("table", { className: "apt-table", ref: tableRef, children: [
-      /* @__PURE__ */ jsx("colgroup", { children: headers.map((header) => /* @__PURE__ */ jsx(
-        "col",
-        {
-          style: {
-            width: columnWidths[header.accessor],
-            minWidth: `${parseWidthValue(
-              header.minWidth,
-              minColWidth
-            )}px`
-          }
-        },
-        `col-${header.accessor}`
-      )) }),
-      /* @__PURE__ */ jsx("thead", { className: "apt-thead", children: /* @__PURE__ */ jsx("tr", { children: headers.map((header, idx) => {
-        const isHeaderClickable = mobileAutoSizeOnHeaderClick && isMobile || header.isSortable;
-        return /* @__PURE__ */ jsxs(
-          "th",
+      /* @__PURE__ */ jsxs("colgroup", { children: [
+        headers.map((header) => /* @__PURE__ */ jsx(
+          "col",
           {
-            onClick: () => handleHeaderClick(header, idx),
-            className: `apt-th ${isHeaderClickable ? "apt-th-sortable" : ""}`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "apt-th-content", children: [
-                header.label,
-                header.isSortable && !(mobileAutoSizeOnHeaderClick && isMobile) && getSortIcon(header.accessor)
-              ] }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "apt-resizer",
-                  onMouseDown: (e) => {
-                    e.stopPropagation();
-                    handleMouseDown(e, header.accessor);
-                  }
-                }
-              )
-            ]
-          },
-          header.accessor
-        );
-      }) }) }),
-      /* @__PURE__ */ jsx("tbody", { className: "apt-tbody", children: paginatedRows.map((row) => {
-        const isExpanded = expandedRowId === row.id;
-        const isFullRow = typeof renderFullRow === "function" && row?._meta?.fullRow;
-        return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-          isFullRow ? /* @__PURE__ */ jsx(
-            "tr",
-            {
-              className: `apt-row ${rowClassName ? rowClassName(row) : ""}`,
-              onClick: () => onRowClick && onRowClick(row),
-              children: /* @__PURE__ */ jsx(
-                "td",
-                {
-                  colSpan: headers.length,
-                  className: "apt-td",
-                  style: { padding: 0 },
-                  children: renderFullRow(row)
-                }
-              )
+            style: {
+              width: columnWidths[header.accessor] != null ? `${columnWidths[header.accessor]}px` : void 0,
+              minWidth: `${parseNumericWidth(header.minWidth) ?? minColWidth}px`
             }
-          ) : /* @__PURE__ */ jsx(
-            "tr",
+          },
+          `col-${header.accessor}`
+        )),
+        columnsFrozen && /* @__PURE__ */ jsx("col", { className: "apt-col-spacer" })
+      ] }),
+      /* @__PURE__ */ jsx("thead", { className: "apt-thead", children: /* @__PURE__ */ jsxs("tr", { children: [
+        headers.map((header, idx) => {
+          const columnFilterable = header.isFilterable ?? filterable;
+          const isHeaderClickable = mobileAutoSizeOnHeaderClick && isMobile || header.isSortable;
+          return /* @__PURE__ */ jsxs(
+            "th",
             {
-              className: `apt-row ${rowClassName ? rowClassName(row) : ""}`,
-              onClick: () => onRowClick && onRowClick(row),
-              style: { height: `${rowHeight}px` },
-              children: headers.map((header) => {
-                const value = row[header.accessor];
-                const cellContent = header.cellRenderer ? header.cellRenderer({ row, value }) : value;
-                return /* @__PURE__ */ jsx(
+              onClick: () => handleHeaderClick(header, idx),
+              className: `apt-th ${isHeaderClickable ? "apt-th-sortable" : ""}`,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "apt-th-content", children: [
+                  /* @__PURE__ */ jsx("span", { className: "apt-th-label", children: header.label }),
+                  header.isSortable && !(mobileAutoSizeOnHeaderClick && isMobile) && getSortIcon(header.accessor),
+                  columnFilterable && /* @__PURE__ */ jsx(
+                    ColumnFilter_default,
+                    {
+                      columnKey: header.accessor,
+                      label: header.label,
+                      distinctValues: distinctValuesByColumn[header.accessor] || [],
+                      search: columnFilters[header.accessor]?.search ?? "",
+                      excluded: columnFilters[header.accessor]?.excluded ?? /* @__PURE__ */ new Set(),
+                      sortConfig,
+                      isSortable: header.isSortable,
+                      onSort: (dir) => setColumnSort(header.accessor, dir),
+                      onSearchChange: (value) => setColumnSearch(header.accessor, value),
+                      onExcludedChange: (next) => setColumnExcluded(header.accessor, next),
+                      onClear: () => clearColumnFilter(header.accessor)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "apt-resizer",
+                    onMouseDown: (e) => {
+                      e.stopPropagation();
+                      handleMouseDown(e, header.accessor);
+                    },
+                    onClick: (e) => e.stopPropagation()
+                  }
+                )
+              ]
+            },
+            header.accessor
+          );
+        }),
+        columnsFrozen && /* @__PURE__ */ jsx("th", { className: "apt-th apt-th-spacer", "aria-hidden": "true" })
+      ] }) }),
+      /* @__PURE__ */ jsxs("tbody", { className: "apt-tbody", children: [
+        noMatches && /* @__PURE__ */ jsx("tr", { className: "apt-row", children: /* @__PURE__ */ jsx("td", { colSpan: spanCount, className: "apt-td apt-no-matches", children: "No rows match the current filters." }) }),
+        paginatedRows.map((row, rowIdx) => {
+          const isExpanded = expandedRowId === row.id;
+          const isFullRow = typeof renderFullRow === "function" && row?._meta?.fullRow;
+          const altClass = rowIdx % 2 === 1 ? "apt-row-alt" : "";
+          return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            isFullRow ? /* @__PURE__ */ jsx(
+              "tr",
+              {
+                className: `apt-row ${altClass} ${rowClassName ? rowClassName(row) : ""}`,
+                onClick: () => onRowClick && onRowClick(row),
+                children: /* @__PURE__ */ jsx(
                   "td",
                   {
-                    className: header.accessor === "actions" ? "apt-td-actions" : "apt-td",
-                    children: header.accessor === "actions" ? /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: cellContent }) : cellContent
-                  },
-                  `${row.id}-${header.accessor}`
-                );
-              })
-            }
-          ),
-          isExpanded && typeof renderExpandedRow === "function" && /* @__PURE__ */ jsx("tr", { className: "apt-row-expanded", children: /* @__PURE__ */ jsx(
-            "td",
-            {
-              colSpan: headers.length,
-              className: "apt-td",
-              style: { padding: 0 },
-              children: renderExpandedRow(row)
-            }
-          ) })
-        ] }, row.id);
-      }) })
+                    colSpan: spanCount,
+                    className: "apt-td",
+                    style: { padding: 0 },
+                    children: renderFullRow(row)
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsxs(
+              "tr",
+              {
+                className: `apt-row ${altClass} ${rowClassName ? rowClassName(row) : ""}`,
+                onClick: () => onRowClick && onRowClick(row),
+                style: { height: `${rowHeight}px` },
+                children: [
+                  headers.map((header) => {
+                    const value = row[header.accessor];
+                    const cellContent = header.cellRenderer ? header.cellRenderer({ row, value }) : value;
+                    return /* @__PURE__ */ jsx(
+                      "td",
+                      {
+                        className: header.accessor === "actions" ? "apt-td-actions" : "apt-td",
+                        children: header.accessor === "actions" ? /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: cellContent }) : cellContent
+                      },
+                      `${row.id}-${header.accessor}`
+                    );
+                  }),
+                  columnsFrozen && /* @__PURE__ */ jsx("td", { className: "apt-td apt-td-spacer", "aria-hidden": "true" })
+                ]
+              }
+            ),
+            isExpanded && typeof renderExpandedRow === "function" && /* @__PURE__ */ jsx("tr", { className: "apt-row-expanded", children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                colSpan: spanCount,
+                className: "apt-td",
+                style: { padding: 0 },
+                children: renderExpandedRow(row)
+              }
+            ) })
+          ] }, row.id);
+        })
+      ] })
     ] }) }),
     shouldPaginate && totalPages > 1 || Array.isArray(rowsPerPageOptions) && rowsPerPageOptions.length > 0 && onRowsPerPageChange ? /* @__PURE__ */ jsxs("div", { className: "apt-footer", children: [
       /* @__PURE__ */ jsx("div", { className: "apt-footer-left", children: Array.isArray(rowsPerPageOptions) && rowsPerPageOptions.length > 0 && onRowsPerPageChange && /* @__PURE__ */ jsxs(Fragment, { children: [