[EuiDataGrid] Grid width not adapting to resize of container

[peteharverson]

In certain page layouts and nesting of flex items, the EuiDataGrid width does not adapt to a resize in the container after the initial render. This has been found with the create transform wizard page inside Kibana Stack Management, as reported in https://github.com/elastic/kibana/issues/103882.

Raising issue after discussing with @chandlerprall as there seems to be some odd interaction between the flex item (and maybe nesting of flex items) and the grid's compute-then-set width.

Reducing the width of the window causes the content to overflow into the side nav:

This does not happen if display is set to none on the data grid div:

This has been partially fixed in https://github.com/elastic/kibana/pull/104680 by using a calc on the EuiPageContentBody containing the data grid

max-width: calc(100% - 16px);

which works well for small changes to the page width, but leads to the following 'animation' style effect when a large change is made to the width, where it seems to resize in small increments before stabilizing to the final width:

[cchaos]

I don't think this is a specific issue to EuiDataGrid, but the exact implementation of its parent containers. When it comes to using the default EuiPage components/templates, the EUI docs site uses the same implementation as Kibana and the EuiDataGrid resizes just fine.

So in order to better triage this issue, can you either the whole page's react elements or rendered DOM? My one main worry about the current fix in Kibana is that it's using hard-coded pixel values and aren't the right ones to match the padding. My better guess is that there just needs to be a better overflow: hidden somewhere, or that the nested EuiSteps causes this.

[peteharverson]

Steps to reproduce:

• Add the Kibana sample eCommerce data set (Kibana Home page -> Try our sample data)
• Navigate to Kibana Stack Management, and then Transforms
• Create Transform
• Select the kibana_sample_data_ecommerce index pattern

[chandlerprall]

This is reproducible by updating the datagrid.js example to:

    <DataContext.Provider value={raw_data}>
      <EuiFlexGroup>
        <EuiFlexItem grow={false}>Left</EuiFlexItem>
        <EuiFlexItem grow={true}>
          <EuiDataGrid
            aria-label="Data grid demo"
            columns={columns}
            columnVisibility={{ visibleColumns, setVisibleColumns }}
            trailingControlColumns={trailingControlColumns}
            rowCount={raw_data.length}
            renderCellValue={renderCellValue}
            inMemory={{ level: 'sorting' }}
            sorting={{ columns: sortingColumns, onSort }}
            pagination={{
              ...pagination,
              pageSizeOptions: [10, 50, 100],
              onChangeItemsPerPage: onChangeItemsPerPage,
              onChangePage: onChangePage,
            }}
            onColumnResize={onColumnResize.current}
          />
        </EuiFlexItem>
        <EuiFlexItem grow={false}>Right</EuiFlexItem>
      </EuiFlexGroup>
    </DataContext.Provider>

After mounting, the data grid detects its wrapper's dimensions and applies that with a style attribute. If the window is resized, the flex item sees the grid still has the same dimensions (via the style) and no longer shrinks.

[cchaos]

Whelp, don't ask me why exactly, but if you add min-width: 0 to that flex item containing the grid, it will shrink properly. https://codesandbox.io/s/angry-cdn-xb5k3?file=/index.js

[cchaos]

Unfortunately, it's completely a consumer/context issue because of the flex item and nothing we can add directly to EuiDataGrid. I'll add a note to our docs, in the "Adapting to container" section, but other than that, I don't think there's anything we can do on the EUI side.