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.
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;
}