@vectara/vectara-ui/lib/components/infoTable/InfoTable.js

Vectara's design system, codified as a React and Sass component library

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 typeToRowClassMap = {
    sectionHeader: "vuiInfoTableRow--sectionHeader",
    footer: "vuiInfoTableRow--footer"
};
export const VuiInfoTable = ({ columns, rows, isHeaderVisible, padding = "xs" }) => {
    const classes = classNames("vuiInfoTable", 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));
                }) })] })));
};