Eui: [EuiDataGrid] Add an option to use the container's dimensions

Created on 30 Mar 2021  路  3Comments  路  Source: elastic/eui

I overrode the CSS for datagrid so that my SideNav and NavBar are still shown when in fullscreen. This is all that was needed:

.euiDataGrid--fullScreen {
  position: absolute;
}

However, with the virtualisation update, the table goes off the right of the screen.
The height is correct because I just so happened to have used the same NavBar height as EUI but I have not applied the SASS mixin as my SideNav has multiple widths.
I understand this use case is probably out-of-scope of your intended usage but I believe the user should always be available to navigate away.

Would it be possible to add an option that used the above CSS and also calculate its dimensions based off its container?

bug data grid

All 3 comments

The grid is supposed to be constrained by its container, can you verify that the container is correctly sized when the datagrid is not rendered inside of it?

Sorry, my use of "container" was misleading. Explaining this is difficult so here's a codepen, which can just boil down to

render ( 
<div style={{ position: "fixed", top: 50, right: 0, bottom: 0, left: 100 }}>
  <DataContext.Provider value={dataContext}>
    {grid}
  </DataContext.Provider>
</div>
)

Perfect example, thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jen-huang picture jen-huang  路  4Comments

thompsongl picture thompsongl  路  3Comments

stacey-gammon picture stacey-gammon  路  4Comments

miukimiu picture miukimiu  路  3Comments

johnbarrierwilson picture johnbarrierwilson  路  3Comments