@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
19 lines (18 loc) • 1.68 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
const tableStyles = createStyles({ name: "t84kt", styles: "width:100%;thead{text-align:start;padding-block-end:var(--cnvs-sys-padding-md);}td, th{min-width:6.25rem;padding-block-end:var(--cnvs-sys-padding-md);padding-inline-end:var(--cnvs-sys-padding-md);text-align:start;}" });
export const ComponentStatesTable = ({ rowProps, columnProps, children, }) => {
return (_jsxs("table", { className: tableStyles, children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Variants" }), columnProps.map(col => (_jsx("th", { children: col.label }, `component-table-heading-${col.label.toLowerCase().replace(' ', ',')}`)))] }) }), _jsx("tbody", { children: rowProps.map(row => {
return (_jsxs("tr", { children: [_jsx("td", { children: row.label }), columnProps.map(col => {
return (_jsx("td", { children: children({
...row.props,
...col.props,
// join class names between rows and columns
className: [row.props.className, col.props.className]
.filter(c => c)
.join(' '),
}) }, col.label.toLowerCase().replace(' ', '-')));
})] }, row.label.toLowerCase().replace(' ', '-')));
}) })] }));
};