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 |
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 |
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 |