Ngx-datatable, как сделать так, чтобы последняя ячейка занимала пространство x и позволяла другим ячейкам разделять оставшиеся? - PullRequest
Новая
       8

Ngx-datatable, как сделать так, чтобы последняя ячейка занимала пространство x и позволяла другим ячейкам разделять оставшиеся?

1 голос
/ 19 октября 2019

В настоящее время я работаю над проектом, использующим ngx-datatables, и у меня возникли некоторые проблемы с получением правильной структуры таблицы. Структура таблицы, которую я имею сейчас, показана на связанном изображении ниже. Моя проблема в том, что я хочу, чтобы синяя коробка заняла все синее пространство + черное пространство, но я не могу найти никакого решения, когда гуглю, и теперь я застрял. Таким образом, первые три столбца должны занимать синий + черный, а последний столбец должен занимать только пространство внутри красного поля.

Ожидаемый результат

Вот коддля текущей таблицы. 

        <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>

Вот функции для установки некоторых стилей: 

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

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

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

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

Вот правила css: 

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