javascript - 如何在 React-Table.js 中隐藏值为 null 的列？

Question

我有一个工作 react 表，其中包含用于查看马拉松数据的列。然而，半程马拉松使用除 2 之外的所有相同列。如果我的数据中某一列为 null，我如何动态地告诉 React-Table 隐藏它？以下是 Columns 数组中的示例列:

{
    id: "time_35k",
    Header: "35k",
    className: "hide-mobile",
    headerClassName: "hide-mobile",
    style: {
      textAlign: "center"
    },
    show: true,
    accessor: runner => formatTime(runner.time_35k),
    getProps: (state, rowInfo, column) => {
      if (state.value === null) {
        newColumn.show = false;
        newColumn.style.display = "none";
        newColumn.headerStyle.display = "none";
        return {
          style: {
            display: "none"
          },
          headerStyle: {
            display: "none"
          }
        };
      }
    }
  },

这是一个示例半程马拉松数据对象:

{
  "place": 1,
  "name": "Keith Meyer",
  "age": 22,
  "sex_place": 1,
  "sex": "M",
  "rank": 2,
  "time_5k": 987,
  "rank_5k": 1,
  "time_10k": 1976,
  "rank_10k": 1,
  "time_15k": 2981,
  "time_35k": null, // TODO: hide this table column
  "time": 4202,
  "pace": 321,
  "city": "Edwardsville",
  "state": "IL",
  "bib_number": 5011,
  "link": "http://www.youtube.com/watch?v=bkirVvr6acU&t=8s"
}

Answer 1

对于那些想知道为什么这不起作用的人:show 已弃用。请改用 initialstate.hiddenColumns。

检查: https://github.com/tannerlinsley/react-table/issues/1804