How to rename column headers in table

Question

I am stuck in a problem where I want to rename a column header by click on it in a cell, I am using wijmo grid to make it happen,my rows are editing but I also want to edit column headers by clicking on it and change

After searching a lot i am unable to obtain through wijmo, can I implement it through some other method? so can edit both rows and column headers as well.Here below is wijmo grid attempt.

 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>
                )
        } 

But through this approach I can only edit row cells, I also want to edit column headers which in above example are, id,country,sales,expenses.How can I rename them directly on table, if not wijomo grid, how can I obtain this from other method like react-table or any other.Any other source will be also helpful for me as I am stuck in this for a long time.

Answer 1

You could use the wijmo's Popup control to edit the header. Simply create a Popup with an input element and handle the click event of FlexGrid. In the click event, show the popup using the show method. Refer to the sample below:

Sample