@coreui/react-pro
Version:
UI Components Library for React.js
72 lines (69 loc) • 4.64 kB
JavaScript
import { __rest } 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';
const CTable = forwardRef((_a, ref) => {
var { children, align, borderColor, bordered, borderless, caption, captionTop, className, color, columns, footer, hover, items, responsive, small, striped, stripedColumns, tableFootProps, tableHeadProps } = _a, rest = __rest(_a, ["children", "align", "borderColor", "bordered", "borderless", "caption", "captionTop", "className", "color", "columns", "footer", "hover", "items", "responsive", "small", "striped", "stripedColumns", "tableFootProps", "tableHeadProps"]);
const columnNames = useMemo(() => getColumnNames(columns, items), [columns, items]);
return (React.createElement(CTableResponsiveWrapper, { responsive: responsive },
React.createElement("table", Object.assign({ className: classNames('table', {
[`align-${align}`]: align,
[`border-${borderColor}`]: borderColor,
[`caption-top`]: captionTop || caption === 'top',
'table-bordered': bordered,
'table-borderless': borderless,
[`table-${color}`]: color,
'table-hover': hover,
'table-sm': small,
'table-striped': striped,
'table-striped-columns': stripedColumns,
}, className) }, rest, { ref: ref }),
((caption && caption !== 'top') || captionTop) && (React.createElement(CTableCaption, null, caption || captionTop)),
columns && (React.createElement(CTableHead, Object.assign({}, tableHeadProps),
React.createElement(CTableRow, null, columns.map((column, index) => (React.createElement(CTableHeaderCell, Object.assign({}, (column._props && Object.assign({}, column._props)), (column._style && { style: Object.assign({}, column._style) }), { key: index }), getColumnLabel(column))))))),
items && (React.createElement(CTableBody, null, items.map((item, index) => (React.createElement(CTableRow, Object.assign({}, (item._props && Object.assign({}, item._props)), { key: index }), columnNames &&
columnNames.map((colName, index) => {
// eslint-disable-next-line unicorn/no-negated-condition
return item[colName] !== undefined ? (React.createElement(CTableDataCell, Object.assign({}, (item._cellProps && Object.assign(Object.assign({}, (item._cellProps['all'] && Object.assign({}, item._cellProps['all']))), (item._cellProps[colName] && Object.assign({}, item._cellProps[colName])))), { key: index }), item[colName])) : null;
})))))),
children,
footer && (React.createElement(CTableFoot, Object.assign({}, tableFootProps),
React.createElement(CTableRow, null, footer.map((item, index) => (React.createElement(CTableDataCell, Object.assign({}, (typeof item === 'object' && item._props && Object.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(Object.assign({}, CTableFoot.propTypes)),
tableHeadProps: PropTypes.shape(Object.assign({}, CTableHead.propTypes)),
};
CTable.displayName = 'CTable';
export { CTable };
//# sourceMappingURL=CTable.js.map