Cell template for whole cell - not only it's content
piernik opened this issue · comments
I'm tring to get ngrid
with bootstrap
theme.
I came to one problem. In bootstrap You and use contextual classes for rows or cells: https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes
When I try to define that contextual class in a cell using:
<div *pblNgridCellDef="'id'; value as value" class="table-primary">{{ value }}</div>
I define cell's content not it's cell.
As You see on screenshot it's not working right because of cell's padding:
Can You make that defining cell would affect whole cell not only it's contents?
Something like:
<ng-template *pblNgridCellDef="'id'; value as value" class="table-primary">{{ value }}</ng-template>
Or maybe pblNgridCellDef
classes would be transponded to cell not cell contents?
I found property ngridCellClass
, so it is resolved.
Thanks for pointing this out.
I was struggling to apply right-align styling to my nGrid number columns. I had tried using the PblBaseColumnDefinition.css
property and the pbl-ngrid-column-type-number
CSS class. Both of those solutions also apply the style to the column header.
If you'd like to apply a CSS class to just the data cells, you can use ngridCellClass
when writing the template:
<div *pblNgridCellTypeDef="'number'; value as value;" ngridCellClass="align-right">{{value | number: '1.2-2'}}</div>
.align-right {
justify-content: flex-end;
}
Not sure if this is the supported way to do this, but it's the only solution I could find.