Table from data object

Provide complete table data as an object, containing some arrays:

• Array of labels for the head
• Array of elements for the body.
• We cannot provide elements as objects as the properties ordering is unclear. We instead provides the elements as arrays of properties, so that each property has a clear order. For the table body, the cell content is the property value, and the property name is unused. As such, we represent an element as an array/list of values.

const tableData: TableData = {
    caption: "Some elements from periodic table",
    head: ["Element position", "Atomic mass", "Symbol", "Element name"],
    body: [
        [6, 12.011, "C", "Carbon"],
        [7, 14.007, "N", "Nitrogen"],
        [39, 88.906, "Y", "Yttrium"],
        [56, 137.33, "Ba", "Barium"],
        [58, 140.12, "Ce", "Cerium"],
    ],
}

transforming an element as an object to an element as an array of values

(player) => [player.name, player.level, player.class]

data prop

The table component receives the data in the data attribute. In that case, it creates all the markup (head, body, rows) automatically.

<Table data={tableData} />