My callback function works properly until I sort on a column header. After sorting, the callback function parameter 'rows' is an empty array even though table rows have been selected. Tried setting event breakpoints for mouse click in Chrome debugger, but that's not helping (just runs through the jQuery code). I'm using this with jQuery 2.1.3.

Thank you very much for this amazing script. I’ve been using it on many of my pages and it really saves me a lot of time. Recently one of my users wants to select the contents in the table cell and do a “ctrl + c”, and he asked me how to select the contents in the table. I tried various ways with no luck. Can you please let me know how to do that?

Thanks, Victor

I am currently working to add the ability to make the generated tables editable. The inputs I create are not gaining focus when I try editing them and after more checking out the source, I realized the mouse hover and down events on the table were disabled.

Why are these events on the table disabled?

I created a table based on the demo, snippet below.

Clicking a button pulls back data from a remote store, which is then used to populate the table. The table populates with data the first time the button is clicked, but subsequent clicks do not refresh the table.

I can see the data being refreshed with each button click via the console output on line 18. However, the table does not reflect the new dataset. The only apparent way to flush the data is by reloading the page.

01        $(function () {
02          $("#btnShow").click(function(event) {
03
04            var callback = function(data) {
05              result = $.parseJSON(data);
06              if (result.success) {
07                payload = $.parseJSON(result.data);
08                var columnTitles = [];
09                var columnValues = [];
10                $.each(payload, function( index, value ) {
11                  var tmpArray = [];
12                  $.each( value, function( key, value ) {
13                    if (index === 0) columnTitles.push(key);
14                    tmpArray.push(value);
15                  })
16                  columnValues.push(tmpArray);
17                });
18                console.log(columnValues);
19
20                $('#tidy-table').html('');
21                var block = $('#tidy-table')
22                  .TidyTable({
23                    enableCheckbox: true,
24                    enableMenu:     false
25                  },
26                  {
27                    columnTitles: columnTitles,
28                    columnValues: columnValues,
29
30                    // pre-process column values before sort (optional)
31                    sortByPattern: function(col_num, val) {
32                      if (col_num != 1) return val;
33
34                      return String(val).replace(/$|%|#/g, '');
35                    }
36                  });
37
38                // copy the table options menu
39                var menu = $('select.tidy_table', block).clone(true);
40                block.append(menu);
41
42                // optional animation
43                block.slideDown('fast');
44
45                // remove stored data
46                block.TidyTable('destroy');

I have a table that displays numbers with spaces as thousand separators e.g., 2 300.

When sorting these columns, the values are treated as strings not numbers, so an ascending sort might look something like:

2 2 300 3 4

instead of:

2 3 4 2 300

In my case I can workaround this by changing the regexs in the sortByColumn method by adding spaces:

/$|%|#/g

becomes:

/$|%|#| /g

For a more I18n compliant solution however, other possible thousand separators should be supported (typically "," US and "." FR). The difficulty here is that decimal separators, typically "." or "," could also be removed and mess up the values.

I'd therefore suggest making additional configuration options so that the regex can be customised.

Bumps lodash from 4.17.14 to 4.17.19.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Issue

To put it simply.. :fire:Dependency hell :fire:

The Tidy-Table dependency packer which is used by this script for minification relies on a dependency chain of the following unsupported packages:

• jsdom
• nomnom
• contextify

Due to this, when installing this package using modern versions of NPM you will likely receive the following error:

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script.

Solution

This package, including minifier, should be replaced with uglify since it can handle both JavaScript/CSS minification (and they are fully supported).

If there is anyone that wants to take the lead on this, be my guest, or I will address this when time becomes available.

Would like to see some documentation how to set the color of a row based on a condition that is met.

For example if I wanted all rows that have a negative value to be red, and positive green?

Is it possible to assign a function to a row (rather than column) in the postProcess object? Or, is it only possible using the menu callback? I'd like to: 1) highlight hovered rows and 2) assign a function to the onclick event of a row.

I use jQuery in version "1.11.0" and got error: "Tidy-Table requires jQuery 1.8.3 or greater."

if (!window.jQuery || (window.jQuery && window.jQuery.fn.jquery < '1.8.3')) {
    throw new Error('Tidy-Table requires jQuery 1.8.3 or greater.');
}

This will raise error for version of jQuery "1.10.", "1.11."

How do you actually call JSON data to write to the a table created by Tidy-Table? In your sample table, you provide the data array within the script, but you don't actually show how to bring data in with a JSON URL

For example I would like to use the data from the following JSON source in conjunction with Tidy-Table:

http://query.yahooapis.com/v1/public/yql?q=select%20symbol%2C%20EnterpriseValue%2C%20Symbol%2C%20MarketCap%20from%20yahoo.finance.keystats%20where%20symbol%20in%20(%22ABX%22%2C%22GG%22%2C%22NEM%22%2C%22KGC%22)%20%7C%20sort(field%3D%22EnterpriseValue%22%2C%20descending%3D%22true%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=topstock

How would I incorporate this URL into the Tidy-Table script?