You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
738 B
JavaScript
33 lines
738 B
JavaScript
5 years ago
|
import styles from './table.module.css'
|
||
|
|
|
||
|
|
export default function Table({columns, rows, foot}) {
|
||
|
|
return (
|
||
|
|
<table className={styles.table}>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
{columns.map(column=>
|
||
|
|
<th key={column.name}>{column.name}</th>
|
||
|
|
)}
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{rows.map(row=>
|
||
|
|
<tr key={row.id} className={row.class}>
|
||
|
|
{columns.map(column=>
|
||
|
|
<td key={column.name}>{column.extractor(row)}</td>
|
||
|
|
)}
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
{foot && <tfoot>
|
||
|
|
<tr>
|
||
|
|
{foot.map((item, i) =>
|
||
|
|
<th key={i}>
|
||
|
|
{item}
|
||
|
|
</th>
|
||
|
|
)}
|
||
|
|
</tr>
|
||
|
|
</tfoot>}
|
||
|
|
</table>
|
||
|
|
)
|
||
|
|
}
|