How to make table column width fixed after data has been loaded - javascript

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?

Related

Automatic size in custom table columns

I have made this fully custom data table to display some content dynamically, you can manually change column size and order, doing so all cells are on absolute positioning with set width.
I want to create a function that will check for the "best size" for columns depending on the contents.
Like you would do in Excel for example when you double tap on a column separator (some columns will have long descriptions inside, some just links, etc.).
Cell will only contains texts, it can be wrapped (actually goes into ellipsis when resizing to small) and the rows allow for horizontal scrolling so there is no limitation on this side.
But so far I have no clue on how I can manage to do that, do you have any lead ?

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?

Table size should not resize after first time its initial load

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.

I want HTML Table Cell to be selected and on the screen visible

I have a HTML table with around 12 cells. But in mobile screen only 4 are visible at the moment and you have to horizontally scroll in order to view the rest of the cell.
Each cell is the link to a different page and each page has the same table.
I want whenever we click on any cell that cell should become active/selected when we move to its linked page and to be visible on the screen even it is on the extreme right.
For mobile, i would consider applying display block to all tables, rows and cells. This way, it's long, vertical, but easily browsable. Plus the scroll is vertical, which is far easier.
For your links, it's more a server side problem : you should pass the parameter corresponding to the clicked cell (let's say r2c4) in your url (mypage.php?cell=r2c4), and apply a style to the correspoding cell on your display page, with a simple class, like .activeCell.
So I have found the Answer to it
We can just simply give some id to the cell we want to display onscreen and on the link we pass the id of that cell we want to keep active and on screen visible.

Design scrollable table structure

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?

Categories

Resources