Databases
StackOverflow2013
Postsdbo
POMaking table with resizable columns and selectable rows with jQuery UI
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMaking table with resizable columns and selectable rows with jQuery UI
    text
    copied!<p>NOTE: My original question was whether I should use <code>&lt;div&gt;</code>s or <code>&lt;table&gt;</code>s for this task. I have found an answer myself: <code>&lt;div&gt;</code>s are more than twice as slower on Firefox and Chrome if you have ~2000 rows. So you must use <code>&lt;table&gt;</code>s for this. I decided to reedit my question to show how to do it (table with resizable columns and selectable rows using jQuery UI). Hope that it would be useful for anyone. </p> <p>I'm making a web application (mainly for data entry &amp; intranet usage). Need to render some data from SQL table in a standart way (rows as rows, columns as columns), but have some requirements:</p> <ol> <li>Data are received as JSON array with rigid format and need to be inserted from JavaScript.</li> <li>Columns must be resizable.</li> <li>Rows must be selectable.</li> <li>Body must be scrollable, header must stay above.</li> </ol> <p>There are many ready-made JavaScript components for parts of this functionality, but the most complete are bloated, costs much and have bugs.</p> <p>As I already have to use jQuery-ui for modal dialogs and tabs, I decided to try <strong>resizable</strong> and <strong>selectable</strong> effects. I managed to made them work for a standart HTML table using some tricks. Here is the code.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;script type='text/javascript' src='../Scripts/jQuery.js'&gt;&lt;/script&gt; &lt;script type='text/javascript' src='../Scripts/jQuery-ui.js'&gt;&lt;/script&gt; &lt;link href="../Css/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /&gt; &lt;style type='text/css'&gt; .selectable .ui-selecting { background: #FECA40; } .selectable .ui-selected { background: #F39814; color: white; } .NCList table { table-layout:fixed; } .nc-cell { overflow: hidden; white-space:nowrap; } .NCList .ui-resizable-e { background: gray; } .NCList .y-scroll { overflow-y:auto; overflow-x:hidden; } &lt;/style&gt; &lt;script type="text/javascript"&gt; $(function() { var element = $('#MyParentDiv'); $(".selectable", element).selectable({filter: 'tr'}); $(".th0", element).resizable({ alsoResize: '#MyParentDiv .header-container', stop: function(event, ui) { var width1 = $(".th0", element).width(); $('.col0', element).width(width1); width1 = $(".header-container", element).width(); $('.y-scroll', element).width(width1); }, handles: 'e'}); $(".th1", element).resizable({ alsoResize: '#MyParentDiv .header-container', stop: function(event, ui) { var width1 = $(".th1", element).width(); $('.col1', element).width(width1); width1 = $(".header-container", element).width(); $('.y-scroll', element).width(width1); }, handles: 'e'}); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="MyParentDiv" class="NCList"&gt; &lt;div class="header-container" style="width:215px;"&gt; &lt;table&gt;&lt;thead&gt;&lt;tr&gt; &lt;th&gt;&lt;div class="nc-cell th0" style="width:100px;"&gt; Short name &lt;/div&gt;&lt;/th&gt; &lt;th&gt;&lt;div class="nc-cell th1" style="width:100px;"&gt; Name &lt;/div&gt;&lt;/th&gt; &lt;/tr&gt;&lt;/thead&gt;&lt;/table&gt; &lt;/div&gt; &lt;div class="y-scroll" style="max-height:100px;width:215px;"&gt; &lt;table class="valuefield"&gt; &lt;tbody class="selectable"&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt;&lt;td&gt;&lt;div class="nc-cell col0" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;td&gt;&lt;div class="nc-cell col1" style="width: 100px"&gt;Some test values&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload