vue-styleguidist
Version:
Vue components style guide generator
90 lines • 2.65 kB
JavaScript
import "core-js/modules/es.string.small.js";
import "core-js/modules/es.array.map.js";
import React from 'react';
import PropTypes from 'prop-types';
import Styled from 'rsg-components/Styled';
import cx from 'classnames';
export var styles = function styles(_ref) {
var space = _ref.space,
color = _ref.color,
fontFamily = _ref.fontFamily,
fontSize = _ref.fontSize;
return {
table: {
width: '100%',
borderCollapse: 'collapse',
marginBottom: space[6]
},
tableHead: {
borderBottom: [[1, color.border, 'solid']]
},
cellHeading: {
color: color.base,
paddingRight: space[2],
paddingBottom: space[1],
textAlign: 'left',
fontFamily: fontFamily.base,
fontWeight: 'bold',
fontSize: fontSize.small,
whiteSpace: 'nowrap'
},
dataRow: {
'&:hover': {
background: '#fbfbfb'
}
},
cell: {
color: color.base,
paddingRight: space[2],
paddingTop: space[1],
paddingBottom: space[1],
verticalAlign: 'top',
fontFamily: fontFamily.base,
fontSize: fontSize.small,
borderBottom: [[1, color.border, 'solid']],
'& div': {
isolate: false,
minWidth: 300
}
}
};
};
export function TableRenderer(_ref2) {
var classes = _ref2.classes,
columns = _ref2.columns,
rows = _ref2.rows,
getRowKey = _ref2.getRowKey;
return /*#__PURE__*/React.createElement("table", {
className: classes.table
}, /*#__PURE__*/React.createElement("thead", {
className: classes.tableHead
}, /*#__PURE__*/React.createElement("tr", null, columns.map(function (_ref3) {
var caption = _ref3.caption;
return /*#__PURE__*/React.createElement("th", {
key: caption,
className: classes.cellHeading
}, caption);
}))), /*#__PURE__*/React.createElement("tbody", null, rows.map(function (row) {
return /*#__PURE__*/React.createElement("tr", {
key: getRowKey(row),
className: classes.dataRow
}, columns.map(function (_ref4, index) {
var render = _ref4.render,
className = _ref4.className;
return /*#__PURE__*/React.createElement("td", {
key: index,
className: cx(classes.cell, className)
}, render(row));
}));
})));
}
TableRenderer.propTypes = {
classes: PropTypes.object.isRequired,
columns: PropTypes.arrayOf(PropTypes.shape({
caption: PropTypes.string.isRequired,
render: PropTypes.func.isRequired
})).isRequired,
rows: PropTypes.arrayOf(PropTypes.object).isRequired,
getRowKey: PropTypes.func.isRequired
};
export default Styled(styles)(TableRenderer);