Rows can be set to sticky positioning to keep them visible while scrolling. If multiple rows are set to sticky positioning, the subsequent sticky rows will replace the previous ones as the grid is scrolled. To set a row to sticky positioning, assign the "sticky" position attribute to its column.
Sticky
Column 0Column 1Column 2Column 3Cell 0-0Cell 0-1Cell 0-2Cell 0-3Cell 1-0Cell 1-1Cell 1-2Cell 1-3Cell 2-0Cell 2-1Cell 2-2Cell 2-3Cell 3-0Cell 3-1Cell 3-2Cell 3-3Cell 4-0Cell 4-1Cell 4-2Cell 4-3Cell 5-0Cell 5-1Cell 5-2Cell 5-3Cell 6-0Cell 6-1Cell 6-2Cell 6-3Cell 7-0Cell 7-1Cell 7-2Cell 7-3Cell 8-0Cell 8-1Cell 8-2Cell 8-3Cell 9-0Cell 9-1Cell 9-2Cell 9-3Cell 10-0Cell 10-1Cell 10-2Cell 10-3Cell 11-0Cell 11-1Cell 11-2Cell 11-3Cell 12-0Cell 12-1Cell 12-2Cell 12-3Cell 13-0Cell 13-1Cell 13-2Cell 13-3Cell 14-0Cell 14-1Cell 14-2Cell 14-3Cell 15-0Cell 15-1Cell 15-2Cell 15-3Cell 16-0Cell 16-1Cell 16-2Cell 16-3Cell 17-0Cell 17-1Cell 17-2Cell 17-3Cell 18-0Cell 18-1Cell 18-2Cell 18-3Cell 19-0Cell 19-1Cell 19-2Cell 19-3Cell 20-0Cell 20-1Cell 20-2Cell 20-3Cell 21-0Cell 21-1Cell 21-2Cell 21-3Cell 22-0Cell 22-1Cell 22-2Cell 22-3Cell 23-0Cell 23-1Cell 23-2Cell 23-3Cell 24-0Cell 24-1Cell 24-2Cell 24-3Cell 25-0Cell 25-1Cell 25-2Cell 25-3Cell 26-0Cell 26-1Cell 26-2Cell 26-3Cell 27-0Cell 27-1Cell 27-2Cell 27-3Cell 28-0Cell 28-1Cell 28-2Cell 28-3Cell 29-0Cell 29-1Cell 29-2Cell 29-3Cell 30-0Cell 30-1Cell 30-2Cell 30-3Cell 31-0Cell 31-1Cell 31-2Cell 31-3Cell 32-0Cell 32-1Cell 32-2Cell 32-3Cell 33-0Cell 33-1Cell 33-2Cell 33-3Cell 34-0Cell 34-1Cell 34-2Cell 34-3Cell 35-0Cell 35-1Cell 35-2Cell 35-3Cell 36-0Cell 36-1Cell 36-2Cell 36-3Cell 37-0Cell 37-1Cell 37-2Cell 37-3Cell 38-0Cell 38-1Cell 38-2Cell 38-3Cell 39-0Cell 39-1Cell 39-2Cell 39-3Cell 40-0Cell 40-1Cell 40-2Cell 40-3Cell 41-0Cell 41-1Cell 41-2Cell 41-3Cell 42-0Cell 42-1Cell 42-2Cell 42-3Cell 43-0Cell 43-1Cell 43-2Cell 43-3Cell 44-0Cell 44-1Cell 44-2Cell 44-3Cell 45-0Cell 45-1Cell 45-2Cell 45-3Cell 46-0Cell 46-1Cell 46-2Cell 46-3Cell 47-0Cell 47-1Cell 47-2Cell 47-3Cell 48-0Cell 48-1Cell 48-2Cell 48-3Cell 49-0Cell 49-1Cell 49-2Cell 49-3Cell 50-0Cell 50-1Cell 50-2Cell 50-3Cell 51-0Cell 51-1Cell 51-2Cell 51-3Cell 52-0Cell 52-1Cell 52-2Cell 52-3Cell 53-0Cell 53-1Cell 53-2Cell 53-3Cell 54-0Cell 54-1Cell 54-2Cell 54-3Cell 55-0Cell 55-1Cell 55-2Cell 55-3Cell 56-0Cell 56-1Cell 56-2Cell 56-3Cell 57-0Cell 57-1Cell 57-2Cell 57-3Cell 58-0Cell 58-1Cell 58-2Cell 58-3Cell 59-0Cell 59-1Cell 59-2Cell 59-3Cell 60-0Cell 60-1Cell 60-2Cell 60-3Cell 61-0Cell 61-1Cell 61-2Cell 61-3Cell 62-0Cell 62-1Cell 62-2Cell 62-3Cell 63-0Cell 63-1Cell 63-2Cell 63-3Cell 64-0Cell 64-1Cell 64-2Cell 64-3Cell 65-0Cell 65-1Cell 65-2Cell 65-3Cell 66-0Cell 66-1Cell 66-2Cell 66-3Cell 67-0Cell 67-1Cell 67-2Cell 67-3Cell 68-0Cell 68-1Cell 68-2Cell 68-3Cell 69-0Cell 69-1Cell 69-2Cell 69-3Cell 70-0Cell 70-1Cell 70-2Cell 70-3Cell 71-0Cell 71-1Cell 71-2Cell 71-3Cell 72-0Cell 72-1Cell 72-2Cell 72-3Cell 73-0Cell 73-1Cell 73-2Cell 73-3Cell 74-0Cell 74-1Cell 74-2Cell 74-3Cell 75-0Cell 75-1Cell 75-2Cell 75-3Cell 76-0Cell 76-1Cell 76-2Cell 76-3Cell 77-0Cell 77-1Cell 77-2Cell 77-3Cell 78-0Cell 78-1Cell 78-2Cell 78-3Cell 79-0Cell 79-1Cell 79-2Cell 79-3Cell 80-0Cell 80-1Cell 80-2Cell 80-3Cell 81-0Cell 81-1Cell 81-2Cell 81-3Cell 82-0Cell 82-1Cell 82-2Cell 82-3Cell 83-0Cell 83-1Cell 83-2Cell 83-3Cell 84-0Cell 84-1Cell 84-2Cell 84-3Cell 85-0Cell 85-1Cell 85-2Cell 85-3Cell 86-0Cell 86-1Cell 86-2Cell 86-3Cell 87-0Cell 87-1Cell 87-2Cell 87-3Cell 88-0Cell 88-1Cell 88-2Cell 88-3Cell 89-0Cell 89-1Cell 89-2Cell 89-3Cell 90-0Cell 90-1Cell 90-2Cell 90-3Cell 91-0Cell 91-1Cell 91-2Cell 91-3Cell 92-0Cell 92-1Cell 92-2Cell 92-3Cell 93-0Cell 93-1Cell 93-2Cell 93-3Cell 94-0Cell 94-1Cell 94-2Cell 94-3Cell 95-0Cell 95-1Cell 95-2Cell 95-3Cell 96-0Cell 96-1Cell 96-2Cell 96-3Cell 97-0Cell 97-1Cell 97-2Cell 97-3Cell 98-0Cell 98-1Cell 98-2Cell 98-3Cell 99-0Cell 99-1Cell 99-2Cell 99-3
code
<script type="module">
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';
import '@blueprintui/grid/include/row-position.js';
</script>
<bp-grid aria-label="row sticky datagrid demo" height="390">
<bp-grid-header>
<bp-grid-column>Column 0</bp-grid-column>
<bp-grid-column>Column 1</bp-grid-column>
<bp-grid-column>Column 2</bp-grid-column>
<bp-grid-column>Column 3</bp-grid-column>
</bp-grid-header>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 0-0</bp-grid-cell>
<bp-grid-cell>Cell 0-1</bp-grid-cell>
<bp-grid-cell>Cell 0-2</bp-grid-cell>
<bp-grid-cell>Cell 0-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 1-0</bp-grid-cell>
<bp-grid-cell>Cell 1-1</bp-grid-cell>
<bp-grid-cell>Cell 1-2</bp-grid-cell>
<bp-grid-cell>Cell 1-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 2-0</bp-grid-cell>
<bp-grid-cell>Cell 2-1</bp-grid-cell>
<bp-grid-cell>Cell 2-2</bp-grid-cell>
<bp-grid-cell>Cell 2-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 3-0</bp-grid-cell>
<bp-grid-cell>Cell 3-1</bp-grid-cell>
<bp-grid-cell>Cell 3-2</bp-grid-cell>
<bp-grid-cell>Cell 3-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 4-0</bp-grid-cell>
<bp-grid-cell>Cell 4-1</bp-grid-cell>
<bp-grid-cell>Cell 4-2</bp-grid-cell>
<bp-grid-cell>Cell 4-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 5-0</bp-grid-cell>
<bp-grid-cell>Cell 5-1</bp-grid-cell>
<bp-grid-cell>Cell 5-2</bp-grid-cell>
<bp-grid-cell>Cell 5-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 6-0</bp-grid-cell>
<bp-grid-cell>Cell 6-1</bp-grid-cell>
<bp-grid-cell>Cell 6-2</bp-grid-cell>
<bp-grid-cell>Cell 6-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 7-0</bp-grid-cell>
<bp-grid-cell>Cell 7-1</bp-grid-cell>
<bp-grid-cell>Cell 7-2</bp-grid-cell>
<bp-grid-cell>Cell 7-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 8-0</bp-grid-cell>
<bp-grid-cell>Cell 8-1</bp-grid-cell>
<bp-grid-cell>Cell 8-2</bp-grid-cell>
<bp-grid-cell>Cell 8-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 9-0</bp-grid-cell>
<bp-grid-cell>Cell 9-1</bp-grid-cell>
<bp-grid-cell>Cell 9-2</bp-grid-cell>
<bp-grid-cell>Cell 9-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 10-0</bp-grid-cell>
<bp-grid-cell>Cell 10-1</bp-grid-cell>
<bp-grid-cell>Cell 10-2</bp-grid-cell>
<bp-grid-cell>Cell 10-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 11-0</bp-grid-cell>
<bp-grid-cell>Cell 11-1</bp-grid-cell>
<bp-grid-cell>Cell 11-2</bp-grid-cell>
<bp-grid-cell>Cell 11-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 12-0</bp-grid-cell>
<bp-grid-cell>Cell 12-1</bp-grid-cell>
<bp-grid-cell>Cell 12-2</bp-grid-cell>
<bp-grid-cell>Cell 12-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 13-0</bp-grid-cell>
<bp-grid-cell>Cell 13-1</bp-grid-cell>
<bp-grid-cell>Cell 13-2</bp-grid-cell>
<bp-grid-cell>Cell 13-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 14-0</bp-grid-cell>
<bp-grid-cell>Cell 14-1</bp-grid-cell>
<bp-grid-cell>Cell 14-2</bp-grid-cell>
<bp-grid-cell>Cell 14-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 15-0</bp-grid-cell>
<bp-grid-cell>Cell 15-1</bp-grid-cell>
<bp-grid-cell>Cell 15-2</bp-grid-cell>
<bp-grid-cell>Cell 15-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 16-0</bp-grid-cell>
<bp-grid-cell>Cell 16-1</bp-grid-cell>
<bp-grid-cell>Cell 16-2</bp-grid-cell>
<bp-grid-cell>Cell 16-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 17-0</bp-grid-cell>
<bp-grid-cell>Cell 17-1</bp-grid-cell>
<bp-grid-cell>Cell 17-2</bp-grid-cell>
<bp-grid-cell>Cell 17-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 18-0</bp-grid-cell>
<bp-grid-cell>Cell 18-1</bp-grid-cell>
<bp-grid-cell>Cell 18-2</bp-grid-cell>
<bp-grid-cell>Cell 18-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 19-0</bp-grid-cell>
<bp-grid-cell>Cell 19-1</bp-grid-cell>
<bp-grid-cell>Cell 19-2</bp-grid-cell>
<bp-grid-cell>Cell 19-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 20-0</bp-grid-cell>
<bp-grid-cell>Cell 20-1</bp-grid-cell>
<bp-grid-cell>Cell 20-2</bp-grid-cell>
<bp-grid-cell>Cell 20-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 21-0</bp-grid-cell>
<bp-grid-cell>Cell 21-1</bp-grid-cell>
<bp-grid-cell>Cell 21-2</bp-grid-cell>
<bp-grid-cell>Cell 21-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 22-0</bp-grid-cell>
<bp-grid-cell>Cell 22-1</bp-grid-cell>
<bp-grid-cell>Cell 22-2</bp-grid-cell>
<bp-grid-cell>Cell 22-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 23-0</bp-grid-cell>
<bp-grid-cell>Cell 23-1</bp-grid-cell>
<bp-grid-cell>Cell 23-2</bp-grid-cell>
<bp-grid-cell>Cell 23-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 24-0</bp-grid-cell>
<bp-grid-cell>Cell 24-1</bp-grid-cell>
<bp-grid-cell>Cell 24-2</bp-grid-cell>
<bp-grid-cell>Cell 24-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 25-0</bp-grid-cell>
<bp-grid-cell>Cell 25-1</bp-grid-cell>
<bp-grid-cell>Cell 25-2</bp-grid-cell>
<bp-grid-cell>Cell 25-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 26-0</bp-grid-cell>
<bp-grid-cell>Cell 26-1</bp-grid-cell>
<bp-grid-cell>Cell 26-2</bp-grid-cell>
<bp-grid-cell>Cell 26-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 27-0</bp-grid-cell>
<bp-grid-cell>Cell 27-1</bp-grid-cell>
<bp-grid-cell>Cell 27-2</bp-grid-cell>
<bp-grid-cell>Cell 27-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 28-0</bp-grid-cell>
<bp-grid-cell>Cell 28-1</bp-grid-cell>
<bp-grid-cell>Cell 28-2</bp-grid-cell>
<bp-grid-cell>Cell 28-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 29-0</bp-grid-cell>
<bp-grid-cell>Cell 29-1</bp-grid-cell>
<bp-grid-cell>Cell 29-2</bp-grid-cell>
<bp-grid-cell>Cell 29-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 30-0</bp-grid-cell>
<bp-grid-cell>Cell 30-1</bp-grid-cell>
<bp-grid-cell>Cell 30-2</bp-grid-cell>
<bp-grid-cell>Cell 30-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 31-0</bp-grid-cell>
<bp-grid-cell>Cell 31-1</bp-grid-cell>
<bp-grid-cell>Cell 31-2</bp-grid-cell>
<bp-grid-cell>Cell 31-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 32-0</bp-grid-cell>
<bp-grid-cell>Cell 32-1</bp-grid-cell>
<bp-grid-cell>Cell 32-2</bp-grid-cell>
<bp-grid-cell>Cell 32-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 33-0</bp-grid-cell>
<bp-grid-cell>Cell 33-1</bp-grid-cell>
<bp-grid-cell>Cell 33-2</bp-grid-cell>
<bp-grid-cell>Cell 33-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 34-0</bp-grid-cell>
<bp-grid-cell>Cell 34-1</bp-grid-cell>
<bp-grid-cell>Cell 34-2</bp-grid-cell>
<bp-grid-cell>Cell 34-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 35-0</bp-grid-cell>
<bp-grid-cell>Cell 35-1</bp-grid-cell>
<bp-grid-cell>Cell 35-2</bp-grid-cell>
<bp-grid-cell>Cell 35-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 36-0</bp-grid-cell>
<bp-grid-cell>Cell 36-1</bp-grid-cell>
<bp-grid-cell>Cell 36-2</bp-grid-cell>
<bp-grid-cell>Cell 36-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 37-0</bp-grid-cell>
<bp-grid-cell>Cell 37-1</bp-grid-cell>
<bp-grid-cell>Cell 37-2</bp-grid-cell>
<bp-grid-cell>Cell 37-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 38-0</bp-grid-cell>
<bp-grid-cell>Cell 38-1</bp-grid-cell>
<bp-grid-cell>Cell 38-2</bp-grid-cell>
<bp-grid-cell>Cell 38-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 39-0</bp-grid-cell>
<bp-grid-cell>Cell 39-1</bp-grid-cell>
<bp-grid-cell>Cell 39-2</bp-grid-cell>
<bp-grid-cell>Cell 39-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 40-0</bp-grid-cell>
<bp-grid-cell>Cell 40-1</bp-grid-cell>
<bp-grid-cell>Cell 40-2</bp-grid-cell>
<bp-grid-cell>Cell 40-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 41-0</bp-grid-cell>
<bp-grid-cell>Cell 41-1</bp-grid-cell>
<bp-grid-cell>Cell 41-2</bp-grid-cell>
<bp-grid-cell>Cell 41-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 42-0</bp-grid-cell>
<bp-grid-cell>Cell 42-1</bp-grid-cell>
<bp-grid-cell>Cell 42-2</bp-grid-cell>
<bp-grid-cell>Cell 42-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 43-0</bp-grid-cell>
<bp-grid-cell>Cell 43-1</bp-grid-cell>
<bp-grid-cell>Cell 43-2</bp-grid-cell>
<bp-grid-cell>Cell 43-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 44-0</bp-grid-cell>
<bp-grid-cell>Cell 44-1</bp-grid-cell>
<bp-grid-cell>Cell 44-2</bp-grid-cell>
<bp-grid-cell>Cell 44-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 45-0</bp-grid-cell>
<bp-grid-cell>Cell 45-1</bp-grid-cell>
<bp-grid-cell>Cell 45-2</bp-grid-cell>
<bp-grid-cell>Cell 45-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 46-0</bp-grid-cell>
<bp-grid-cell>Cell 46-1</bp-grid-cell>
<bp-grid-cell>Cell 46-2</bp-grid-cell>
<bp-grid-cell>Cell 46-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 47-0</bp-grid-cell>
<bp-grid-cell>Cell 47-1</bp-grid-cell>
<bp-grid-cell>Cell 47-2</bp-grid-cell>
<bp-grid-cell>Cell 47-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 48-0</bp-grid-cell>
<bp-grid-cell>Cell 48-1</bp-grid-cell>
<bp-grid-cell>Cell 48-2</bp-grid-cell>
<bp-grid-cell>Cell 48-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 49-0</bp-grid-cell>
<bp-grid-cell>Cell 49-1</bp-grid-cell>
<bp-grid-cell>Cell 49-2</bp-grid-cell>
<bp-grid-cell>Cell 49-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 50-0</bp-grid-cell>
<bp-grid-cell>Cell 50-1</bp-grid-cell>
<bp-grid-cell>Cell 50-2</bp-grid-cell>
<bp-grid-cell>Cell 50-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 51-0</bp-grid-cell>
<bp-grid-cell>Cell 51-1</bp-grid-cell>
<bp-grid-cell>Cell 51-2</bp-grid-cell>
<bp-grid-cell>Cell 51-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 52-0</bp-grid-cell>
<bp-grid-cell>Cell 52-1</bp-grid-cell>
<bp-grid-cell>Cell 52-2</bp-grid-cell>
<bp-grid-cell>Cell 52-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 53-0</bp-grid-cell>
<bp-grid-cell>Cell 53-1</bp-grid-cell>
<bp-grid-cell>Cell 53-2</bp-grid-cell>
<bp-grid-cell>Cell 53-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 54-0</bp-grid-cell>
<bp-grid-cell>Cell 54-1</bp-grid-cell>
<bp-grid-cell>Cell 54-2</bp-grid-cell>
<bp-grid-cell>Cell 54-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 55-0</bp-grid-cell>
<bp-grid-cell>Cell 55-1</bp-grid-cell>
<bp-grid-cell>Cell 55-2</bp-grid-cell>
<bp-grid-cell>Cell 55-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 56-0</bp-grid-cell>
<bp-grid-cell>Cell 56-1</bp-grid-cell>
<bp-grid-cell>Cell 56-2</bp-grid-cell>
<bp-grid-cell>Cell 56-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 57-0</bp-grid-cell>
<bp-grid-cell>Cell 57-1</bp-grid-cell>
<bp-grid-cell>Cell 57-2</bp-grid-cell>
<bp-grid-cell>Cell 57-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 58-0</bp-grid-cell>
<bp-grid-cell>Cell 58-1</bp-grid-cell>
<bp-grid-cell>Cell 58-2</bp-grid-cell>
<bp-grid-cell>Cell 58-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 59-0</bp-grid-cell>
<bp-grid-cell>Cell 59-1</bp-grid-cell>
<bp-grid-cell>Cell 59-2</bp-grid-cell>
<bp-grid-cell>Cell 59-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 60-0</bp-grid-cell>
<bp-grid-cell>Cell 60-1</bp-grid-cell>
<bp-grid-cell>Cell 60-2</bp-grid-cell>
<bp-grid-cell>Cell 60-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 61-0</bp-grid-cell>
<bp-grid-cell>Cell 61-1</bp-grid-cell>
<bp-grid-cell>Cell 61-2</bp-grid-cell>
<bp-grid-cell>Cell 61-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 62-0</bp-grid-cell>
<bp-grid-cell>Cell 62-1</bp-grid-cell>
<bp-grid-cell>Cell 62-2</bp-grid-cell>
<bp-grid-cell>Cell 62-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 63-0</bp-grid-cell>
<bp-grid-cell>Cell 63-1</bp-grid-cell>
<bp-grid-cell>Cell 63-2</bp-grid-cell>
<bp-grid-cell>Cell 63-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 64-0</bp-grid-cell>
<bp-grid-cell>Cell 64-1</bp-grid-cell>
<bp-grid-cell>Cell 64-2</bp-grid-cell>
<bp-grid-cell>Cell 64-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 65-0</bp-grid-cell>
<bp-grid-cell>Cell 65-1</bp-grid-cell>
<bp-grid-cell>Cell 65-2</bp-grid-cell>
<bp-grid-cell>Cell 65-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 66-0</bp-grid-cell>
<bp-grid-cell>Cell 66-1</bp-grid-cell>
<bp-grid-cell>Cell 66-2</bp-grid-cell>
<bp-grid-cell>Cell 66-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 67-0</bp-grid-cell>
<bp-grid-cell>Cell 67-1</bp-grid-cell>
<bp-grid-cell>Cell 67-2</bp-grid-cell>
<bp-grid-cell>Cell 67-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 68-0</bp-grid-cell>
<bp-grid-cell>Cell 68-1</bp-grid-cell>
<bp-grid-cell>Cell 68-2</bp-grid-cell>
<bp-grid-cell>Cell 68-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 69-0</bp-grid-cell>
<bp-grid-cell>Cell 69-1</bp-grid-cell>
<bp-grid-cell>Cell 69-2</bp-grid-cell>
<bp-grid-cell>Cell 69-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 70-0</bp-grid-cell>
<bp-grid-cell>Cell 70-1</bp-grid-cell>
<bp-grid-cell>Cell 70-2</bp-grid-cell>
<bp-grid-cell>Cell 70-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 71-0</bp-grid-cell>
<bp-grid-cell>Cell 71-1</bp-grid-cell>
<bp-grid-cell>Cell 71-2</bp-grid-cell>
<bp-grid-cell>Cell 71-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 72-0</bp-grid-cell>
<bp-grid-cell>Cell 72-1</bp-grid-cell>
<bp-grid-cell>Cell 72-2</bp-grid-cell>
<bp-grid-cell>Cell 72-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 73-0</bp-grid-cell>
<bp-grid-cell>Cell 73-1</bp-grid-cell>
<bp-grid-cell>Cell 73-2</bp-grid-cell>
<bp-grid-cell>Cell 73-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 74-0</bp-grid-cell>
<bp-grid-cell>Cell 74-1</bp-grid-cell>
<bp-grid-cell>Cell 74-2</bp-grid-cell>
<bp-grid-cell>Cell 74-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 75-0</bp-grid-cell>
<bp-grid-cell>Cell 75-1</bp-grid-cell>
<bp-grid-cell>Cell 75-2</bp-grid-cell>
<bp-grid-cell>Cell 75-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 76-0</bp-grid-cell>
<bp-grid-cell>Cell 76-1</bp-grid-cell>
<bp-grid-cell>Cell 76-2</bp-grid-cell>
<bp-grid-cell>Cell 76-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 77-0</bp-grid-cell>
<bp-grid-cell>Cell 77-1</bp-grid-cell>
<bp-grid-cell>Cell 77-2</bp-grid-cell>
<bp-grid-cell>Cell 77-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 78-0</bp-grid-cell>
<bp-grid-cell>Cell 78-1</bp-grid-cell>
<bp-grid-cell>Cell 78-2</bp-grid-cell>
<bp-grid-cell>Cell 78-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 79-0</bp-grid-cell>
<bp-grid-cell>Cell 79-1</bp-grid-cell>
<bp-grid-cell>Cell 79-2</bp-grid-cell>
<bp-grid-cell>Cell 79-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 80-0</bp-grid-cell>
<bp-grid-cell>Cell 80-1</bp-grid-cell>
<bp-grid-cell>Cell 80-2</bp-grid-cell>
<bp-grid-cell>Cell 80-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 81-0</bp-grid-cell>
<bp-grid-cell>Cell 81-1</bp-grid-cell>
<bp-grid-cell>Cell 81-2</bp-grid-cell>
<bp-grid-cell>Cell 81-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 82-0</bp-grid-cell>
<bp-grid-cell>Cell 82-1</bp-grid-cell>
<bp-grid-cell>Cell 82-2</bp-grid-cell>
<bp-grid-cell>Cell 82-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 83-0</bp-grid-cell>
<bp-grid-cell>Cell 83-1</bp-grid-cell>
<bp-grid-cell>Cell 83-2</bp-grid-cell>
<bp-grid-cell>Cell 83-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 84-0</bp-grid-cell>
<bp-grid-cell>Cell 84-1</bp-grid-cell>
<bp-grid-cell>Cell 84-2</bp-grid-cell>
<bp-grid-cell>Cell 84-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 85-0</bp-grid-cell>
<bp-grid-cell>Cell 85-1</bp-grid-cell>
<bp-grid-cell>Cell 85-2</bp-grid-cell>
<bp-grid-cell>Cell 85-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 86-0</bp-grid-cell>
<bp-grid-cell>Cell 86-1</bp-grid-cell>
<bp-grid-cell>Cell 86-2</bp-grid-cell>
<bp-grid-cell>Cell 86-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 87-0</bp-grid-cell>
<bp-grid-cell>Cell 87-1</bp-grid-cell>
<bp-grid-cell>Cell 87-2</bp-grid-cell>
<bp-grid-cell>Cell 87-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 88-0</bp-grid-cell>
<bp-grid-cell>Cell 88-1</bp-grid-cell>
<bp-grid-cell>Cell 88-2</bp-grid-cell>
<bp-grid-cell>Cell 88-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 89-0</bp-grid-cell>
<bp-grid-cell>Cell 89-1</bp-grid-cell>
<bp-grid-cell>Cell 89-2</bp-grid-cell>
<bp-grid-cell>Cell 89-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 90-0</bp-grid-cell>
<bp-grid-cell>Cell 90-1</bp-grid-cell>
<bp-grid-cell>Cell 90-2</bp-grid-cell>
<bp-grid-cell>Cell 90-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 91-0</bp-grid-cell>
<bp-grid-cell>Cell 91-1</bp-grid-cell>
<bp-grid-cell>Cell 91-2</bp-grid-cell>
<bp-grid-cell>Cell 91-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 92-0</bp-grid-cell>
<bp-grid-cell>Cell 92-1</bp-grid-cell>
<bp-grid-cell>Cell 92-2</bp-grid-cell>
<bp-grid-cell>Cell 92-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 93-0</bp-grid-cell>
<bp-grid-cell>Cell 93-1</bp-grid-cell>
<bp-grid-cell>Cell 93-2</bp-grid-cell>
<bp-grid-cell>Cell 93-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 94-0</bp-grid-cell>
<bp-grid-cell>Cell 94-1</bp-grid-cell>
<bp-grid-cell>Cell 94-2</bp-grid-cell>
<bp-grid-cell>Cell 94-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row position="sticky">
<bp-grid-cell>Cell 95-0</bp-grid-cell>
<bp-grid-cell>Cell 95-1</bp-grid-cell>
<bp-grid-cell>Cell 95-2</bp-grid-cell>
<bp-grid-cell>Cell 95-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 96-0</bp-grid-cell>
<bp-grid-cell>Cell 96-1</bp-grid-cell>
<bp-grid-cell>Cell 96-2</bp-grid-cell>
<bp-grid-cell>Cell 96-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 97-0</bp-grid-cell>
<bp-grid-cell>Cell 97-1</bp-grid-cell>
<bp-grid-cell>Cell 97-2</bp-grid-cell>
<bp-grid-cell>Cell 97-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 98-0</bp-grid-cell>
<bp-grid-cell>Cell 98-1</bp-grid-cell>
<bp-grid-cell>Cell 98-2</bp-grid-cell>
<bp-grid-cell>Cell 98-3</bp-grid-cell>
</bp-grid-row>
<bp-grid-row>
<bp-grid-cell>Cell 99-0</bp-grid-cell>
<bp-grid-cell>Cell 99-1</bp-grid-cell>
<bp-grid-cell>Cell 99-2</bp-grid-cell>
<bp-grid-cell>Cell 99-3</bp-grid-cell>
</bp-grid-row>
</bp-grid>
Install
NPM
import '@blueprintui/grid/include/core.js';
import '@blueprintui/grid/include/keynav.js';
CDN
<script type="module">
import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/core.js/+esm';
import 'https://cdn.jsdelivr.net/npm/@blueprintui/grid/include/keynav.js/+esm';
</script>
bp-grid-row
Properties
| Name | Types | Description |
|---|
selected | boolean | selected visual state |
position | 'fixed' | 'sticky' | '' | position individual row relative to the grid scroll container |
role | string | |
Attributes
| Name | Types | Description |
|---|
selected | boolean | selected visual state |
position | 'fixed' | 'sticky' | '' | position individual row relative to the grid scroll container |
CSS Properties
| Name | Types | Description |
|---|
--border-top | | |
--border-bottom | | |
--background | | |
--min-height | | |
--border-width | | |
--border-color | | |
bp-grid
Properties
| Name | Types | Description |
|---|
i18n | | set default aria/i18n strings |
height | string | max height for grid container |
columnLayout | 'fixed' | 'flex' | column layout determines initial column width calculation |
rowStyle | Permutations< 'hover' | 'stripe' | 'border' > | determines the visual style for rows |
columnStyle | Permutations<'hover' | 'border'> | determines the visual style for columns |
selectable | 'multi' | 'single' | null | initializes grid to appropriate aria/a11y settings for selections |
scrollLock | boolean | disables scroll container |
layer | 'flat' | 'container' | determines the visual layer style (container vs flat for nesting) |
grid | HTMLElement[][] | |
role | string | |
Attributes
| Name | Types | Description |
|---|
i18n | | set default aria/i18n strings |
height | string | max height for grid container |
column-layout | 'fixed' | 'flex' | column layout determines initial column width calculation |
row-style | Permutations< 'hover' | 'stripe' | 'border' > | determines the visual style for rows |
column-style | Permutations<'hover' | 'border'> | determines the visual style for columns |
selectable | 'multi' | 'single' | null | initializes grid to appropriate aria/a11y settings for selections |
scroll-lock | boolean | disables scroll container |
layer | 'flat' | 'container' | determines the visual layer style (container vs flat for nesting) |
range-selection | boolean | |
CSS Properties
| Name | Types | Description |
|---|
--background | | |
--body-height | | |
--scrollbar-background | | |
--scrollbar-thumb-background | | |
--column-height | | |
--row-height | | |
--scroll-padding-top | | |
--row-content-visibility | | |
--border-width | | |
bp-grid-column
Properties
| Name | Types | Description |
|---|
width | string | control width of grid column via numeric or CSS value types |
position | 'sticky' | 'fixed' | position individual column relative to the grid scroll container |
alignment | 'start' | 'center' | 'end' | align column content and corresponding column cells |
role | string | |
ariaSort | string | |
Attributes
| Name | Types | Description |
|---|
width | string | control width of grid column via numeric or CSS value types |
position | 'sticky' | 'fixed' | position individual column relative to the grid scroll container |
alignment | 'start' | 'center' | 'end' | align column content and corresponding column cells |
CSS Properties
| Name | Types | Description |
|---|
--min-height | | |
--min-width | | |
--justify-content | | |
--padding-block | | |
--padding-inline | | |
--background | | |
--font-size | | |
--color | | |
--border-width | | |
Slots
| Name | Types | Description |
|---|
default | | column content |
bp-grid-cell
Properties
| Name | Types | Description |
|---|
role | string | |
CSS Properties
| Name | Types | Description |
|---|
--border-right | | |
--border-left | | |
--min-height | | |
--min-width | | |
--font-size | | |
--justify-content | | |
--padding-block | | |
--padding-inline-start | | |
--padding-inline-end | | |
--color | | |
--border-width | | |
Slots
| Name | Types | Description |
|---|
default | | cell content |