Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Table

Table displays a table container that is used to organize and display data in a convenient way.
Category: Data Display Source

Import

 
import { Table } from "@prismane/core";

Table component has the following inner components:

  • - Table.Head - The header container for the table.
  • - Table.Foot - The footer container for the table.
  • - Table.Body - The body container for the table.
  • - Table.Caption - The caption container for the table.
  • - Table.Row - The row container for the table.
  • - Table.Cell - The cell container for the table.

Usage

 
<Table>
  <Table.Head ta="center">
    <Table.Row>
      <Table.Cell>To convert</Table.Cell>
      <Table.Cell>into</Table.Cell>
      <Table.Cell>multiply by</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>inches</Table.Cell>
      <Table.Cell>millimeTable.Rowes (mm)</Table.Cell>
      <Table.Cell>25.4</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>feet</Table.Cell>
      <Table.Cell>centimeTable.Rowes (cm)</Table.Cell>
      <Table.Cell>30.48</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot ta="center">
    <Table.Row>
      <Table.Cell>To convert</Table.Cell>
      <Table.Cell>into</Table.Cell>
      <Table.Cell>multiply by</Table.Cell>
    </Table.Row>
  </Table.Foot>
</Table>

Complex Table

 
<Table>
  <Table.Head ta="center">
    <Table.Row>
      <Table.Cell>To convert</Table.Cell>
      <Table.Cell>into</Table.Cell>
      <Table.Cell>multiply by</Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>inches</Table.Cell>
      <Table.Cell>millimeTable.Rowes (mm)</Table.Cell>
      <Table.Cell>25.4</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>feet</Table.Cell>
      <Table.Cell>centimeTable.Rowes (cm)</Table.Cell>
      <Table.Cell>30.48</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>feet</Table.Cell>
      <Table.Cell>centimeTable.Rowes (cm)</Table.Cell>
      <Table.Cell>30.48</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Foot ta="center">
    <Table.Row>
      <Table.Cell>To convert</Table.Cell>
      <Table.Cell>into</Table.Cell>
      <Table.Cell>multiply by</Table.Cell>
    </Table.Row>
  </Table.Foot>
  <Table.Caption ta="center">Some Caption</Table.Caption>
</Table>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackSwitch
Up NextTabs