react-tablenex/dist/index.mjs

A next-gen React table component that simplifies data display

import React, { useMemo } from 'react';

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};

// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
  if (typeof document === "undefined") return;
  const head = document.head || document.getElementsByTagName("head")[0];
  const style = document.createElement("style");
  style.type = "text/css";
  if (insertAt === "top") {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }
  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

// src/style.css
styleInject(".tablenex_container {\n  width: 100%;\n  max-height: 100%;\n  position: relative;\n  border: var(--tablenex-container-border);\n  border-radius: var(--tablenex-rounded);\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n  overflow-x: auto;\n}\n.tablenex_container > * {\n  box-sizing: border-box;\n  font-size: var(--tablenex-font-size);\n}\n.tablenex_desktop {\n  display: block;\n}\n.tablenex_mobile-view {\n  display: none;\n}\n@media (max-width: 768px) {\n  .tablenex_desktop {\n    display: none;\n  }\n  .tablenex_mobile-view {\n    display: block;\n  }\n}\n.tablenex_table {\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;\n}\n.tablenex_thead {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_thead .tablenex_header-cell:last-child {\n  border-right-width: 0 !important;\n}\n.tablenex_thead-row {\n  display: table-row;\n}\n.tablenex_header-cell {\n  text-align: left;\n  font-weight: 500;\n  text-transform: capitalize;\n  letter-spacing: wider;\n  z-index: 10;\n  padding: var(--tablenex-spacing);\n  border-bottom: var(--tablenex-row-border);\n  border-right: var(--tablenex-column-border);\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_header-content {\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n.tablenex_text-truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.tablenex_data-cell {\n  letter-spacing: wider;\n  z-index: 10;\n  padding: var(--tablenex-spacing);\n  border-bottom: var(--tablenex-row-border);\n  border-right: var(--tablenex-column-border);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_cell-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 1rem;\n}\n.tablenex_row {\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_row .tablenex_data-cell:last-child {\n  border-right-width: 0 !important;\n}\n.tablenex_tbody .tablenex_row:last-child .tablenex_data-cell {\n  border-bottom-width: 0 !important;\n}\n.tablenex_row:hover,\n.tablenex_mobile-row:hover {\n  background-color: var(--tablenex-bg-hover);\n}\n.tablenex_empty-cell {\n  text-align: center;\n  font-weight: 500;\n  padding: var(--tablenex-spacing);\n}\n.tablenex_mobile {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 0.5rem;\n  background-color: var(--tablenex-bg-color);\n}\n.tablenex_mobile-row {\n  border: var(--tablenex-container-border);\n  border-radius: var(--tablenex-rounded);\n  overflow: hidden;\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_mobile-row .tablenex_mobile-cell:last-child {\n  border-bottom-width: 0 !important;\n}\n.tablenex_mobile-row .tablenex_mobile-cell:first-child {\n  border-top-width: 0 !important;\n}\n.tablenex_mobile-cell {\n  display: grid;\n  grid-template-columns: 35% auto;\n  border-bottom: var(--tablenex-row-border);\n  border-color: var(--tablenex-border-color);\n  background-color: var(--tablenex-bg-color);\n}\n.tablenex_mobile-cell-header {\n  font-weight: 500;\n  text-align: left;\n  text-transform: capitalize;\n  overflow: hidden;\n  letter-spacing: wider;\n  text-overflow: ellipsis;\n  padding: var(--tablenex-spacing);\n  border-right: var(--tablenex-column-border);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_mobile-cell-value {\n  text-align: right;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  padding: var(--tablenex-spacing);\n}\n.tablenex_mobile-empty {\n  text-align: center;\n  font-weight: 500;\n  border: var(--tablenex-container-border);\n  border-radius: var(--tablenex-rounded);\n  padding: var(--tablenex-spacing);\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_expanded-row {\n  width: 100%;\n  background-color: var(--tablenex-bg-color);\n}\n.tablenex_expanded-cell {\n  padding: 0;\n  border-bottom: var(--tablenex-row-border);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_mobile-expanded {\n  width: 100%;\n  overflow: hidden;\n  border: var(--tablenex-expanded-border);\n  border-radius: var(--tablenex-rounded);\n  border-color: var(--tablenex-border-color);\n  background-color: var(--tablenex-bg-color);\n}\n.tablenex_footer {\n  font-weight: 500;\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_footer-row {\n  background-color: inherit;\n  border-bottom: var(--tablenex-row-border);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_footer-cell {\n  border-top: var(--tablenex-row-border);\n  border-right: var(--tablenex-column-border);\n  padding: var(--tablenex-spacing);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_footer-cell:last-child {\n  border-right-width: 0 !important;\n}\n.tablenex_footer-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 1rem;\n}\n.tablenex_mobile-footer {\n  border: var(--tablenex-row-border);\n  border-radius: var(--tablenex-rounded);\n  overflow: hidden;\n  background-color: var(--tablenex-bg-color);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_mobile-footer-row {\n  display: flex;\n  justify-content: space-between;\n  gap: 0.75rem;\n  border-bottom: var(--tablenex-row-border);\n  border-color: var(--tablenex-border-color);\n}\n.tablenex_mobile-footer-row:last-child {\n  border-bottom-width: 0 !important;\n}\n.tablenex_mobile-footer-cell {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--tablenex-spacing);\n}\n.tablenex_mobile-footer-content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 1rem;\n}\n.tablenex_cell-sticky {\n  position: sticky;\n  z-index: 10;\n}\n.tablenex_cell-sticky-left {\n  left: 0;\n}\n.tablenex_cell-sticky-right {\n  right: 0;\n}\n");
var DEFAULT_COLOR_SCHEME = {
  PRIMARY: "transparent",
  SECONDARY: "#aac6f73b",
  ACCENT: "#aac6f73b",
  BORDER: "#aac6f757"
};
var DEFAULT_STYLES = {
  rounded: "sm",
  spacing: "md",
  columnBorder: "none",
  rowBorder: "sm",
  fontSize: "0.9rem"
};
var formatCellContent = (value) => {
  if (React.isValidElement(value)) return value;
  if (value == null) return "-";
  if (typeof value === "boolean") return value.toString();
  if (typeof value === "object") return JSON.stringify(value);
  return String(value);
};
var getCellWidth = (cell) => {
  return typeof cell === "string" ? "auto" : cell.width || "auto";
};
var extractCellText = (cell) => {
  return typeof cell === "string" ? cell : cell.accessor;
};
var normalizeKey = (key) => key.toLowerCase().trim();
var getRoundedValue = (value) => {
  const sizes = {
    sm: "6px",
    md: "8px",
    lg: "12px",
    xl: "16px"
  };
  return value && sizes[value] ? sizes[value] : value || "6px";
};
var getSpacingValue = (value) => {
  const sizes = {
    sm: "6px",
    md: "12px",
    lg: "16px",
    xl: "18px"
  };
  return value && sizes[value] ? sizes[value] : value || "12px";
};
var getBorderValue = (value) => {
  const sizes = {
    none: "0",
    sm: "1px solid",
    md: "2px solid",
    lg: "3px solid",
    xl: "4px solid"
  };
  return value && sizes[value] ? sizes[value] : value || "1px solid";
};
var TableNex = ({
  data,
  columns = [],
  fixedColumns = [],
  styledRows = [],
  styledColumns = [],
  expandedRows = [],
  footer = [],
  keyField = { keyId: "id", isVisible: true },
  noDataMessage = "No data found",
  colorScheme = {},
  responsive = false,
  styles = {}
}) => {
  const isDevelopment = process.env.NODE_ENV === "development" || !process.env.NODE_ENV;
  const effectiveColorScheme = __spreadValues(__spreadValues({}, DEFAULT_COLOR_SCHEME), colorScheme);
  const effectiveStyles = __spreadValues(__spreadValues({}, DEFAULT_STYLES), styles);
  const cellHeaders = useMemo(
    () => columns.length ? columns.map(extractCellText) : data.length ? Object.keys(data[0]) : [],
    [columns, data]
  );
  const normalizedHeaders = useMemo(
    () => cellHeaders.map(normalizeKey),
    [cellHeaders]
  );
  const legacyKeyField = typeof keyField === "string" ? { keyId: keyField, isVisible: true } : keyField;
  const { keyId, isVisible } = legacyKeyField;
  const normalizedKeyField = normalizeKey(keyId);
  if (isDevelopment && !normalizedHeaders.includes(normalizedKeyField) && columns.length) {
    throw new Error(
      `For keys, there should be one column with 'keyId in KeyField Prop' specified as "${keyId}" or an "id" column present. Available cells: ${cellHeaders.join(
        ", "
      )}.`
    );
  }
  const styledRowsMap = useMemo(() => {
    const map = /* @__PURE__ */ new Map();
    styledRows.forEach((sr) => {
      map.set(String(sr.keyValue), {
        className: sr.className || "",
        style: sr.style
      });
    });
    return map;
  }, [styledRows]);
  const styledColumnsMap = useMemo(() => {
    const map = /* @__PURE__ */ new Map();
    styledColumns.forEach((sc) => {
      map.set(normalizeKey(sc.columnName), {
        className: sc.className || "",
        style: sc.style
      });
    });
    return map;
  }, [styledColumns]);
  if (isDevelopment && data.length && styledRows.length) {
    const keyValuesInData = data.map((row) => {
      const key = Object.keys(row).find(
        (k) => normalizeKey(k) === normalizedKeyField
      );
      return key ? String(row[key]) : void 0;
    });
    const invalidStyledRows = styledRows.filter(
      (sr) => !keyValuesInData.includes(String(sr.keyValue))
    );
    if (invalidStyledRows.length) {
      throw new Error(
        `The following keyValues in styledRows do not match any row's "${keyId}" value: ${invalidStyledRows.map((sr) => `"${sr.keyValue}"`).join(", ")}. Available key values in data: ${keyValuesInData.filter(Boolean).join(", ")}.`
      );
    }
  }
  if (isDevelopment && data.length) {
    const keyValues = data.map((row) => {
      const key = Object.keys(row).find(
        (k) => normalizeKey(k) === normalizedKeyField
      );
      return key ? String(row[key]) : void 0;
    });
    const seen = /* @__PURE__ */ new Set();
    const duplicates = keyValues.filter(
      (kv) => kv && seen.has(kv) && !seen.add(kv)
    );
    if (duplicates.length) {
      throw new Error(
        `Duplicate values found for "${keyId}" in rows: ${duplicates.join(
          ", "
        )}. Each row must have a unique key value.`
      );
    }
  }
  const getRowStyles = (row) => {
    const key = Object.keys(row).find(
      (k) => normalizeKey(k) === normalizedKeyField
    );
    const keyValue = key ? String(row[key]) : void 0;
    return styledRowsMap.get(keyValue) || { className: "" };
  };
  const getCellStyles = (header) => {
    return styledColumnsMap.get(normalizeKey(header)) || { className: "", style: {} };
  };
  const renderHeaderCell = (cell, index) => {
    const cellText = extractCellText(cell);
    const displayContent = typeof cell === "string" ? cellText : cell.header || cellText;
    const width = getCellWidth(cell);
    const isFixed = fixedColumns.some(
      (fc) => normalizeKey(fc) === normalizeKey(cellText)
    );
    const isLastFixed = isFixed && index === cellHeaders.length - 1;
    const cellStyle = typeof cell !== "string" ? cell.style : void 0;
    const cellClassName = typeof cell !== "string" ? cell.className || "" : "";
    if (keyId === cellText && !isVisible) return null;
    return /* @__PURE__ */ React.createElement(
      "th",
      {
        key: cellText,
        className: `tablenex_header-cell ${isFixed ? "tablenex_cell-sticky" : ""} ${isLastFixed ? "tablenex_cell-sticky-right" : isFixed ? "tablenex_cell-sticky-left" : ""} ${cellClassName}`,
        style: __spreadValues({
          "--tablenex-row-border": getBorderValue(effectiveStyles.rowBorder),
          "--tablenex-column-border": getBorderValue(
            effectiveStyles.columnBorder
          ),
          "--tablenex-spacing": getSpacingValue(effectiveStyles.spacing),
          "--tablenex-bg-color": effectiveColorScheme.ACCENT,
          "--tablenex-border-color": effectiveColorScheme.BORDER,
          width,
          maxWidth: width === "auto" ? "none" : width
        }, cellStyle),
        role: "columnheader",
        "aria-label": cellText
      },
      /* @__PURE__ */ React.createElement("div", { className: "tablenex_header-content" }, /* @__PURE__ */ React.createElement("div", { className: "tablenex_text-truncate" }, displayContent))
    );
  };
  const renderDataCell = (row, header, cell, colIndex) => {
    const width = getCellWidth(cell);
    const isFixed = fixedColumns.some(
      (fc) => normalizeKey(fc) === normalizeKey(header)
    );
    const isLastFixed = isFixed && colIndex === cellHeaders.length - 1;
    const rowKey = Object.keys(row).find(
      (key) => normalizeKey(key) === normalizeKey(header)
    );
    const value = rowKey ? row[rowKey] : void 0;
    const renderedContent = typeof cell !== "string" && (cell == null ? void 0 : cell.render) ? cell.render(value, row) : formatCellContent(value);
    const { className: columnClassName, style: columnStyle } = getCellStyles(header);
    if (keyId === header && !isVisible) return null;
    return /* @__PURE__ */ React.createElement(
      "td",
      {
        key: `${row[keyId] || colIndex}-${header}`,
        className: `tablenex_data-cell ${isFixed ? "tablenex_cell-sticky" : ""} ${isLastFixed ? "tablenex_cell-sticky-right" : isFixed ? "tablenex_cell-sticky-left" : ""} ${columnClassName}`,
        style: __spreadValues({
          "--tablenex-row-border": getBorderValue(effectiveStyles.rowBorder),
          "--tablenex-column-border": getBorderValue(
            effectiveStyles.columnBorder
          ),
          "--tablenex-spacing": getSpacingValue(effectiveStyles.spacing),
          width,
          maxWidth: width === "auto" ? "none" : width,
          borderColor: effectiveColorScheme.BORDER,
          backgroundColor: isFixed ? effectiveColorScheme.SECONDARY : void 0
        }, columnStyle)
      },
      /* @__PURE__ */ React.createElement("div", { className: "tablenex_cell-content" }, renderedContent)
    );
  };
  const renderFooter = () => /* @__PURE__ */ React.createElement(
    "tfoot",
    {
      className: "tablenex_footer",
      style: {
        "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
        "--tablenex-border-color": effectiveColorScheme.BORDER
      }
    },
    footer.map((footerRow, rowIndex) => /* @__PURE__ */ React.createElement(
      "tr",
      {
        key: `footer-row-${rowIndex}`,
        className: `tablenex_footer-row ${footerRow.className || ""}`,
        style: __spreadValues({
          "--tablenex-column-border": getBorderValue(
            effectiveStyles.columnBorder
          ),
          "--tablenex-row-border": getBorderValue(effectiveStyles.rowBorder),
          "--tablenex-spacing": getSpacingValue(effectiveStyles.spacing),
          "--tablenex-border-color": effectiveColorScheme.BORDER
        }, footerRow.style)
      },
      footerRow.cells.map((cell, cellIndex) => /* @__PURE__ */ React.createElement(
        "td",
        {
          key: `footer-cell-${rowIndex}-${cellIndex}`,
          colSpan: cell.colSpan || 1,
          className: `tablenex_footer-cell ${cell.className || ""}`,
          style: __spreadValues({
            "--tablenex-border-color": effectiveColorScheme.BORDER
          }, cell.style)
        },
        /* @__PURE__ */ React.createElement("div", { className: "tablenex_footer-content" }, cell.content)
      ))
    ))
  );
  const renderTable = () => /* @__PURE__ */ React.createElement("table", { className: "tablenex_table", role: "table", "aria-label": "Data Table" }, /* @__PURE__ */ React.createElement(
    "thead",
    {
      className: "tablenex_thead",
      style: {
        "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
        "--tablenex-border-color": effectiveColorScheme.BORDER
      }
    },
    /* @__PURE__ */ React.createElement("tr", { className: "tablenex_thead-row" }, columns.length ? columns.map(renderHeaderCell) : cellHeaders.map(renderHeaderCell))
  ), /* @__PURE__ */ React.createElement("tbody", { className: "tablenex_tbody" }, data.length ? data.map((row, rowIndex) => {
    const { className, style } = getRowStyles(row);
    const key = Object.keys(row).find(
      (k) => normalizeKey(k) === normalizedKeyField
    );
    const keyValue = key ? row[key] : rowIndex;
    const expandedRowsAfter = expandedRows.filter(
      (er) => String(er.afterRowKey) === String(keyValue)
    );
    return /* @__PURE__ */ React.createElement(React.Fragment, { key: keyValue }, /* @__PURE__ */ React.createElement(
      "tr",
      {
        className: `tablenex_row ${className}`,
        style: __spreadValues({
          "--tablenex-bg-hover": effectiveColorScheme.SECONDARY,
          "--tablenex-row-border": getBorderValue(
            effectiveStyles.rowBorder
          ),
          "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
          "--tablenex-border-color": effectiveColorScheme.BORDER
        }, style),
        role: "row"
      },
      cellHeaders.map(
        (header, colIndex) => renderDataCell(
          row,
          header,
          columns[colIndex] || header,
          colIndex
        )
      )
    ), expandedRowsAfter.map((er, index) => /* @__PURE__ */ React.createElement(
      "tr",
      {
        key: `${keyValue}-expanded-${index}`,
        className: "tablenex_expanded-row",
        style: {
          "--tablenex-row-border": getBorderValue(
            effectiveStyles.rowBorder
          ),
          "--tablenex-bg-color": effectiveColorScheme.PRIMARY
        },
        role: "row"
      },
      /* @__PURE__ */ React.createElement(
        "td",
        {
          colSpan: cellHeaders.length,
          className: "tablenex_expanded-cell",
          style: {
            "--tablenex-border-color": effectiveColorScheme.BORDER,
            padding: 0
          }
        },
        er.element
      )
    )));
  }) : /* @__PURE__ */ React.createElement("tr", { className: "tablenex_empty-row", role: "row" }, /* @__PURE__ */ React.createElement(
    "td",
    {
      colSpan: cellHeaders.length,
      className: "tablenex_empty-cell tablenex_data-cell",
      style: {
        "--tablenex-spacing": getSpacingValue(effectiveStyles.spacing)
      }
    },
    noDataMessage
  ))), footer.length > 0 && data.length > 0 && renderFooter());
  const renderMobileFooter = () => /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "tablenex_mobile-footer",
      style: {
        "--tablenex-row-border": getBorderValue(effectiveStyles.rowBorder),
        "--tablenex-rounded": getRoundedValue(effectiveStyles.rounded),
        "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
        "--tablenex-border-color": effectiveColorScheme.BORDER
      }
    },
    footer.map((footerRow, rowIndex) => /* @__PURE__ */ React.createElement(
      "div",
      {
        key: `mobile-footer-row-${rowIndex}`,
        className: `tablenex_mobile-footer-row ${footerRow.className || ""}`,
        style: __spreadValues({
          "--tablenex-row-border": getBorderValue(effectiveStyles.rowBorder),
          "--tablenex-border-color": effectiveColorScheme.BORDER
        }, footerRow.style)
      },
      footerRow.cells.map((cell, cellIndex) => /* @__PURE__ */ React.createElement(
        "div",
        {
          key: `mobile-footer-cell-${rowIndex}-${cellIndex}`,
          className: `tablenex_mobile-footer-cell ${cell.className || ""}`,
          style: __spreadValues({
            "--tablenex-spacing": getSpacingValue(effectiveStyles.spacing)
          }, cell.style)
        },
        /* @__PURE__ */ React.createElement("div", { className: "tablenex_mobile-footer-content" }, cell.content)
      ))
    ))
  );
  const renderMobileView = () => /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "tablenex_mobile",
      style: {
        "--tablenex-bg-color": effectiveColorScheme.PRIMARY
      }
    },
    data.length ? data.map((row, rowIndex) => {
      const { className, style } = getRowStyles(row);
      const key = Object.keys(row).find(
        (k) => normalizeKey(k) === normalizedKeyField
      );
      const keyValue = key ? row[key] : rowIndex;
      const expandedRowsAfter = expandedRows.filter(
        (er) => String(er.afterRowKey) === String(keyValue)
      );
      return /* @__PURE__ */ React.createElement(React.Fragment, { key: keyValue }, /* @__PURE__ */ React.createElement(
        "div",
        {
          className: `tablenex_mobile-row ${className}`,
          style: __spreadValues({
            "--tablenex-container-border": getBorderValue(
              effectiveStyles.rowBorder
            ),
            "--tablenex-rounded": getRoundedValue(
              effectiveStyles.rounded
            ),
            "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
            "--tablenex-bg-hover": effectiveColorScheme.SECONDARY,
            "--tablenex-border-color": effectiveColorScheme.BORDER
          }, style),
          role: "row"
        },
        cellHeaders.map((header) => {
          const rowKey = Object.keys(row).find(
            (key2) => normalizeKey(key2) === normalizeKey(header)
          );
          const value = rowKey ? row[rowKey] : void 0;
          const { className: columnClassName, style: columnStyle } = getCellStyles(header);
          const cellDef = columns.find(
            (c) => extractCellText(c) === header
          );
          const cellStyle = cellDef == null ? void 0 : cellDef.style;
          const cellClassName = (cellDef == null ? void 0 : cellDef.className) || "";
          const displayContent = (cellDef == null ? void 0 : cellDef.header) || header;
          if (keyId === header && !isVisible) return null;
          return /* @__PURE__ */ React.createElement(
            "div",
            {
              key: `${row[keyId] || rowIndex}-${header}`,
              className: "tablenex_mobile-cell",
              role: "cell",
              style: {
                "--tablenex-row-border": getBorderValue(
                  effectiveStyles.rowBorder
                ),
                "--tablenex-border-color": effectiveColorScheme.BORDER,
                borderBlock: normalizeKey(header) === normalizedKeyField ? `2px solid ${effectiveColorScheme.BORDER}` : void 0,
                "--tablenex-bg-color": normalizeKey(header) === normalizedKeyField ? effectiveColorScheme.ACCENT : "transparent"
              }
            },
            /* @__PURE__ */ React.createElement(
              "div",
              {
                className: `tablenex_mobile-cell-header ${columnClassName} ${cellClassName}`,
                style: __spreadValues(__spreadValues({
                  "--tablenex-column-border": getBorderValue(
                    effectiveStyles.columnBorder
                  ),
                  "--tablenex-spacing": getSpacingValue(
                    effectiveStyles.spacing
                  ),
                  "--tablenex-border-color": effectiveColorScheme.BORDER
                }, cellStyle), columnStyle)
              },
              displayContent,
              styles.columnBorder === "none" && ": "
            ),
            /* @__PURE__ */ React.createElement(
              "div",
              {
                className: `tablenex_mobile-cell-value ${columnClassName}`,
                style: __spreadValues({
                  "--tablenex-spacing": getSpacingValue(
                    effectiveStyles.spacing
                  )
                }, columnStyle)
              },
              (cellDef == null ? void 0 : cellDef.render) ? cellDef.render(value, row) : formatCellContent(value)
            )
          );
        })
      ), expandedRowsAfter.map((er, index) => /* @__PURE__ */ React.createElement(
        "div",
        {
          key: `${keyValue}-expanded-${index}`,
          className: "tablenex_mobile-expanded",
          style: {
            "--tablenex-rounded": getRoundedValue(
              effectiveStyles.rounded
            ),
            "--tablenex-expanded-border": getBorderValue(
              effectiveStyles.rowBorder
            ),
            "--tablenex-border-color": effectiveColorScheme.BORDER,
            "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
            width: "100%"
          }
        },
        er.element
      )));
    }) : /* @__PURE__ */ React.createElement(
      "div",
      {
        className: "tablenex_mobile-empty",
        style: {
          "--tablenex-container-border": getBorderValue(
            effectiveStyles.rowBorder
          ),
          "--tablenex-rounded": getRoundedValue(effectiveStyles.rounded),
          "--tablenex-spacing": getSpacingValue(effectiveStyles.spacing),
          "--tablenex-border-color": effectiveColorScheme.BORDER,
          "--tablenex-bg-color": effectiveColorScheme.PRIMARY
        },
        role: "status"
      },
      noDataMessage
    ),
    footer.length > 0 && data.length > 0 && renderMobileFooter()
  );
  return /* @__PURE__ */ React.createElement(
    "div",
    {
      className: "tablenex_container",
      style: {
        "--tablenex-container-border": getBorderValue(
          effectiveStyles.rowBorder
        ),
        "--tablenex-rounded": getRoundedValue(effectiveStyles.rounded),
        "--tablenex-border-color": effectiveColorScheme.BORDER,
        "--tablenex-bg-color": effectiveColorScheme.PRIMARY,
        "--tablenex-font-size": effectiveStyles.fontSize || "0.9rem"
        // Fallback to default
      }
    },
    responsive ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "tablenex_desktop" }, renderTable()), /* @__PURE__ */ React.createElement("div", { className: "tablenex_mobile-view" }, renderMobileView())) : renderTable()
  );
};
var tablenex_default = TableNex;

// src/index.ts
var index_default = tablenex_default;

export { index_default as default };
//# sourceMappingURL=index.mjs.map
//# sourceMappingURL=index.mjs.map