Center align content in data grid

[rahulpd101]

I have which have 3 columns as shown in the photo. I want to center align the contents and header of 'Action' column so that looks good. How should I do that?

this.columns = [
      {
        header: 'Counter Number',
        field: 'counterDetails.CounterNo',
        class: data => {
          return data?.counterDetails.CounterNo == 'Not Assigned' ? 'warning' : '';
        },
        minWidth: 100,
        width: '100px',
      },
      {
        header: 'Service Advisor',
        field: 'name',
        minWidth: 100,
        width: '100px',
      },
      {
        header: 'Action',
        field: 'operation',
        minWidth: 80,
        width: '80px',
        pinned: 'right',
        type: 'button',
        buttons: [
          {
            type: 'icon',
            icon: 'edit',
            tooltip: 'Edit',
            click: record => this.edit(record),
          },
          {
            type: 'icon',
            color: 'warn',
            icon: 'delete',
            tooltip: 'Delete',
            click: record => this.delete(record),
          },
        ],
      },
    ];

[nzbin]

Define a class for some columns.

columns = [
  {
    header: 'Counter Number',
    field: 'counterDetails.CounterNo',
    class: (data) => {
      if (data == null) {
        return 'text-center'; // <= define a class
      } else {
        return data.counterDetails.CounterNo == 'Not Assigned' ? 'warning' : '';
      }
    },
    minWidth: 100,
    width: '100px',
  },
  ...
];

Then modify the CSS styles for the mtx-grid.

.text-center .mat-header-cell-inner {
  justify-content: center;
}

[nzbin]

I have published a new version 16.1.3. It can align content center just with the class text-center and don't need extra styles.

- .text-center .mat-header-cell-inner {
-   justify-content: center;
- }