@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
30 lines (29 loc) • 1.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
const PADDING = ["xxs", "xs", "s"];
const paddingToClassMap = {
xxs: "vuiInfoTable--paddingXxs",
xs: "vuiInfoTable--paddingXs",
s: "vuiInfoTable--paddingS"
};
const alignToClassMap = {
top: "vuiInfoTable--alignTop",
middle: "vuiInfoTable--alignMiddle",
bottom: "vuiInfoTable--alignBottom"
};
const typeToRowClassMap = {
sectionHeader: "vuiInfoTableRow--sectionHeader",
footer: "vuiInfoTableRow--footer"
};
export const VuiInfoTable = ({ columns, rows, isHeaderVisible, padding = "xs", align = "middle" }) => {
const classes = classNames("vuiInfoTable", alignToClassMap[align], paddingToClassMap[padding]);
return (_jsxs("table", Object.assign({ className: classes }, { children: [isHeaderVisible && (_jsx("thead", { children: _jsx("tr", { children: columns.map(({ name, render, width, align }) => (_jsx("th", Object.assign({ style: { width, textAlign: align !== null && align !== void 0 ? align : "left" } }, { children: render }), name))) }) })), _jsx("tbody", { children: rows.map(({ values, type }, index) => {
const rowClasses = type && typeToRowClassMap[type];
return (_jsx("tr", Object.assign({ className: rowClasses }, { children: columns.map(({ name, width, align }) => {
const value = values[name];
if (value !== undefined) {
return (_jsx("td", Object.assign({ style: { width, textAlign: align !== null && align !== void 0 ? align : "left" }, colSpan: value.colSpan }, { children: value.render }), name));
}
}) }), index));
}) })] })));
};