how to implement pineed column in mui data grid rtl - javascript

Is there a way to implement scrolling of headers column when there are pinned columns through css or apiRef?
I succeded to do with css only on the header columns, or with pinned columns with the apiRef but in this case the problem is that the size of the grid changed through diffrenet screens and it take some time till the size is set but the calcultion if needed a scroller is happen before.

Related

How to freeze css grid column widths after initial display

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?

How to make Tree View with fix first column width using Vuetify, LiquorTree

I'm trying to make a nested hierarchy in a table.
I added Vuetify rows and columns width 6|1|1|1|1|1|1 and added tree view in the first column to limit its width to 6 width size.
But now I'm having issues aligning the rest of the columns data to the first column rows.
What would be the best way to have a tree view with a fixed column width and then more columns where additional data can be displayed.
Basically I don't want other columns to move to the right when tree view expands.
This is a high-level of what I'm going for.

ag grid - manually implemented infinite scroll with autoHeight and performance

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?

Bootstrap Table Column width

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.

Dynamic Table Vertical & Horizontal scrolling sticky header and fixed column

I'm developing a solution that presents table like data to the user and the requirements are as follows:
Horizontal scrolling within fixed dimensions. As you scroll horizontally the first column must be sticky and follow the user as they scroll.
Vertical scrolling with a sticky header as the user scrolls up or down they can always see the header.
Found one solution here: http://www.fixedheadertable.com/ which does what I want however, after implementing with my site the table changes width based on the window dimensions. This is not ideal.
I've posted multiple questions on here about this with no conclusive answers.
Primarily asking if anyone knows of any plugins or done something similar to point me in the right direction.
Apply exact width for each column. I hope the sticky header and table contents are in separate tables. So you have to specify width for header as well as table content separately. For example the first <td> of sticky header and first <td> of tabular data should have same width. apply width like this for all columns.
Try SlickGrid:
SlickGrid is an advanced JavaScript grid.
Some highlights:
Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
Column resize/reorder/show/hide

Categories

Resources