Currently, I am utilizing semantic-ui-react, however, I am also willing to consider responses pertaining to semantic-ui exclusively.
The issue I am facing is with a paginated table. The last page, which may contain fewer rows, ends up having a different height compared to other pages. I need assistance in fixing the height of the table.
Below is the simple code snippet I am working with:
<Table singleLine>
<TableHeader data={ entities } columns={ columns }/>
<Table.Body>
{ tableBody }
</Table.Body>
{ paginator }
</Table>
The component TableHeader looks like this:
<Table.Header>
<Table.Row>
{
_.map(columns, (column) => {
return <Table.HeaderCell>{ column(data) }</Table.HeaderCell>;
})
}
</Table.Row>
</Table.Header>
As for tableBody, it is structured as follows:
for (let index = pageSize * pageIndex; index < Math.min(pageSize * (pageIndex + 1), entities.length); index++) {
tableBody.push(<TableRow data={ entities[index] } rowConfig={ rowConfig }/>);
}
In addition, here is the layout for tableRow:
<Table.Row>
{
_.map(rowConfig, (cellConfig) => {
return <Table.Cell>{ cellConfig(data) }</Table.Cell>;
})
}
</Table.Row>