3.0.1






Table

Small


Close
import React from "react"
import {Table} from "../../"

function TableSm() {
  return (
    <Table size="sm" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSm;
Medium


Close
import React from "react"
import {Table} from "../../"

function TableMd() {
  return (
    <Table size="md" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMd;
Large


Close
import React from "react"
import {Table} from "../../"

function TableLg() {
  return (
    <Table size="lg" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableLg;
Table Container


Close
import React from "react"
import {Table} from "../../"

function TableContainer() {
  return (
    <Table
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableContainer;
Disable Hover


Close
import React from "react"
import {Table} from "../../"

function TableDisableHover() {
  return (
    <Table disable_hover container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDisableHover;
Multi-line


Close
import React from "react"
import {Table} from "../../"

function TableMultiline() {
  return (
    <Table size="sm" container={false}>
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableMultiline;
Force Single Line


Close
import React from "react"
import {Table} from "../../"

function TableSingleLine() {
  return (
    <Table single_line container={false}
        size="sm"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}<br/>{`Value 1`}<br/>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}<br/>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableSingleLine;
Table Dark


Close
import React from "react"
import {Table} from "../../"

function TableDark() {
  return (
    <Table dark container={false}
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableDark;
Table Container Dark


Close
import React from "react"
import {Table} from "../../"

function TableContainerDark() {
  return (
    <Table
        dark
        size="md"
    >
      <thead>
        <tr>
          <th>{`Column 1`}</th>
          <th>{`Column 2`}</th>
          <th>{`Column 3`}</th>
          <th>{`Column 4`}</th>
          <th>{`Column 5`}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
        <tr>
          <td>{`Value 1`}</td>
          <td>{`Value 2`}</td>
          <td>{`Value 3`}</td>
          <td>{`Value 4`}</td>
          <td>{`Value 5`}</td>
        </tr>
      </tbody>
    </Table>
  )
}

export default TableContainerDark;