@seragam-ui/table v0.2.2

@seragam-ui/table

<Table /> is a wrapper component for creating table.

Installation

yarn add @seragam-ui/table
# or
npm i @seragam-ui/table

How to Use

Basic Usage

<Table /> properties:

• fullWidth?: boolean: When set to true, it will make the <Table /> width to be 100% following the container's width.
• variant?: Change the style of the table
• bordered?: It makes the table have full bordered style
• responsive?: It makes the table tag wrapped with a div to make the table responsive (scrollable)
• headerVariant?: It makes the table have 2 header style color, white (basic) and grayish (subtle)
• size?: It changes the padding of each cells

To make <Table /> component shown properly, the structure of table inside <Table /> component must be like this:

<Table fullWidth>
  <thead>
    <tr>
      <th>...</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      ...
    </tr>
  </tbody>
</Table>

Example:

import { Table } from '@seragam-ui/table'

const App = () => {
  return (
    <Table>
      <thead>
        <tr>
          <th>Kolom 1</th>
          <th>Kolom 2</th>
          <th>Kolom 3</th>
          <th>Kolom 4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>
      </tbody>
    </Table>
  )
}