@coreui/react
Version:
UI Components Library for React.js
73 lines (70 loc) • 4.99 kB
JavaScript
import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { forwardRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import classNames from '../../_virtual/index.js';
import { CTableHead } from './CTableHead.js';
import { CTableHeaderCell } from './CTableHeaderCell.js';
import { CTableBody } from './CTableBody.js';
import { CTableDataCell } from './CTableDataCell.js';
import { CTableRow } from './CTableRow.js';
import { CTableFoot } from './CTableFoot.js';
import { CTableCaption } from './CTableCaption.js';
import { CTableResponsiveWrapper } from './CTableResponsiveWrapper.js';
import { colorPropType } from '../../props.js';
import { getColumnNames, getColumnLabel } from './utils.js';
var CTable = forwardRef(function (_a, ref) {
var _b;
var children = _a.children, align = _a.align, borderColor = _a.borderColor, bordered = _a.bordered, borderless = _a.borderless, caption = _a.caption, captionTop = _a.captionTop, className = _a.className, color = _a.color, columns = _a.columns, footer = _a.footer, hover = _a.hover, items = _a.items, responsive = _a.responsive, small = _a.small, striped = _a.striped, stripedColumns = _a.stripedColumns, tableFootProps = _a.tableFootProps, tableHeadProps = _a.tableHeadProps, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
var columnNames = useMemo(function () { return getColumnNames(columns, items); }, [columns, items]);
return (React.createElement(CTableResponsiveWrapper, { responsive: responsive },
React.createElement("table", __assign({ className: classNames('table', (_b = {},
_b["align-".concat(align)] = align,
_b["border-".concat(borderColor)] = borderColor,
_b["caption-top"] = captionTop || caption === 'top',
_b['table-bordered'] = bordered,
_b['table-borderless'] = borderless,
_b["table-".concat(color)] = color,
_b['table-hover'] = hover,
_b['table-sm'] = small,
_b['table-striped'] = striped,
_b['table-striped-columns'] = stripedColumns,
_b), className) }, rest, { ref: ref }),
((caption && caption !== 'top') || captionTop) && (React.createElement(CTableCaption, null, caption || captionTop)),
columns && (React.createElement(CTableHead, __assign({}, tableHeadProps),
React.createElement(CTableRow, null, columns.map(function (column, index) { return (React.createElement(CTableHeaderCell, __assign({}, (column._props && __assign({}, column._props)), (column._style && { style: __assign({}, column._style) }), { key: index }), getColumnLabel(column))); })))),
items && (React.createElement(CTableBody, null, items.map(function (item, index) { return (React.createElement(CTableRow, __assign({}, (item._props && __assign({}, item._props)), { key: index }), columnNames &&
columnNames.map(function (colName, index) {
// eslint-disable-next-line unicorn/no-negated-condition
return item[colName] !== undefined ? (React.createElement(CTableDataCell, __assign({}, (item._cellProps && __assign(__assign({}, (item._cellProps['all'] && __assign({}, item._cellProps['all']))), (item._cellProps[colName] && __assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
}))); }))),
children,
footer && (React.createElement(CTableFoot, __assign({}, tableFootProps),
React.createElement(CTableRow, null, footer.map(function (item, index) { return (React.createElement(CTableDataCell, __assign({}, (typeof item === 'object' && item._props && __assign({}, item._props)), { key: index }), typeof item === 'object' ? item.label : item)); })))))));
});
CTable.propTypes = {
align: PropTypes.oneOf(['bottom', 'middle', 'top']),
borderColor: PropTypes.string,
bordered: PropTypes.bool,
borderless: PropTypes.bool,
caption: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(['top'])]),
captionTop: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
color: colorPropType,
columns: PropTypes.array,
footer: PropTypes.array,
hover: PropTypes.bool,
items: PropTypes.array,
responsive: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
]),
small: PropTypes.bool,
striped: PropTypes.bool,
stripedColumns: PropTypes.bool,
tableFootProps: PropTypes.shape(__assign({}, CTableFoot.propTypes)),
tableHeadProps: PropTypes.shape(__assign({}, CTableHead.propTypes)),
};
CTable.displayName = 'CTable';
export { CTable };
//# sourceMappingURL=CTable.js.map