table-view-react/dist/table.js

A customizable, reusable table component for React that allows dynamic row rendering, customizable headers, optional buttons in each row, and click event handling.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const Table = ({ data, onViewClick, headingColors = { text: "black", background: "#F2F2F2" }, rowColors = { text: "black", background: "white" }, buttonText, buttonFunction, ranges = {}, cellColors = { light: "#90EE90", dark: "#FF6347" }, // Default dim green and dim red
 }) => {
    if (!data.length)
        return (0, jsx_runtime_1.jsx)("p", { children: "No data available" });
    const getCellColor = (column, value) => {
        if (!ranges[column])
            return "inherit"; // No range defined
        const { low, high } = ranges[column];
        if (low === high)
            return cellColors.light; // Avoid division by zero
        const ratio = (value - low) / (high - low);
        const clampedRatio = Math.max(0, Math.min(1, ratio)); // Keep within 0-1 range
        return clampedRatio === 1 ? cellColors.dark : cellColors.light;
    };
    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("style", { children: `
        .table-wrapper {
          width: 100%;
          overflow-x: auto;
          border-radius: 4px;
          border: 1px solid #ddd;
          position: relative;
        }
        .table-container {
          border-collapse: collapse;
          width: 100%;
          table-layout: auto;
          position: relative;
        }
        .table-container th,
        .table-container td {
          border: 1px solid #ddd;
          padding: 8px;
          text-align: center;
          white-space: nowrap;
        }
        .table-container th {
          color: ${headingColors.text};
          font-weight: 500;
          position: sticky;
          top: 0;
          background-color: ${headingColors.background};
          z-index: 2;
        }
        .table-container tr:hover td {
          background-color: #f9f9f9;
        }
        .table-container button {
          padding: 6px 12px;
          background: transparent;
          border: none;
          color: #4154e6;
          cursor: pointer;
          margin: 0 auto;
          display: flex;
          align-items: center;
          gap: 4px;
        }
        .table-container button:hover {
          text-decoration: underline;
        }

        .table-container th:first-child,
        .table-container td:first-child {
          position: sticky;
          left: 0;
          background-color: ${headingColors.background};
          z-index: 3;
        }

        .table-container th:last-child,
        .table-container td:last-child {
          position: sticky;
          right: 0;
          background-color: ${headingColors.background};
          z-index: 3;
        }
      ` }), (0, jsx_runtime_1.jsx)("div", { className: "table-wrapper", children: (0, jsx_runtime_1.jsxs)("table", { className: "table-container", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: Object.keys(data[0])[0] }), Object.keys(data[0])
                                        .slice(1)
                                        .map((key, index) => ((0, jsx_runtime_1.jsx)("th", { children: key }, index))), buttonText && (0, jsx_runtime_1.jsx)("th", { children: "Actions" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.map((row, index) => ((0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: Object.values(row)[0] }), Object.entries(row)
                                        .slice(1)
                                        .map(([key, value], colIndex) => ((0, jsx_runtime_1.jsx)("td", { style: {
                                            backgroundColor: typeof value === "number"
                                                ? getCellColor(key, value)
                                                : "inherit",
                                            color: "black",
                                        }, children: value }, colIndex))), buttonText && ((0, jsx_runtime_1.jsx)("td", { style: { backgroundColor: "orchid" }, children: (0, jsx_runtime_1.jsx)("button", { onClick: () => {
                                                if (buttonFunction) {
                                                    buttonFunction(row);
                                                }
                                                else if (onViewClick) {
                                                    onViewClick(row);
                                                }
                                            }, style: { color: "black", textDecoration: "none" }, children: buttonText || "View" }) }))] }, index))) })] }) })] }));
};
exports.default = Table;