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 https://github.com/ellucian-developer/experience-ethos-examples/issues/29#issuecomment-1765342213, 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 https://github.com/ellucian-developer/experience-ethos-examples/issues/29#issuecomment-1765344301, 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.