TablePanel: Fix FooterRow styling for Safari and Firefox (#55543)

* Fix FooterRow styling for Safari and Firefox

* Change column header th to div
This commit is contained in:
Victor Marin 2022-09-22 09:33:15 +03:00 committed by GitHub
parent 06b38133a9
commit da78f33939
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -23,7 +23,7 @@ export const FooterRow = (props: FooterRowProps) => {
const tableStyles = useStyles2(getTableStyles);
return (
<table
<div
style={{
position: isPaginationVisible ? 'relative' : 'absolute',
width: totalColumnsWidth ? `${totalColumnsWidth}px` : '100%',
@ -33,22 +33,20 @@ export const FooterRow = (props: FooterRowProps) => {
{footerGroups.map((footerGroup: HeaderGroup) => {
const { key, ...footerGroupProps } = footerGroup.getFooterGroupProps();
return (
<tfoot
<div
className={tableStyles.tfoot}
{...footerGroupProps}
key={key}
data-testid={e2eSelectorsTable.footer}
style={height ? { height: `${height}px` } : undefined}
>
<tr>
{footerGroup.headers.map((column: ColumnInstance, index: number) =>
renderFooterCell(column, tableStyles, height)
)}
</tr>
</tfoot>
</div>
);
})}
</table>
</div>
);
};
@ -67,9 +65,9 @@ function renderFooterCell(column: ColumnInstance, tableStyles: TableStyles, heig
}
return (
<th className={tableStyles.headerCell} {...footerProps}>
<div className={tableStyles.headerCell} {...footerProps}>
{column.render('Footer')}
</th>
</div>
);
}