I am trying to create table in using react, and I want whole column to have the same size as the header.

How do I achieve that?

I have:

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;

For table header I have

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;

and for other rows:

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;

Now for css, i use flexBox:

.GridTable{
    position: relative;
    display: flex;
    width: auto;
    grid: auto;

}

.TableHeader, .TableRows{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row
}

.headerItem{
    flex: none
}

However when the column name is name (e.g first value in column), its cell has 10px width, but if any name is longer/shorted its cell has different size.

How to fix the width of the column? Thanks for help!