StaticTable

topHeaderColor

string

"#616877"

rows

object

leftHeaderColor

string

"#E6E6E6"

topHeaders

array

['Column 1', 'Column 2', 'Column 3']

className

string

children

array

margin

object

Basic Usage

This is the simplest way to use the StaticTable. You must define the topHeaders as shown. Each item will be the title for each column. You can use the table tags just as you would do it on plain HTML.

<StaticTable
  topHeaders={[
    'Fullname',
    'Age',
    'Favorite color',
    'Instrument',
    'How many Grammys?',
    'genre',
    'Is registered?',
  ]}
>
  <tr>
    <td>John Lennon</td>
    <td>40</td>
    <td>blue</td>
    <td>guitar, piano, vocals</td>
    <td>4</td>
    <td>Rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <td>David Gilmour</td>
    <td>52</td>
    <td>red</td>
    <td>guitar, vocals</td>
    <td>0</td>
    <td>Progressive rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <td>Charlie Parker</td>
    <td>32</td>
    <td>yellow</td>
    <td>saxophone</td>
    <td>4</td>
    <td>Jazz</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
</StaticTable>

<StaticTable
  topHeaders={[
    'Fullname',
    'Age',
    'Favorite color',
    'Instrument',
    'How many Grammys?',
    'genre',
    'Is registered?',
  ]}
>
  <tr>
    <td>John Lennon</td>
    <td>40</td>
    <td>blue</td>
    <td>guitar, piano, vocals</td>
    <td>4</td>
    <td>Rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <td>David Gilmour</td>
    <td>52</td>
    <td>red</td>
    <td>guitar, vocals</td>
    <td>0</td>
    <td>Progressive rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <td>Charlie Parker</td>
    <td>32</td>
    <td>yellow</td>
    <td>saxophone</td>
    <td>4</td>
    <td>Jazz</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
</StaticTable>

Left row headers

You can define left row headers using the class row-header on the first element of each row. You should also use the <th></th> tag instead of <td> but it's not mandatory in order to make it work.

<StaticTable
  topHeaders={[
    'Fullname',
    'Age',
    'Favorite color',
    'Instrument',
    'How many Grammys?',
    'genre',
    'Is registered?',
  ]}
>
  <tr>
    <th className="row-header">John Lennon</th>
    <td>40</td>
    <td>blue</td>
    <td>guitar, piano, vocals</td>
    <td>4</td>
    <td>Rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <td className="row-header">David Gilmour</td>
    <td>52</td>
    <td>red</td>
    <td>guitar, vocals</td>
    <td>0</td>
    <td>Progressive rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Charlie Parker</th>
    <td>32</td>
    <td>yellow</td>
    <td>saxophone</td>
    <td>4</td>
    <td>Jazz</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
</StaticTable>

<StaticTable
  topHeaders={[
    'Fullname',
    'Age',
    'Favorite color',
    'Instrument',
    'How many Grammys?',
    'genre',
    'Is registered?',
  ]}
>
  <tr>
    <th className="row-header">John Lennon</th>
    <td>40</td>
    <td>blue</td>
    <td>guitar, piano, vocals</td>
    <td>4</td>
    <td>Rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <td className="row-header">David Gilmour</td>
    <td>52</td>
    <td>red</td>
    <td>guitar, vocals</td>
    <td>0</td>
    <td>Progressive rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Charlie Parker</th>
    <td>32</td>
    <td>yellow</td>
    <td>saxophone</td>
    <td>4</td>
    <td>Jazz</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
</StaticTable>

Max items

It happens that sometimes you need to show a long table with a lot of rows. You can set the amount of rows you want to show from that list using the attribute displayCount as you can see below. If the number assigned to displayCount is bigger than the rows in your table, this attribute wont have any effect.

When using the displayCount attribute, a button will appear at the bottom of the table with a "Show more" text. It will toggle between the total of rows and the defined by you in displayCount.

<StaticTable
  rows={{ displayCount: 4 }}
  topHeaders={[
    'Fullname',
    'Age',
    'Favorite color',
    'Instrument',
    'How many Grammys?',
    'genre',
    'Is registered?',
  ]}
>
  <tr>
    <th className="row-header">John Lennon</th>
    <td>40</td>
    <td>blue</td>
    <td>guitar, piano, vocals</td>
    <td>4</td>
    <td>Rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">David Gilmour</th>
    <td>52</td>
    <td>red</td>
    <td>guitar, vocals</td>
    <td>0</td>
    <td>Progressive rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Charlie Parker</th>
    <td>32</td>
    <td>yellow</td>
    <td>saxophone</td>
    <td>4</td>
    <td>Jazz</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Michael Jackson</th>
    <td>48</td>
    <td>gold</td>
    <td>vocals</td>
    <td>13</td>
    <td>Pop</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Kurt Cobain</th>
    <td>24</td>
    <td>purple</td>
    <td>guitar, vocals</td>
    <td>1</td>
    <td>Grunge</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Elvis Presley</th>
    <td>38</td>
    <td>white</td>
    <td>guitar, vocals</td>
    <td>10</td>
    <td>Rock and roll</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Kurt Cobain</th>
    <td>24</td>
    <td>purple</td>
    <td>guitar, vocals</td>
    <td>1</td>
    <td>Grunge</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Elvis Presley</th>
    <td>38</td>
    <td>white</td>
    <td>guitar, vocals</td>
    <td>10</td>
    <td>Rock and roll</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
</StaticTable>

<StaticTable
  rows={{ displayCount: 4 }}
  topHeaders={[
    'Fullname',
    'Age',
    'Favorite color',
    'Instrument',
    'How many Grammys?',
    'genre',
    'Is registered?',
  ]}
>
  <tr>
    <th className="row-header">John Lennon</th>
    <td>40</td>
    <td>blue</td>
    <td>guitar, piano, vocals</td>
    <td>4</td>
    <td>Rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">David Gilmour</th>
    <td>52</td>
    <td>red</td>
    <td>guitar, vocals</td>
    <td>0</td>
    <td>Progressive rock</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Charlie Parker</th>
    <td>32</td>
    <td>yellow</td>
    <td>saxophone</td>
    <td>4</td>
    <td>Jazz</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Michael Jackson</th>
    <td>48</td>
    <td>gold</td>
    <td>vocals</td>
    <td>13</td>
    <td>Pop</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Kurt Cobain</th>
    <td>24</td>
    <td>purple</td>
    <td>guitar, vocals</td>
    <td>1</td>
    <td>Grunge</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Elvis Presley</th>
    <td>38</td>
    <td>white</td>
    <td>guitar, vocals</td>
    <td>10</td>
    <td>Rock and roll</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Kurt Cobain</th>
    <td>24</td>
    <td>purple</td>
    <td>guitar, vocals</td>
    <td>1</td>
    <td>Grunge</td>
    <td>
      <Icon name="close" size="36px" altText="close icon" />
    </td>
  </tr>
  <tr>
    <th className="row-header">Elvis Presley</th>
    <td>38</td>
    <td>white</td>
    <td>guitar, vocals</td>
    <td>10</td>
    <td>Rock and roll</td>
    <td>
      <Icon name="checkmark" size="36px" altText="checkmark icon" />
    </td>
  </tr>
</StaticTable>

Aditional types

Product atributes

<h3>Product atributes</h3>
<StaticTable
  topHeaders={['Type of Discount', 'Description']}
  className="product-attributes"
>
  <tr>
    <td>Multi-car</td>
    <td>Insure more than one car and save up to 26% on your premiums</td>
  </tr>
  <tr>
    <td>Responsible driver</td>
    <td>
      If you go five years without any accidents, you can save up to 5% on
      some coverage options
    </td>
  </tr>
  <tr>
    <td>Good Student</td>
    <td>
      If you have students that maintain good grades, you could recieve up to
      6% off certain coverage options. Most states require policyholders to be
      between the ages of 16 and 25 and full-time students with a "B" average
      or better
    </td>
  </tr>
  <tr>
    <td>Bundling</td>
    <td>
      Bundling your car insurance policy with your homeowners, renters or
      motorcycle insurance policies can earn you discounted rates
    </td>
  </tr>
</StaticTable>

<h3>Product atributes</h3>
<StaticTable
  topHeaders={['Type of Discount', 'Description']}
  className="product-attributes"
>
  <tr>
    <td>Multi-car</td>
    <td>Insure more than one car and save up to 26% on your premiums</td>
  </tr>
  <tr>
    <td>Responsible driver</td>
    <td>
      If you go five years without any accidents, you can save up to 5% on
      some coverage options
    </td>
  </tr>
  <tr>
    <td>Good Student</td>
    <td>
      If you have students that maintain good grades, you could recieve up to
      6% off certain coverage options. Most states require policyholders to be
      between the ages of 16 and 25 and full-time students with a "B" average
      or better
    </td>
  </tr>
  <tr>
    <td>Bundling</td>
    <td>
      Bundling your car insurance policy with your homeowners, renters or
      motorcycle insurance policies can earn you discounted rates
    </td>
  </tr>
</StaticTable>

Headless List

<h3>Headless list</h3>
<StaticTable
  topHeaders={['Type of Discount', 'Description']}
  className="headless-list"
>
  <tr>
    <td>Multi-car</td>
    <td>Insure more than one car and save up to 26% on your premiums</td>
  </tr>
  <tr>
    <td>Responsible driver</td>
    <td>
      If you go five years without any accidents, you can save up to 5% on
      some coverage options
    </td>
  </tr>
  <tr>
    <td>Good Student</td>
    <td>
      If you have students that maintain good grades, you could recieve up to
      6% off certain coverage options. Most states require policyholders to be
      between the ages of 16 and 25 and full-time students with a "B" average
      or better
    </td>
  </tr>
  <tr>
    <td>Bundling</td>
    <td>
      Bundling your car insurance policy with your homeowners, renters or
      motorcycle insurance policies can earn you discounted rates
    </td>
  </tr>
</StaticTable>

<h3>Headless list</h3>
<StaticTable
  topHeaders={['Type of Discount', 'Description']}
  className="headless-list"
>
  <tr>
    <td>Multi-car</td>
    <td>Insure more than one car and save up to 26% on your premiums</td>
  </tr>
  <tr>
    <td>Responsible driver</td>
    <td>
      If you go five years without any accidents, you can save up to 5% on
      some coverage options
    </td>
  </tr>
  <tr>
    <td>Good Student</td>
    <td>
      If you have students that maintain good grades, you could recieve up to
      6% off certain coverage options. Most states require policyholders to be
      between the ages of 16 and 25 and full-time students with a "B" average
      or better
    </td>
  </tr>
  <tr>
    <td>Bundling</td>
    <td>
      Bundling your car insurance policy with your homeowners, renters or
      motorcycle insurance policies can earn you discounted rates
    </td>
  </tr>
</StaticTable>

StaticTable

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Basic Usage

Left row headers

Max items

Aditional types

Product atributes

Headless List

Basic Usage