When setting Table for fixed height, e.g. using style prop with 300px height, when we don't have enough rows to fill the height, causes body to have over scroll. (as the height of table is now 300px, the body is also 300px, but it doesn't take header into account).
Steps to reproduce:
create a table, and set the height higher than is needed. You will see the scrollbar even though it is not needed.
Example code to test in playground:
const columns: TableColumn[] = [
{
id: "sentOn",
title: "Sent on",
loadingStateType: "medium-text",
},
{
id: "subject",
title: "Subject",
loadingStateType: "long-text",
},
];
const data = [
{
id: 1,
sentOn: "2020-01-01",
subject: "Lorem ipsum dolor",
},
{
id: 2,
sentOn: "2022-02-02",
subject: "This is the subject",
},
];
return (
<Table
style={{
height: "150px",
}}
size="medium"
errorState={
<h1
style={{
textAlign: "center",
}}
>
Error State
</h1>
}
emptyState={
<h1
style={{
textAlign: "center",
}}
>
Empty State
</h1>
}
columns={columns}
>
<TableHeader>
{columns.map((headerCell, index) => (
<TableHeaderCell
key={index}
title={headerCell.title}
icon={headerCell.icon}
infoContent={headerCell.infoContent}
/>
))}
</TableHeader>
<TableBody>
{data.map(rowItem => (
<TableRow key={rowItem.id}>
<TableCell>{rowItem.sentOn}</TableCell>
<TableCell>{rowItem.subject}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
);
}
Expected behavior:
Scrollbar should not appear when all rows fit in table
Monday ticket [internal]
When setting Table for fixed height, e.g. using style prop with 300px height, when we don't have enough rows to fill the height, causes body to have over scroll. (as the height of table is now 300px, the body is also 300px, but it doesn't take header into account).
Steps to reproduce:
create a table, and set the height higher than is needed. You will see the scrollbar even though it is not needed.
Example code to test in playground:
Expected behavior:
Scrollbar should not appear when all rows fit in table
Monday ticket [internal]