TableRow not working properly

[pavlos2094]

Hi, thanks for your repo. I am trying to create a table with multiple rows but the TableRow Component doesn't seem to work properly. Below code:

`

<TableRow>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
</TableRow>
<TableRow>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell weighting={0.3} getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
    <DataTableCell getContent={() => 'First'}/>
</TableRow>

`

renders this result:

that is, both rows one on top of the other instead of below. Any help? Thanks!

[dmk99]

Hi,

This is not entirely clear in the documentation/storybook, I will update the documentation to be a bit clearer.

You should only supply one TableBody (and/or one TableHeader) into a table and use the data in the Table object to drive the number of rows to display.

So with using your example from above it should look like:

                <Table
                    data={[0, 0]}
                >
                    <TableHeader>
                        <TableCell weighting={0.3}>
                            First Name
                        </TableCell>
                        <TableCell weighting={0.3}>
                            Last Name
                        </TableCell>
                        <TableCell>
                            DOB
                        </TableCell>
                        <TableCell>
                            Country
                        </TableCell>
                        <TableCell>
                            Phone Number
                        </TableCell>
                    </TableHeader>
                    <TableBody>
                        <DataTableCell weighting={0.3} getContent={() => 'First'}/>
                        <DataTableCell weighting={0.3} getContent={() => 'First'}/>
                        <DataTableCell getContent={() => 'First'}/>
                        <DataTableCell getContent={() => 'First'}/>
                        <DataTableCell getContent={() => 'First'}/>
                    </TableBody>
                </Table>

Where data is two "rows". You should then get something like:

Hopefully this helps!

[dmk99]

Just as a follow on from my previous comment, TableRow shouldn't be used directly it's an internal component which I shouldn't be exporting out. TableBody and TableHeader use TableRow internally to generate the row container.

[pavlos2094]

I see, works like a charm now! Thanks.