Tables introduction

abstract

A table works with an array of items, where each item is a row, and each item's property (or member) is a cell.

An item may come as an object or as an array. Mantine supports both:

the item as an object

const items = [
    { 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" },
]

the item as an array

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

Note: we can transform an array of objects to an array of arrays by mapping over it:

players.map((p) => [p.name, p.level, p.class])

headers

A table usually comes with a headers row. We store them in an array:

const headers = ["Element position", "Atomic mass", "Symbol", "Element name"]