Data Grid Column Alignment

[Sean_Page]

I saw some posts about the inability to style a Data Grid but thought I would ask if anyone had a suggestion to center columns, specifically Boolean columns.

I do already have a custom css on the data grid as a whole to provide custom margin within the container it’s in which has custom css to make it “wide”

div[class*=“section-container”] >div {
max-width: 95vw;
}

.Container-Grid
{
padding-right:15px;
padding-left:15px;
max-width: 95vw;
}
The header is fairly wide, and I would prefer the check boxes be centered.

[Himaladin]

I’m sorry — the Data Grid can’t be styled that way.

@Himaladin

The Data Grid is rendered on a canvas, not normal HTML elements.
Canvas here draws the grid as a graphic (similar to a screenshot), not actual <table> or <div> elements

[Sean_Page]

Thanks @Himaladin, I figured this would be the response, but I wanted to ask and verify.

[Himaladin]

Glide does not expose any column-alignment settings before the Data Grid reaches the canvas engine. Once it’s rendered as a canvas element, CSS can no longer target individual cells — so unfortunately this is a dead end. You may consider submitting a feature request for column alignment.

[Sean_Page]

Feature Request submitted here for anyone who would like to upvote it!

Column Alignment Options on Data Grid

I would be nice to have the option to pick a Column alignment when using the Data Grid component. [image] You could allow the alignment here in the DESIGN section or alternatively allow html styling within the ‘Display as’ box. [image]