I'm looking for a way to pin/place the horizontal scroll at the bottom of the grid-area for the situation when the data-content (rows) are collectively shorter than the side bar height.
Example image
Example link
I can only see this problem when:
using grid options
sideBar={true}
domLayout={'autoHeight'}
there are too few rows
Related
I'm using ag-grid-community v.25.1.0 with 2-rows header and 5 pinned bottom rows.
I want the grid header to be always at fixed position - even when I scroll to the last data rows of my grid (which are often far below the screen bottom).
Unfortunately this forces me to set 'height = 100vh' for the grid - but then the 5 pinned bottom rows also occupy screen area, so there's too small height left for the data rows (about 10 data rows left when I'm using my 13-inch laptop). See demo #1 at https://codesandbox.io/s/aggrid-issue-demo-j9ls9
And if I do not limit grid height with 100vh - then the pinned bottom rows go ouside the screen together with the data rows (because AgGrid's OWN vertical scrollbar is no more shown) which is OK except for... scrolling down the vertical scrollbar of the grid's container (body tag) moves grid's header outside the screen (although "I want header to be always at fixed position" - see this requirement above!). See demo #2 at https://codesandbox.io/s/aggrid-issue-demo-2-52bo3 - it would be OK if header stayed at fixed position.
If there were no pinned bottom rows - the problem would not exist. But these pinned rows are really necessary in my app; however the fact that they occupy ~33% of the grid's height - is a real problem. Yes, I can make row height smaller (together with the font used to paint the cells) - but that's an ugly workaround, not a real solution. I can also provide users with a possibility to show/hide some of the pinned bottom rows (using several checkboxes) - but this "solution" also smells (besides, in most cases all 5 pinned rows are needed).
Is there any solution? maybe I can adjust header's CSS so that it's Y-coordinate stays strictly fixed? in such case removing 'height = 100vh' would solve my problem...
UPD: maybe it makes sense to describe the difference between demos #1 and #2:
App.css:
added this file to override the ".ag-root-wrapper-body.ag-layout-normal" style - because it had height set to zero
App.tsx:
added import for App.css (see above)
removed div style "height: '100vh'"
index.html:
removed body style "overflow-y: hidden;" (to enable vertical scrollbar which is needed to access last rows after we removed '100vh' above)
I am trying to position the horizontally scrollbar on a bottom position when some field of the table is changed.I tried with : Scrolling Ag Grid using ensureIndexVisible()
But as least I know it is only for vertical scrollbars
There is also a method ensureColumnVisible(colId), from docs (in the same section you are refering to):
Ensures the column is visible, scrolling the table if needed.
I want this table view with vertical and horizontal scroll and top header also move along with it . for eg when we scroll left to right header + row moves at same time.
As show in the image below these value are coming from Api (header part is done manually).
Take a look at this examples :
[1]try this link! , its same behaviour like spreadshit as you mentioned in question image
[2]KEZCollectionViewTableLayout
[3]MMSpreadsheetView
[4]DRCollectionViewTableLayout-iOS
I develop test app with swift ,
I need way to arrange first row in first screen to first row in second screen
to make all button across application look similar
my tries :
match X,Y value , width , height
Do you use Auto Layout ?
You can achieve that by
set vertical space between the top edge and your title
set horizontal alignment of title to be center of the view
set vertical space between title and the first item in the row
set leading margin of the first item in the first row
set horizontal alignment of all following items to be center of the first item
The new DataGrid widget in GWT 2.4 automatically generates a horizontal scroll bar when the display viewport for the table is not as wide as the table itself, and a vertical scrollbar for the vertical case. Fine so far. But I have found that the scrollbar obscures the last row of the table. There is no filler space after the last row to allow you to vertically scroll a bit farther to let the last row completely enter the viewing space. That filler bar ought to be at least as tall as the scrollbar, and preferably a bit taller.
Any ideas for a work-around? I don't want to add empty data rows since these represents real rows in a real database.
I just noticed that if you select a row (even with NoSelectionModel, there is a "select" where the row turns pale yellow), then tap the up and down arrows on the keyboard, the DataGrid rolls up and down, including pulling any rows obscured by the header or footer or horizontal scrollbar entirely into view.
Good to know. Will have to train the users on that little trick.