I need to use jQuery datatable in my project and need to create it as responsive. I don't want the inbuilt paging, sorting, searching of the datatable. Instead I need to use lazy loading in that while user scrolls to the end. This is the model fiddle of my progress,https://jsfiddle.net/Noblemo/y9ye3yvj/.
I'm using table.row.add method to add rows in to the datatable. My issue is, while adding data, the table shows horizontal scroll bar. I need only vertical scroll bar. Horizontal over flow of data should be responsive. Please help me.
Related
I am using Material UI table components (which is not more than a styled and convenient API for HTML table elements) and I want to make my columns expand collapse on click.
This means that I need that when I click on a column, its sub-columns will be visible and all the rows will also show values for the sub-columns, and when I click on the main column again, the sub-columns will collapse and be invisible again, along with all the values in the rows for those sub columns.
I would also like it to be animated with a nice transition of the columns expanding from the main column into view and collapsing into the main column to invisible.
It doesn't necessarily need to be in react or using MUI, it could regular HTML and CSS, but the animations are crucial!
Thank you in advance for the help :)
I tried to use MUI tables components with the Collapse component (which is an animation component to put things into view with a nice transition) but it was neither smooth nor pretty and not even working properly as the columns were sometimes not aligned..
I've looked everywhere on google and couldn't find any example/library for such a feature anywhere.
I was only able to find examples for expand/collapse rows..
I have a this table:
`https://jsbin.com/hutifufisa/edit?html,css,js,output`
And I already fixed the first column using an example i saw here in stack, but if the table contains a lot of values and being responsive, it's not easy to know which value i'm checking because the header is not fixed when you scroll down, thinking about mobile UX, im using bootstrap to create the table.
Is it possible to keep the first column fixed, just like it already is, and also fix the header?
Thx!
for responsive table and UI good developers always used bootstrap.
responsive table bootstrap.
read this link https://www.w3schools.com/bootstrap/bootstrap_ref_css_tables.asp for read more about responsive table and bootstrap(Bootstrap is so easy just used class and read and research)
I have a huge table that I want to show it on my website. It has got 60 columns and as many as 2000 rows. Could you please guide me how can I represent these data in the webpage. Right now, I made a scrollbar horizontal and vertical in the webpage and reproduced all the data. It seems clumsy and awkward. This is my first venture in web development, so anyone could guide on simplifying this complexity, it will be great help for me. What I am looking forward is when the user wants a row of data from the table, all those cells should be visible in the same page without the need for a scroll.
Can anyone guide me?
You could use jQuery DataTables with Responsive plugin which will hide extra columns could be shown when necessary.
See this example for demonstration of displaying extra details in a collapsible child row.
See this example for demonstration of displaying extra details in a modal window.
I am looking for Javascript / Jquery Table Plugin, which should have following functionalities included in it.
Fixed Header of table (Header Lock with Elements Scrollable)
Few Columns Locked while scrolling (say first two columns)
Drag and drop with column
Column Resizing (like Excel)
Column Priority Change in Responsive views (e.g Table Saw Like Plugin)
Horizontal Scroll on column exceeding on than current views
Sorting
I have group of plugin's which gave me these individual options separately. I am looking combination of it.
If anyone have any good reference link, then please suggest.
Regards,
Sopo
I have a table that have important information in left column and in the top row, therefore these should always be visible, I then want to have Pages in the bottem for horizontal "scrolling" and a normal scroll for vertical scrolling.
Is there a Jquery script that supports this?
It would look something like this
If your requirement is to display basic data then you could use one of the Jquery plugins available for this purpose like Datatables. They are very flexible and you could do most of the basic things using one of their extra's.
If your requirement is more than just displaying data. It has complex edits, custom features for each column and stuff then your better of with a custom implementation. We've build such a table which has integrated autopopulates, calendar and other completely custom features by having a div float beside the table and using Jquery to control the scroll. The header and the frozen column on the left are usually separate tables/divs themselves and are just aligned as per the table using Jquery. They work quite well for IE 8+ and other browsers.
Does this work? (I used CSS, not jQuery, sorry)
http://jsfiddle.net/mAnQp/
Update: added pages
http://jsfiddle.net/mAnQp/3/