Table from data prop

We provide the complete table's data as a single object:

• The caption property defines the table's title
• The head property is the array of headers, in order.
• The body array is the list of items. Each item is itself an array that lists the values, in order.

const tableData: 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"],
    ],
}

transforming an object representing the elements to an array of values

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

data prop

We provide such object to the data prop. Mantine then creates the markup automatically.

<Table data={tableData} />