Rendering complex headers

[lucadegasperi]

Hello,
From a Static HTML file I was given the following header for a table that has to show dynamic data. I'm just getting started with react-table and was wondering how would one go to transform this into a react component using react-table ?

<thead>
                <col />
                <colgroup span="2"></colgroup>
                <colgroup span="2"></colgroup>
                <tr>
                    <th rowspan="2" scope="col">
                        Added
                    </th>
                    <th className="u-text-left" rowspan="2" scope="col">
                        Product
                    </th>
                    <th rowspan="2" scope="col">
                        Color
                    </th>
                    <th rowspan="2" scope="col">
                        Price
                    </th>
                    <th colspan="3" scope="colgroup">
                        Store 1
                    </th>
                    <th colspan="3" scope="colgroup">
                        Store 2
                    </th>
                    <th className="u-border-left" rowspan="2" scope="col">
                        Actions
                    </th>
                </tr>
                <tr>
                    <th scope="col" data-header="store1">
                        Discrepancy
                    </th>
                    <th scope="col" data-header="store1">
                        Min
                    </th>
                    <th scope="col" data-header="store1">
                        Max
                    </th>
                    <th scope="col" data-header="store2" data-start="store2">
                        Discrepancy
                    </th>
                    <th scope="col" data-header="store2">
                        Min
                    </th>
                    <th scope="col" data-header="store2">
                        Max
                    </th>
                </tr>
</thead>