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 ?
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.
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.
Alright here is my dilemma. I have a bunch of divs with the same width
(but variable heights). I want them to be displayed on the page one on top of the next UNTIL the bottom of the page, if there is space for a second column of these items on the page without scrolling then I want it to continue in the second column, third column, etc. If there is no available space left on the page then it goes off the page requiring a scrollbar to see things underneath.
This would essentially be akin to having float:top if it existed (which it sadly doesn't). Also I want this to change dynamically with the window size. If I shrink my window to one column width I want the data to go straight down one column. If I resize to two columns wide then it divides the data between the two columns.
Lastly the order of the divs MUST be preserved. I am willing to use jQuery and CSS including CSS3 to do this, anything else and I will have to look at it. I am sure that if I worked at it I could write some custom jQuery script to do this but I can't help but feel like it should be easier. I have looked at css3 columns but couldn't get them to do what I want so if they can do it the be specific as to how they do it.
Have you heard of media queries? At specific break points you can apply different CSS rules, so you could change the layout of your columns.
Have a read.
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?