Table

Abstract

A table is supposed to work with an array of items

an array						<=> a table
an item							<=> a row
an item's property              <=> a cell

example data

;[
    { position: 6, mass: 12.011, symbol: "C", name: "Carbon" },
    { position: 7, mass: 14.007, symbol: "N", name: "Nitrogen" },
    { position: 39, mass: 88.906, symbol: "Y", name: "Yttrium" },
    { position: 56, mass: 137.33, symbol: "Ba", name: "Barium" },
    { position: 58, mass: 140.12, symbol: "Ce", name: "Cerium" },
]

Overall structure

Table
	Table.Thead
		Table.Tr
			Table.Th
			Table.Th
			Table.Th
	Table.Tbody
		Table.Tr
			Table.Td
			Table.Td
			Table.Td
		Table.Tr
			Table.Td
			Table.Td
			Table.Td
		...

the table head contains labels

Thead contains labels.. A th defines the label for that column.

the table body contains data, a row represents a record.

Tr represents a record. Each value is displayed in a distinct Td cell.

Regular rows

Fill the cell out of a property

<Table.Td>{record.name}</Table.Td>

Create a row out of an element, as the container of cells

;(record) => (
    <Table.Tr>
        <Table.Td>{record.name}</Table.Td>
        <Table.Td>{record.level}</Table.Td>
        <Table.Td>{record.class}</Table.Td>
    </Table.Tr>
)

Create a row list out of an element list, store it in rows

const rows = records.map((record) => (
    <Table.Tr>
        <Table.Td>{record.name}</Table.Td>
        <Table.Td>{record.level}</Table.Td>
        <Table.Td>{record.class}</Table.Td>
    </Table.Tr>
))

the Tbody is the container for the regulars rows. We provide the rows

<Table.Tbody>{rows}</Table.Tbody>

Header row

a single label 	    <=> a cell
all labels			<=> a row

The Thead is the container for the header row.

<Table.Thead>
    <Table.Tr>
        <Table.Th>{label1}</Table.Th>
        <Table.Th>{label2}</Table.Th>
        <Table.Th>{label3}</Table.Th>
    </Table.Tr>
</Table.Thead>