Search code examples
reactjsreact-data-grid

How to hide a column in react-data-grid


I tried to hide 'id' column in react-data-grid. I use

hidden:true

in that column but it hides only row value not column. I need the 'id' when editing the row value to send it to the response. Code is given below.

createColumns = async (data) => {
    let columns = [], keys = [],images=[];
    if (data)
        keys = Object.keys(data);
    for (let i = 0; i < keys.length; i++) {
        if(Object.keys(data)[i] === "id" || Object.keys(data)[i] === "order"){
            columns.push({key: Object.keys(data)[i],
                name: Object.keys(data)[i],
                hidden: true});
        }else{
            columns.push({key: Object.keys(data)[i], name: Object.keys(data)[i], editable: true});
        }
    }

    await this.setState({columns});
};

Solution

  • You just exclude the id from the columns list and keep the id value in the row getter method as row.id = 1.You can pass meta data to each column using the attribute getRowMetaData: (row) => row, when column is created and access the id when editing as this.props.dependentValues.id