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 IpsumDolor Sit AmetConsectetur AdipiscingElit Sed Do Eiusmod
Lorem Ipsum
Lorem Ipsum:Ut enim ad minim veniam, quis nostrud exercitationDolor Sit Amet:Ullamco laboris nisi ut aliquipConsectur Adipiscing:Commodo consequat duis aute irure dolorElit Sed Do Eiusmod:In reprehenderit in voluptate velit esse cillum
Lorem Ipsum:Dolore eu fugiat nulla pariaturDolor Sit Amet:Excepteur sint occaecat cupidatat non proidentConsectur Adipiscing:Sunt in culpa qui officiaElit Sed Do Eiusmod:Deserunt mollit anim id est laborum
Lorem Ipsum:Sed ut perspiciatis unde omnis isteDolor Sit Amet:Natus error sit voluptatem accusantiumConsectur Adipiscing:Doloremque laudantium totam rem aperiamElit Sed Do Eiusmod:Eaque ipsa quae ab illo inventore

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 IpsumDolor Sit AmetConsectetur AdipiscingElit Sed Do Eiusmod
Lorem Ipsum
Lorem Ipsum:Ut enim ad minim veniam, quis nostrud exercitationDolor Sit Amet:Ullamco laboris nisi ut aliquipConsectur Adipiscing:Commodo consequat duis aute irure dolorElit Sed Do Eiusmod:In reprehenderit in voluptate velit esse cillum
Lorem Ipsum:Dolore eu fugiat nulla pariaturDolor Sit Amet:Excepteur sint occaecat cupidatat non proidentConsectur Adipiscing:Sunt in culpa qui officiaElit Sed Do Eiusmod:Deserunt mollit anim id est laborum
Lorem Ipsum:Sed ut perspiciatis unde omnis isteDolor Sit Amet:Natus error sit voluptatem accusantiumConsectur Adipiscing:Doloremque laudantium totam rem aperiamElit Sed Do Eiusmod:Eaque ipsa quae ab illo inventore

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 DolorDolor Sit AmetConsectetur AdipiscingElit Sed Do EiusmodNemo Enim Ipsam VoluptatemQuia Voluptas Sit Aspernatur Aut Odit Aut FugitSed Quia Consequatar
Lorem Ipsum Dolor:Ut enim ad minim veniam, quis nostrud exercitationDolor Sit Amet:Ullamco laboris nisi ut aliquipConsectur Adipiscing:Commodo consequat duis aute irure dolorElit Sed Do Eiusmod:In reprehenderit in voluptate velit esse cillumNemo Enim Ipsum Voluptatum:Ullamco laboris nisi ut aliquipQuis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:Commodo consequat duis aute irure dolorSed Quia Consequatar:In reprehenderit in voluptate velit esse cillum
Lorem Ipsum Dolor:Dolore eu fugiat nulla pariaturDolor Sit Amet:Excepteur sint occaecat cupidatat non proidentConsectur Adipiscing:Sunt in culpa qui officiaElit Sed Do Eiusmod:Deserunt mollit anim id est laborumNemo Enim Ipsum Voluptatum:Excepteur sint occaecat cupidatat non proidentQuis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:Sunt in culpa qui officiaSed Quia Consequatar:Deserunt mollit anim id est laborum
Lorem Ipsum Dolor:Sed ut perspiciatis unde omnis isteDolor Sit Amet:Natus error sit voluptatem accusantiumConsectur Adipiscing:Doloremque laudantium totam rem aperiamElit Sed Do Eiusmod:Eaque ipsa quae ab illo inventoreNemo Enim Ipsum Voluptatum:Natus error sit voluptatem accusantiumQuis Voluptas Sit Aspurnatur Aut Odit Aut Fugit:Doloremque laudantium totam rem aperiamSed Quia Consequatar:Eaque ipsa quae ab illo inventore