Unable to text-align center with PrimeNg DataTable

Question

I am trying to use PrimeNg and bootstrap together. Maybe this inherently bad? Just seems that PrimeNg alone is not sufficient.

I'm trying to have a button centered in a column as shown in their documentation: https://www.primefaces.org/primeng/#/datatable/templating For me however, it is always left aligned.

index.html

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" href="/node_modules/primeng/resources/primeng.min.css" />

foo.component.html

  <p-dataTable [value]="mixData" [editable]="true" sortField="mixType" id="MixTypeTable">

        <p-column id="deleteColumn" styleClass="col-button">
            <ng-template let-row="rowData" pTemplate="body" >
                <a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
            </ng-template>
        </p-column>

    </p-dataTable>

foo.component.ts

@Component({
    selector: 'qtyPane',
    templateUrl: './app/register/foo.component.html',
    styleUrls: ['./app/register/foo.component.css'],
    providers: []
})

In my foo.component.css, it seems like no selector for the td with the button has any effect. Other styles work on other elements in foo.component.html so I know the css is being reached but does not work at all on the table.

foo.component.css, I tried all of these:

#deleteColumn td {
    text-align: center;
}


table > tbody > td.col-button {
    text-align: center;
}

.col-button {
    width: 10%;
    text-align: center;
}

td.col-button {
    text-align: center;
}

Solution

I'm not positive what styleClass="col-button" does, so I might be wrong, but looking at the documentation I don't think it puts that class on the td.

Here's what I would try first:

<p-column id="deleteColumn" styleClass="col-button">
     <ng-template let-row="rowData" pTemplate="body" >
         <div class="my-center-text">
            <a class="btn btn-default btn-circle" (click)="deleteMixRow(row)" id="deleteButton"><i class="fa fa-minus" ></i></a>
         </div>
     </ng-template>
</p-column>

The CSS:

.my-center-text {
    text-align: center;
    width: 100%;
}

If that doesn't work you might need to do some kind of deep selecting. I know Angular is in a state of flux but something like this might work for now:

#deleteColumn /deep/ td {
   text-align: center;
}

Because Angular prevents styles in one component from affected another, you can't directly get access to the td inside of the p-component by default. By adding the /deep/ to the selector path it will apply the styles to nested components as well