styled-table-component

The bootstrap table component made with styled-components.

This is a modular approach to use bootstrap components for quick prototypes, as an entrypoint of your own component library, or if you need just one bootstrap component for your application.

Installation

npm install --save styled-table-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies

Usage

For detailed information take a look at the documentation.

import React from 'react';
import { Table, Tr } from 'styled-table-component';

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

License

MIT © Lukas Aichbauer