Add "baseHeight" property to AnalyticalTable

[Kalita-Roman]

Is your feature request related to a problem?

Inability to create a user-friendly user experience while complying with a11y on narrow screens (320px).
We can't allow horzontal scrolling WCAG 2.2 SC 1.4.10, so we use responsivePopIn for columns.

But it leads to some undesirable edge cases (see Additional Context with edge cases and screenshots).

• The table with a few rows. It leads to the Edge Case 1, a focused cell visible not fully.
• Using the prop. adjustTableHeightOnPopIn, but with many rows. It leads to the Edge Case 2, very long screens with double scrolls - poor UX.
• The table with a few rows, using the prop. visibleRowCountMode="Auto". and a conteiner with fixed height. It leads to the Edge Case 3:
  1. The empty space appears below the table - poor UX (leaving empty rows doesn't acceptable).
  2. The table overlap the following content on narrow screens.

Describe the solution you'd like

Add an optional prop: baseHeight.
As I see it, the table's height is calculable to fit it into the container. And this total table's height can be compared with baseHeight instead of the container.

The desired behavior with it:

IF: The total row height is less than baseHeight
THEN: Leave the table's height as it is.

IF: The total row height is more than baseHeight
THEN EITHER:
OR: Leave the maximum rows that could be fit in without exceeding the baseHeight and add scrolling.
OR: Leave one row only .

Describe alternatives you've considered

As alternative, adjust the row count on popIn. Ideally make it by dafault.
E.g.
A table doesn't have the popin effect. It has heignt regularHeight = rowCount * regularRowHeight.
If the table has the popin effect, then row count will be popinRowCount = regularHeight / popinRowHeight

popinRowCount = Math.max( Math.floor( rowCount * regularRowHeight / popinRowHeight ), 1 )

a few data rows	many data rows

Additional Context

Edge case 1: the Tabel with few rows.
Focused area isn't visible fully. WCAG 2.2 SC 2.4.11.

Edge case 2: the Tabel with many rows.
Very long screens with double scrolls - poor UX.

Edge case 2: the Tabel with a few rows, wrapped into a container and visibleRowCountMode="Auto"
1: The empty space appears below the table - poor UX (leaving empty rows doesn't acceptable).
2: The table overlap the following content on narrow screens.

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @Kalita-Roman

Thanks for the detailed issue report, but to better assist you, we’ll still need a bit more information:

Edge Case 3:
...
2. The table overlap the following content on narrow screens.

This shouldn’t be happening. Could you reproduce this behavior in a StackBlitz example? You can fork the one I’ve posted below.

Edge case 2: the Tabel with a few rows, wrapped into a container and visibleRowCountMode="Auto"
1: The empty space appears below the table - poor UX (leaving empty rows doesn't acceptable).

Just to clarify: the "AutoWithEmptyRows" mode intentionally fills the remaining space with empty rows, as this is the intended design. Did you mean that you don’t want to use this mode because of the empty rows?

---

• We want to avoid introducing a baseHeight or similar prop. By default, the table should either define its height via the number of rows (using visibleRows) or fill the container when one of the "Auto" visibleRowCountModes is used.
• Changing the row count dynamically on pop-in would require a new mode prop to avoid breaking changes.
• If you prefer behavior similar to the Table component, where it grows with content, you can set visibleRows to a very high number like Number.MAX_SAFE_INTEGER. Note: This effectively disables vertical virtualization and is therefore not recommended for large datasets.

---

In my opinion, the best path forward is to create a plugin hook to support this behavior (if feasible).

I’ve already created a basic hook that:

• Provides access to the calculated row height
• Offers a way to get/set the table’s bodyHeight (“baseHeight”)
• Demonstrates different methods to control visibleRows

Please check out the StackBlitz example and let me know if this approach addresses your issue. If so, we can explore whether offering a public plugin hook would add value for other use cases as well:

https://stackblitz.com/edit/ui5wcr-at-zg7vpww4?file=src%2FApp.tsx

[Kalita-Roman]

Hello @Lukas742 !

---

There is an example of overlaping https://stackblitz.com/edit/ui5wcr-at-jjgzmgoj?file=src%2FApp.tsx.
The example is made as a fork of yours one. The chages is marked with commets with '--->'

It happens when the table's container height is less than row height in popin mode.
E.g. we have a table with many columns and we don't expect it to contain many rows.
However, on smaller devices, we expect to see at least one popped-in row entirely.

It could be solved by allocating the bigger container's height (presumably larger than the popped-in row.), but the drawback is a lot of empty rows or space below the table on wide screens.
Alternatively, use breakpoints to adjust the height depending on screen width, but it doesn't look very graceful.

---

Yes, the visibleRowCountMode="AutoWithEmptyRows" does not suit for us because of the empty rows?

---

I'll investigate how to use the plugin a bit later.
Thanks for the idea!