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

A Next/React ui-component libray.

'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-auto max-h-96 lg: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: 'pb-2 text-start text-lg md:text-xl lg:text-2x', 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;