Develop Reference

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

Bootstrap Table Column width

My table columns for a table in Bootstrap are too small. I would like to be able to increase the width. If I put width as "auto" then it becomes too wide even on a desktop and I have to scroll horizontally. Weird thing is that the column width does not change whether its desktop or tablet. The table rows and header are generated using JavaScript and jQuery.
Each of my columns has in it an input textbox and one column is a select list.

First of all, make sure you have correctly wrapped your page in a .container or .container-fluid. After that, try to size the columns as you usually do with your grid in Bootsrap, as you can read in this answer.
You can make your table responsive wrapping it in a .table-responsive: when the viewport becomes too small, you'll have horizontal scrollbars.

Table header fixing

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

How do you display wide table?

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

jQuery jCarousel - Justifying items within horizontal viewport

I am having issues with my jcarousel installation. Currently how I have it set up is three items in a row with a viewport of 1140px. jcarousel automatically adjusts these items and sets them to 380px wide each to fit the viewport properly. The margin-right seems automatically defined as well. I am having an issue justifying my three items evenly within the viewport. I've looked through the jcarousel options though didn't find anything that might help. Here is a screenshot that should explain my issue:
http://i.imgur.com/PRQIG.jpg
Edit: I found a solution, the only thing I'm able to come up with. If anybody knows of a better solution please post!
My page is based on an 1140 responsive grid system. In my grid system the right margin for a three column row is ~3.8% and the width per column is ~30%. So for my carousel's horizontal viewport (.jcarousel-clip-horizontal) I set it's width to 103.8% rather then 100%, this allows for the three items to expand equally across the page container.
I was trying to adjust margins and paddings on individual items but that was incorrect. At first I placed a left padding on the carousel container to give it a centered appearance, but that wasn't sufficient for my responsive layout.

If you don't like the width jcarousel automatically does you can set it yourself in the setupCallback:function(){} with the jcarousel setup
for example: you want to set each li with the width 375, you can do this:
$('#a').jcarousel({
visible:3,
scroll:3,
setupCallback:function(){
$('#a.jcarousel-list li').each(function(){
$(this).width(375)
})
},
})
you can modify padding/margin on each item or on the viewport with setupCallback:function(){} to achieve what you want.