React Native Mantine › Typography

Table

Render data in rows and columns

Import: import { Table } from 'react-native-mantine';

Usage

import { Table } from 'react-native-mantine';

// Basic table
<Table>
  <Table.THead>
    <Table.Tr>
      <Table.Th>Name</Table.Th>
      <Table.Th>Symbol</Table.Th>
      <Table.Th>Mass</Table.Th>
    </Table.Tr>
  </Table.THead>
  <Table.TBody>
    <Table.Tr>
      <Table.Td>Carbon</Table.Td>
      <Table.Td>C</Table.Td>
      <Table.Td>12.011</Table.Td>
    </Table.Tr>
    <Table.Tr>
      <Table.Td>Nitrogen</Table.Td>
      <Table.Td>N</Table.Td>
      <Table.Td>14.007</Table.Td>
    </Table.Tr>
  </Table.TBody>
</Table>

// With all features
<Table
  striped
  withBorder
  withColumnBorders
  horizontalSpacing="md"
  verticalSpacing="sm"
  fontSize="md"
>
  <Table.Caption>Chemical Elements</Table.Caption>
  <Table.THead>
    <Table.Tr>
      <Table.Th>Element</Table.Th>
      <Table.Th>Symbol</Table.Th>
    </Table.Tr>
  </Table.THead>
  <Table.TBody>
    {elements.map((element) => (
      <Table.Tr key={element.name}>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
      </Table.Tr>
    ))}
  </Table.TBody>
</Table>

Source on GitHub · npm