Develop Reference

Is there a way to set initially the row height for resizable rows?

When using textarea fields in a row, the row can become very tall in height. Is there a way to initially set a max-height of cell/rows and just make them bigger when necessary?

To extend on your initial answer, that wont work for all rows if you have the virtual DOM enabled.
It is extremely bad practice to try and manipulate elements inside the table as they could be replaced at any time, tabulator only renders the visible rows, others are created and destroyed as the table is scrolled so trying to apply heights like that will not work reliably in most cases.
In your case I would suggest setting it in CSS after you have imported the tabulator.css file:
.tabulator .tabulator-row tabulator-cell{
height:24px
}

Issue with resizing column with jQuery DataTables and colResizable

I am working on a responsive table and encountered an issue when using both DataTables and colResizable on my table.
Ideally I want to resize columns so both th and td is resized at the same time.
When I enable sScrollY to get a scrollbar for tbody the column resizing only works for the td element, and no longer for th like it did prior to enabling sScrollY (See JSFiddle)
Code:
$('#example').DataTable({
sDom: "Rlfrtip"
//,sScrollY: "680px" // When enabling this, resizing only works for td, not for th.
,bPaginate: false
,bInfo: false
,initComplete: function(settings) {
$('#example').colResizable({liveDrag:true});
}});
JSFiddle for reference: http://jsfiddle.net/eLm6ugp7/103/
Edit:
It seems this has been a problem for other people also, as seen in this related discussion: https://datatables.net/forums/discussion/26786/basic-column-resizing-plugin

This turns out to be an issue related to compatibility between two plugins.
I created an issue on GitHub regarding this problem. More information and suggestions can be found here:
https://github.com/alvaro-prieto/colResizable/issues/74

Resize column of html table

I have this simple html table
<table id="tablex">
<tr>
<th>col1</th>
<th>col2</th>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
</tr>
</table>
and I tried to make it's columns resizable with colResizable
but the problem is when I resize a specific column of the table, the next column to the resizable one is affected because the full width of the table is fixed.
I have tried another solution posted here and other one here but the same problem was present.
Is there an other way to make columns resizable using one of jquery libraries or javascript function?

you can use colResizable 1.5, it allows two different methods of resizing the table: fixed and non-fixed.
By default, it is fixed, which means that when you resize a column, the next one shrinks or expands to fit the whole table. In fixed mode table width does not change at all.
I think you are asking for the non-fixed mode. In non fixed mode you can resize each column independently, so if you change the width of a column the others remain in the same state (but the table will increase its size by the same amount as the column does).
You can check some examples on its website: http://www.bacubacu.com/colresizable
but I guess that you are looking for something like this:
$("#nonFixedSample").colResizable({fixed:false, liveDrag:true});

I had the same question: Resizable table columns with jQuery (table wider than page)
My solution was to place contents of my column headers <th>s inside another tag- I used links (<a>s).
Instead of doing anything with the <th> I had to set the style of the <a>s to display: block
Then just $('th a').resizable({handles:'e'});
See http://jsfiddle.net/u32a1ccL/
This uses jQuery and jQuery UI

How to create a div that apears below a table row

Like in this demo
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.
Ideas?

went away and did some thinking about my comment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up
I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??
anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)
the input/buttons have no text but they're the click trigger
position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)
?
here's the Example

You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.
I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.

That div is inside a td which is hidden until you click the >
Here is a demo: http://jsfiddle.net/maniator/7RLhL/1/

I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for

If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.

You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click:
http://jsfiddle.net/bouillard/QmK4Z/

As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.

I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).
That could, no I should say WILL, get ugly really fast, especially with paging and filtering...

You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.
The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.
<script>
$("tr").hover(
function () {
const row = this;
const bounds = row.getBoundingClientRect();
tooltip.css({
left: bounds.left + window.scrollX,
top: bounds.bottom + window.scrollY
});
},
function () {}
);
</script>
<table> ... </table>
<div id="#tooltip"> ... </div>
Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.
<style>
#tooltip {
position: absolute;
pointer-events: none;
}
</style>
Good luck!

Freeze TH header and scrolling data

I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!

My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.

If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.

With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.

I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.

I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.

the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)

Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.

Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!