Блог

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

Например, в следующей таблице визуальный дизайн может потребовать, чтобы поля ID и Name просто соответствовали содержимому, но затем Описание заполняло остальную ширину содержащего элемента.

 | ID | Name  | Description    |
|----|-------|----------------|
| 1  | Foo   | Something foo  |
| 2  | Bar   | Something bar  |
 

В настоящее время использование sizeColumnsToFit() делает их все одинаковой ширины (что-то tableWidth / 3 в этом роде).

Хотя в моем предложении вам все равно нужно указать ширину, это позволяет использовать более «динамичные» столбцы.

Сначала задайте ширину столбцов, которую вы хотите уменьшить / зафиксировать:

 var columnDefs = [
    {
        headerName: "Column 1",
        field: "col1",
        width:20
    },
 

Переход к событию gridReady для изменения размера оставшихся столбцов (ширина которых не задана):

 $scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    onGridReady: () => {
        $scope.gridOptions.api.sizeColumnsToFit();
    }
    ...other properties
 

вы можете использовать свойство width сетки в определениях столбцов и привязать его к функции, которая может возвращать ширину в процентах.

 width: this.columnWidth(windowWidth, 10)

private columnWidth(windowWidth:number, columnSize:number) {
    return Math.floor((windowWidth * columnSize) / 100);
}