Hello, I have a grid with a singular column with a renderer function. My problem is that there seems to be no possibility of adding spaces between grid rows - I've tried almost every single styling without success.
How do you add spacing between grid rows? They kind of seem completely fixed. No matter if I add margins/paddings/gaps etc. they always stay the same.
See attached screenshot:
Hey awrzfwo,
Thanks for reaching out.
To add spacing between grid rows in Bryntum Grid, you can use the rowHeight property to increase the height of each row, and then use a renderer to add padding or margin within the cells. Here's an example of how you can achieve this:
const grid = new Grid({
rowHeight: 50, // Increase row height
columns: [
{
field: 'name',
text: 'Name',
renderer: ({ cellElement, value }) => {
// Add padding or margin inside the cell
cellElement.style.padding = '10px';
return value;
}
}
],
data: [
{ name: 'Dan Stevenson' },
{ name: 'Talisha Babin' }
]
});By setting the rowHeight, you ensure that there is enough space for any padding or margin you add within the cells. Adjust the rowHeight and padding values to suit your design needs.
If you need more control over the styling, you can also use CSS to target the grid rows and cells directly.
Best regards,
Márcio
How to ask for help? Please read our Support Policy
This would add a padding/margin inside of the cell yes, but that's not what I need. I need the margin between rows. Otherwise the cell keeps getting bigger and since the row has the border styling and the selected/hovered styling I need space between rows.
As you can see in the screenshot it does add 10px of margin but inside of the cell.
When I now move the border to the cell element it would create a gap between those cells. But when I now hover over them or select one it still outlines the border, because the row gets the hovered/selected styling.
See here:
Do you have any ideas which would create space between rows or possibly move the styling from selection/hovering over rows to the cellElement?
Regards
Would something like this work (see the unplanned task grid on the right side): https://bryntum.com/products/scheduler/examples/drag-from-grid-custom/
