Embedded Quick Tables Do Not Scale to Fit Resizable Containers

Q&A
,
1

We are embedding QuickSight visuals in a React application where dashboard components can be dragged and resized. The QuickSight SDK’s scaleToContainer behavior works as expected for chart visuals, but table visuals do not expand to fill the available container space.

When the container is resized, the table viewport changes size, but the table rows and columns retain their original dimensions, leaving unused space instead of stretching to fit the container.

Is there a supported way to make embedded table visuals resize responsively and fill the entire container, similar to chart visuals?

2

Hi @apandey,

Welcome to the Quick Community! I believe this could be occurring because chart visuals are considered canvases (which mean when container is adjusted it is redrawn to account for that), while table visuals are rendered as HTML and do not therefore respond when adjusted.

You might not be able to get the responsive behavior as with the chart visuals, but you might be able to workaround this by using other scaling options for those (i.e. SCALE_TO_WIDTH), or trying manually defining height/width to achieve a result that looks decent with your React app. Here is some documentation with other scaling options to see if there is something that could aid your use case.

Let me know if this helps!

3

Hi @WLS-Luis Thank you for your response.

We’re using the Amazon QuickSight Embedding SDK (embedVisual) to embed individual visuals into iframes in our app — not sheet images on a dashboard definition.

For chart/KPI visuals, scaleToContainer: true correctly scales content to fill our container. For TableVisual / PivotTableVisual, the table does not fill leftover container height the same way; content stays natural height and empty space remains.

The doc you shared (SheetImageScalingConfiguration) appears to apply only to sheet images. Can you please let me know if there is any way to make table visuals responsive same way as charts?

4

Hi @apandey,

Apologies, I mixed up scaleToContainer for embedding with the other command for sheet images. Could you please share the code snippet of how you are embedding the iframe of one your table visuals? I do believe my reasoning above the suggestion could be right, so seeing that code may help us see if there are any workarounds to better display the table visuals.

Thank you!

5

@WLS-Luis

Hi,

No problem — thanks for taking another look.

We’re using amazon-quicksight-embedding-sdk with createEmbeddingContext().embedVisual(...) for individual visuals (including TableVisual / PivotTableVisual). Embed URLs come from our backend (GenerateEmbedUrl for a specific dashboard + sheet + visual).

Container: a div that fills a dashboard tile (height: 100%, width: 100%). The tile lives in a CSS grid / react-grid-layout cell with a fixed pixel height.

The following snippet is simplified version of what we are doing:

import {
  createEmbeddingContext,
  InfoMessageEventName,
} from "amazon-quicksight-embedding-sdk";

const container = document.getElementById("visual-container"); // 100% × 100% of tile
const embedUrl = "<signed visual embed URL>";

const context = await createEmbeddingContext();

await context.embedVisual(
  {
    url: embedUrl,
    container,
    width: "100%",
    height: "100%",
    // Let the iframe grow with table content height
    resizeHeightOnSizeChangedEvent: true,
  },
  {
    fitToIframeWidth: true,
    // We want the table to fill the tile like charts do.
    // With true: table still renders at natural content size;
    // leftover tile height stays empty (does not stretch rows/cells).
    scaleToContainer: true, // also tried false — same fill behavior for tables
    onMessage: (message) => {
      if (message.eventName === InfoMessageEventName.CONTENT_LOADED) {
        // ready
      }
    },
  },
);

What we see

  • Charts / KPIs: scaleToContainer: true fills the tile as expected.
  • Table / pivot: content stays at natural height. Extra vertical space in the container remains empty; the table does not stretch to fill height the way charts do.

Workaround today: with resizeHeightOnSizeChangedEvent: true, we measure the iframe height and grow our tile to match content (so we avoid empty space by sizing the host, not by scaling the table).

6

Hi @WLS-Luis, I was wondering if you have any updates on this?

7

Hi @apandey,

Sorry for the delay in response. After reviewing your code, I do not believe there is any SDK command or embed parameter that can fully achieve what you want. I do believe your current workaround with resizeHeightOnSizeChangedEvent is indeed your optimal solution. However, I would definitely recommend creating a support ticket with AWS Support, just in case they can provide further guidance to accomplish your use case.

Thank you!

8

Hi @apandey,

I hope this message finds you well! Just checking back in to see if you viewed my most recent reply in regard to creating a support ticket. Please help the community by providing an update if you did create a support ticket, or following up in general within the next 3 business days.

Thank you!

9

Hi @apandey,

Since I haven’t received any further updates from you, I’ll treat this inquiry as complete for now. If you have any additional questions, feel free to create a new post in the community and link this discussion for context.

Thank you!