How do you display wide table? - javascript

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

Related

How to freeze css grid column widths after initial display

I'm using CSS Grid to display a table of records. Each column is defined as "auto" because I'd like the column widths to fit the content.
In my app I have a button to fetch the next page of results, and I dynamically repopulate the grid from page 2 of the results. This has the effect of making the grid jump, because, of course, the content of each column on page 2 is not the same as it was on page 1. (I'm populating the table using Vue in a v-for loop.)
Is there any way to freeze the width of the columns after they are initially populated?
The only method I can think of is to use Javascript to get the widths of each column and then rewrite the CSS grid-template-columns value to specify columns as fixed-width. This is possible, but it feels like a kludge.
Maybe there's some CSS magic I don't know about? Something position: sticky, but for column widths?

How to create fixed table headers using pivottable.js

I am using a JavaScript plugin (pivottable.js) to create pivot tables to display large data on a django site. I want to add a fixed/sticky table head that stays at the top of my div while I scroll down.
Due to the creation of the tables in the JavaScript I cannot easily select the pivot table headers.
Does anyone know of anyway they have accomplished this in the past? A large percentage of my users use IE so it is critical it works on that as well.
floatThead is what you need to look at http://mkoryak.github.io/floatThead/
According to its website:
jquery.floatThead is a floating/locked/sticky/fixed table header plugin that requires no special CSS and supports window and overflow scrolling.

Handsontable fixed table bug

I'm trying to make a Handsontable grid table for a fixed table with multiline headers to avoid the horizontal scrolling.
I made it using two ways : Using max-width in the css file or using fixed columns.
But in both solution manualColumnMove doesn't work as expected for example:
[code]: http://jsfiddle.net/bounmed/mua144zv/
I can't move the first column to the end.
and if i move columns a lot it get missed up.

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

Create an HTML table with fixed left and right column

In a pickle at the moment. I built a booking system for a client of mine with no chance of going responsive any time soon. That any time soon came last week. I thought I built my code in a way that it's responsive ready. What I want to achieve in mobile/table is to have the very left and very right columns to stay fixed and all the columns in between to scroll/swipe.
I have a dev link up you can view:
example
You can see from the example the very left column is info about the booking and the very right is the proceed button. Those are the columns that have to stay fixed. Is there a way to achieve this with CSS only? I have a lot of javascript code running as it is and I want to explore all options before resorting to it.
Any help would be greatly appreciated.
EDIT
I have so far added a set width to the first and last column using
td:first-child
td:last-child{
width:120px;
}
Which is a great start. but the columns in between the first and last get squishy in responsive which is not good usability/readability. I'd like to achieve some sort of horizontal overflow to allow the user to scroll/swipe on mobile/tablet
add to the first and last column a class with fixed width
or min-width (if it can be greater but not less then the specified value)

Categories

Resources