Table

Semantic <table> with box-drawing-style grid borders and horizontal scrolling.

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

Basic

Prop	Type	Default
ordered	boolean	false
className	string	—

<Table>
  <Thead>
    <Tr>
      <Th scope="col">Prop</Th>
      <Th scope="col">Type</Th>
      <Th scope="col">Default</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>ordered</Td>
      <Td>boolean</Td>
      <Td>false</Td>
    </Tr>
    <Tr>
      <Td>className</Td>
      <Td>string</Td>
      <Td>—</Td>
    </Tr>
  </Tbody>
</Table>

Row headers

Component	Element
Button	button
Anchor	a

<Table>
  <Thead>
    <Tr>
      <Th scope="col">Component</Th>
      <Th scope="col">Element</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Th scope="row">Button</Th>
      <Td>button</Td>
    </Tr>
    <Tr>
      <Th scope="row">Anchor</Th>
      <Td>a</Td>
    </Tr>
  </Tbody>
</Table>

Horizontal scroll

Prop	Type	Description
language	CodeBlockLanguage	Prism grammar used to tokenize the snippet

<div style={{ maxWidth: 320 }}>
  <Table>
    <Thead>
      <Tr>
        <Th scope="col">Prop</Th>
        <Th scope="col">Type</Th>
        <Th scope="col">Description</Th>
      </Tr>
    </Thead>
    <Tbody>
      <Tr>
        <Td>language</Td>
        <Td>CodeBlockLanguage</Td>
        <Td>Prism grammar used to tokenize the snippet</Td>
      </Tr>
    </Tbody>
  </Table>
</div>

Props

All native <table> attributes are also accepted.

Thead Props

All native <thead> attributes are also accepted.

Tbody Props

All native <tbody> attributes are also accepted.

Tr Props

All native <tr> attributes are also accepted.

Th Props

All native <th> attributes are also accepted.

Td Props

All native <td> attributes are also accepted.