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

Question

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

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

 constructor(props){
    super(props);
    this.state= {
        categoryid:0,
        saved:false,
        data:this.getdata(),
        rows:0
    }

}  


     getdata(){
    let data = [];
    let num=parseInt(this.state.rows);
    console.log(typeof(num),num);
    for (let i = 0; i < num; i++) {
        data.push({
            id: i,
            country:"Enter Data",
            sales: "Enter Data",
            expenses: "Enter Data",
        });
    }
    return data;
}



 render(){
           return(
                     <wjGrid.FlexGrid itemsSource={this.state.data}>
                        </wjGrid.FlexGrid>
                )
        } 

Но с помощью этого подхода я могу редактировать только ячейки строк, я также хочу редактировать заголовки столбцов, которые в приведенном выше примере - это идентификатор, страна, продажи, расходы. Как я могу переименовать их непосредственно в таблице, если не в сетке wijomo, как я могу получить это из другого метода, такого как react-table или любого другого. Любой другой источник также будет мне полезен, так как я застрял в этом надолго.

Answer 1

Вы можете использовать всплывающее окно wijmo для редактирования заголовка. Просто создайте Popup с элементом ввода и обработайте событие click FlexGrid. В событии щелчка отобразите всплывающее окно с помощью метода show. См. Образец ниже:

Образец