Búsqueda de sitios web

reactjs - Mostrar valores booleanos y de marca de tiempo dentro de react-table: React Table + React + Typescript


Estoy tratando de imprimir los valores booleanos y de marca de tiempo que son devueltos por alguna API. No puedo hacer lo mismo. Se agradecería la ayuda

objeto de configuración de columna:

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

    />

Respuesta #1

Al mirar la documentación de las tablas de React, dice que necesitas proporcionar la propiedad id siempre que el tipo de accesor no sea una cadena. Por lo tanto, el formato actualizado debería ser este.

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

Respuesta #2

Creo que esta es la mejor solución en caso de que estés usando filtros,

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

Artículos relacionados