Tables from data prop

In this version, the <Table> inner-markup is generated automatically, from the data we pass to the data prop:

<Table data={data} />

The data prop, of type TableData, mainly provides the head and body properties:

• body provides the rows: an array of arrays (an item is an array)
• head provides the headers.
• The caption property defines the table's title

const data: TableData = {
    caption: "Some elements from periodic table",
    head: ["Element position", "Atomic mass", "Symbol", "Element name"], // headers
    body: [
        // items
        [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"],
    ],
}