EuiTable and In memory table doesn't have scroll

[Sheereen (Sheereen Hamza)]

Hi,

I am using both EuiTable and in-memory tables

Is there a scroll functionally for the same? I couldn't find any.
When the no of columns is like 10-15, the table just keeps getting compressed, rather than having a horizontal scroll bar.

Thanks

[Trevor_Pierce]

Hi Sheereen,

Yes, you can make an EuiTable scroll horizontally. You'll need to add a few props and CSS specific to your use case. This CodeSandbox shows an example with the needed code highlighted. Please feel free to respond to this thread if you have additional questions.

[Sheereen (Sheereen Hamza)]

Hi Trevor,

Thanks for the reply.
I had done something similar. I wasn't sure if it was fine to access the css (div-first child, etc..) of eui components and modify the same.

Thanks

[Sheereen (Sheereen Hamza)]

What should be done similarly for vertical scrollbar?

I want the header cells (thead) and footer cells (tfoot) to be sticky (freezed). Only the body part should be scrollable.

[Sheereen (Sheereen Hamza)]

And I have also found this bug (not sure whether it's really a bug)... in EuiTable, let's say we have pagination and selection also

Then, when I select the select-box in header, ideally it should all the rows in table. But actually, it selects only the ones in the current page

[Trevor_Pierce]

This can be done, but from what I've experimented, will require you to use individual EUI table components to build your structure and HTML. It also requires you to put in pixel or rem values for your column widths, so it loses a lot of the responsiveness that's baked into the EuiTable component.

I mocked up an example quickly: confident-danilo-40dwin - CodeSandbox

[Trevor_Pierce]

Paginated tables will always show results by the selected number of rows. If you have made a selection that has 23 rows for instance and your pagination is set to 10, I'd expect there to have 3 pages of rows to select from.

[Sheereen (Sheereen Hamza)]

Did not get your point here

Elastic UI

Let's say in the above example, I check the selection-box in header. Then ideally it should select all the 20 entries in table (5 entries per page, 4 pages => 20 entries in total). But in reality, it will select only the 5 in the current page. I have tested it out with a button click to print out the selected rows. And also, if u check the table in the link, if the selection-box in header is checked and then you move to a different page in table, it clears the selection; which doesn't happen with datagrids, for your reference (Elastic UI)

[Sheereen (Sheereen Hamza)]

I also want to have some of the functionalities that datagrid has in the tables, like column selector, full screen, etc..

Can I use useDataGridColumnSelector or anything similar to extend the table functionalities? Meanwhile, I was trying the create the same myself

[Trevor_Pierce]

EuiBasicTables have a smaller set of features than EuiDataGrid. EuiBasicTables can add pagination, column sorting (all or limited columns), selections, footers, expanding rows, and row actions.

If you feel that the EuiBasicTable component would benefit from features like a column selector or full screen, please file a feature request issue with the EUI team.

[Trevor_Pierce]

Unfortunately no, useDataGridColumnSelector will not work to extend table functionalities.

[Trevor_Pierce]

The EUI team opted not to preserve selection when changes pages in EuiInMemoryTable. The reasoning for this decision is explained in issue #4090.

The EuiDataGrid example you call out is using a consumer-written function + React Context to select all rows across paginated views. If you click "Demo JS" under the EuiDataGrid Control columns heading and search for "const SelectionHeaderCell" you can review how it behaves.