Leave Table headers don't render when too many rows from API

[lylehenderson]

They are defined:
Leave Balances

<TableHead>
                                        <TableRow className={classes.leaveTableRow}>
                                            <TableCell align="left" padding={'none'}><Typography variant={'body3'} component={'div'}>{intl.formatMessage({id: 'LeaveBalance.type'})}</Typography></TableCell>
                                            <TableCell align="left" padding={'none'}>{intl.formatMessage({id: 'LeaveBalance.taken'})}</TableCell>
                                            <TableCell align="left" padding={'none'}>{intl.formatMessage({id: 'LeaveBalance.accrued'})}</TableCell>
                                            <TableCell align="right" padding={'none'} style={{"textAlign": "right"}}>{intl.formatMessage({id: 'LeaveBalance.balance'})}</TableCell>
                                        </TableRow>
                                    </TableHead>

but never render.

Account Balances Header isn't even defined.

[ellucianBret]

@lylehenderson I am not following. The TableHead does render the text for the column headers.

Account Balances doesn't use a table header.

Bret

[ellucianBret]

Maybe because you don't have data? Line 176 only renders the table is there is data.

I bet this is the case. It looks like it renders nothing if the data is returned with no transactions. It needs an empty view.

Bret

[lylehenderson]

[image: image.png] no headers on either card. The pages show them properly, but nothing on the cards. Thanks, Lyle

…

On Mon, Oct 16, 2023 at 2:59 PM Bret Hansen ***@***.***> wrote: @lylehenderson <https://github.com/lylehenderson> I am not following. The TableHead does render the text for the column headers. [image: Screenshot 2023-10-16 at 2 57 04 PM] <https://user-images.githubusercontent.com/7442142/275659099-d533ac70-68d8-447f-99eb-89108e3e21b7.png> Account Balances doesn't use a table header. Bret — Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIGB7CFTOGTRQRW3CEJHXOTX7WU4BAVCNFSM6AAAAAA6CU7ES2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRVGM2DEMRRGM> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[lylehenderson]

Actually I figured out the defect... too many options displaying. As soon as I removed all zero balance types from the card. the headers started working. PS.. note i did swap out the avail date for activity date. [image: image.png] Thanks, Lyle

…

On Mon, Oct 16, 2023 at 3:01 PM Bret Hansen ***@***.***> wrote: Maybe because you don't have data? Line 176 only renders the table is there is data. I bet this is the case. It looks like it renders nothing if the data is returned with no transactions. It needs an empty view. Bret — Reply to this email directly, view it on GitHub <#29 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIGB7CF2ROKT43SRGEZ7TADX7WVDZAVCNFSM6AAAAAA6CU7ES2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTONRVGM2DIMZQGE> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>

[lylehenderson]

Hmm none of my screenshots make it to these comments.
I did update the issue title to match the defect found.

I resolved this by:
if (data && Array.isArray(data)) { const leaves = data.filter(leaves => { return leaves.totalBalance !== '0' });
Removed any zero balance records from the Card preview. Not sure that is the best course of action, but it works.