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