How to hide a column in react-data-grid

Question

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

It's hard to understand what you are asking. Could you include the code you have written so far and try to rephrase your question? — Tholle, Jul 04 '18 at 15:19
I included the code. Can you check my code please. Just tried to hide first column. — Md Isfar Uddin, Jul 05 '18 at 07:19

score 1 · Accepted Answer · answered Jul 05 '18 at 09:36

1

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

answered Jul 05 '18 at 09:36

Harikrishnan

1,097
8
13

Can you help me about custom row renderer? – Md Isfar Uddin Jul 11 '18 at 07:52

score 1 · Answer 2 · answered Oct 15 '19 at 01:13

Looks like, that the easiest way to hide some columns in RDG for now is the CSS... Suppose we have 5 columns and we want to hide from 3 to 5. Then:

.react-grid-HeaderCell:nth-child(3n), .react-grid-Cell:nth-child(3n), 
.react-grid-HeaderCell:nth-child(4n), .react-grid-Cell:nth-child(4n),
.react-grid-HeaderCell:nth-child(5n), .react-grid-Cell:nth-child(5n)  {
     display: none !important;

}

.react-grid-HeaderCell:nth-child(1n), .react-grid-Cell:nth-child(1n) {
     width: 50% !important;
}

.react-grid-HeaderCell:nth-child(2n), .react-grid-Cell:nth-child(2n) {
      left: 50% !important;
}

ogg130 · Answer 3 · 2020-02-10T02:39:55.157

I played around with the column format and got this to work where all other options I could find online lacked. It's pretty low tech, but works:

1) Give the column a value of hidden, which will hide the column but not the column header.

2) Give the column an empty name or else you will see text in the header.

3) Give the column a width of -1. A width of 0 leaves a small empty header column, but -1 'hides' it apparently. Not really sure what its doingbut it works, it looks like its maybe shifting it under the column to the left but im not a css master so not sure.

const columnTemplate = [
  {
    {
      key: "costCenter",
      name: "",
      width: -1,
      hidden: true
    }
}
];

score 0 · Answer 4 · answered May 12 '23 at 19:09

If you're defining your columns like so:

const columns = [
  {headerName: "name", field: "name"},
  {headerName: "age", field: "age"}
]

You can use Javascript to conditionally hide the column.

const hideAge = true
const columns = [
  {headerName: "name", field: "name"},
  ...(hideAge ? [] : {headerName: "age", field: "age"})
]

How to hide a column in react-data-grid

4 Answers4