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?
Related
I have a table which table-layout is auto as I want all the table columns should take space according to its content while first load, however I don't want column width change if the content is change of the table. The actual scenario is, the table-header is clickable and clicking on it - it sort the table content based on that column asc/dsc order. Each time sort happen the data come from server based on the full list of data and in the table I am showing first 20 rows of that data. Therefore, each time sort happen completely new data coming. In this case even the data is changing I don't want my table should change column width. So my table should keep the same column width when loaded first time.
I have option to use table-laout fixed but it will keep all the columns same width which I dont want. What I want is, my table-layout should be auto at initial load and afterwards it become fixed even there is content change. Is there any way to change the table layout dynamically after the first load in Typescript or Javascript? or using css we can achieve this?
I have created a table using ReactJS, HTML and CSS, it creates dynamic columns and rows based on the JSON data. I have not defined any specific width to each column. The width of each column will be based on the content of the JSON, takes maximum content either header or row cell with max-width:50ch after max-width content will get the wrap to the next line, in case if header or row cell content is less than the 50ch, takes the width: max-content. I have search functionality when I search for fewer content records, my table gets resize to smaller based on the lesser content records. But it should not resize once after initial loads. How we can achieve this. Great appreciate.
Find the below screenshot on the initial load of the table.
Find the below screenshot, when I search the abc application its filtered the records, table size resized.
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.
The table is too wide, I don't want it overflow outside the screen and make browser scrollable.
I prefer the table can slide horizontal in a frame, but I need first 2 columns to be fixed, only 3rd to the last column can slide horizontal?
Do you have jQuery code example?
Or do you know any good jQuery plugins that meet my requirement.
Datatables - http://datatables.net/
There is a jQuery adapter that has a ton of features that will allow you to create a table with a fixed column and fluid columns. There are even ways of showing / hiding columns based off of the screen width.
Dynatables - http://www.dynatable.com/
This is said to be the more "fun" alternative. It took concepts from datatables and made it more friendly.
Create two tables, one fixed and one in scrolling div. In first table, put first two columns, in second put rest of columns. Just make sure all cells are same height to get synchronized tables view
---------------------------------------------
|[table1]<div overflow='auto'>[table2]</div>|
---------------------------------------------
JQuery Datatables is the most comprehensive table plugin for paginating, sorting, searching table data. They also have a fixed column plugin, here's an example: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html
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?