Как отключить функцию автоширирования столбцов в Clarity Datagrid? - PullRequest
Новая
       21

Как отключить функцию автоширирования столбцов в Clarity Datagrid?

1 голос
/ 10 февраля 2020

Мне нужно динамически построить столбцы Clarity Datagrid в Angular. Вот как я это делаю:

У меня есть массив columnsDef, который содержит определение полей, которые мне нужно показать, например: 

columnsDef = [
{id:'id', label:'ID'},
{id:'client', label:'Client/Prospect'},
...
]

и другую переменную backlog который содержит фактические данные для отображения в сетке.

затем, в моем шаблоне html, у меня есть следующий код для определения заголовков и ячеек столбцов: 

<clr-datagrid>
  <clr-dg-column *ngFor="let def of columnsDef" [clrDgField]="def.id">
     {{ def.label }}
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let request of backlog" [clrDgItem]="request">
      <clr-dg-cell *ngFor="let def of columnsDef">
          {{ request[def.id] }}
      </clr-dg-cell>
  </clr-dg-row>
</clr-datagrid>

Это на самом деле "работает", но выравнивание столбцов все испортилось , Значения не ниже их заголовков, а ширина ячеек отличается от строки к строке. enter image description here

(Извините, я вынужден пикселизировать некоторые конфиденциальные данные)

Как это исправить?

1 Ответ

1 голос
/ 10 февраля 2020

Dynami c столбцы не получают рассчитанную ширину из-за характера жизненного цикла, содержимое не отображается вовремя, чтобы узнать размер, поэтому они получают ширину по умолчанию. Если вы поместите привязку [style.width.px]="100" в каждый столбец, он легко выберет этот размер по умолчанию.

Другой вариант, который я бы порекомендовал, - определить все столбцы, а затем динамически скрыть те, которые вам не нужны. Это означает, что таблица полностью известна Datagrid, и вычисления должны быть лучше. 

    <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: isColumnHidden}">
            Column Name
        </ng-container>
    </clr-dg-column>

В некоторых случаях это может не иметь смысла (поскольку в некоторых случаях столбцы вообще не должны быть доступны). В этих случаях я обычно рекомендую просто определять разные таблицы данных для каждого случая вместо того, чтобы пытаться всегда иметь динамически построенный. Это делает его более явным и декларативным, что такое Datagrid, и будет отображать более чисто.

...