Fixed igx column

Hi I have a igx grid in which one of the columns is filled out with delete-buttons.

I want to make this column fixed as shown here:

Can I exclude the column with the delete-buttons from pinning/hiding and all other operations and show it always on the first position in the igx-grid. I do not want the user to be able to perform any operations on the column with delete-buttons. The user should be able to pin/hide/move etc. the other columns.

Currently the delete column is shown as pinned, which I do not want, because the column is shown without name:

Here is my grid:

<igx-grid igxPreventDocumentScroll
          #grid1
          [height]="'500px'" width="80%" [autoGenerate]='false'
          rowHeight ="60px"
          [batchEditing]="true"
          [data]="posts"
          style="margin-top: 1%; margin-left: 10%; margin-right: 10%; "
          [showToolbar]="true"
          [allowFiltering]="true"
          [columnHiding]="true"
          [hiddenColumnsText]="'hidden'"
          [columnPinning]="true"
          [pinnedColumnsText]="'pinned'"
          [primaryKey]="'lot'"
          (cellEditDone)="cellEditDoneHandler($event)"
          >

  <igx-column width="170px" field="monat" dataType="string" header="Monat" [resizable]="true" [sortable]="true" [editable]="true" [movable]="true" [cellClasses]="condFormatting">
    <ng-template igxCell let-cell="cell">
      <div class="cellvalue">{{cell.value}}</div>
        <button igxButton="icon" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)">
          <igx-icon fontSet="material" style="color: black; ">edit</igx-icon>
        </button>
    </ng-template>
  </igx-column>

  <igx-column width="170px" field="datum" dataType="string" header="Datum" [resizable]="true" [sortable]="true" [editable]="true" [movable]="true" [cellClasses]="condFormatting">
    <ng-template igxCell let-cell="cell">
      <div class="cellvalue">{{cell.value}}</div>
      <button igxButton="icon" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)">
        <igx-icon>edit</igx-icon>
      </button>
    </ng-template>
  </igx-column>

  <igx-column width="100px" [filterable]="false" [pinned]="true" style="position: fixed;">
    <ng-template igxCell let-cell="cell">
      <button igxButton="icon" [disabled]="cell.row.deleted" (click)="deleteRow(cell.id.rowID)">
        <igx-icon>delete</igx-icon>
      </button>
    </ng-template>
  </igx-column>

</igx-grid>

My recommendation would be to take a different approach - the igx-grid has a built-in way to handle such functionality by taking levarage of the ActionStrip component, topic with sample and description.

Upon row hover action, an overlay area will apear where you can define as many custom actions you want, in the case of the demo, it will add only a Delete icon for row deletion.

As for the initial approach that you described, it can be achieved with a lot of custom logic which could lead to maintanance problems in the future. Although, you can go ahead and create a Custom Toolbar Hiding Action by providing a custom UI - this topic provide explanation on how to set custom content.. Basically, you can add a button and overlay and within this overlay provide a list of all columns, expect the "Delete column", and upon column selection perform column hiding wit the grid API.