Estoy tratando de crear una tabla usando reaccionar, y quiero que toda la columna tenga el mismo tamaño que el encabezado.

¿Cómo logro eso?

Tengo:

 function Table() { const [data, updateData] = React.useState({ columns: [], values: [] }); useEffect(() => { fetchData(); }, [""]); const fetchData = () => { fetch("http://localhost:8090/").then(response => { return response.json() }).then(data => { updateData(data); }) } return <div className="GridTable"> <TableHeader values={data.columns}/> </div> } export default Table;

Para el encabezado de la tabla tengo

 class TableHeader extends React.Component { constructor(props) { super(props); } render() { return <div className="TableHeader"> { this.props.values.map( value => ( <div className="headerItem">{value}</div> )) } </div> } } export default TableHeader;

y para otras filas:

 class TableRows extends React.Component { constructor(props) { super(props); } render() { return <div className="TableRows"> { this.props.values.map( value => ( <div className="headerItem">{value}</div> )) } </div> } } export default TableRows;

Ahora para css, uso flexBox:

 .GridTable{ position: relative; display: flex; width: auto; grid: auto; } .TableHeader, .TableRows{ position: relative; width: 100%; display: flex; flex-direction: row } .headerItem{ flex: none }

Sin embargo, cuando el nombre de la columna es el name (por ejemplo, el primer valor de la columna), su celda tiene un ancho de 10px , pero si algún nombre es más largo o más corto, su celda tiene un tamaño diferente.

¿Cómo arreglar el ancho de la columna? ¡Gracias por la ayuda!