时间戳

首页 > 解决方案 > 如何在 React-Table.js 中隐藏值为 null 的列？

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

问题描述

我有一个可用的 React 表，其中包含用于查看 Marathon 数据的列。然而，半程马拉松使用除了 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"
}

标签： javascriptreactjsreact-table

解决方案

我用这个选项解决了这个问题：

//...code definition table here
} = useTable(
    {
      columns,
      data,
      initialState: { 
        pageIndex: 0,
        hiddenColumns: ['id'].  //use property option, in columns define id name "id"
      },
    },
    usePagination
  );

推荐阅读