shlomiassaf / ngrid

A angular grid for the enterprise

Home Page:https://shlomiassaf.github.io/ngrid

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:
ngrid-bootstrap-background

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.