Updated log table rendering.

This commit is contained in:
Mike Cao 2020-10-09 04:21:59 -07:00
parent b682e41aff
commit 8e0ea48c87
26 changed files with 221 additions and 37 deletions

View file

@ -3,7 +3,15 @@ import classNames from 'classnames';
import NoData from 'components/common/NoData';
import styles from './Table.module.css';
export default function Table({ className, columns, rows, empty }) {
export default function Table({
columns,
rows,
empty,
className,
bodyClassName,
rowKey,
children,
}) {
if (empty && rows.length === 0) {
return empty;
}
@ -21,22 +29,29 @@ export default function Table({ className, columns, rows, empty }) {
</div>
))}
</div>
<div className={styles.body}>
<div className={classNames(styles.body, bodyClassName)}>
{rows.length === 0 && <NoData />}
{rows.map((row, rowIndex) => (
<div className={classNames(styles.row, 'row')} key={rowIndex}>
{columns.map(({ key, render, className, style, cell }) => (
<div
key={`${rowIndex}${key}`}
className={classNames(styles.cell, className, cell?.className)}
style={{ ...style, ...cell?.style }}
>
{render ? render(row) : row[key]}
</div>
))}
</div>
))}
{!children &&
rows.map((row, index) => {
const id = rowKey ? rowKey(row) : index;
return <TableRow key={id} columns={columns} row={row} />;
})}
{children}
</div>
</div>
);
}
export const TableRow = ({ columns, row }) => (
<div className={classNames(styles.row, 'row')}>
{columns.map(({ key, render, className, style, cell }, index) => (
<div
key={`${key}-${index}`}
className={classNames(styles.cell, className, cell?.className)}
style={{ ...style, ...cell?.style }}
>
{render ? render(row) : row[key]}
</div>
))}
</div>
);