Ngx-datatable how to make the last cell take x space and let the other cells split the remaining?

Viewed 859

I'm currently working on a project that is using ngx-datatables and I'm having some problem with getting the table structure correct. The table structure I have right now is shown in the linked image below. My problem is that I want the blue box to take up all the blue space + the black space but I cannot find any solution on it when googling and I am now stuck. So the first three columns should take up blue + black and the last column should only take up the space inside the red box.

Expected outcome

Here is the code for the current table.

        <ngx-datatable-column name="Header1" [headerClass]="getHeaderClass()" [cellClass]="getCellClass()">
          <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>{{ value }}</ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Header2" [headerClass]="getHeaderClass()" [cellClass]="getCellClass()">
          <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>{{ value }}</ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Header3" [headerClass]="getHeaderClass()" [cellClass]="getCellClass()">
          <ng-template let-column="column" ngx-datatable-header-template>{{ column.name }}</ng-template>
          <ng-template let-value="value" ngx-datatable-cell-template>{{ value }}</ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="" [headerClass]="getHeaderClass()" [cellClass]="getCellActionClass()">
          <ng-template let-value="value" ngx-datatable-cell-template >
            <div class="text-right">
              <a href="javascript:;">
                <i class="fa fa-edit"></i>Edit
              </a>
              <a class="text-danger" href="javascript:;">
                <i class="far fa-trash-alt"></i>Remove
              </a>
            </div>
          </ng-template>
        </ngx-datatable-column>

Here are the functions for setting some styling:

getRowClass = (): string => {
  return 'row-border';
};

getCellClass = (): string => {
  return 'cell-font-size';
};

getHeaderClass = (): string => {
  return 'header-padding'
};

getCellActionClass = () => {
  return 'cell-font-size'
};

Here are the css rules:

.row-border {
  border-top: 1px solid #e2e2e2;
}

.cell-font-size {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  padding: 0.3rem !important;
}

.header-padding {
  padding-left: 0.3rem !important;
}
0 Answers
Related