Как установить ширину отдельного столбца? - PullRequest
Новая
       26

Как установить ширину отдельного столбца?

0 голосов
/ 10 февраля 2019

Я использую Angular DataTables для отображения некоторых данных, хранящихся в базе данных.Существует один столбец с именем description, который может содержать много текста, и в идеале он должен иметь большую ширину, чем остальные столбцы:

enter image description here

Iпробовал использовать columnDefs, а также autoWidth, но безуспешно (я пробовал как индивидуально, так и комбинацию двух).В моем component.ts файле: 

  dtOptions = {
    pagingType: 'full_numbers',
    pageLength: 5,
    scrollX: true,
    autoWidth: false,
    columnDefs: [{width: '40%', targets: 5}]
  };

А затем в component.html 

<table datatable [dtOptions]="dtOptions" class="row-border hover" style="width:100%">
  <thead>
      <tr>
        <th *ngFor="let column of feedbackTable.columns">
          {{ column }}
        </th>
      </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of feedbackTable.data">
      <td *ngFor="let cell of row">
        {{cell}}
      </td>
    </tr>
  </tbody>
</table>

scrollX работает нормально, однако я не получаю изменение ширины столбца,Использую ли я dtOptions правильно?

Когда я включаю ответ снизу, он все равно не влияет на ширину столбца: 

<th *ngFor="let column of feedbackTable.columns" [class.description]="column === 'user_description'">

и 

 th.description {
    width: 40% !important;
  }

еще дают

enter image description here

1 Ответ

0 голосов
/ 10 февраля 2019

Это можно сделать с помощью CSS следующим образом:

Добавить правило CSS 

th.description {
  width: 40%;
}

Затем в шаблоне компонента вы можете применить класс описания только к столбцу описания с Angular.привязка класса: 

<thead>
  <tr>
    <th *ngFor="let column of feedbackTable.columns" [class.description]="column === 'description'">
      {{ column }}
    </th>
  </tr>
</thead>

Также будет лучше, если вы создадите условие на основе идентификатора столбца, а не отображаемого имени, но тогда вам необходимо расширить свойство столбца, чтобы оно стало объектом, например column={id: 'desc', name: 'description'}

Обновление с помощью ngStyle: 

<thead>
  <tr>
    <th *ngFor="let column of feedbackTable.columns" [ngStyle]="{'width':column === 'description' ? '100px' : '' }">
      {{ column }}
    </th>
  </tr>
</thead>
...