Как изменить заголовки столбцов после отображения сетки?

Question

Я использую компонент ag-grid-react, и я хотел бы иметь возможность изменять заголовки столбцов в моей сетке в ответ на события в моем компоненте React. Я вижу, что в API-интерфейсе столбца есть функция getDisplayNameForColumn(), но я не могу найти эквивалентную функцию настройки, чтобы позволить мне изменить заголовок столбца.

Я храню массив определений столбцов сетки в состоянии моего компонента React, и я думал, что просто обновив массив определений в состоянии, что компонент будет автоматически обновлен структурой React, и что мои новые заголовки столбцов будут отображается; однако этого не происходит, и исходные заголовки остаются на месте.

Можно ли изменить заголовок столбцов после инициализации и отображения сетки? Я скопировал код для моего компонента React ниже.

import React, { Component } from 'react' 
import { Page, Header, Title, Button, Content } from '@cdkglobal/react-jqm' 
import StatusBar from '@cdkglobal/react-jqm-statusbar' 
import StandardColsList from './StandardColsList' 
import { AgGridReact } from 'ag-grid-react' 
import { APP_TITLE } from '../constants' 
import 'ag-grid/dist/styles/ag-grid.css'; 
import 'ag-grid/dist/styles/theme-fresh.css'; 

export default class DatasetPage extends Component { 
static propTypes = { 
    onClickBack: React.PropTypes.func, 
    onClickSave: React.PropTypes.func, 
    dataset: React.PropTypes.array.isRequired, 
    uploaditem: React.PropTypes.object.isRequired, 
    stdcolumns: React.PropTypes.array 
} 

static defaultProps = { 
    dataset: [] 
} 

state = { 
    gridApi: {}, 
    columnApi: {}, 
    columnDefs: [], 
    displaystdcols: false, 
    selectedcol: -1 

} 

componentDidMount() { 
    if (this.props.onInit) { 
     this.props.onInit() 
    } 

    this.setState({ columnDefs: this.buildColumns(this.props.dataset[0]) }) 

} 

buildColumns(sampleRow) { 
    // Build a columns definition array for the React data grid component 
    let columns = [] 
    let colIndex = 0 

    for (let column in sampleRow) { 

     let columnDef = { 
      colId: colIndex, 
      field: column, 
      headerName: column, 
      minWidth: '80px', 
      stdcolIndex: -1 
     } 

     colIndex++ 
     columns.push(columnDef) 
    } 

    return columns 

} 

onGridReady(params) { 
    this.setState({ gridApi: params.api }) 
    this.setState({ columnApi: params.columnApi }) 
} 

render() { 

    const columnDefs = this.state.columnDefs 
    const agDivStyle = { 
     height: '500px' 
    } 

    const onCellClicked = (event) => { 
     // Set the selected column index 
     this.setState({ selectedcol: event.colDef.colId }) 

     // Display the standard columns popup 
     this.setState({ displaystdcols: true }) 
    } 

    const onSaveColMapping = (selectedStdCol) => { 
     // Save the column mapping 
     const columnApi = this.state.columnApi 
     const column = columnApi.getColumn(this.state.selectedcol) 

     if (selectedStdCol > -1) { 

      // Update the column definition for the selected column 
      let columnDefs = this.state.columnDefs 
      columnDefs[this.state.selectedcol].stdcolIndex = selectedStdCol 
      columnDefs[this.state.selectedcol].headerName = this.props.stdcolumns[selectedStdCol].description 
      this.setState({ columnDefs: columnDefs }) 

      column.colDef.headerName = this.props.stdcolumns[selectedStdCol].description 
      column.colDef.stdcolIndex = selectedStdCol 
      console.log(column) 
      console.log(columnApi.getDisplayNameForColumn(column)) 

      // Now refresh the grid 
      // columnApi.setColumnState(columnDefs) 
      this.state.gridApi.refreshView() 

     } 

     // Hide the standard columns popup 
     this.setState({ displaystdcols: false }) 
    } 

    const onClosePopup =() => { 
     this.setState({ displaystdcols: false }) 
    } 

    let stdcolspopup 
    if (this.state.displaystdcols) { 
     stdcolspopup = (
      <StandardColsList standardcols={this.props.stdcolumns} selectedcoldef={this.state.columnDefs[this.state.selectedcol]} onClickOK={onSaveColMapping} onClickCancel={onClosePopup} /> 
     ) 

    } 


    return (
     <Page> 
      <Header> 
       <Button icon="carat-l" corners shadow pos="left" alt={false} onClick={this.props.onClickBack}>Back</Button> 
       <Title>{APP_TITLE}</Title> 
       <Button primary corners shadow pos="right" icon="plus" alt={false} onClick={this.props.onClickSave}>Save</Button> 
       <StatusBar name={this.props.uploaditem.uploadfile} /> 
      </Header> 

      <Content className="has-status-bar"> 
       <div className="ag-fresh" style={agDivStyle}> 
        <AgGridReact 

         // listen for events with React callbacks 
         // onRowSelected={this.onRowSelected.bind(this)} 
         onCellClicked={onCellClicked} 
         onGridReady={this.onGridReady.bind(this)} 

         // binding to properties within React State or Props 
         // showToolPanel={this.state.showToolPanel} 
         // quickFilterText={this.state.quickFilterText} 
         // icons={this.state.icons} 

         // column definitions and row data are immutable, the grid 
         // will update when these lists change 
         columnDefs={columnDefs} 
         rowData={this.props.dataset} 

         // or provide props the old way with no binding 
         enableColResize="true" 
         rowSelection="multiple" 
         suppressRowClickSelection="true" 
         enableSorting="true" 
         enableFilter="false" 
         rowHeight="22" 
         /> 

        {stdcolspopup} 
       </div> 

      </Content> 
     </Page> 
    ) 

} 

}

Answer 1

не реагирует конкретно, но это, как вы могли бы сделать это с простой старый JavaScript:

var makeCol = gridOptions.columnApi.getColumn("make") 
makeCol.colDef.headerName="New Header Name"; 
gridOptions.api.refreshHeader(); 

Это может, очевидно, завернутые в функцию, которая будет вызвана, когда вас хотите, чтобы заголовок обновлялся