exploreda 0.0.6 → 0.1.0

package/dist/chunk-6U5DOIQM.js

@@ -0,0 +1,1071 @@
+import { FieldInspector } from './chunk-LBTZVERO.js';
+import { DEFAULT_CHART_SETTINGS } from './chunk-CJQQFNEY.js';
+import { applyFilter } from './chunk-YXPAWUXO.js';
+import { CalculatedFieldBadge, FieldMetadata, resolveFieldProfile } from './chunk-NDF5LCST.js';
+import { useColumnNames, multi_select_default } from './chunk-SWLNKY6R.js';
+import { Label, Input, Popover, PopoverTrigger, PopoverContent } from './chunk-MJPDJ5AS.js';
+import { useDataLayer, getChartSummary, buildFieldProfile, Button, ActionTooltip, cn, categoryLabel, categoryIncludes, categoryKey, categoryEqual } from './chunk-JNO7OXCC.js';
+import { Table, ChevronUp, ChevronDown, Settings2, Filter, X, Columns3, Search, Download, FilterX } from 'lucide-react';
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function TableHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "thead",
+    {
+      "data-slot": "table-header",
+      className: cn("[&_tr]:border-b", className),
+      ...props
+    }
+  );
+}
+function TableBody({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      "data-slot": "table-body",
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
+}
+function TableRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      "data-slot": "table-row",
+      className: cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableHead({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      "data-slot": "table-head",
+      className: cn(
+        "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TableCell({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      "data-slot": "table-cell",
+      className: cn(
+        "p-0.5 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/charts/DataTable/filteredRows.ts
+function getFilteredRows(data, liveItems, settings) {
+  const ids = new Set(
+    liveItems?.items.filter((item) => item.value > 0).map((item) => item.key)
+  );
+  const rows = data.filter((row) => ids.has(row.__ID));
+  const search = settings.globalSearch.toLowerCase();
+  const filtered = rows.filter((row) => {
+    if (search && !Object.entries(row).some(
+      ([field, value]) => field !== "__ID" && value !== null && value !== void 0 && String(value).toLowerCase().includes(search)
+    )) {
+      return false;
+    }
+    return settings.filters.every(
+      (filter) => applyFilter(row[filter.field], filter)
+    );
+  });
+  if (settings.sortBy) {
+    const field = settings.sortBy;
+    filtered.sort((a, b) => {
+      const comparison = compareValues(a[field], b[field]);
+      return settings.sortDirection === "desc" ? -comparison : comparison;
+    });
+  }
+  return filtered;
+}
+function isNumeric(value) {
+  if (typeof value === "number") {
+    return true;
+  }
+  if (typeof value !== "string") {
+    return false;
+  }
+  return !isNaN(Number(value)) && !isNaN(parseFloat(value));
+}
+function compareValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a === null || a === void 0) {
+    return 1;
+  }
+  if (b === null || b === void 0) {
+    return -1;
+  }
+  if (a === b) {
+    return 0;
+  }
+  const aStr = String(a);
+  const bStr = String(b);
+  if (isNumeric(a) && isNumeric(b)) {
+    return Number(a) - Number(b);
+  }
+  return aStr.localeCompare(bStr, void 0, { numeric: true });
+}
+function DataTableBody({
+  settings,
+  rows,
+  scrollTop = 0,
+  viewportHeight = 400
+}) {
+  const calculations = useDataLayer((state) => state.calculations) ?? [];
+  const manager = useDataLayer((state) => state.calculationManager);
+  const data = useDataLayer((state) => state.data);
+  const formatFieldValue = useDataLayer((state) => state.formatFieldValue);
+  useDataLayer((state) => state.fieldSettings);
+  const format = formatFieldValue ?? ((_, value) => String(value ?? "\u2014"));
+  const liveItems = useDataLayer((state) => state.getLiveItems(settings));
+  const filteredByColumns = useMemo(
+    () => rows ?? getFilteredRows(data, liveItems, settings),
+    [rows, data, liveItems, settings]
+  );
+  const sortedData = filteredByColumns;
+  const start = Math.min(
+    Math.max(0, Math.floor((scrollTop - 36) / 30) - 6),
+    Math.max(0, sortedData.length - 1)
+  );
+  const end = Math.min(
+    sortedData.length,
+    start + Math.ceil(viewportHeight / 30) + 12
+  );
+  const visibleRows = sortedData.slice(start, end);
+  const spacer = (count, key) => count > 0 && /* @__PURE__ */ jsx("tr", { "aria-hidden": "true", className: "eda-table-spacer", children: /* @__PURE__ */ jsx(
+    "td",
+    {
+      colSpan: settings.columns.length,
+      style: { height: count * 30, padding: 0, border: 0 }
+    }
+  ) }, key);
+  return /* @__PURE__ */ jsxs(TableBody, { children: [
+    spacer(start, "before"),
+    visibleRows.length > 0 ? visibleRows.map((row, index) => /* @__PURE__ */ jsx(TableRow, { "aria-rowindex": start + index + 2, children: settings.columns.map((column, index2) => /* @__PURE__ */ jsx(
+      TableCell,
+      {
+        className: index2 === 0 ? "sticky left-0 z-10 bg-background" : "",
+        style: {
+          width: column.width,
+          textAlign: typeof row[column.field] === "number" ? "right" : "left"
+        },
+        children: calculations.some(
+          (calc) => calc.resultColumnName === column.field
+        ) ? /* @__PURE__ */ jsx(CalculatedFieldBadge, { field: column.field, rowId: row.__ID, children: manager?.getErrors(column.field).has(row.__ID) ? "Error" : format(column.field, row[column.field]) }) : format(column.field, row[column.field])
+      },
+      column.id
+    )) }, String(row.__ID))) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, { colSpan: settings.columns.length, className: "text-center", children: "No rows match the current filters." }) }),
+    spacer(sortedData.length - end, "after")
+  ] });
+}
+var MAX_VALUE_FILTER_OPTIONS = 10;
+function ColumnFilter({
+  columnId,
+  columnLabel,
+  profile,
+  filter,
+  onChange,
+  onClear,
+  local = false
+}) {
+  const updateRange = (type, key, raw) => {
+    const current = filter?.type === type ? filter : { type, field: profile.name };
+    const value = raw === "" ? void 0 : type === "range" ? Number(raw) : raw;
+    if (value !== void 0 && type === "range" && !Number.isFinite(value)) {
+      return;
+    }
+    const next = { ...current, [key]: value };
+    if ((next.type === "range" || next.type === "date-range") && next.min === void 0 && next.max === void 0) {
+      onChange(columnId);
+    } else {
+      onChange(columnId, next);
+    }
+  };
+  const updateValues = (value, checked) => {
+    const selected = filter?.type === "value" ? filter.values : [];
+    const next = checked ? [...selected, value] : selected.filter((item) => !categoryEqual(item, value));
+    onChange(
+      columnId,
+      next.length > 0 ? { type: "value", field: profile.name, values: next } : void 0
+    );
+  };
+  const textFilter = filter?.type === "text" ? filter : { type: "text", field: profile.name, operator: "contains", value: "" };
+  const rangeFilter = filter?.type === "range" ? filter : void 0;
+  const dateFilter = filter?.type === "date-range" ? filter : void 0;
+  const lowCardinality = profile.dataType === "boolean" || profile.dataType === "categorical" && profile.uniqueCount <= MAX_VALUE_FILTER_OPTIONS;
+  const updateText = (next) => onChange(columnId, next.value === "" ? void 0 : next);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "grid w-64 max-w-full gap-3 text-sm",
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h3", { className: "font-semibold", children: [
+            "Filter ",
+            columnLabel
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-muted-foreground", children: [
+            local ? "Filters only this table." : "Filters all charts and rows.",
+            " ",
+            "Changes apply immediately."
+          ] })
+        ] }),
+        lowCardinality ? /* @__PURE__ */ jsxs("div", { className: "flex max-h-56 flex-col gap-2 overflow-auto py-1", children: [
+          (profile.categories?.distribution ?? []).map(({ value }) => {
+            const label = categoryLabel(value);
+            return /* @__PURE__ */ jsxs(
+              "label",
+              {
+                className: "flex items-center gap-2 text-sm",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: filter?.type === "value" && categoryIncludes(filter.values, value),
+                      onChange: (event) => updateValues(value, event.currentTarget.checked)
+                    }
+                  ),
+                  label
+                ]
+              },
+              categoryKey(value)
+            );
+          }),
+          profile.nullCount > 0 && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: filter?.type === "value" && filter.values.some((item) => item == null),
+                onChange: (event) => updateValues(null, event.currentTarget.checked)
+              }
+            ),
+            "Missing"
+          ] })
+        ] }) : profile.dataType === "numeric" ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ jsxs("label", { className: "grid gap-1 text-xs", children: [
+            "Minimum (inclusive)",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                "aria-label": `Minimum ${columnLabel}`,
+                placeholder: "Min",
+                value: rangeFilter?.min ?? "",
+                onChange: (event) => updateRange("range", "min", event.target.value),
+                className: "h-8 w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "grid gap-1 text-xs", children: [
+            "Maximum (inclusive)",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "number",
+                "aria-label": `Maximum ${columnLabel}`,
+                placeholder: "Max",
+                value: rangeFilter?.max ?? "",
+                onChange: (event) => updateRange("range", "max", event.target.value),
+                className: "h-8 w-full"
+              }
+            )
+          ] })
+        ] }) : profile.dataType === "datetime" ? /* @__PURE__ */ jsxs("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ jsxs("label", { className: "grid gap-1 text-xs", children: [
+            "From (inclusive)",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                "aria-label": `Start date ${columnLabel}`,
+                value: dateFilter?.min ?? "",
+                onInput: (event) => updateRange("date-range", "min", event.currentTarget.value),
+                className: "h-8 w-full"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "grid gap-1 text-xs", children: [
+            "Through (inclusive)",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                type: "date",
+                "aria-label": `End date ${columnLabel}`,
+                value: dateFilter?.max ?? "",
+                onInput: (event) => updateRange("date-range", "max", event.currentTarget.value),
+                className: "h-8 w-full"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("label", { className: "grid gap-1 text-xs", children: [
+            "Match",
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                "aria-label": `Text operator ${columnLabel}`,
+                value: textFilter.operator,
+                onChange: (event) => updateText({
+                  ...textFilter,
+                  operator: event.target.value
+                }),
+                className: "h-8 rounded-md border bg-transparent px-2 text-sm",
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "contains", children: "Contains" }),
+                  /* @__PURE__ */ jsx("option", { value: "equals", children: "Equals" }),
+                  /* @__PURE__ */ jsx("option", { value: "startsWith", children: "Starts with" }),
+                  /* @__PURE__ */ jsx("option", { value: "endsWith", children: "Ends with" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "grid gap-1 text-xs", children: [
+            "Text",
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                "aria-label": `Filter text ${columnLabel}`,
+                placeholder: `Filter ${columnLabel}...`,
+                value: textFilter.value,
+                onChange: (event) => updateText({ ...textFilter, value: event.target.value }),
+                className: "h-8 w-full"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            className: "justify-self-start",
+            "aria-label": `Clear filter for ${columnLabel}`,
+            onClick: onClear,
+            children: [
+              /* @__PURE__ */ jsx(FilterX, { className: "h-4 w-4" }),
+              " Clear filter"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function DataTableHeader({
+  settings,
+  onSettingsChange,
+  onColumnResize,
+  localFilters = false
+}) {
+  const { columns, sortBy, sortDirection, filters } = settings;
+  const updateChart = useDataLayer((state) => state.updateChart);
+  const update = onSettingsChange ?? ((next) => updateChart(settings.id, next));
+  const fieldProfiles = useDataLayer((state) => state.fieldProfiles) ?? [];
+  const calculations = useDataLayer((state) => state.calculations) ?? [];
+  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);
+  const fieldSettings = useDataLayer((state) => state.fieldSettings);
+  const label = getFieldLabel ?? ((field) => field);
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const nonce = useDataLayer((state) => state.nonce);
+  const profiles = useMemo(
+    () => [
+      ...fieldProfiles,
+      ...calculations.filter(
+        (calc) => columns.some((column) => column.field === calc.resultColumnName)
+      ).map(
+        (calc) => buildFieldProfile(
+          calc.resultColumnName,
+          getColumnData(calc.resultColumnName)
+        )
+      )
+    ],
+    [fieldProfiles, calculations, columns, getColumnData, nonce, fieldSettings]
+  );
+  const [activeFilter, setActiveFilter] = useState(null);
+  const [resizingColumn, setResizingColumn] = useState(null);
+  const [tempWidths, setTempWidths] = useState({});
+  const resizeCleanup = useRef(null);
+  useEffect(() => () => resizeCleanup.current?.(), []);
+  const handleSort = (field) => {
+    if (sortBy === field) {
+      update({
+        sortDirection: sortDirection === "asc" ? "desc" : "asc"
+      });
+    } else {
+      update({
+        sortBy: field,
+        sortDirection: "asc"
+      });
+    }
+  };
+  const handleFilterChange = (columnId, filter) => {
+    const column = columns.find((col) => col.id === columnId);
+    if (!column) {
+      return;
+    }
+    const newFilters = filters.filter((f) => f.field !== column.field);
+    if (filter) {
+      newFilters.push({ ...filter, field: column.field });
+    }
+    update({
+      filters: newFilters
+    });
+  };
+  const handleFilterClear = (columnId) => {
+    const column = columns.find((col) => col.id === columnId);
+    if (!column) {
+      return;
+    }
+    const newFilters = filters.filter((f) => f.field !== column.field);
+    update({
+      filters: newFilters
+    });
+  };
+  const handleResizeStart = (e, columnId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    e.currentTarget.setPointerCapture?.(e.pointerId);
+    resizeCleanup.current?.();
+    setResizingColumn(columnId);
+    const startX = e.clientX;
+    const column = columns.find((col) => col.id === columnId);
+    const startWidth = e.currentTarget.parentElement?.getBoundingClientRect().width || column?.width || 120;
+    let width = startWidth;
+    const handleMouseMove = (e2) => {
+      width = Math.max(50, startWidth + e2.clientX - startX);
+      setTempWidths((prev) => ({ ...prev, [columnId]: width }));
+      onColumnResize?.(columnId, width);
+    };
+    const handleCancel = () => resizeCleanup.current?.();
+    const handleMouseUp = () => {
+      const newColumns = columns.map(
+        (col) => col.id === columnId ? { ...col, width } : col
+      );
+      update({ columns: newColumns });
+      resizeCleanup.current = null;
+      setResizingColumn(null);
+      setTempWidths({});
+      onColumnResize?.(columnId, null);
+      window.removeEventListener("pointermove", handleMouseMove);
+      window.removeEventListener("pointerup", handleMouseUp);
+      window.removeEventListener("pointercancel", handleCancel);
+    };
+    resizeCleanup.current = () => {
+      window.removeEventListener("pointermove", handleMouseMove);
+      window.removeEventListener("pointerup", handleMouseUp);
+      window.removeEventListener("pointercancel", handleCancel);
+      setResizingColumn(null);
+      setTempWidths({});
+      onColumnResize?.(columnId, null);
+      resizeCleanup.current = null;
+    };
+    window.addEventListener("pointermove", handleMouseMove);
+    window.addEventListener("pointerup", handleMouseUp);
+    window.addEventListener("pointercancel", handleCancel);
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((column, index) => {
+    const profile = profiles.find(
+      (fieldProfile) => fieldProfile.name === column.field
+    ) ?? {
+      name: column.field,
+      dataType: "categorical",
+      totalCount: 0,
+      uniqueCount: 11,
+      nullCount: 0
+    };
+    const filter = filters.find(
+      (f) => f.field === column.field
+    );
+    return /* @__PURE__ */ jsxs(
+      TableHead,
+      {
+        className: `relative select-none ${index === 0 ? "sticky left-0 z-20 bg-background" : ""}`,
+        style: {
+          width: resizingColumn === column.id ? tempWidths[column.id] || column.width : column.width
+        },
+        "aria-sort": sortBy === column.field ? sortDirection === "asc" ? "ascending" : "descending" : "none",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "eda-column-heading", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "flex min-w-0 flex-1 items-center gap-1 text-left",
+                "aria-label": `Sort by ${column.field}`,
+                onClick: () => handleSort(column.field),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: label(column.field) }),
+                  sortBy === column.field && (sortDirection === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "eda-column-actions", children: [
+              /* @__PURE__ */ jsx(CalculatedFieldBadge, { field: column.field }),
+              /* @__PURE__ */ jsx(FieldInspector, { field: column.field, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6",
+                  "aria-label": `Inspect ${column.field}`,
+                  children: /* @__PURE__ */ jsx(Settings2, { className: "h-3.5 w-3.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(
+                Popover,
+                {
+                  open: activeFilter === column.id,
+                  onOpenChange: (open) => setActiveFilter(open ? column.id : null),
+                  children: [
+                    /* @__PURE__ */ jsx(ActionTooltip, { content: `Filter ${label(column.field)}`, children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "sm",
+                        className: `eda-column-filter ${filter ? "is-active" : ""}`,
+                        "aria-label": `Filter ${column.field}`,
+                        "aria-expanded": activeFilter === column.id,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          setActiveFilter(
+                            activeFilter === column.id ? null : column.id
+                          );
+                        },
+                        children: /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" })
+                      }
+                    ) }) }),
+                    /* @__PURE__ */ jsx(
+                      PopoverContent,
+                      {
+                        className: "w-auto max-w-[calc(100vw-24px)]",
+                        align: "start",
+                        collisionPadding: 12,
+                        children: /* @__PURE__ */ jsx(
+                          ColumnFilter,
+                          {
+                            local: localFilters,
+                            columnId: column.id,
+                            columnLabel: label(column.field),
+                            profile,
+                            filter,
+                            onChange: handleFilterChange,
+                            onClear: () => handleFilterClear(column.id)
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "separator",
+              "aria-orientation": "vertical",
+              "aria-label": `Resize ${column.field} column`,
+              className: "eda-column-resize",
+              "data-resizing": resizingColumn === column.id,
+              tabIndex: 0,
+              "aria-valuemin": 50,
+              "aria-valuenow": tempWidths[column.id] ?? column.width ?? 120,
+              onKeyDown: (event) => {
+                if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
+                  return;
+                }
+                event.preventDefault();
+                const width = Math.max(
+                  50,
+                  event.currentTarget.parentElement.getBoundingClientRect().width + (event.key === "ArrowRight" ? 16 : -16)
+                );
+                update({
+                  columns: columns.map(
+                    (item) => item.id === column.id ? { ...item, width } : item
+                  )
+                });
+              },
+              onPointerDown: (e) => handleResizeStart(e, column.id)
+            }
+          )
+        ]
+      },
+      column.id
+    );
+  }) }) }) });
+}
+function DataTableToolbar({
+  settings,
+  rows,
+  onSettingsChange,
+  compact = false,
+  localFilters = false
+}) {
+  const [fieldSearch, setFieldSearch] = useState("");
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const fieldProfiles = useDataLayer((state) => state.fieldProfiles);
+  const getFieldLabel = useDataLayer((state) => state.getFieldLabel);
+  const updateChart = useDataLayer((state) => state.updateChart);
+  const data = useDataLayer((state) => state.data);
+  const liveItems = useDataLayer((state) => state.getLiveItems(settings));
+  const getColumnNames = useDataLayer((state) => state.getColumnNames);
+  const filteredData = rows ?? getFilteredRows(data, liveItems, settings);
+  const handleSearch = (globalSearch) => {
+    if (onSettingsChange) onSettingsChange({ globalSearch });
+    else updateChart(settings.id, { globalSearch });
+  };
+  const handleExport = () => {
+    const csvContent = toTableCsv(
+      filteredData,
+      settings.columns.map((column) => column.field)
+    );
+    const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const link = document.createElement("a");
+    const url = URL.createObjectURL(blob);
+    link.setAttribute("href", url);
+    link.setAttribute(
+      "download",
+      `table-export-${(/* @__PURE__ */ new Date()).toISOString()}.csv`
+    );
+    link.style.visibility = "hidden";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+  const search = /* @__PURE__ */ jsxs("div", { className: "eda-table-search relative min-w-0", children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        className: "h-8 text-xs",
+        placeholder: "Search this table\u2026",
+        "aria-label": "Search table",
+        value: settings.globalSearch,
+        onChange: (event) => handleSearch(event.target.value)
+      }
+    ),
+    settings.globalSearch && /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        className: "absolute right-0 top-0 h-8 w-8",
+        "aria-label": "Clear table search",
+        onClick: () => handleSearch(""),
+        children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: compact ? "eda-table-toolbar-compact" : "eda-table-toolbar",
+      children: [
+        !compact && search,
+        localFilters && /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              className: "eda-columns-trigger",
+              "aria-label": "Choose visible columns",
+              children: [
+                /* @__PURE__ */ jsx(Columns3, { className: "h-3.5 w-3.5" }),
+                " Columns",
+                " ",
+                /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: settings.columns.length })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(
+            PopoverContent,
+            {
+              align: "end",
+              "aria-label": "Visible columns",
+              className: "w-96 space-y-3",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold", children: "Visible columns" }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "sm",
+                      onClick: () => onSettingsChange?.({
+                        columns: getColumnNames().filter((field) => field !== "__ID").map(
+                          (field) => settings.columns.find(
+                            (column) => column.field === field
+                          ) ?? { id: field, field }
+                        )
+                      }),
+                      children: "Show all"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    "aria-label": "Find columns",
+                    placeholder: "Find a column\u2026",
+                    value: fieldSearch,
+                    onChange: (event) => setFieldSearch(event.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "grid max-h-72 gap-1 overflow-y-auto", children: getColumnNames().filter(
+                  (field) => field !== "__ID" && field.toLowerCase().includes(fieldSearch.toLowerCase())
+                ).map((field) => {
+                  const checked = settings.columns.some(
+                    (column) => column.field === field
+                  );
+                  return /* @__PURE__ */ jsxs(
+                    "label",
+                    {
+                      className: "flex min-w-0 cursor-pointer items-center gap-2 rounded px-2 py-2 hover:bg-muted",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "checkbox",
+                            checked,
+                            "aria-label": getFieldLabel(field),
+                            onChange: (event) => onSettingsChange?.({
+                              columns: event.target.checked ? [...settings.columns, { id: field, field }] : settings.columns.filter(
+                                (column) => column.field !== field
+                              )
+                            })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          FieldMetadata,
+                          {
+                            profile: resolveFieldProfile(
+                              field,
+                              fieldProfiles,
+                              getColumnData
+                            ),
+                            label: getFieldLabel(field),
+                            compact: true
+                          }
+                        )
+                      ]
+                    },
+                    field
+                  );
+                }) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: "ml-auto whitespace-nowrap text-muted-foreground tabular-nums",
+            "aria-live": "polite",
+            children: [
+              filteredData.length.toLocaleString(),
+              " ",
+              filteredData.length === 1 ? "row" : "rows"
+            ]
+          }
+        ),
+        compact && /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(ActionTooltip, { content: "Search rows", children: /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              "aria-label": settings.globalSearch ? `Search rows: ${settings.globalSearch}` : "Search rows",
+              className: settings.globalSearch ? "text-primary bg-accent" : "",
+              children: /* @__PURE__ */ jsx(Search, { className: "h-3.5 w-3.5" })
+            }
+          ) }) }),
+          /* @__PURE__ */ jsx(
+            PopoverContent,
+            {
+              align: "end",
+              className: "eda-table-search-popover w-64 p-2",
+              children: search
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(ActionTooltip, { content: "Export rows as CSV", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: handleExport,
+            "aria-label": "Export rows as CSV",
+            children: /* @__PURE__ */ jsx(Download, { className: "h-3.5 w-3.5" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+function toTableCsv(rows, fields) {
+  const cell = (value) => {
+    const text = String(value ?? "");
+    return /[",\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+  };
+  return [
+    fields.map(cell).join(","),
+    ...rows.map((row) => fields.map((field) => cell(row[field])).join(","))
+  ].join("\n");
+}
+function DataTable({
+  settings,
+  height,
+  width,
+  rows,
+  onSettingsChange,
+  toolbarTarget
+}) {
+  const data = useDataLayer((state) => state.data);
+  const liveItems = useDataLayer((state) => state.getLiveItems(settings));
+  const updateChart = useDataLayer((state) => state.updateChart);
+  const getColumnData = useDataLayer((state) => state.getColumnData);
+  const calculations = useDataLayer((state) => state.calculations);
+  const nonce = useDataLayer((state) => state.nonce);
+  const resolvedRows = useMemo(() => {
+    const source = rows ?? data;
+    if (!calculations.length) {
+      return source;
+    }
+    const columns = calculations.map(
+      (calc) => [calc.resultColumnName, getColumnData(calc.resultColumnName)]
+    );
+    return source.map((row) => ({
+      ...row,
+      ...Object.fromEntries(
+        columns.map(([name, values]) => [name, values[row.__ID]])
+      )
+    }));
+  }, [rows, data, calculations, getColumnData, nonce]);
+  const scrollRef = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [columnWidths, setColumnWidths] = useState({});
+  const update = onSettingsChange ?? ((next) => updateChart(settings.id, next));
+  const filteredRows = useMemo(
+    () => getFilteredRows(
+      resolvedRows,
+      rows ? {
+        items: rows.map((row) => ({ key: row.__ID, value: 1 }))} : liveItems,
+      settings
+    ),
+    [resolvedRows, rows, liveItems, settings]
+  );
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = 0;
+    }
+    setScrollTop(0);
+  }, [
+    settings.globalSearch,
+    settings.filters,
+    settings.sortBy,
+    settings.sortDirection,
+    filteredRows.length
+  ]);
+  const toolbar = /* @__PURE__ */ jsx(
+    DataTableToolbar,
+    {
+      settings,
+      rows: filteredRows,
+      onSettingsChange: update,
+      compact: toolbarTarget !== void 0,
+      localFilters: rows !== void 0
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "eda-table-view flex min-h-0 flex-col w-full",
+      style: { height },
+      children: [
+        toolbarTarget === void 0 ? toolbar : toolbarTarget && createPortal(toolbar, toolbarTarget),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: scrollRef,
+            className: "eda-table-scroll relative min-h-0 flex-1 overflow-auto",
+            tabIndex: 0,
+            "aria-label": "Data rows, scroll to see more",
+            onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+            children: /* @__PURE__ */ jsxs(
+              "table",
+              {
+                className: "eda-data-table border-collapse",
+                "aria-rowcount": filteredRows.length + 1,
+                style: {
+                  tableLayout: "fixed",
+                  width: Math.max(
+                    width,
+                    settings.columns.reduce(
+                      (sum, column) => sum + (columnWidths[column.id] ?? column.width ?? Math.max(110, column.field.length * 7 + 42)),
+                      0
+                    )
+                  )
+                },
+                children: [
+                  /* @__PURE__ */ jsx("caption", { className: "sr-only", children: getChartSummary(settings) }),
+                  /* @__PURE__ */ jsx("colgroup", { children: settings.columns.map((column) => /* @__PURE__ */ jsx(
+                    "col",
+                    {
+                      style: {
+                        width: columnWidths[column.id] ?? column.width ?? Math.max(110, column.field.length * 7 + 42)
+                      }
+                    },
+                    column.id
+                  )) }),
+                  /* @__PURE__ */ jsx(
+                    DataTableHeader,
+                    {
+                      localFilters: rows !== void 0,
+                      settings,
+                      onSettingsChange: update,
+                      onColumnResize: (id, width2) => setColumnWidths((current) => {
+                        const next = { ...current };
+                        if (width2 === null) {
+                          delete next[id];
+                        } else {
+                          next[id] = width2;
+                        }
+                        return next;
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    DataTableBody,
+                    {
+                      settings,
+                      rows: filteredRows,
+                      scrollTop,
+                      viewportHeight: height - (toolbarTarget === void 0 ? 38 : 0)
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function DataTableSettingsPanel({
+  settings,
+  onSettingsChange
+}) {
+  const availableFields = useColumnNames();
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Columns" }),
+      /* @__PURE__ */ jsx(
+        multi_select_default,
+        {
+          options: availableFields.map((f) => ({
+            label: f,
+            value: f
+          })),
+          value: settings.columns.map((col) => ({
+            label: col.field,
+            value: col.field
+          })),
+          onChange: (values) => onSettingsChange({
+            ...settings,
+            columns: values.map(
+              (v) => settings.columns.find(
+                (column) => column.field === v.value
+              ) ?? {
+                id: v.value,
+                field: v.value
+              }
+            )
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Global Search" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          placeholder: "Search all columns...",
+          value: settings.globalSearch,
+          onChange: (e) => onSettingsChange({
+            ...settings,
+            globalSearch: e.target.value
+          })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/components/charts/DataTable/definition.ts
+var dataTableDefinition = {
+  type: "data-table",
+  name: "Data Table",
+  description: "Interactive data table with sorting and filtering",
+  icon: Table,
+  component: DataTable,
+  settingsPanel: DataTableSettingsPanel,
+  createDefaultSettings: (layout) => ({
+    ...DEFAULT_CHART_SETTINGS,
+    id: crypto.randomUUID(),
+    type: "data-table",
+    title: "Data Table",
+    layout,
+    margin: { top: 5, right: 5, bottom: 5, left: 5 },
+    columns: [],
+    sortDirection: "asc",
+    filters: [],
+    globalSearch: ""
+  }),
+  validateSettings: (settings) => {
+    return settings.columns.length > 0;
+  },
+  getFilterFunction: (settings, fieldGetter) => {
+    if (settings.filters.length === 0) {
+      return () => true;
+    }
+    const filterFunctions = settings.filters.map((filter) => {
+      const column = settings.columns.find((col) => col.field === filter.field);
+      if (!column) {
+        return () => true;
+      }
+      const dataHash = fieldGetter(column.field);
+      return (d) => {
+        const value = dataHash[d];
+        return applyFilter(value, filter);
+      };
+    });
+    return (d) => filterFunctions.every((fn) => fn(d));
+  }
+};
+
+export { DataTable, dataTableDefinition };
+//# sourceMappingURL=chunk-6U5DOIQM.js.map
+//# sourceMappingURL=chunk-6U5DOIQM.js.map