En mi proyecto React, estoy tratando de generar una tabla (usando react-data-table-component ).
Así que aquí está mi código:
import React from "react"; import DataTable from "react-data-table-component"; class WrapperTableTile extends React.Component { render(){ const {data} = this.props; const key = this.props.data[0]; const keys = Object.keys({...key}); return ( <div className="card p-4 mb-4"> <DataTable title="" columns={keys} data={data} defaultSortField="title" pagination selectableRows className="table myDataTable" highlightOnHover={true} /> </div> ) } } WrapperTableTile.defaultProps={ data:{ title:"", columns:[], rows:[] } } WrapperTableTile.propTypes={ data:WrapperTableTileType } export default WrapperTableTile; Mis data son una matriz JSON con diferentes objetos, y uso Object.key para obtener solo las claves del primer objeto, para usarlas como nombres de columnas en la tabla.
No funciona porque la salida de keys es un Object como: {'ID','NAME','AGE',...} en lugar de DataTable necesita una matriz para usar para columns={keys} , como:
{ name: "ID", selector: "ID", sortable: true, }, { name: "NAME", selector: "NAME", sortable: true, }, { name: "AGE", selector: "AGE", sortable: true, }, Entonces, al final, en React no sé cómo hacer algo como esto:
for (i = 0; i < keys.length; i++) { { name: keys[i], selector: keys[i], sortable: true, } }¿Cómo podría editar mi matriz para usarla como valor en mi componente?
const claves = ['ID','NOMBRE','EDAD'].map(clave=>{ nombre: clave, selector: clave, ordenable: verdadero });
Aquí está mi solución:
const tblKeys = keys.map((item) => ( { name: item, selector: item, sortable: true, } )) Luego en mi componente: columns={tblKeys}