@smitch/fluid/lib/datatable/DataTable.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useRef } from "react";
import { twMerge } from "tailwind-merge";
import { titleCase } from "@smitch/js-lib";
var DataTable = function (_a) {
    var className = _a.className, data = _a.data, ignore = _a.ignore, caption = _a.caption, dividersX = _a.dividersX, dividersY = _a.dividersY, _b = _a.sortable, sortable = _b === void 0 ? true : _b;
    var _c = useState(data), tabledata = _c[0], setTabledata = _c[1];
    var _d = useState(""), sortby = _d[0], setSortby = _d[1];
    var _e = useState(true), ascending = _e[0], setAscending = _e[1];
    var scrollRef = useRef(null);
    var isIgnore = function (key) {
        if (!(ignore === null || ignore === void 0 ? void 0 : ignore.length))
            return false;
        if (ignore.indexOf(key) !== -1)
            return true;
        return false;
    };
    var sort = useCallback(function (key) {
        var asc = key === sortby ? !ascending : true;
        setTabledata(__spreadArray([], data, true).sort(function (a, b) { return (asc ? (a[key] > b[key] ? 1 : -1) : a[key] < b[key] ? 1 : -1); }));
        setAscending(asc);
        setSortby(key);
        if (scrollRef.current) {
            scrollRef.current.scrollTop = 0;
        }
    }, [data, ascending, sortby]);
    return (_jsx("div", { ref: scrollRef, className: "overflow-x-auto max-h-96 md:max-h-none", children: _jsxs("table", { className: twMerge("table table-fixed bg-white dark:bg-black group dark:border-slate-800 border text-base md:text-lg lg:text-xl ".concat(dividersX ? "dividersX" : "", " ").concat(dividersY ? "dividersY" : ""), className), children: [caption && (_jsx("caption", { className: "text-start text-lg md:text-xl lg:text-2x md:pb-2", children: caption })), _jsx("thead", { className: "sticky top-0 bg-slate-200 dark:bg-slate-600", children: _jsx("tr", { className: "group-[.dividersX]:border-b-2 dark:border-slate-800", children: Object.keys(tabledata[0]).map(function (key, index) {
                            return !isIgnore(key) && (_jsx("th", { onClick: function () { return sort(key); }, className: "p-2 group-[.dividersY]:border-r dark:border-slate-800\n\t\t\t\t\t\t\t\t\t\t\t".concat(typeof data[0][key] === "number" ? "justify-end text-end" : "justify-start text-start", "\n\t\t\t\t\t\t\t\t\t\t"), children: sortable ? (_jsx("span", { className: "cursor-pointer border-b border-dashed border-current hover:text-info ".concat(key === sortby ? "text-info" : ""), children: titleCase(key) })) : (titleCase(key)) }, index));
                        }) }) }), _jsx("tbody", { children: tabledata.map(function (obj, index) { return (_jsx("tr", { className: "group-[.dividersX]:border-b dark:border-slate-800", children: Object.keys(obj).map(function (key, index) {
                            return !isIgnore(key) && (_jsx("td", { className: "p-2 group-[.dividersY]:border-r dark:border-slate-800\n\t\t\t\t\t\t\t\t\t\t\t\t".concat(typeof obj[key] === "number" ? "justify-end text-end" : "justify-start text-start"), children: obj[key] }, index));
                        }) }, index)); }) })] }) }));
};
export default DataTable;
//# sourceMappingURL=DataTable.js.map