在 react-table 中显示布尔值和时间戳值：React Table+ React+Typescript答案

【问题标题】：Display boolean and timestamp values inside react-table : React Table+ React+Typescript在 react-table 中显示布尔值和时间戳值：React Table+ React+Typescript
【发布时间】：2019-10-06 17:26:42
【问题描述】：

我正在尝试打印某些 API 返回的布尔值和时间戳值。我不能这样做。帮助将不胜感激

列配置对象：

    <ReactTable
                data={this.state.data}
                columns={[
                            { 
                              Header: 'Name',   
                              accessor: 'name'
                            },
                            { 
                              Header: 'Age>18',   
                              accessor: d => d.isAgeAbove18.toString(); // this does not work
                            },
                            { 
                              Header: 'TimeStamp',   
                              accessor: d => d.timeVal.toString(); // this does not work
                            },
                     ]}

    />

【问题讨论】：

这对你有用吗d => d.isAgeAbove18 ? "YES" : "NO" ？
@euvs 不！这个不行
@euvs 你的建议确实有效，只是路过，看到 vr12 说不。顺便说一句，除了Header 和accessor，我还有id 道具。

标签： reactjs typescript react-table

【解决方案1】：

查看 React 表文档，它说只要访问器类型不是字符串，您就需要提供 id 属性。所以，我更新的格式应该是这样的。

columns={[
          { 
           Header: 'Name',   
           accessor: 'name'
          },
          { 
           id:'age'                  // add this
           Header: 'Age>18',   
           accessor: d => d.isAgeAbove18.toString();
          },
          { 
           id: 'timestamp'           // add this
           Header: 'TimeStamp',   
           accessor: d => d.timeVal.toString();
          },
         ]}

【讨论】：

【解决方案2】：

如果您使用过滤器，我认为这是最好的解决方案，

id: 'available',
Header: "Available",
accessor: d => { return d.available ? 'Available' : 'Not available' },
filterable: true,
Filter: () => (
  <select className='form-control' value={this.state.availability_value} onChange={(e) => this.applyFilter(e.target.value)} >
    <option value={`{ "available": "" }`}>Select</option>
    <option value={`{ "available": "" }`}>All</option>
    <option value={`{ "available": "1" }`}>Available</option>
    <option value={`{ "available": "0" }`}>Not available</option>
  </select>
)

【讨论】：