Table header fixing - javascript

I have made table which have some multiple feature like:
sortable
check and uncheck all
resizable column
table header which is fixed on the top
for scrollbar I am using mCustomScrollbar
Now what I want when I am using mCustomScrollbar it’s working nice but the problem is that. My table header is fixed when I am scrolling vertically its fine. But when I scroll horizontally the table header not sliding according to that. Please help me out of this I want fix the table header when I scroll vertically and when I scroll horizontally it should slide.
here is the example made by me:
https://cloud.csdcsystems.com/ui-prototype/html/approved-html/table/table-sorting.html

Related

Horizontal and vertical scrolling issue in a custom react data table component

I have developed a custom react data table component which displays headersData, rowData and footerData in the table dynamically.
When it comes to the scrolling I am trying to achieve the below 2 points:
Horizontal scrolling -
A) First two columns should be fixed and from third column till the last column, horizontal scrolling should be enabled.
B) Horizontal scrolling should always be visible at the bottom of the window. There is a max-height of 300px and it should
be always visible at the bottom.
Vertical scrolling -
The header row should be fixed at the top when we are scrolling vertically.
The custom react data table and my attempt is there in the below CodeSandBox link. I have achieved the first point mentioned in Horizontal scrolling but could not achieve the second point mentioned in the horizontal scrolling and the vertical scrolling with the fixed header at the top. Tried for many days and couldn't figure out. For this reason, thought of seeking help and posted the question here. Kindly let me know your thoughts on how we can implement this feature. Thanks in advance.
CodeSandBox link:
https://codesandbox.io/s/custom-react-data-table-970ed?file=/src/tableContainer/DataTableContainer.tsx
Note: It doesn't need to support in IE.
Expecting the scrolling behavior to be like shown in the below link:
https://jsfiddle.net/6qxcaemu/5

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

Setting scroll in a div so that a buttons are added dynamically on horizontal overflow

I have a table, inside a div with a fixed width.
The table is added dynamically via JavaScript and each row is added based on user input.
The table width and cell widths are all set and fine, and adding information works, but when I get too many rows, the table just continues building...
How to I make the div area scrollable so that as the table grows and the user can scroll in that div area to see the other fields in the table?
In other words, how do I put some buttons to scroll the table left and right on overflow of div width.
I want something similar to what is in Notepad++ and Firefox where you get left and right buttons to scroll through the opened tabs.
Please help me out to do this...
Just created a page with up and down button without showing any scroll.
Watch that Fiddle and let me know if it is helpful.

How to make the table-head of a table in a div with scrollbar to be fixed? (both horizontal AND vertical scrolling)

Situation:
I have a div with scrollbar: (overflow: auto;)
In this div I have a table with a table-head
When I scroll through the table-body, the header is not visible (like when you scroll through a website window)
What I want:
When the user will scroll through my table, the table-header should have position fixed.
Simple position fixed ( <thead style="position:fixed;">) did not help, since the table header is like 50 cells wide so you have to scroll right/left to see all the cells.
I absolutely dont know where to start, any ideas will be appreciated.
Found answers
I found lots of similar problems on stack overflow, but none of them explicitly told me how to apply the fixed header to be scrollable horizontaly in the div.
http://jsfiddle.net/TGBym/44/ -> a fidle by Dhaval Shukla from this post, but doesnt seem to be checking on the horizontal scrolling..

Creating a scrollable table with horizontal and vertical scrollbars?

I have a wide table, and I want to create the table with both horizontal and vertical scrollbar, and the table could have a fixed header on top
the horizontal one need to scroll the column with the header at the same time
the vertical one should appear all the time
I tried using css overflow, but most example just give me vertical scroll with fixed header, no horizontal one
Add
position:fixed;
in the css class of your header . The header will remain still when you make a scroll.
Not sure whether this is what you expect.

Categories

Resources