umami/components/common/Table.js
2020-08-10 19:54:03 -07:00

41 lines
1.1 KiB
JavaScript

import React from 'react';
import classNames from 'classnames';
import styles from './Table.module.css';
export default function Table({ columns, rows, empty }) {
if (empty && rows.length === 0) {
return empty;
}
return (
<div className={styles.table}>
<div className={styles.header}>
{columns.map(({ key, label, className, style, header }) => (
<div
key={key}
className={classNames(styles.head, className, header?.className)}
style={{ ...style, ...header?.style }}
>
{label}
</div>
))}
</div>
<div className={styles.body}>
{rows.map((row, rowIndex) => (
<div className={styles.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>
))}
</div>
</div>
);
}