Handsontable fixed table bug - javascript

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.

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?

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.

Webix: resizing column after dynamic load

When I resize the Webix treetable column, after clicking on plus button, the ajax request for more data is resizing tables columns to default. How could I stop it?
Below you could see the "problem".
It seems you are using fillspace:true for the first column, just remove it and resize will work correctly.
It is known issue for the Webix 3.x, which will be fixed in one of the next builds

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 Isotope library with HTML tables

While working on a large list of tabular data that needs an easy sorting/filtering system, I discovered the Isotope library, which seems to do exactly what I want, and provides a lot of nice visuals and functionality. I'd like to be able to sort and filter table rows using Isotope, and I've come up with a basic demo that seems to work. However, a few bugs are present:
I'm using the <thead> section for filters and row headers, so I'm applying the Isotope selector to the <tbody>. However, when Isotope is initialized with the tbody as a container, the table cells in each row lose the width assigned by the table formatting. This isn't a huge deal, as I can set column widths manually if I need to, but it is rather annoying in the current context.
The rows are placed outside the table, in the top left of the table's container element. The relative positioning on the tbody element seems to not affect the rows' absolute position style rules (applied automatically by Isotope) as it would with a normal div. Normally, the absolute positioning would be relative to its container element if the container was positioned using either absolute or relative positioning, but this doesn't seem to be the case here.
The table rows are being filtered properly, and the Isotope library is properly applying animations and styling with those exceptions. If at all possible, I'd like to keep the use of tables, as the people maintaining this page will be doing so through a CMS, and don't know enough about HTML or the WYSIWYG editor the CMS uses to consistently produce any HTML structures beyond a fairly basic table. Does anyone have any advice on fixing these two issues? Thanks!
Edit: As an addendum, I've solved the initial problems I was having. Turns out, the tbody element does not accept a position: relative or position: absolute attribute, so the table rows were not being placed properly. Setting the whole table to position: relative solved the main placement issue, though the rows were then moved to the top left of the table. I solved this issue by offsetting the table row top attribute by the height of the thead element in Javascript, since without Javascript the display is normal.
This works beautifully in Firefox, Chrome, Opera, and Safari. However, IE 7, 8, and 9 all have rendering issues--and worse, they're all different rendering issues. IE9 refuses to place the table cells with the correct offset, IE8 doesn't show the rows at all, and IE7 seems to interpret the whole situation to mean "EXPLODE!". At least the main problem I encountered was solved!
I've integrated Wesley's style suggestions to implement Isortope -- a jQuery plugin using Isotope for table sorting.
It addresses things like the column width issue by automatically converting the table's generated column widths into inline styles. That way, the final table displays like the initial one.
Simple demo here.
Download here.

Categories

Resources