Динамические фиксированные столбцы в таблице начальной загрузки - PullRequest
Новая
       41

Динамические фиксированные столбцы в таблице начальной загрузки

0 голосов
/ 02 октября 2018

У меня есть таблица, которая может иметь динамическое количество столбцов, и любой из этих столбцов может быть исправлен, т.е. не должен прокручиваться горизонтально.Я добавил [ngStyle], где я хочу, но таблица запуталась.Ширина всех столбцов также является динамической.

HTML-код: 

<div class="bootstrap4 grid">
    <toolbar [gridConfig]="config"
             [dataSource]="dataSource"
             [toggleFilters]="toggleFilters"
             [toggleColumn]="toggleColumn"
             [filtersVisible]="filtersVisible"
             [gridDisabled]="disabled"></toolbar>
    <div [ngClass]="{'scrollable': isScrollable()}">
    <table class="table table-striped table-hover">
        <colgroup>
            <col *ngFor="let columnConfig of getVisibleColumns()"
                 [ngStyle]="getColumnStyle(columnConfig)"/>
        </colgroup>
        <thead>
        <tr>
            <th [ngStyle]="getColumnStyle(columnConfig)" *ngFor="let columnConfig of getVisibleColumns()"
                class="{{getSortedClass(columnConfig)}}">
                <grid-header [columnConfig]="columnConfig"
                             [dataSource]="dataSource"
                             [gridSortable]="config.sortable">
                </grid-header>
            </th>
        </tr>
        <tr *ngIf="filtersVisible">
            <th [ngStyle]="getColumnStyle(columnConfig)" *ngFor="let columnConfig of getVisibleColumns()"
                class="filter-wrapper">
                <ng-container *ngIf="!isCommandColumn(columnConfig); then gridFilter else gridFilterCommands"></ng-container>
                <ng-template #gridFilter>
                    <grid-filter *ngIf="isFilterVisible(columnConfig.filterable)"
                                 [columnConfig]="columnConfig"
                                 [filter]="dataSource.currentFilter(columnConfig.field)">
                    </grid-filter>
                </ng-template>
                <ng-template #gridFilterCommands>
                    <grid-filter-commands [filters]="dataSource.filters">
                    </grid-filter-commands>
                </ng-template>
            </th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let rowData of dataSource.dataToDisplay()">
            <td [ngStyle]="getColumnStyle(columnConfig)" *ngFor="let columnConfig of getVisibleColumns()"
                cell-wrapper
                [columnConfig]="columnConfig"
                [rowData]="rowData"
                [onClick]="getCellWrapperClickAction(columnConfig)"
                [classes]="getCellWrapperClasses(columnConfig, rowData)">
                <grid-cell [columnConfig]="columnConfig"
                           [rowData]="rowData"
                           [cellData]="rowData[columnConfig.field]"
                           [gridDisabled]="disabled">
                </grid-cell>
            </td>
        </tr>
        </tbody>
    </table>
    </div>
    <no-filtered-results [dataSource]="dataSource"></no-filtered-results>
</div>

CSS: 

.fixedColumn{
  position: absolute;
}
...