директива mat-table не рендерится на полную ширину

Question

У меня странная проблема, когда директива mat-table для элемента table не рендерится полностью.Нет никаких пользовательских стилей, связанных с таблицей, мат-таблицей или какими-либо элементами внутри таблицы.

Пример компонента таблицы:

<datatable [data]="data" [headers]"headers"></datatable>

Код таблицы:

<table mat-table matSort [dataSource]="dataSource">
    <ng-container *ngFor="let header of headers" [matColumnDef]="header.value">
        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="!sorting">
            {{header.name}}
        </th>
        <td mat-cell *matCellDef="let element">
            {{element[header.value]}}
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
</table>

Как видите, я генерирую заголовки, используя * ngFor, а не определяю каждый столбец.Вот заголовки и данные, которые я использую для этого примера:

headers: ITableHeader[] = [
    { name: 'ID', value: 'id' },
    { name: 'Name', value: 'name' },
    { name: 'Address', value: 'address' },
];
data = [
    { id: 0, name: 'name 0', address: 'address 0' },
    { id: 1, name: 'name 1', address: 'address 1' },
    { id: 2, name: 'name 2', address: 'address 2' },
    { id: 3, name: 'name 3', address: 'address 3' },
];

Компонент инициализируется с пустым MatTableDataSource.При изменении данных данные устанавливаются как this.dataSource.data = this.data;

Я проверил инспектор элементов после просмотра каждого элемента и не могу понять, что отличается от обычной таблицы.Кто-нибудь видел это раньше?

Answer 1

Решение показало себя, когда я добавил Bootstrap table класс.Я предполагал, что таблица по умолчанию будет заполнять родительский контейнер.

Чтобы устранить эту проблему, создайте класс со свойством width: 100% и добавьте его в элемент table.Bootstrap уже имеет вспомогательный класс, если вы используете это: w-100.

<table class="w-100" mat-table matSort [dataSource]="dataSource">
</table>