import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import NoData from 'components/common/NoData'; import styles from './Table.module.css'; function Table({ columns, rows, empty, className, bodyClassName, rowKey, showHeader = true, children, }) { if (empty && rows.length === 0) { return empty; } return (
{showHeader && (
{columns.map(({ key, label, className, style, header }) => (
{label}
))}
)}
{rows.length === 0 && } {!children && rows.map((row, index) => { const id = rowKey ? rowKey(row) : index; return ; })} {children}
); } const styledObject = PropTypes.shape({ className: PropTypes.string, style: PropTypes.object, }); Table.propTypes = { columns: PropTypes.arrayOf( PropTypes.shape({ cell: styledObject, className: PropTypes.string, header: styledObject, key: PropTypes.string, label: PropTypes.node, render: PropTypes.func, style: PropTypes.object, }), ), rows: PropTypes.arrayOf(PropTypes.object), empty: PropTypes.node, className: PropTypes.string, bodyClassName: PropTypes.string, rowKey: PropTypes.func, showHeader: PropTypes.bool, children: PropTypes.node, }; export default Table; export const TableRow = ({ columns, row }) => (
{columns.map(({ key, render, className, style, cell }, index) => (
{render ? render(row) : row[key]}
))}
);