DataGrid

The DataGrid component mimics a Table, but instead, uses Rows and Cols as it's structure. It provides an easy way to visualize data with it's fixed Header and inline-scrolling.

Default (Responsive) DataGrid

The default DataGrid stacks for small screens. You can adjust this by updating the global $data-grid-breakpoint variable in harmonium-settings or you can add stackFor[Size] props to specific DataGrids.

Lorem Ipsum Dolor
Sit Amet
Consectetur Adipiscing
Lorem Ipsum
Lorem Ipsum Dolor:Ut enim ad minim veniam
Sit Amet:Duis aute irure dolor in reprehenderit
Consectetur Adipiscing:Quis nostrud exercitation
Lorem Ipsum Dolor:Laboris nisi ut
Sit Amet:Aliquip ex ea commodo consequat
Consectetur Adipiscing:Excepteur sint occaecat
Lorem Ipsum Dolor:Cupidatat non proident
Sit Amet:Sunt in culpa qui officia
Consectetur Adipiscing:Deserunt mollit anim id est laborum

Striped DataGrid

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

Lorem Ipsum Dolor
Sit Amet
Consectetur Adipiscing
Lorem Ipsum
Lorem Ipsum Dolor:Ut enim ad minim veniam
Sit Amet:Duis aute irure dolor in reprehenderit
Consectetur Adipiscing:Quis nostrud exercitation
Lorem Ipsum Dolor:Laboris nisi ut
Sit Amet:Aliquip ex ea commodo consequat
Consectetur Adipiscing:Excepteur sint occaecat
Lorem Ipsum Dolor:Cupidatat non proident
Sit Amet:Sunt in culpa qui officia
Consectetur Adipiscing:Deserunt mollit anim id est laborum

Vertically Scrolling DataGrid

For DataGrids with large amounts of information, the verticalScroll prop can be added allowing the rows to scroll while the headers stay fixed. Adjust the height of the DataGrid container by updating the $data-grid-scroll-height variable in harmonium-settings.

Lorem Ipsum Dolor
Sit Amet
Consectetur Adipiscing
Lorem Ipsum
Lorem Ipsum Dolor:Ut enim ad minim veniam
Sit Amet:Duis aute irure dolor in reprehenderit
Consectetur Adipiscing:Quis nostrud exercitation
Lorem Ipsum Dolor:Laboris nisi ut
Sit Amet:Aliquip ex ea commodo consequat
Consectetur Adipiscing:Excepteur sint occaecat
Lorem Ipsum Dolor:Cupidatat non proident
Sit Amet:Sunt in culpa qui officia
Consectetur Adipiscing:Deserunt mollit anim id est laborum
Lorem Ipsum Dolor:Cupidatat non proident
Sit Amet:Sunt in culpa qui officia
Consectetur Adipiscing:Deserunt mollit anim id est laborum
Lorem Ipsum Dolor:Cupidatat non proident
Sit Amet:Sunt in culpa qui officia
Consectetur Adipiscing:Deserunt mollit anim id est laborum
Lorem Ipsum Dolor:Cupidatat non proident
Sit Amet:Sunt in culpa qui officia
Consectetur Adipiscing:Deserunt mollit anim id est laborum