Tables

Used for tabular data, our Table component consists of semantic table markup and has multiple display variations.

Default (Responsive) Table

Our default table stacks on small screens. You can adjust this by updating the global $table-breakpoint variable in harmonium-settings or you can add stackFor[Size] props to specific tables.

Lorem Ipsum	Dolor Sit Amet	Consectetur Adipiscing	Elit Sed Do Eiusmod
Lorem Ipsum
Lorem Ipsum:Ut enim ad minim veniam, quis nostrud exercitation	Dolor Sit Amet:Ullamco laboris nisi ut aliquip	Consectur Adipiscing:Commodo consequat duis aute irure dolor	Elit Sed Do Eiusmod:In reprehenderit in voluptate velit esse cillum
Lorem Ipsum:Dolore eu fugiat nulla pariatur	Dolor Sit Amet:Excepteur sint occaecat cupidatat non proident	Consectur Adipiscing:Sunt in culpa qui officia	Elit Sed Do Eiusmod:Deserunt mollit anim id est laborum
Lorem Ipsum:Sed ut perspiciatis unde omnis iste	Dolor Sit Amet:Natus error sit voluptatem accusantium	Consectur Adipiscing:Doloremque laudantium totam rem aperiam	Elit Sed Do Eiusmod:Eaque ipsa quae ab illo inventore

<Row>
  <Col>
    <h3>Default (Responsive) Table</h3>
    <p>Our default table stacks on small screens. You can adjust this by updating the global <code>$table-breakpoint</code> variable in harmonium-settings or you can add <code>stackFor[Size]</code> props to specific tables.</p>
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
          <Table.Header>
            Dolor Sit Amet
          </Table.Header>
          <Table.Header>
            Consectetur Adipiscing
          </Table.Header>
          <Table.Header>
            Elit Sed Do Eiusmod
          </Table.Header>
        </Table.Row>
      </Table.Head>

      <Table.HeadStacked>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
        </Table.Row>
      </Table.HeadStacked>

      <Table.Body>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Ut enim ad minim veniam, quis nostrud exercitation
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Dolore eu fugiat nulla pariatur
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Sed ut perspiciatis unde omnis iste
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
        </Table.Row>
      </Table.Body>
    </Table>
  </Col>
</Row>

<Row>
  <Col>
    <h3>Default (Responsive) Table</h3>
    <p>Our default table stacks on small screens. You can adjust this by updating the global <code>$table-breakpoint</code> variable in harmonium-settings or you can add <code>stackFor[Size]</code> props to specific tables.</p>
    <Table>
      <Table.Head>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
          <Table.Header>
            Dolor Sit Amet
          </Table.Header>
          <Table.Header>
            Consectetur Adipiscing
          </Table.Header>
          <Table.Header>
            Elit Sed Do Eiusmod
          </Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.HeadStacked>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
        </Table.Row>
      </Table.HeadStacked>
      <Table.Body>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Ut enim ad minim veniam, quis nostrud exercitation
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Dolore eu fugiat nulla pariatur
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Sed ut perspiciatis unde omnis iste
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
        </Table.Row>
      </Table.Body>
    </Table>
  </Col>
</Row>

Striped Table

The striped prop can be added to give a more clear delineation between table rows, using alternating background colors. Stripe color can be adjusted using the $table-stripe-background variable in harmonium-settings.

Lorem Ipsum	Dolor Sit Amet	Consectetur Adipiscing	Elit Sed Do Eiusmod
Lorem Ipsum
Lorem Ipsum:Ut enim ad minim veniam, quis nostrud exercitation	Dolor Sit Amet:Ullamco laboris nisi ut aliquip	Consectur Adipiscing:Commodo consequat duis aute irure dolor	Elit Sed Do Eiusmod:In reprehenderit in voluptate velit esse cillum
Lorem Ipsum:Dolore eu fugiat nulla pariatur	Dolor Sit Amet:Excepteur sint occaecat cupidatat non proident	Consectur Adipiscing:Sunt in culpa qui officia	Elit Sed Do Eiusmod:Deserunt mollit anim id est laborum
Lorem Ipsum:Sed ut perspiciatis unde omnis iste	Dolor Sit Amet:Natus error sit voluptatem accusantium	Consectur Adipiscing:Doloremque laudantium totam rem aperiam	Elit Sed Do Eiusmod:Eaque ipsa quae ab illo inventore

<Row>
  <Col>
    <h3>Striped Table</h3>
    <p>The striped prop can be added to give a more clear delineation between table rows, using alternating background colors. Stripe color can be adjusted using the <code>$table-stripe-background</code> variable in harmonium-settings.</p>
    <Table striped>
      <Table.Head>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
          <Table.Header>
            Dolor Sit Amet
          </Table.Header>
          <Table.Header>
            Consectetur Adipiscing
          </Table.Header>
          <Table.Header>
            Elit Sed Do Eiusmod
          </Table.Header>
        </Table.Row>
      </Table.Head>

      <Table.HeadStacked>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
        </Table.Row>
      </Table.HeadStacked>

      <Table.Body>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Ut enim ad minim veniam, quis nostrud exercitation
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Dolore eu fugiat nulla pariatur
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Sed ut perspiciatis unde omnis iste
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
        </Table.Row>
      </Table.Body>
    </Table>
  </Col>
</Row>

<Row>
  <Col>
    <h3>Striped Table</h3>
    <p>The striped prop can be added to give a more clear delineation between table rows, using alternating background colors. Stripe color can be adjusted using the <code>$table-stripe-background</code> variable in harmonium-settings.</p>
    <Table striped>
      <Table.Head>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
          <Table.Header>
            Dolor Sit Amet
          </Table.Header>
          <Table.Header>
            Consectetur Adipiscing
          </Table.Header>
          <Table.Header>
            Elit Sed Do Eiusmod
          </Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.HeadStacked>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum
          </Table.Header>
        </Table.Row>
      </Table.HeadStacked>
      <Table.Body>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Ut enim ad minim veniam, quis nostrud exercitation
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Dolore eu fugiat nulla pariatur
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum:</Table.HeaderInline>
            Sed ut perspiciatis unde omnis iste
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
        </Table.Row>
      </Table.Body>
    </Table>
  </Col>
</Row>

Horizontally Scrolling Table

For tables with large amounts of information, the horizontalScroll prop can be added to preserve the width of your column headers, allowing the table to scroll horizontally within it's container.

Lorem Ipsum Dolor	Dolor Sit Amet	Consectetur Adipiscing	Elit Sed Do Eiusmod	Nemo Enim Ipsam Voluptatem	Quia Voluptas Sit Aspernatur Aut Odit Aut Fugit	Sed Quia Consequatar
Lorem Ipsum Dolor:Ut enim ad minim veniam, quis nostrud exercitation	Dolor Sit Amet:Ullamco laboris nisi ut aliquip	Consectur Adipiscing:Commodo consequat duis aute irure dolor	Elit Sed Do Eiusmod:In reprehenderit in voluptate velit esse cillum	Nemo Enim Ipsum Voluptatum:Ullamco laboris nisi ut aliquip	Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:Commodo consequat duis aute irure dolor	Sed Quia Consequatar:In reprehenderit in voluptate velit esse cillum
Lorem Ipsum Dolor:Dolore eu fugiat nulla pariatur	Dolor Sit Amet:Excepteur sint occaecat cupidatat non proident	Consectur Adipiscing:Sunt in culpa qui officia	Elit Sed Do Eiusmod:Deserunt mollit anim id est laborum	Nemo Enim Ipsum Voluptatum:Excepteur sint occaecat cupidatat non proident	Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:Sunt in culpa qui officia	Sed Quia Consequatar:Deserunt mollit anim id est laborum
Lorem Ipsum Dolor:Sed ut perspiciatis unde omnis iste	Dolor Sit Amet:Natus error sit voluptatem accusantium	Consectur Adipiscing:Doloremque laudantium totam rem aperiam	Elit Sed Do Eiusmod:Eaque ipsa quae ab illo inventore	Nemo Enim Ipsum Voluptatum:Natus error sit voluptatem accusantium	Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:Doloremque laudantium totam rem aperiam	Sed Quia Consequatar:Eaque ipsa quae ab illo inventore

<Row>
  <Col>
    <h3>Horizontally Scrolling Table</h3>
    <p>For tables with large amounts of information, the <code>horizontalScroll</code> prop can be added to preserve the width of your column headers, allowing the table to scroll horizontally within it's container.</p>
    <Table horizontalScroll>
      <Table.Head>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum Dolor
          </Table.Header>
          <Table.Header>
            Dolor Sit Amet
          </Table.Header>
          <Table.Header>
            Consectetur Adipiscing
          </Table.Header>
          <Table.Header>
            Elit Sed Do Eiusmod
          </Table.Header>
          <Table.Header>
            Nemo Enim Ipsam Voluptatem
          </Table.Header>
          <Table.Header>
            Quia Voluptas Sit Aspernatur Aut Odit Aut Fugit
          </Table.Header>
          <Table.Header>
            Sed Quia Consequatar
          </Table.Header>
        </Table.Row>
      </Table.Head>

      <Table.Body>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum Dolor:</Table.HeaderInline>
            Ut enim ad minim veniam, quis nostrud exercitation
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Nemo Enim Ipsum Voluptatum:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Sed Quia Consequatar:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum Dolor:</Table.HeaderInline>
            Dolore eu fugiat nulla pariatur
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Nemo Enim Ipsum Voluptatum:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Sed Quia Consequatar:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum Dolor:</Table.HeaderInline>
            Sed ut perspiciatis unde omnis iste
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Nemo Enim Ipsum Voluptatum:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Sed Quia Consequatar:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
        </Table.Row>
      </Table.Body>
    </Table>
  </Col>
</Row>

<Row>
  <Col>
    <h3>Horizontally Scrolling Table</h3>
    <p>For tables with large amounts of information, the <code>horizontalScroll</code> prop can be added to preserve the width of your column headers, allowing the table to scroll horizontally within it's container.</p>
    <Table horizontalScroll>
      <Table.Head>
        <Table.Row>
          <Table.Header>
            Lorem Ipsum Dolor
          </Table.Header>
          <Table.Header>
            Dolor Sit Amet
          </Table.Header>
          <Table.Header>
            Consectetur Adipiscing
          </Table.Header>
          <Table.Header>
            Elit Sed Do Eiusmod
          </Table.Header>
          <Table.Header>
            Nemo Enim Ipsam Voluptatem
          </Table.Header>
          <Table.Header>
            Quia Voluptas Sit Aspernatur Aut Odit Aut Fugit
          </Table.Header>
          <Table.Header>
            Sed Quia Consequatar
          </Table.Header>
        </Table.Row>
      </Table.Head>
      <Table.Body>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum Dolor:</Table.HeaderInline>
            Ut enim ad minim veniam, quis nostrud exercitation
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Nemo Enim Ipsum Voluptatum:</Table.HeaderInline>
            Ullamco laboris nisi ut aliquip
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:</Table.HeaderInline>
            Commodo consequat duis aute irure dolor
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Sed Quia Consequatar:</Table.HeaderInline>
             In reprehenderit in voluptate velit esse cillum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum Dolor:</Table.HeaderInline>
            Dolore eu fugiat nulla pariatur
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Nemo Enim Ipsum Voluptatum:</Table.HeaderInline>
            Excepteur sint occaecat cupidatat non proident
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:</Table.HeaderInline>
            Sunt in culpa qui officia
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Sed Quia Consequatar:</Table.HeaderInline>
            Deserunt mollit anim id est laborum
          </Table.Data>
        </Table.Row>
        <Table.Row>
          <Table.Data>
            <Table.HeaderInline>Lorem Ipsum Dolor:</Table.HeaderInline>
            Sed ut perspiciatis unde omnis iste
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Dolor Sit Amet:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Consectur Adipiscing:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Elit Sed Do Eiusmod:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Nemo Enim Ipsum Voluptatum:</Table.HeaderInline>
            Natus error sit voluptatem accusantium
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Quis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:</Table.HeaderInline>
            Doloremque laudantium totam rem aperiam
          </Table.Data>
          <Table.Data>
            <Table.HeaderInline>Sed Quia Consequatar:</Table.HeaderInline>
            Eaque ipsa quae ab illo inventore
          </Table.Data>
        </Table.Row>
      </Table.Body>
    </Table>
  </Col>
</Row>