@dossierhq/design/lib/components/Table/Table.js

The design system for Dossier.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { toClassName } from '../../utils/ClassNameUtils.js';
import { Icon } from '../Icon/Icon.js';
export const Table = ({ className, hoverable, children }) => {
    return (_jsx("table", { className: toClassName('table is-fullwidth', hoverable && 'is-hoverable', className), children: children }));
};
Table.displayName = 'Table';
Table.Head = ({ children }) => _jsx("thead", { children: children });
Table.Head.displayName = 'Table.Head';
Table.Body = ({ children }) => _jsx("tbody", { children: children });
Table.Body.displayName = 'Table.Body';
Table.Row = ({ clickable, sticky, onClick, children }) => {
    const className = toClassName(clickable && 'is-clickable', sticky && 'is-sticky-row');
    return (_jsx("tr", { className: className, onClick: onClick, children: children }));
};
Table.Row.displayName = 'Table.Row';
Table.Header = ({ clickable, narrow, order, onClick, children }) => {
    const className = toClassName((clickable || order !== undefined) && 'is-clickable', narrow && 'is-narrow', order !== undefined && 'is-order-header');
    const iconName = order === 'asc' ? 'orderAsc' : order === 'desc' ? 'orderDesc' : null;
    return (_jsxs("th", { className: className, onClick: onClick, children: [children, order !== undefined ? _jsx(Icon, { icon: iconName, text: true }) : null] }));
};
Table.Header.displayName = 'Table.Header';
Table.Cell = ({ className, colSpan, narrow, children }) => {
    return (_jsx("td", { className: toClassName(narrow && 'is-narrow', className), colSpan: colSpan, children: children }));
};
Table.Cell.displayName = 'Table.Cell';
//# sourceMappingURL=Table.js.map