Question

我有一个工作的React Table，其中有用于查看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"
}

Answer 1

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

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

Answer 2

我可以使用以下选项解决问题：

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

Answer 3

尝试将列信息中的显示选项设置为基于数据，而不是仅基于数据。例如

{
    id: "time_35k",
    Header: "35k",
    className: "hide-mobile",
    headerClassName: "hide-mobile",
    style: {
      textAlign: "center"
    },
    show: data.columnName,
    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"
          }
        };
      }
    }
  },

如果data.columnName为null，则将是虚假的，并且您的列应隐藏。

Answer 4

我对@Trenton也有类似的需求。我想隐藏数据为空的列。这是我的解决方案。：D

    React.useEffect(() => {
    // for each column who's data is null, hide that column.

    let emptyColumns = [];

    _.forEach(data[0], function(value, key) {
      if (value === "") emptyColumns.push(key);
    });

    emptyColumns.push("parentEmailAddress");

    setHiddenColumns(emptyColumns);
  }, [setHiddenColumns, columns]);

经过几天的搜索，看是否有完成此操作的完整的惰性函数，我发现没有什么可以与setHiddenColumns（docs here）分开的。最后，我做了大多数人想做的事情，然后遍历该对象以查找空值，然后将该键添加到传递给emptyColumns的数组setHiddenColumns中。完成的工作：）

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

4 个答案: