ARNAT - styled-table

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import React from 'react';
import { Table, Tr } from '@arnat/styled-table';

const MyTable = props => (
  <Table>
    <thead>
      <tr>
        <th scope="col">Color</th>
        <th scope="col">Content</th>
      </tr>
    </thead>
    <tbody>
      <Tr active>
        <td>Active</td>
        <td>Content</td>
      </Tr>
      <Tr primary>
        <td>Primary</td>
        <td>Content</td>
      </Tr>
      <Tr secondary>
        <td>Secondary</td>
        <td>Content</td>
      </Tr>
      <Tr success>
        <td>Success</td>
        <td>Content</td>
      </Tr>
      <Tr danger>
        <td>Danger</td>
        <td>Content</td>
      </Tr>
      <Tr warning>
        <td>Warning</td>
        <td>Content</td>
      </Tr>
      <Tr info>
        <td>Info</td>
        <td>Content</td>
      </Tr>
      <Tr light>
        <td>Light</td>
        <td>Content</td>
      </Tr>
      <Tr dark>
        <td>Dark</td>
        <td>Content</td>
      </Tr>
    </tbody>
  </Table>
);

Properties

Properties which can be added to the component to change the visual appearance.

• tableDark only on Table Type: boolean
• theadDark only on Table Type: boolean
• theadLight only on Table Type: boolean
• striped only on Table Type: boolean
• bordered only on Table Type: boolean
• sm only on Table Type: boolean
• responsive only on Table Type: boolean
• responsiveSm only on Table Type: boolean
• responsiveMd only on Table Type: boolean
• responsiveLg only on Table Type: boolean
• responsiveXl only on Table Type: boolean
• hover Type: boolean
• primary only on Tr Type: boolean
• secondary only on Tr Type: boolean
• success only on Tr Type: boolean
• info only on Tr Type: boolean
• danger only on Tr Type: boolean
• warning only on Tr Type: boolean
• light only on Tr Type: boolean
• dark only on Tr Type: boolean
• active only on Tr Type: boolean