<Row>
<Col>
<h3>Vertically Scrolling DataGrid</h3>
<p>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 <code>$data-grid-scroll-height</code> variable in harmonium-settings.</p>
<DataGrid verticalScroll>
<DataGrid.HeaderRow>
<DataGrid.HeaderCol medium={4}>
<strong>Lorem Ipsum Dolor</strong>
</DataGrid.HeaderCol>
<DataGrid.HeaderCol medium={4}>
<strong>Sit Amet</strong>
</DataGrid.HeaderCol>
<DataGrid.HeaderCol medium={4}>
<strong>Consectetur Adipiscing</strong>
</DataGrid.HeaderCol>
</DataGrid.HeaderRow>
<DataGrid.HeaderRowStacked>
<DataGrid.HeaderCol>
<strong>Lorem Ipsum</strong>
</DataGrid.HeaderCol>
</DataGrid.HeaderRowStacked>
<DataGrid.Body>
<DataGrid.Row>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Lorem Ipsum Dolor:</DataGrid.HeaderInline>
Ut enim ad minim veniam
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Sit Amet:</DataGrid.HeaderInline>
Duis aute irure dolor in reprehenderit
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Consectetur Adipiscing:</DataGrid.HeaderInline>
Quis nostrud exercitation
</DataGrid.Col>
</DataGrid.Row>
<DataGrid.Row>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Lorem Ipsum Dolor:</DataGrid.HeaderInline>
Laboris nisi ut
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Sit Amet:</DataGrid.HeaderInline>
Aliquip ex ea commodo consequat
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Consectetur Adipiscing:</DataGrid.HeaderInline>
Excepteur sint occaecat
</DataGrid.Col>
</DataGrid.Row>
<DataGrid.Row>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Lorem Ipsum Dolor:</DataGrid.HeaderInline>
Cupidatat non proident
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Sit Amet:</DataGrid.HeaderInline>
Sunt in culpa qui officia
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Consectetur Adipiscing:</DataGrid.HeaderInline>
Deserunt mollit anim id est laborum
</DataGrid.Col>
</DataGrid.Row>
<DataGrid.Row>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Lorem Ipsum Dolor:</DataGrid.HeaderInline>
Cupidatat non proident
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Sit Amet:</DataGrid.HeaderInline>
Sunt in culpa qui officia
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Consectetur Adipiscing:</DataGrid.HeaderInline>
Deserunt mollit anim id est laborum
</DataGrid.Col>
</DataGrid.Row>
<DataGrid.Row>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Lorem Ipsum Dolor:</DataGrid.HeaderInline>
Cupidatat non proident
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Sit Amet:</DataGrid.HeaderInline>
Sunt in culpa qui officia
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Consectetur Adipiscing:</DataGrid.HeaderInline>
Deserunt mollit anim id est laborum
</DataGrid.Col>
</DataGrid.Row>
<DataGrid.Row>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Lorem Ipsum Dolor:</DataGrid.HeaderInline>
Cupidatat non proident
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Sit Amet:</DataGrid.HeaderInline>
Sunt in culpa qui officia
</DataGrid.Col>
<DataGrid.Col medium={4}>
<DataGrid.HeaderInline>Consectetur Adipiscing:</DataGrid.HeaderInline>
Deserunt mollit anim id est laborum
</DataGrid.Col>
</DataGrid.Row>
</DataGrid.Body>
</DataGrid>
</Col>
</Row>