Display boolean and timestamp values inside react-table : React Table+ React+Typescript

Question

I am trying to print the boolean and timestamp values that are returned by some API. I am unable to do the same. Help would be appreciated

column config object:

    <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
                            },
                     ]}

    />

Will this work for you d => d.isAgeAbove18 ? "YES" : "NO" ? — euvs
– euvs, Commented May 20, 2019 at 10:48
@euvs your suggestion did works, was just passing by and saw vr12 saying no. Btw i had id prop besides Header & accessor. — chankruze
– chankruze, Commented Nov 5, 2020 at 9:13

Himanshu Mishra · Accepted Answer · 2019-05-20 10:56:57Z

16

Looking at the React tables documentation, it says that you need to provide the id property whenever the accessor type is not a string. So, I the updated format should be this.

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();
          },
         ]}

answered May 20, 2019 at 10:56

Himanshu Mishra

2562 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tiresia Over a year ago

In order to avoid the "Property does not exist on type 'object'" error, you might need to explicitly cast the column object to "any", e.g. accessor: (d: any) => d.isAgeAbove18.toString(); See this React-Table issue and the related PR thread for discussions around this.

RobC · Accepted Answer · 2019-10-13 12:31:57Z

3

I think this is the best solution in case you are using filters,

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

edited Oct 13, 2019 at 12:31

RobC

25.3k21 gold badges87 silver badges88 bronze badges

answered Oct 13, 2019 at 12:12

nacho

6511 gold badge12 silver badges32 bronze badges

Collectives™ on Stack Overflow

Display boolean and timestamp values inside react-table : React Table+ React+Typescript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related