@ducor/react/dist/components/table.js

admin template ui interface

import { jsx as _jsx } from "react/jsx-runtime";
import { twMerge } from "tailwind-merge";
import colors from "../helpers/colors";
// Table component
export const Table = ({ isLoading, children, className, }) => {
    if (isLoading) {
        return (_jsx("div", { className: 'flex items-center justify-center py-4', children: _jsx("div", { className: twMerge("animate-spin rounded-full h-10 w-10 border-4 border-t-transparent", colors.borders.default) }) }));
    }
    return (_jsx("div", { className: 'relative overflow-auto', children: _jsx("table", { className: twMerge("w-full my-4 border", colors.borders.default, colors.textColor.default, className), role: 'table', children: children }) }));
};
// Table Head component
export const Thead = ({ children, className }) => (_jsx("thead", { className: twMerge("border-b", colors.borders.default, className), role: 'rowgroup', children: children }));
// Table Body component
export const Tbody = ({ children, className }) => (_jsx("tbody", { className: twMerge(className), role: 'rowgroup', children: children }));
// Table Row component
export const Tr = ({ children, className }) => (_jsx("tr", { className: twMerge("border-t", colors.borders.default, className), role: 'row', children: children }));
// Table Header Cell component
export const Th = ({ children, className }) => (_jsx("th", { className: twMerge("py-2 px-4 text-left text-sm font-semibold uppercase ", className), scope: 'col', role: 'columnheader', children: children }));
// Table Data Cell component
export const Td = ({ children, className }) => (_jsx("td", { className: twMerge("py-2 px-4 whitespace-nowrap text-sm", className), role: 'cell', children: children }));