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

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

введите здесь описание изображения

Я пытался использовать 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;
  }

еще дать

введите здесь описание изображения


angular datatables angular-datatables datatables-1.10
person Cleb    schedule 10.02.2019    source источник
comment
Не похоже, что в таблице Angular Data есть возможность установить ширину столбца через dtOptions, но вы можете добиться этого с помощью CSS   -  person mkhayata    schedule 10.02.2019
comment
@mkhayata: Не могли бы вы рассказать об этом подробнее? Не могли бы вы добавить это в часть ngFor?   -  person Cleb    schedule 10.02.2019
comment
я написал ответ   -  person mkhayata    schedule 10.02.2019
comment
Вам нужно использовать CSS, если вы хотите точного контроля. См. это и этот ответ ...   -  person davidkonrad    schedule 15.02.2019
comment
@davidkonrad спасибо за ссылки! Сейчас в пути, поэтому протестировать смогу только через несколько дней.   -  person Cleb    schedule 16.02.2019

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете добиться этого с помощью 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>
person mkhayata    schedule 10.02.2019
comment
Спасибо! К сожалению, это не имеет никакого эффекта; когда я проверяю элемент, он по-прежнему показывает произвольную ширину. Я поиграю еще немного, а потом, если получится, проголосую и приму... - person Cleb; 10.02.2019
comment
Таблица данных может устанавливать ширину с помощью другого класса CSS с более высоким приоритетом, чем ваш класс description. Попробуйте обновить правило CSS width: 40% !important, и если это сработает, то для лучшей практики удалите !important и улучшите правило CSS, чтобы получить более высокий приоритет, чем тот, который предоставляется таблицей данных. - person mkhayata; 10.02.2019
comment
Также !important не помогает; будет расследовать. - person Cleb; 10.02.2019
comment
Хорошо, вы можете опубликовать инспекцию из devtool, чтобы узнать, в чем может быть проблема. - person mkhayata; 10.02.2019
comment
Я отредактировал свой вопрос и добавил скриншот. Был бы очень признателен, если бы вы могли взглянуть, спасибо! - person Cleb; 10.02.2019
comment
Причина в том, что таблица данных вводит атрибут style, который содержит ширину, переопределяющую любое правило CSS. Попробуйте использовать ngStyle Я обновляю ответ, чтобы показать, как это сделать. - person mkhayata; 10.02.2019
comment
Спасибо за обновление, но все равно не повезло; вывод выглядит так же, как и раньше. Но что ж, этот ответ должен помочь мне копнуть глубже, поэтому я пока голосую и принимаю, если найду решение. Спасибо за вашу помощь! - person Cleb; 10.02.2019

arrow_upward
1
arrow_downward

Я пробовал все комбинации параметров datatables и CSS из этого и других постов, ничего не получилось.

Вам необходимо обновить стиль столбца ПОСЛЕ того, как datatables отобразит его. Может быть обратный вызов, к которому я мог бы подключиться из таблицы данных, чтобы вызвать действие, но я просто установил быстрый тайм-аут, и все сработало нормально. В моем ngOnInit:

    setTimeout(()=>{
      let firstColumn = document.querySelector('th');
      firstColumn.setAttribute('style', 'width: 150px !important;');
    }, 10)

Возможно, вам придется сделать это снова, если таблица будет повторно визуализирована позже.

person Eric Soyke    schedule 22.01.2020
comment
Придется снова искать код; не заглядывал в это снова в течение почти года. Выглядит хорошо, поэтому я пока проголосовал за него :) - person Cleb; 22.01.2020