如何隐藏反应数据网格中的列

Question

我试图隐藏 react-data-grid 中的 'id' 列。我用

hidden:true

在该列中，但它仅隐藏行值而不隐藏列。在编辑行值以将其发送到响应时，我需要 'id'。代码如下。

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

Answer 1

您只需从列列表中排除 id 并将行 getter 方法中的 id 值保留为 row.id = 1。您可以使用属性 [=11= 将元数据传递到每个列] 创建列并在编辑时访问 id this.props.dependentValues.id

Answer 2

看起来，在 RDG for now 中隐藏某些列的最简单方法是 CSS... 假设我们有 5 列，我们想从 3 隐藏到 5。那么：

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

Answer 3

我试用了列格式，并在我可以在网上找到的所有其他选项都缺乏的地方使用它。它的技术含量很低，但有效：

1) 给该列赋值hidden，会隐藏该列而不是header列。

2) 为该列指定一个空名称，否则您将在 header.

中看到文本

3) 将列宽设置为-1。宽度为 0 会留下一个小的空 header 列，但显然是 -1 'hides'。不太确定它在做什么，但它有效，看起来它可能将它从列下方移到左侧但我不是 css 大师所以不确定。

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

如何隐藏反应数据网格中的列

How to hide a column in react-data-grid

reactjs

react-data-grid