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
Hi guys I am getting scroll bar under fixed column when hovering on that particular column which is fixed in the jquery datatable. I am attaching the image for the same, the scroll bar which I am mentioning is under the first column that is fixed. Please, if any one can come up with the solution it would be helpful.
He all guys, im have some issues I cannot fix. First of all I need to commentar that all my content is dynamic so, its why i'm not doing fix width. I have a main horizontal navigator with some "categories" but these re totally dynamic. The problem is, i would like to make a toggle menu (when this navigator overflow/collapse).
Example:
https://jsfiddle.net/d81bgzkx/
So, depend the window width many times it goes 2 rows... and its then when I want it to force the toggle menu.
Is it possible?
If it is, thank you guys!
I am new in jqgrid. I want to sync the vertical scroll bar of jqgrid with other div vertical scroll. i tried more example but no one being helpful.
So, please provide me appropriate solution as soon as possible
Thanks in advance
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