styple

Table

Toggle user can alter between checked and unchecked.

Example

Prop	Type	Default
`defaultOpen`	`boolean`	-
`open`	`boolean`	-
`onOpenChange`	`boolean`	-
`modal`	`boolean`	`true`

import { Table, Thead, Tbody, Tfoot, Tr, Th, Td } from "@styple/design-system";

<Table
  css={{
    maxWidth: "$4xl",
  }}
>
  <Thead>
    <Tr>
      <Th>Prop</Th>
      <Td>Type</Td>
      <Td>Default</Td>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Th>
        <Code>defaultOpen</Code>
      </Th>
      <Td>
        <Code color="normal">boolean</Code>
      </Td>
      <Td>-</Td>
    </Tr>
    <Tr>
      <Th>
        <Code>open</Code>
      </Th>
      <Td>
        <Code color="normal">boolean</Code>
      </Td>
      <Td>-</Td>
    </Tr>
    <Tr>
      <Th>
        <Code>onOpenChange</Code>
      </Th>
      <Td>
        <Code color="normal">boolean</Code>
      </Td>
      <Td>-</Td>
    </Tr>
  </Tbody>
  <Tfoot>
    <Tr>
      <Th>
        <Code>modal</Code>
      </Th>
      <Td>
        <Code color="normal">boolean</Code>
      </Td>
      <Td>
        <Code color="normal">true</Code>
      </Td>
    </Tr>
  </Tfoot>
</Table>

API Reference

Table

All parts of the table are styled components with no special props.

Switch

Tabs