Как обрабатывать заголовок большого столбца для переноса в следующую строку

#reactjs #ag-grid-react

#reactjs #ag-grid-реагировать

Вопрос:

Я использую AGGrid в своем коде React, и некоторые тексты заголовков столбцов слишком длинные, поэтому, когда они отображаются, я не могу прочитать весь заголовок столбца, но я вижу несколько… Есть ли способ перенести текст заголовка в следующую строку без увеличения ширины всего столбца? Я попытался использовать setHEaderHeight. это не переносит текст в следующую строку.

 type Props = {
    comDto:CompDTO;
}
type State = {
}

const componentCssClass = componentStyle(`
    
    .ag-cell.fullText {
        white-space: normal;
        word-break: normal;
        line-height: 1.4em;
        padding-top: 4px;
        padding-bottom: 4px;
    }      
`);

export class CompGrid extends React.PureComponent<Props, State> {

    static compCols: Array<ColDef> = [
        {headerName: 'Market', field: 'marketType.marketName', width: 250},
        {headerName: 'My Role', field: 'myConfirmationRole', width: 150},
        {headerName: 'CP Matching', field: 'partyMatchingRole', width: 150},
        {headerName: 'BR Matching', field: 'MatchingRole', width: 150},
        {headerName: 'Reg Role', field: 'usRegRole', width: 150},
        {headerName: 'Create USIs on My Behalf', field: 'createUSIOnBehalf',
            cellRenderer: 'renderer_complistcheckbox'},
        {headerName: 'Voluntarily Report to MY Company', field: 'voluntaryReport', 
            cellRenderer: 'renderer_complistcheckbox'},
        {headerName: 'Use VICE DCO Valuation', field: 'useDCOValuations', width: 200,
            cellRenderer: 'renderer_comlistcheckbox'},
    ];

    private static gridComponents = {
        'renderer_complistcheckbox': CellRenderer_ReadOnlyCheckbox
    };

    render(){
        const {compDto} = this.props;
        return (
            <div className={cx(flexAgGridContainerCss, componentCssClass)}>
                <AgDataGrid
                    frameworkComponents={ComGrid.gridComponents}
                    columnDefs={CompGrid.compCols}
                    suppressMovableColumns
                    suppressCellSelection
                    suppressRowHoverHighlight
                    rowData={compDto.marketRoles}
                    onGridReady={CompGrid.onGridReady}
                    onGridSizeChanged={CompGrid.onGridSizeChanged}
                    onColumnResized={CompGrid.onColumnResized}
                />
            </div>

        );
    }

    private static onGridReady(params) {
        const gridApi = params.api;
        gridApi.setHeaderHeight(30);
        gridApi.sizeColumnsToFit(); // for * size columns
    }

    private static onGridSizeChanged(params) {
        const gridApi = params.api;

        gridApi.sizeColumnsToFit(); // for * size columns
    }

    private static onColumnResized(params) {
        const gridApi = params.api;

        gridApi.resetRowHeights();  // for autoHeight...
    }


}

Спасибо

Ответ №1:

Насколько я понимаю, вы ищете autoSizeColumn() .

 .
.
let ColumnApi;
.
.
onGridReady= (gridApi, columnApi ) => {
    gridApi.setHeaderHeight(30);
    gridApi.sizeColumnsToFit();
    ColumnApi = columnApi;
    this.autoSizeColumn();
};

autoSizeColumn = () => {
    let allcolumn = [];
    ColumnApi.getAllColumns().forEach((column) => {
        allcolumn.push(column.colId);
    });
    ColumnApi.autoSizeColumns(allcolumn);
}

Вы можете вызвать это autoSizeColumn (); оттуда, где вы добавляете свои строки. Его основное изменение размера заголовка столбца для строки с максимальной шириной определяет размер заголовка вашего столбца.

Примечание: autoSizeColumn функция не изменяет заголовки столбцов, которые не видны на странице.

Для получения дополнительной информации и документов вы можете проверить эту ссылку

1. Это не решило мою проблему. Что мне нужно, так это если данные внутри ячейки слишком длинные, то вместо того, чтобы показывать их как …. они должны переноситься на следующую строку, и пользователь должен иметь возможность просматривать все содержимое строки.