Svelteit

Tables

Example :: Borderless

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table borderless>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Bordered

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table bordered>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Bordered & Rounded

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table bordered rounded>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Hoverable

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Love	Always	Wins


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table hoverable>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Striped

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table striped>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Table Colors (Primary)

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Alfreds Futterkiste	Maria Anders	Germany


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table primary>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Table Responsive

Company	Contact	Country	What	Oh	Say	Like	GMO	Numbers	Things
Alfreds Futterkiste	Maria Anders	Germany	Fun	Cool	Yay	Wow	OMG	1,000,000,000,000	Chickens, Dogs, Frogs, Cats, Rats, Hats, Mats, This, That
Berglunds snabbköp	Christina Berglund	Sweden	Fun	Cool	Yay	Wow	OMG	1,000,000,000,000	Chickens, Dogs, Frogs, Cats, Rats, Hats, Mats, This, That
Alfreds Futterkiste	Maria Anders	Germany	Fun	Cool	Yay	Wow	OMG	1,000,000,000,000	Chickens, Dogs, Frogs, Cats, Rats, Hats, Mats, This, That
Berglunds snabbköp	Christina Berglund	Sweden	Fun	Cool	Yay	Wow	OMG	1,000,000,000,000,000,000,000,000	Chickens, Dogs, Frogs, Cats, Rats, Hats, Mats, This, That


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table success responsive>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

Example :: Table Kitchen Sink

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden
Alfreds Futterkiste	Maria Anders	Germany
Berglunds snabbköp	Christina Berglund	Sweden


<script>
  import { Table } from '@colorfuldots/svelteit'
</script>

<Table dark hoverable bordered rounded>
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
  </tbody>
</Table>

API

Prop Name	Type	Is Required	Default Value	Description
borderless	bool	false	false	Table has no borders inside or outside
bordered	bool	false	false	Table has borders inside and outside
primary, secondary, success, danger, warning, info, light, dark	bool	false	null	Sets table color
rounded	bool	false	null	Sets a rounded border to the table
hoverable	bool	false	false	Adds mouse hovering / highlighting over each table row
striped	bool	false	false	Adds odd / even zebra stripes to table rows
responsive	bool	false	false	Allows table to be properly contained on smaller screen sizes

Tables

A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables appear in print media, handwritten notes, computer software, architectural ornamentation, traffic signs, and many other places.