hs-uix 1.0.0

package/dist/datatable.mjs

@@ -0,0 +1,1034 @@
+// packages/datatable/src/DataTable.jsx
+import React, { useState, useMemo, useEffect, useCallback, useRef } from "react";
+import Fuse from "fuse.js";
+import {
+  Box,
+  Button,
+  Checkbox,
+  CurrencyInput,
+  DateInput,
+  EmptyState,
+  ErrorState,
+  Flex,
+  Icon,
+  Input,
+  Link,
+  LoadingSpinner,
+  MultiSelect,
+  NumberInput,
+  SearchInput,
+  Select,
+  StepperInput,
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+  Text,
+  TextArea,
+  TimeInput,
+  Toggle
+} from "@hubspot/ui-extensions";
+var formatDateChip = (dateObj) => {
+  if (!dateObj) return "";
+  const { year, month, date } = dateObj;
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  }).format(new Date(year, month, date));
+};
+var dateToTimestamp = (dateObj) => {
+  if (!dateObj) return null;
+  return new Date(dateObj.year, dateObj.month, dateObj.date).getTime();
+};
+var NARROW_EDIT_TYPES = /* @__PURE__ */ new Set(["checkbox", "toggle"]);
+var DATE_PATTERN = /^\d{4}[-/]\d{2}[-/]\d{2}/;
+var BOOL_VALUES = /* @__PURE__ */ new Set(["true", "false", "yes", "no", "0", "1"]);
+var SORT_DIRECTIONS = /* @__PURE__ */ new Set(["ascending", "descending", "none"]);
+var normalizeSortState = (columns, sort) => {
+  const normalized = {};
+  columns.forEach((col) => {
+    if (col.sortable) normalized[col.field] = "none";
+  });
+  if (!sort) return normalized;
+  if (sort.field && SORT_DIRECTIONS.has(sort.direction) && sort.field in normalized) {
+    normalized[sort.field] = sort.direction;
+    return normalized;
+  }
+  Object.keys(normalized).forEach((field) => {
+    const direction = sort[field];
+    if (SORT_DIRECTIONS.has(direction)) normalized[field] = direction;
+  });
+  return normalized;
+};
+var serializeSortState = (sortState) => {
+  const activeField = Object.keys(sortState).find((field) => sortState[field] !== "none");
+  if (!activeField) return null;
+  return { field: activeField, direction: sortState[activeField] };
+};
+var toStableKey = (value) => {
+  try {
+    return JSON.stringify(value);
+  } catch (_error) {
+    return String(value);
+  }
+};
+var computeAutoWidths = (columns, data) => {
+  if (!data || data.length === 0) return {};
+  const sample = data.slice(0, 50);
+  const results = {};
+  columns.forEach((col) => {
+    if (col.width && col.cellWidth) return;
+    const values = sample.map((row) => row[col.field]).filter((v) => v != null);
+    const strings = values.map((v) => String(v));
+    let widthHint = null;
+    let cellWidthHint = null;
+    if (col.editable && col.editType && NARROW_EDIT_TYPES.has(col.editType)) {
+      cellWidthHint = "min";
+    }
+    if (strings.length > 0) {
+      const lengths = strings.map((s) => s.length);
+      const maxLen = Math.max(...lengths);
+      const uniqueCount = new Set(strings).size;
+      if (values.every((v) => typeof v === "boolean") || strings.every((s) => BOOL_VALUES.has(s.toLowerCase()))) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "min";
+      } else if (strings.every((s) => DATE_PATTERN.test(s))) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "auto";
+      } else if (values.every((v) => typeof v === "number")) {
+        widthHint = widthHint || "auto";
+        cellWidthHint = cellWidthHint || "auto";
+      } else if (uniqueCount <= 5 && maxLen <= 15) {
+        widthHint = widthHint || "min";
+        cellWidthHint = cellWidthHint || "auto";
+      } else {
+        widthHint = widthHint || "auto";
+        cellWidthHint = cellWidthHint || "auto";
+      }
+    }
+    if (col.editable && !NARROW_EDIT_TYPES.has(col.editType) && widthHint === "min") {
+      widthHint = "auto";
+    }
+    results[col.field] = {
+      width: widthHint || "auto",
+      cellWidth: cellWidthHint || "auto"
+    };
+  });
+  return results;
+};
+var getEmptyFilterValue = (filter) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return [];
+  if (type === "dateRange") return { from: null, to: null };
+  return "";
+};
+var BOOLEAN_SELECT_OPTIONS = [
+  { label: "Yes", value: true },
+  { label: "No", value: false }
+];
+var resolveEditOptions = (col, data) => {
+  if (col.editOptions && col.editOptions.length > 0) return col.editOptions;
+  const sample = data.find((row) => row[col.field] != null);
+  if (sample && typeof sample[col.field] === "boolean") return BOOLEAN_SELECT_OPTIONS;
+  return [];
+};
+var isFilterActive = (filter, value) => {
+  const type = filter.type || "select";
+  if (type === "multiselect") return Array.isArray(value) && value.length > 0;
+  if (type === "dateRange") return value && (value.from || value.to);
+  return !!value;
+};
+var DataTable = ({
+  // Data
+  data,
+  columns,
+  renderRow,
+  // Search
+  searchFields = [],
+  searchPlaceholder = "Search...",
+  fuzzySearch = false,
+  // enable fuzzy matching via Fuse.js
+  fuzzyOptions,
+  // custom Fuse.js options (threshold, distance, etc.)
+  // Filters
+  filters = [],
+  showFilterBadges = true,
+  // show active filter chips/badges
+  showClearFiltersButton = true,
+  // show "Clear all" filters reset button
+  // Pagination
+  pageSize = 10,
+  maxVisiblePageButtons,
+  // max page number buttons to show
+  showButtonLabels = true,
+  // show First/Prev/Next/Last text labels
+  showFirstLastButtons,
+  // show First/Last page buttons (default: auto when pageCount > 5)
+  // Row count
+  showRowCount = true,
+  // show "X records" / "X of Y records" text
+  rowCountBold = false,
+  // bold the row count text
+  rowCountText,
+  // custom formatter: (shownOnPage, totalMatching) => string
+  // Table appearance
+  bordered = true,
+  // show table borders
+  flush = true,
+  // remove bottom margin
+  scrollable = false,
+  // allow horizontal overflow with scrollbar
+  // Sorting
+  defaultSort = {},
+  // Grouping
+  groupBy,
+  // Footer
+  footer,
+  // Empty state
+  emptyTitle,
+  emptyMessage,
+  // -----------------------------------------------------------------------
+  // Server-side mode
+  // -----------------------------------------------------------------------
+  serverSide = false,
+  loading = false,
+  // show loading spinner over the table
+  error,
+  // error message string or boolean — shows ErrorState
+  totalCount,
+  // server total (server-side only)
+  page: externalPage,
+  // controlled page (server-side only)
+  searchValue,
+  // controlled search term (server-side only)
+  filterValues: externalFilterValues,
+  // controlled filter values (server-side only)
+  sort: externalSort,
+  // controlled sort state, e.g. { field: "ascending" }
+  searchDebounce = 0,
+  // ms to debounce onSearchChange callback
+  resetPageOnChange = true,
+  // auto-reset to page 1 on search/filter/sort change
+  onSearchChange,
+  // (searchTerm) => void
+  onFilterChange,
+  // (filterValues) => void
+  onSortChange,
+  // (field, direction) => void
+  onPageChange,
+  // (page) => void
+  onParamsChange,
+  // ({ search, filters, sort, page }) => void
+  // -----------------------------------------------------------------------
+  // Row selection
+  // -----------------------------------------------------------------------
+  selectable = false,
+  rowIdField = "id",
+  // field name used as unique row identifier
+  selectedIds: externalSelectedIds,
+  // controlled selection — array of row IDs
+  onSelectionChange,
+  // (selectedIds[]) => void
+  onSelectAllRequest,
+  // server-side: ({ selectedIds, pageIds, totalCount }) => void
+  selectionActions = [],
+  // [{ label, onClick(selectedIds[]), icon?, variant? }]
+  selectionResetKey,
+  // optional key to force clear uncontrolled selection memory
+  resetSelectionOnQueryChange = true,
+  // clear uncontrolled selection on search/filter/sort changes
+  recordLabel,
+  // { singular: "Contact", plural: "Contacts" } — defaults to Record/Records
+  // -----------------------------------------------------------------------
+  // Row actions
+  // -----------------------------------------------------------------------
+  rowActions,
+  // [{ label, onClick(row), icon?, variant? }] or (row) => actions[]
+  hideRowActionsWhenSelectionActive = false,
+  // hide row action column while selected-row action bar is visible
+  // -----------------------------------------------------------------------
+  // Inline editing
+  // -----------------------------------------------------------------------
+  editMode,
+  // "discrete" (click-to-edit) | "inline" (always show inputs)
+  editingRowId,
+  // controlled — row ID currently in full-row edit mode
+  onRowEdit,
+  // (row, field, newValue) => void
+  onRowEditInput,
+  // optional live-input callback: (row, field, inputValue) => void
+  // -----------------------------------------------------------------------
+  // Auto-width
+  // -----------------------------------------------------------------------
+  autoWidth = true
+  // auto-compute column widths from content analysis
+}) => {
+  const initialSortState = useMemo(() => {
+    return normalizeSortState(columns, defaultSort);
+  }, [columns, defaultSort]);
+  const [internalSearchTerm, setInternalSearchTerm] = useState("");
+  const [internalFilterValues, setInternalFilterValues] = useState(() => {
+    const init = {};
+    filters.forEach((f) => {
+      init[f.name] = getEmptyFilterValue(f);
+    });
+    return init;
+  });
+  const [internalSortState, setInternalSortState] = useState(initialSortState);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [showMoreFilters, setShowMoreFilters] = useState(false);
+  const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
+  const externalSortState = useMemo(
+    () => normalizeSortState(columns, externalSort),
+    [columns, externalSort]
+  );
+  const sortState = serverSide && externalSort != null ? externalSortState : internalSortState;
+  const activePage = serverSide && externalPage != null ? externalPage : currentPage;
+  useEffect(() => {
+    if (!serverSide) setCurrentPage(1);
+  }, [internalSearchTerm, internalFilterValues, internalSortState, serverSide]);
+  const debounceRef = useRef(null);
+  const fireSearchCallback = useCallback((term) => {
+    if (serverSide && onSearchChange) onSearchChange(term);
+  }, [serverSide, onSearchChange]);
+  const fireParamsChange = useCallback((overrides) => {
+    if (!onParamsChange) return;
+    const nextSortState = overrides.sort != null ? normalizeSortState(columns, overrides.sort) : sortState;
+    onParamsChange({
+      search: overrides.search != null ? overrides.search : searchTerm,
+      filters: overrides.filters != null ? overrides.filters : filterValues,
+      sort: serializeSortState(nextSortState),
+      page: overrides.page != null ? overrides.page : activePage
+    });
+  }, [onParamsChange, columns, searchTerm, filterValues, sortState, activePage]);
+  const resetPage = useCallback(() => {
+    if (resetPageOnChange) {
+      setCurrentPage(1);
+      if (serverSide && onPageChange) onPageChange(1);
+    }
+  }, [resetPageOnChange, serverSide, onPageChange]);
+  const handleSearchChange = useCallback((term) => {
+    setInternalSearchTerm(term);
+    resetPage();
+    if (searchDebounce > 0) {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        fireSearchCallback(term);
+        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      }, searchDebounce);
+    } else {
+      fireSearchCallback(term);
+      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+    }
+  }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
+  useEffect(() => () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+  }, []);
+  const handleFilterChange = useCallback((name, value) => {
+    const next = { ...filterValues, [name]: value };
+    setInternalFilterValues(next);
+    if (serverSide && onFilterChange) onFilterChange(next);
+    resetPage();
+    fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
+  }, [filterValues, serverSide, onFilterChange, fireParamsChange, resetPage, resetPageOnChange]);
+  const handleSortChange = useCallback((field) => {
+    const current = sortState[field] || "none";
+    const nextDirection = current === "none" ? "ascending" : current === "ascending" ? "descending" : "none";
+    const reset = {};
+    columns.forEach((col) => {
+      if (col.sortable) reset[col.field] = "none";
+    });
+    const next = nextDirection === "none" ? reset : { ...reset, [field]: nextDirection };
+    setInternalSortState(next);
+    if (serverSide && onSortChange) onSortChange(field, nextDirection);
+    resetPage();
+    fireParamsChange({ sort: next, page: resetPageOnChange ? 1 : void 0 });
+  }, [sortState, columns, serverSide, onSortChange, fireParamsChange, resetPage, resetPageOnChange]);
+  const handlePageChange = useCallback((page) => {
+    setCurrentPage(page);
+    if (serverSide && onPageChange) onPageChange(page);
+    fireParamsChange({ page });
+  }, [serverSide, onPageChange, fireParamsChange]);
+  const filteredData = useMemo(() => {
+    if (serverSide) return data;
+    let result = data;
+    filters.forEach((filter) => {
+      const value = filterValues[filter.name];
+      if (!isFilterActive(filter, value)) return;
+      const type = filter.type || "select";
+      if (filter.filterFn) {
+        result = result.filter((row) => filter.filterFn(row, value));
+      } else if (type === "multiselect") {
+        result = result.filter((row) => value.includes(row[filter.name]));
+      } else if (type === "dateRange") {
+        const fromTs = dateToTimestamp(value.from);
+        const toTs = value.to ? dateToTimestamp(value.to) + 864e5 - 1 : null;
+        result = result.filter((row) => {
+          const rowTs = new Date(row[filter.name]).getTime();
+          if (Number.isNaN(rowTs)) return false;
+          if (fromTs && rowTs < fromTs) return false;
+          if (toTs && rowTs > toTs) return false;
+          return true;
+        });
+      } else {
+        result = result.filter((row) => row[filter.name] === value);
+      }
+    });
+    if (searchTerm && searchFields.length > 0) {
+      if (fuzzySearch) {
+        const fuse = new Fuse(result, {
+          keys: searchFields,
+          threshold: 0.4,
+          distance: 100,
+          ignoreLocation: true,
+          ...fuzzyOptions
+        });
+        result = fuse.search(searchTerm).map((r) => r.item);
+      } else {
+        const term = searchTerm.toLowerCase();
+        result = result.filter(
+          (row) => searchFields.some((field) => {
+            const val = row[field];
+            return val && String(val).toLowerCase().includes(term);
+          })
+        );
+      }
+    }
+    return result;
+  }, [data, filterValues, searchTerm, filters, searchFields, serverSide, fuzzySearch, fuzzyOptions]);
+  const sortedData = useMemo(() => {
+    if (serverSide) return filteredData;
+    const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
+    if (!activeField) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const dir = sortState[activeField] === "ascending" ? 1 : -1;
+      const aVal = a[activeField];
+      const bVal = b[activeField];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      if (aVal < bVal) return -dir;
+      if (aVal > bVal) return dir;
+      return 0;
+    });
+  }, [filteredData, sortState, serverSide]);
+  const groupedData = useMemo(() => {
+    if (!groupBy) return null;
+    const source = serverSide ? data : sortedData;
+    const groups = {};
+    source.forEach((row) => {
+      const key = row[groupBy.field] ?? "--";
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(row);
+    });
+    let groupKeys = Object.keys(groups);
+    if (groupBy.sort) {
+      if (typeof groupBy.sort === "function") {
+        groupKeys.sort(groupBy.sort);
+      } else {
+        const dir = groupBy.sort === "desc" ? -1 : 1;
+        groupKeys.sort((a, b) => a < b ? -dir : a > b ? dir : 0);
+      }
+    }
+    return groupKeys.map((key) => ({
+      key,
+      label: groupBy.label ? groupBy.label(key, groups[key]) : key,
+      rows: groups[key]
+    }));
+  }, [sortedData, data, groupBy, serverSide]);
+  const [expandedGroups, setExpandedGroups] = useState(() => {
+    if (!groupBy) return /* @__PURE__ */ new Set();
+    const defaultExpanded = groupBy.defaultExpanded !== false;
+    if (defaultExpanded && groupedData) {
+      return new Set(groupedData.map((g) => g.key));
+    }
+    return /* @__PURE__ */ new Set();
+  });
+  useEffect(() => {
+    if (!groupedData) return;
+    const defaultExpanded = (groupBy == null ? void 0 : groupBy.defaultExpanded) !== false;
+    if (defaultExpanded) {
+      setExpandedGroups((prev) => {
+        const next = new Set(prev);
+        groupedData.forEach((g) => next.add(g.key));
+        return next;
+      });
+    }
+  }, [groupedData, groupBy]);
+  const toggleGroup = useCallback((key) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  }, []);
+  const flatRows = useMemo(() => {
+    if (!groupedData) return (serverSide ? data : sortedData).map((row) => ({ type: "data", row }));
+    const flat = [];
+    groupedData.forEach((group) => {
+      flat.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        group.rows.forEach((row) => flat.push({ type: "data", row }));
+      }
+    });
+    return flat;
+  }, [groupedData, sortedData, data, serverSide, expandedGroups]);
+  const totalItems = serverSide ? totalCount || data.length : flatRows.length;
+  const pageCount = Math.ceil(totalItems / pageSize);
+  let displayRows;
+  if (serverSide) {
+    displayRows = groupBy ? flatRows : data.map((row) => ({ type: "data", row }));
+  } else {
+    displayRows = flatRows.slice(
+      (activePage - 1) * pageSize,
+      activePage * pageSize
+    );
+  }
+  const footerData = serverSide ? data : filteredData;
+  const activeChips = useMemo(() => {
+    const chips = [];
+    filters.forEach((filter) => {
+      const value = filterValues[filter.name];
+      if (!isFilterActive(filter, value)) return;
+      const type = filter.type || "select";
+      const prefix = filter.chipLabel || filter.placeholder || filter.name;
+      if (type === "multiselect") {
+        const labels = value.map((v) => {
+          var _a;
+          return ((_a = filter.options.find((o) => o.value === v)) == null ? void 0 : _a.label) || v;
+        }).join(", ");
+        chips.push({ key: filter.name, label: `${prefix}: ${labels}` });
+      } else if (type === "dateRange") {
+        const parts = [];
+        if (value.from) parts.push(`from ${formatDateChip(value.from)}`);
+        if (value.to) parts.push(`to ${formatDateChip(value.to)}`);
+        chips.push({ key: filter.name, label: `${prefix}: ${parts.join(" ")}` });
+      } else {
+        const option = filter.options.find((o) => o.value === value);
+        chips.push({ key: filter.name, label: `${prefix}: ${(option == null ? void 0 : option.label) || value}` });
+      }
+    });
+    return chips;
+  }, [filterValues, filters]);
+  const handleFilterRemove = useCallback((key) => {
+    if (key === "all") {
+      const cleared = {};
+      filters.forEach((f) => {
+        cleared[f.name] = getEmptyFilterValue(f);
+      });
+      setInternalFilterValues(cleared);
+      if (serverSide && onFilterChange) onFilterChange(cleared);
+      resetPage();
+      fireParamsChange({ filters: cleared, page: resetPageOnChange ? 1 : void 0 });
+    } else {
+      const filter = filters.find((f) => f.name === key);
+      const emptyVal = filter ? getEmptyFilterValue(filter) : "";
+      const next = { ...filterValues, [key]: emptyVal };
+      setInternalFilterValues(next);
+      if (serverSide && onFilterChange) onFilterChange(next);
+      resetPage();
+      fireParamsChange({ filters: next, page: resetPageOnChange ? 1 : void 0 });
+    }
+  }, [filters, filterValues, serverSide, onFilterChange, resetPage, fireParamsChange, resetPageOnChange]);
+  const displayCount = serverSide ? totalCount || data.length : filteredData.length;
+  const totalDataCount = serverSide ? totalCount || data.length : data.length;
+  const shownOnPageCount = displayRows.filter((item) => item.type === "data").length;
+  const pluralLabel = ((recordLabel == null ? void 0 : recordLabel.plural) || "records").toLowerCase();
+  const singularLabel = ((recordLabel == null ? void 0 : recordLabel.singular) || "record").toLowerCase();
+  const countLabel = (n) => n === 1 ? singularLabel : pluralLabel;
+  const resolvedEmptyTitle = emptyTitle || "No results found";
+  const resolvedEmptyMessage = emptyMessage || `No ${pluralLabel} match your search or filter criteria.`;
+  const resolvedLoadingLabel = `Loading ${pluralLabel}...`;
+  const recordCountLabel = rowCountText ? rowCountText(shownOnPageCount, displayCount) : displayCount === totalDataCount ? `${totalDataCount} ${countLabel(totalDataCount)}` : `${displayCount} of ${totalDataCount} ${countLabel(totalDataCount)}`;
+  const [internalSelectedIds, setInternalSelectedIds] = useState(/* @__PURE__ */ new Set());
+  const selectionResetRef = useRef("");
+  useEffect(() => {
+    if (externalSelectedIds != null) {
+      setInternalSelectedIds(new Set(externalSelectedIds));
+    }
+  }, [externalSelectedIds]);
+  const selectionQueryKey = useMemo(() => {
+    if (!resetSelectionOnQueryChange) return "";
+    return toStableKey({
+      search: searchTerm,
+      filters: filterValues,
+      sort: serializeSortState(sortState)
+    });
+  }, [searchTerm, filterValues, sortState, resetSelectionOnQueryChange]);
+  const combinedSelectionResetKey = useMemo(
+    () => `${selectionQueryKey}::${selectionResetKey == null ? "" : toStableKey(selectionResetKey)}`,
+    [selectionQueryKey, selectionResetKey]
+  );
+  useEffect(() => {
+    if (!selectable || externalSelectedIds != null) {
+      selectionResetRef.current = combinedSelectionResetKey;
+      return;
+    }
+    if (selectionResetRef.current && selectionResetRef.current !== combinedSelectionResetKey) {
+      setInternalSelectedIds(/* @__PURE__ */ new Set());
+    }
+    selectionResetRef.current = combinedSelectionResetKey;
+  }, [combinedSelectionResetKey, selectable, externalSelectedIds]);
+  const selectedIds = externalSelectedIds != null ? new Set(externalSelectedIds) : internalSelectedIds;
+  const showRowActionsColumn = !!rowActions && !(hideRowActionsWhenSelectionActive && selectable && selectedIds.size > 0);
+  const applySelection = useCallback((nextSet) => {
+    if (externalSelectedIds == null) {
+      setInternalSelectedIds(nextSet);
+    }
+    if (onSelectionChange) onSelectionChange([...nextSet]);
+  }, [externalSelectedIds, onSelectionChange]);
+  const pageRowIds = useMemo(() => {
+    if (serverSide) {
+      return data.map((row) => row[rowIdField]).filter((id) => id != null);
+    }
+    return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
+  }, [serverSide, data, displayRows, rowIdField]);
+  const allRowIds = useMemo(
+    () => flatRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null),
+    [flatRows, rowIdField]
+  );
+  const handleSelectRow = useCallback((rowId, checked) => {
+    const next = new Set(selectedIds);
+    if (checked) next.add(rowId);
+    else next.delete(rowId);
+    applySelection(next);
+  }, [selectedIds, applySelection]);
+  const handleSelectAll = useCallback((checked) => {
+    const next = new Set(selectedIds);
+    pageRowIds.forEach((id) => {
+      if (checked) next.add(id);
+      else next.delete(id);
+    });
+    applySelection(next);
+  }, [selectedIds, pageRowIds, applySelection]);
+  const allVisibleSelected = useMemo(() => {
+    return pageRowIds.length > 0 && pageRowIds.every((id) => selectedIds.has(id));
+  }, [pageRowIds, selectedIds]);
+  const handleSelectAllRows = useCallback(() => {
+    const idsToAdd = serverSide ? pageRowIds : allRowIds;
+    const next = new Set(selectedIds);
+    idsToAdd.forEach((id) => next.add(id));
+    applySelection(next);
+    if (serverSide && onSelectAllRequest) {
+      onSelectAllRequest({
+        selectedIds: [...next],
+        pageIds: pageRowIds,
+        totalCount: totalCount || data.length
+      });
+    }
+  }, [serverSide, pageRowIds, allRowIds, selectedIds, applySelection, onSelectAllRequest, totalCount, data.length]);
+  const handleDeselectAll = useCallback(() => {
+    applySelection(/* @__PURE__ */ new Set());
+  }, [applySelection]);
+  const [editingCell, setEditingCell] = useState(null);
+  const [editValue, setEditValue] = useState(null);
+  const [editError, setEditError] = useState(null);
+  const startEditing = useCallback((rowId, field, currentValue) => {
+    setEditingCell({ rowId, field });
+    setEditValue(currentValue);
+    setEditError(null);
+  }, []);
+  const commitEdit = useCallback((row, field, value) => {
+    const col = columns.find((c) => c.field === field);
+    if (col == null ? void 0 : col.editValidate) {
+      const result = col.editValidate(value, row);
+      if (result !== true && result !== void 0 && result !== null) {
+        setEditError(typeof result === "string" ? result : "Invalid value");
+        return;
+      }
+    }
+    if (onRowEdit) onRowEdit(row, field, value);
+    setEditingCell(null);
+    setEditValue(null);
+    setEditError(null);
+  }, [onRowEdit, columns]);
+  const renderEditControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `edit-${rowId}-${col.field}`;
+    const commit = (val) => commitEdit(row, col.field, val);
+    const exitEdit = () => {
+      if (editError) return;
+      setEditingCell(null);
+      setEditValue(null);
+    };
+    const extra = col.editProps || {};
+    const validate = col.editValidate;
+    const validationProps = validate && editError ? { error: true, validationMessage: editError } : {};
+    const onInputValidate = validate ? (val) => {
+      const result = validate(val, row);
+      if (result !== true && result !== void 0 && result !== null) {
+        setEditError(typeof result === "string" ? result : "Invalid value");
+      } else {
+        setEditError(null);
+      }
+    } : void 0;
+    const handleInput = (val) => {
+      setEditValue(val);
+      if (onInputValidate) onInputValidate(val);
+      if (onRowEditInput) onRowEditInput(row, col.field, val);
+    };
+    const maybeExitDatetimeEdit = () => {
+      if (typeof document === "undefined") return;
+      setTimeout(() => {
+        var _a, _b;
+        const activeName = (_b = (_a = document.activeElement) == null ? void 0 : _a.getAttribute) == null ? void 0 : _b.call(_a, "name");
+        if (activeName !== `${fieldName}-date` && activeName !== `${fieldName}-time`) {
+          exitEdit();
+        }
+      }, 0);
+    };
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ React.createElement(TextArea, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "number":
+        return /* @__PURE__ */ React.createElement(NumberInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "currency":
+        return /* @__PURE__ */ React.createElement(CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "stepper":
+        return /* @__PURE__ */ React.createElement(StepperInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+      case "select":
+        return /* @__PURE__ */ React.createElement(Select, { variant: "transparent", ...extra, name: fieldName, label: "", value: editValue, onChange: commit, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ React.createElement(MultiSelect, { ...extra, name: fieldName, label: "", value: editValue || [], onChange: commit, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+      case "time":
+        return /* @__PURE__ */ React.createElement(TimeInput, { ...extra, name: fieldName, label: "", value: editValue, onChange: commit });
+      case "datetime":
+        return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
+          const next = { ...editValue, date: val };
+          setEditValue(next);
+          if (onRowEdit) onRowEdit(row, col.field, next);
+        }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
+          const next = { ...editValue, time: val };
+          setEditValue(next);
+          if (onRowEdit) onRowEdit(row, col.field, next);
+        }, onBlur: maybeExitDatetimeEdit }));
+      case "toggle":
+        return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
+      case "checkbox":
+        return /* @__PURE__ */ React.createElement(Checkbox, { ...extra, name: fieldName, checked: !!editValue, onChange: commit });
+      default:
+        return /* @__PURE__ */ React.createElement(Input, { ...extra, name: fieldName, label: "", value: editValue ?? "", onChange: commit, onBlur: exitEdit, ...validationProps, onInput: handleInput });
+    }
+  };
+  const resolvedEditMode = editMode || (columns.some((col) => col.editable) ? "discrete" : null);
+  const useColumnRendering = selectable || !!resolvedEditMode || editingRowId != null || showRowActionsColumn || !renderRow;
+  const autoWidths = useMemo(
+    () => autoWidth ? computeAutoWidths(columns, data) : {},
+    [columns, data, autoWidth]
+  );
+  const defaultWidth = scrollable ? "min" : "auto";
+  const getHeaderWidth = (col) => {
+    var _a;
+    return col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.width) || defaultWidth;
+  };
+  const getCellWidth = (col) => {
+    var _a;
+    return col.cellWidth || col.width || ((_a = autoWidths[col.field]) == null ? void 0 : _a.cellWidth) || defaultWidth;
+  };
+  const [inlineErrors, setInlineErrors] = useState({});
+  const renderInlineControl = (col, row) => {
+    const type = col.editType || "text";
+    const rowId = row[rowIdField];
+    const fieldName = `inline-${rowId}-${col.field}`;
+    const cellKey = `${rowId}-${col.field}`;
+    const value = row[col.field];
+    const validate = col.editValidate;
+    const fire = (val) => {
+      if (validate) {
+        const result = validate(val, row);
+        if (result !== true && result !== void 0 && result !== null) {
+          setInlineErrors((prev) => ({ ...prev, [cellKey]: typeof result === "string" ? result : "Invalid value" }));
+          return;
+        }
+        setInlineErrors((prev) => {
+          const next = { ...prev };
+          delete next[cellKey];
+          return next;
+        });
+      }
+      if (onRowEdit) onRowEdit(row, col.field, val);
+    };
+    const extra = col.editProps || {};
+    const cellError = inlineErrors[cellKey];
+    const validationProps = cellError ? { error: true, validationMessage: cellError } : {};
+    const onInputValidate = validate ? (val) => {
+      const result = validate(val, row);
+      if (result !== true && result !== void 0 && result !== null) {
+        setInlineErrors((prev) => ({ ...prev, [cellKey]: typeof result === "string" ? result : "Invalid value" }));
+      } else {
+        setInlineErrors((prev) => {
+          const next = { ...prev };
+          delete next[cellKey];
+          return next;
+        });
+      }
+    } : void 0;
+    const emitInput = (val) => {
+      if (onInputValidate) onInputValidate(val);
+      if (onRowEditInput) onRowEditInput(row, col.field, val);
+    };
+    switch (type) {
+      case "textarea":
+        return /* @__PURE__ */ React.createElement(TextArea, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+      case "number":
+        return /* @__PURE__ */ React.createElement(NumberInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "currency":
+        return /* @__PURE__ */ React.createElement(CurrencyInput, { currencyCode: "USD", ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "stepper":
+        return /* @__PURE__ */ React.createElement(StepperInput, { ...extra, name: fieldName, label: "", value, onChange: fire, ...validationProps, onInput: emitInput });
+      case "select":
+        return /* @__PURE__ */ React.createElement(Select, { ...extra, name: fieldName, label: "", value, onChange: fire, options: resolveEditOptions(col, data) });
+      case "multiselect":
+        return /* @__PURE__ */ React.createElement(MultiSelect, { ...extra, name: fieldName, label: "", value: value || [], onChange: fire, options: resolveEditOptions(col, data) });
+      case "date":
+        return /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+      case "time":
+        return /* @__PURE__ */ React.createElement(TimeInput, { ...extra, name: fieldName, label: "", value, onChange: fire });
+      case "datetime":
+        return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: value == null ? void 0 : value.date, onChange: (val) => {
+          fire({ ...value, date: val });
+        } }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: value == null ? void 0 : value.time, onChange: (val) => {
+          fire({ ...value, time: val });
+        } }));
+      case "toggle":
+        return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!value, onChange: fire });
+      case "checkbox":
+        return /* @__PURE__ */ React.createElement(Checkbox, { ...extra, name: fieldName, checked: !!value, onChange: fire });
+      default:
+        return /* @__PURE__ */ React.createElement(Input, { ...extra, name: fieldName, label: "", value: value ?? "", onChange: fire, ...validationProps, onInput: emitInput });
+    }
+  };
+  const renderCellContent = (row, col) => {
+    const rowId = row[rowIdField];
+    if (resolvedEditMode === "inline" && col.editable) {
+      return renderInlineControl(col, row);
+    }
+    if (editingRowId != null && rowId === editingRowId && col.editable) {
+      return renderInlineControl(col, row);
+    }
+    const isEditing = (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
+    if (isEditing && col.editable) return renderEditControl(col, row);
+    const rawValue = row[col.field];
+    const rawStr = String(rawValue ?? "");
+    if (col.truncate && rawStr.length > 0) {
+      if (col.truncate === true) {
+        const content2 = col.renderCell ? col.renderCell(rawValue, row) : rawStr;
+        if (col.editable) {
+          return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--"));
+        }
+        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, content2);
+      }
+      const maxLen = col.truncate.maxLength || 100;
+      if (rawStr.length > maxLen) {
+        const truncatedStr = rawStr.slice(0, maxLen) + "\u2026";
+        const truncatedContent = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
+        if (col.editable) {
+          return /* @__PURE__ */ React.createElement(Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, truncatedContent || "--");
+        }
+        return /* @__PURE__ */ React.createElement(Text, { truncate: { tooltipText: rawStr } }, truncatedContent || "--");
+      }
+    }
+    const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
+    const isEmpty = content == null || content === "";
+    if (col.editable) {
+      return /* @__PURE__ */ React.createElement(
+        Link,
+        {
+          variant: "dark",
+          onClick: () => startEditing(rowId, col.field, rawValue)
+        },
+        isEmpty ? "--" : content
+      );
+    }
+    return isEmpty ? "--" : content;
+  };
+  const renderFilterControl = (filter) => {
+    const type = filter.type || "select";
+    if (type === "multiselect") {
+      return /* @__PURE__ */ React.createElement(
+        MultiSelect,
+        {
+          key: filter.name,
+          name: `filter-${filter.name}`,
+          label: "",
+          placeholder: filter.placeholder || "All",
+          value: filterValues[filter.name] || [],
+          onChange: (val) => handleFilterChange(filter.name, val),
+          options: filter.options
+        }
+      );
+    }
+    if (type === "dateRange") {
+      const rangeVal = filterValues[filter.name] || { from: null, to: null };
+      return /* @__PURE__ */ React.createElement(Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React.createElement(
+        DateInput,
+        {
+          name: `filter-${filter.name}-from`,
+          label: "",
+          placeholder: "From",
+          format: "medium",
+          value: rangeVal.from,
+          onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, from: val })
+        }
+      ), /* @__PURE__ */ React.createElement(Icon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ React.createElement(
+        DateInput,
+        {
+          size: "sm",
+          name: `filter-${filter.name}-to`,
+          label: "",
+          placeholder: "To",
+          format: "medium",
+          value: rangeVal.to,
+          onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, to: val })
+        }
+      ));
+    }
+    return /* @__PURE__ */ React.createElement(
+      Select,
+      {
+        key: filter.name,
+        name: `filter-${filter.name}`,
+        variant: "transparent",
+        placeholder: filter.placeholder || "All",
+        value: filterValues[filter.name],
+        onChange: (val) => handleFilterChange(filter.name, val),
+        options: [
+          { label: filter.placeholder || "All", value: "" },
+          ...filter.options
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, searchFields.length > 0 && /* @__PURE__ */ React.createElement(
+    SearchInput,
+    {
+      name: "datatable-search",
+      placeholder: searchPlaceholder,
+      value: searchTerm,
+      onChange: handleSearchChange
+    }
+  ), filters.slice(0, 2).map(renderFilterControl), filters.length > 2 && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "small",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ React.createElement(Icon, { name: "filter", size: "sm" }),
+    " Filters"
+  )), showMoreFilters && filters.length > 2 && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(2).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ React.createElement(Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "extra-small",
+      onClick: () => handleFilterRemove("all")
+    },
+    "Clear all"
+  )))), showRowCount && displayCount > 0 && !(selectable && selectedIds.size > 0) && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), selectable && selectedIds.size > 0 && /* @__PURE__ */ React.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React.createElement(Box, { flex: 3 }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Text, { inline: true, format: { fontWeight: "demibold" } }, selectedIds.size, "\xA0", countLabel(selectedIds.size), "\xA0selected"), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, "Select all ", displayCount, " ", countLabel(displayCount)), /* @__PURE__ */ React.createElement(Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, "Deselect all"), selectionActions.map((action, i) => /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      key: i,
+      variant: action.variant || "transparent",
+      size: "extra-small",
+      onClick: () => action.onClick([...selectedIds])
+    },
+    action.icon && /* @__PURE__ */ React.createElement(Icon, { name: action.icon, size: "sm" }),
+    " ",
+    action.label
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ React.createElement(Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ React.createElement(Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), loading ? /* @__PURE__ */ React.createElement(LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? /* @__PURE__ */ React.createElement(ErrorState, { title: typeof error === "string" ? error : "Something went wrong." }, /* @__PURE__ */ React.createElement(Text, null, typeof error === "string" ? "Please try again." : "An error occurred while loading data.")) : displayRows.length === 0 ? /* @__PURE__ */ React.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React.createElement(EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ React.createElement(Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      bordered,
+      flush,
+      paginated: pageCount > 1,
+      page: activePage,
+      pageCount,
+      onPageChange: handlePageChange,
+      showFirstLastButtons: showFirstLastButtons != null ? showFirstLastButtons : pageCount > 5,
+      showButtonLabels,
+      ...maxVisiblePageButtons != null ? { maxVisiblePageButtons } : {}
+    },
+    /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, selectable && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }, /* @__PURE__ */ React.createElement(
+      Checkbox,
+      {
+        name: "datatable-select-all",
+        "aria-label": "Select all rows",
+        checked: allVisibleSelected,
+        onChange: handleSelectAll
+      }
+    )), columns.map((col) => {
+      const headerAlign = resolvedEditMode === "inline" && col.editable ? void 0 : col.align;
+      return /* @__PURE__ */ React.createElement(
+        TableHeader,
+        {
+          key: col.field,
+          width: getHeaderWidth(col),
+          align: headerAlign,
+          sortDirection: col.sortable ? sortState[col.field] || "none" : "never",
+          onSortChange: col.sortable ? () => handleSortChange(col.field) : void 0
+        },
+        col.label
+      );
+    }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }))),
+    /* @__PURE__ */ React.createElement(TableBody, null, displayRows.map(
+      (item, idx) => item.type === "group-header" ? /* @__PURE__ */ React.createElement(TableRow, { key: `group-${item.group.key}` }, selectable && /* @__PURE__ */ React.createElement(TableCell, { width: "min" }), columns.map((col, colIdx) => {
+        var _a, _b, _c;
+        return /* @__PURE__ */ React.createElement(TableCell, { key: col.field, width: getCellWidth(col), align: colIdx === 0 ? void 0 : col.align }, colIdx === 0 ? /* @__PURE__ */ React.createElement(
+          Link,
+          {
+            variant: "dark",
+            onClick: () => toggleGroup(item.group.key)
+          },
+          /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(Icon, { name: expandedGroups.has(item.group.key) ? "downCarat" : "right" }), /* @__PURE__ */ React.createElement(Text, { format: { fontWeight: "demibold" } }, item.group.label))
+        ) : ((_a = groupBy.aggregations) == null ? void 0 : _a[col.field]) ? groupBy.aggregations[col.field](item.group.rows, item.group.key) : ((_c = (_b = groupBy.groupValues) == null ? void 0 : _b[item.group.key]) == null ? void 0 : _c[col.field]) ?? "");
+      }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableCell, { width: "min" })) : useColumnRendering ? /* @__PURE__ */ React.createElement(TableRow, { key: item.row[rowIdField] ?? idx }, selectable && /* @__PURE__ */ React.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React.createElement(
+        Checkbox,
+        {
+          name: `select-${item.row[rowIdField]}`,
+          "aria-label": "Select row",
+          checked: selectedIds.has(item.row[rowIdField]),
+          onChange: (checked) => handleSelectRow(item.row[rowIdField], checked)
+        }
+      )), columns.map((col) => {
+        const rowId = item.row[rowIdField];
+        const isDiscreteEditing = resolvedEditMode === "discrete" && (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.field) === col.field;
+        const isRowEditing = editingRowId != null && rowId === editingRowId && col.editable;
+        const isShowingInput = isDiscreteEditing || isRowEditing || resolvedEditMode === "inline" && col.editable;
+        const cellAlign = isShowingInput ? void 0 : col.align;
+        return /* @__PURE__ */ React.createElement(TableCell, { key: col.field, width: isDiscreteEditing || isRowEditing ? "auto" : getCellWidth(col), align: cellAlign }, renderCellContent(item.row, col));
+      }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableCell, { width: "min" }, /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, (() => {
+        const resolvedRowActions = typeof rowActions === "function" ? rowActions(item.row) : rowActions;
+        const actions = Array.isArray(resolvedRowActions) ? resolvedRowActions : [];
+        return actions.map((action, i) => /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            key: i,
+            variant: action.variant || "transparent",
+            size: "extra-small",
+            onClick: () => action.onClick(item.row)
+          },
+          action.icon && /* @__PURE__ */ React.createElement(Icon, { name: action.icon, size: "sm" }),
+          action.label && ` ${action.label}`
+        ));
+      })()))) : renderRow(item.row)
+    )),
+    (footer || columns.some((col) => col.footer)) && /* @__PURE__ */ React.createElement(TableFooter, null, typeof footer === "function" ? footer(footerData) : /* @__PURE__ */ React.createElement(TableRow, null, selectable && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" }), columns.map((col) => {
+      const footerDef = col.footer;
+      const content = typeof footerDef === "function" ? footerDef(footerData) : footerDef || "";
+      return /* @__PURE__ */ React.createElement(TableHeader, { key: col.field, align: col.align }, content);
+    }), showRowActionsColumn && /* @__PURE__ */ React.createElement(TableHeader, { width: "min" })))
+  ));
+};
+export {
+  DataTable
+};