Table data for all examples:
Element position | Element name | Symbol | Atomic mass |
---|
6 | Carbon | C | 12.011 |
7 | Nitrogen | N | 14.007 |
39 | Yttrium | Y | 88.906 |
56 | Barium | Ba | 137.33 |
58 | Cerium | Ce | 140.12 |
You can use data
prop to automatically generate table rows from array of React nodes.
data
prop accepts an object with the following properties:
head
– an array of React nodes (React.ReactNode[]
) to render Table.Th
in Table.Thead
foot
– an array of React nodes (React.ReactNode[]
) to render Table.Th
in Table.Tfoot
body
- an array of arrays of React nodes (React.ReactNode[][]
) to render Table.Td
in Table.Tbody
caption
– a React node to render Table.Caption
Some elements from periodic tableElement position | Atomic mass | Symbol | Element name |
---|
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 |
Set stickyHeader
to make table header sticky. To customize top position of the header use stickyHeaderOffset
prop:
it is useful when you have a fixed header in your application. For example, Mantine documentation website has a fixed
header with 60px height:
Element position | Element name | Symbol | Atomic mass |
---|
6 | Carbon | C | 12.011 |
7 | Nitrogen | N | 14.007 |
39 | Yttrium | Y | 88.906 |
56 | Barium | Ba | 137.33 |
58 | Cerium | Ce | 140.12 |
Scroll page to see sticky thead
To control spacing use horizontalSpacing
and verticalSpacing
props. Both props support spacing from theme.spacing
and any valid CSS value to set cell padding:
Position | Name | Symbol |
---|
6 | Carbon | C |
7 | Nitrogen | N |
39 | Yttrium | Y |
56 | Barium | Ba |
58 | Cerium | Ce |
Table support tfoot and caption elements. Set captionSide
prop (top or bottom) to change caption position.
Some elements from periodic tableElement position | Element name | Symbol | Atomic mass |
---|
6 | Carbon | C | 12.011 |
7 | Nitrogen | N | 14.007 |
39 | Yttrium | Y | 88.906 |
56 | Barium | Ba | 137.33 |
58 | Cerium | Ce | 140.12 |
Element position | Element name | Symbol | Atomic mass |
---|
6 | Carbon | C | 12.011 |
7 | Nitrogen | N | 14.007 |
39 | Yttrium | Y | 88.906 |
56 | Barium | Ba | 137.33 |
58 | Cerium | Ce | 140.12 |
To prevent viewport overflow wrap Table
with Table.ScrollContainer
.
The component accepts minWidth
prop which sets minimum width below which table will be scrollable.
By default, Table.ScrollContainer
uses ScrollArea, you can change it
to native scrollbars by setting type="native"
:
Set variant="vertical"
to render table with vertical layout:
Epic name | 7.x migration |
---|
Status | Open |
---|
Total issues | 135 |
---|
Total story points | 874 |
---|
Last updated at | September 26, 2024 17:41:26 |
---|
Set tabularNums
prop to render numbers in tabular style. It sets
font-variant-numeric: tabular-nums
which makes numbers to have equal width.
This is useful when you have columns with numbers and you want them to be aligned:
Product | Units sold |
---|
Apples | 2,214,411,234 |
Oranges | 9,983,812,411 |
Bananas | 1,234,567,890 |
Pineapples | 9,948,810,000 |
Pears | 9,933,771,111 |
| Element position | Element name | Symbol | Atomic mass |
---|
| 6 | Carbon | C | 12.011 |
| 7 | Nitrogen | N | 14.007 |
| 39 | Yttrium | Y | 88.906 |
| 56 | Barium | Ba | 137.33 |
| 58 | Cerium | Ce | 140.12 |