I want to implement an ag grid in some container. As I scroll the container, I add rows to the grid, which has domLayout: 'autoHeight', so it grows in height.
This works fine, and it looks like infinite scrolling without the ag grid knowing. The problem begins when the table gets big and there are a lot of dom elements created.
Is there a way to use domLayout: 'autoHeight' and virtual rows?
Basically letting the grid grow but not actually rendering the rows that are not in the browser viewport? like ag grid does by default when the height is constant?
Related
Howdy,
Context:
I am attempting to recreate a section which has required some complex use of grid layouts. In an effort to conjoin the grids and get a mobile responsive layout using grid areas, I have attempted to set some of the grid layout sizing across these grids using dynamically adjusting "grid-template-rows" style assignments in my JavaScript file.
The basic construction is that the elements should appear in a row together and should have a uniform height set by their tallest pseudo sibling, despite being in separate grids by necessity for layout purposes.
I set the various grid item elements into a "row" array which is looped through to create a new array of their heights, which is again looped through to find the tallest height among them. I then do this for each row and take the heights given and set all grid-template-rows style for the multiple grid parents using those variables as fixed heights.
I am console logging the heights at several points to cross check them. The grid style changes have a media query screen size conditional statement wrapping them to account for variations in layout at mobile view.
I then created a ResizeObserver for the body element which should in theory dynamically adjust the heights as the window resizes.
Broken Features:
The heights logged by offset-height of my div element variables don't seem to match up with the value of the sum of my element content height plus it's padding.
On desktop it seems to be overvaluing, creating white space below as though the tallest element is actually slightly taller, while at mobile it is cutting short and bleeding over it's assigned grid height which itself is too small relative to the heights of their contents.
In the Dev tools adjusting the grid height of the mobile row doesn't seem to create more space for some reason, though I'm not sure where the constraint causing overflow is coming from if not the grid row height. I need to understand this part for this to be a viable solution.
My ResizeObserver is also not working as intended. Likely because I have not configured it correctly or because I have not appropriately repopulated the variable values with updated figures. I'm not familiar enough with it specifically to know what all is broken.
I'm in dire need of a consult.
Suggestions welcome
GitHub:
https://github.com/Aces-Gambit/grid-chart-project
I'm using CSS Grid to display a table of records. Each column is defined as "auto" because I'd like the column widths to fit the content.
In my app I have a button to fetch the next page of results, and I dynamically repopulate the grid from page 2 of the results. This has the effect of making the grid jump, because, of course, the content of each column on page 2 is not the same as it was on page 1. (I'm populating the table using Vue in a v-for loop.)
Is there any way to freeze the width of the columns after they are initially populated?
The only method I can think of is to use Javascript to get the widths of each column and then rewrite the CSS grid-template-columns value to specify columns as fixed-width. This is possible, but it feels like a kludge.
Maybe there's some CSS magic I don't know about? Something position: sticky, but for column widths?
My table columns for a table in Bootstrap are too small. I would like to be able to increase the width. If I put width as "auto" then it becomes too wide even on a desktop and I have to scroll horizontally. Weird thing is that the column width does not change whether its desktop or tablet. The table rows and header are generated using JavaScript and jQuery.
Each of my columns has in it an input textbox and one column is a select list.
First of all, make sure you have correctly wrapped your page in a .container or .container-fluid. After that, try to size the columns as you usually do with your grid in Bootsrap, as you can read in this answer.
You can make your table responsive wrapping it in a .table-responsive: when the viewport becomes too small, you'll have horizontal scrollbars.
Im having this issue in Extjs grid editing. When I tab from a dropdown editor to a textarea editor, the textarea editor jumps down the screen, away from the cell I should be editing:
I have no idea how to fix this. It only happens 1/2 of the time, so I believe there is some race condition, but Im not sure. Ive spent a lot of time debugging and stepping through the editing code and the textarea starts out in the grid cell, but some event fires or something and it then moves.
I found the problem, but I don't think there is a good solution to it. When I complete the edit by clicking tab, new value is put in the grid cell.
The grid row height might change, which will cause the grid viewport size to change (since i am not using a scroll bar.. the grid height grows and shrinks dynamically).
The grid is in an iframe, and i attached a listener to the grid resize event to change the iframe height to be the size of the grid height, this in turn caused floating elements (such as a cell editor) to be repositioned.
So my problem is that i want the iframe to grow with the grid, which grows and shrinks (by a few pixels) as cells get edited. But this causes the floating element to jump.
I'm currently looking for a way to design a table structure with HTML and JS which should be
Horizontally Scrollable (It has to be possible to dynamically add new columns)
Tolerant to changing sizes (e.g. when adding some text or controls) of cells. E.g. when doubling the size of the second cell in the second row every other cells should stay in the correct columns.
It should be possible to adjust to rendered columns to the width of the screen.
It should be possible to use the same layout with swiping on mobile devices.
= IE8, FF, Chrome must be supported
Currently I'm thinking about a DIV based solution where the correct table structures of the columns and rows are preserved by resizing column and cell DIVs if needed.
That's how it should look:
Is the DIV based solution apropriate or is there a possibility of using the default HTML table?