alfajango / jquery-dynatable

A more-fun, semantic, alternative to datatables

jQuery Dynatable

A funner, semantic, HTML5+JSON, interactive table plugin.

See the full documentation with demos.

Why?

The purpose of Dynatable is to provide a simple, extensible API, which makes viewing and interacting with larger datasets easy. Dynatable provides a framework for implementing the most common elements out of the box, including sorting, searching and filtering. Above all, I wanted a clean and elegant API that is fun to use.

Quickstart

To install Dynatable:

• Download the latest release

Support

IRC: Join us at #dynatable on freenode IRC

Bugs and Feature Requests: Search and open a Github Issue

Debugging: Fork and edit this template on JSFiddle

Questions: Ask a question tagged with dynatable on StackOverflow

TODO:

• Change unfilters and filters to readers and writers.
• Clean up defaults that are functions, by abstracting into internal named functions which can be re-used.
• Change default sort functions to underscore-namespaced functions so as not to conflict with record attributes called e.g. search.
• Update sort function implementation to be analogous to search function implementation (whereby if a sort function matching attribute name is present, it will be used for that attribute by default).
• Namespace pushstate query parameters by dynatable instance id to simplify refreshQueryString function and prevent conflicts between multiple pushState-enabled instances on one page.
• Refactor using prototype to abstract dynatable-global functions to improve memory efficiency for multiple instances on one page.
• Implement configurable sorting algorithm (see JS Merge Sort and Sorting Table).
• Change from Object.create method to constructor pattern to improve performances (see benchmark).
• Use for loops instead of $.each where possible to improve performance.
• Use strings and/or document fragments for writing to DOM, instead of jQuery, by default to improve writing performance.
• Use templated strings to write pagination and other inputs.
• Make class names for input elements configurable.
• Use Chrome profiler to find any performance bottlenecks and fix.
• Simplify API by separating internal-only and accessible model functions.
• Move sorts and queries functions objects to defaults to make easier to customize and add to on instantiation (like filters and unfilters)
• Try using CSS-only for ProcessingIndicator.position to avoid querying rendered DOM styling and speed up all operations that position the indicator (see CSS absolute centering).
• Add data-dynatable-attr="name" support for reading records from arbitrary markup (so that you don't need to write a custom rowReader function when starting with e.g. a stylized list).
• Make sort function first lookup settings.sortTypes[attr], then look directly for sort sorts.functions[attr], and then finally sorts.guessType only if neither of the first two exist.
• Add global remove/cleanup function (opposite of init) to allow removing dynatable via JS.
• Support for Zepto?

Tests

Currently the testing process consists of opening the Dynatable documentation (source code here) in each browser and making sure every example works. This is fine for the initial release, since it serves the dual purpose of helping us write the documentation and having a written functional use-case at once. However, one of the top priorities now is to automate each use-case in the docs as a test case within an automated test suite.

If anyone out there thinks this sounds like fun, please contact me or even go ahead and create an issue/pull request. Otherwise, it will be at the top of my priority list until I can get to it.

Contributing

Please see the Contributing Guidelines.

Author

Steve Schwartz - JangoSteve on Github, @jangosteve on Twitter

Alfa Jango Open Source - @alfajango on Twitter

Copyright and License

Copyright 2014 Alfa Jango LLC.

Dual licensed, released under the Free Software Foundation's GNU Affero General Public License (AGPL), or see license information for proprietary or commercial applications.

Miscellaneous

Refactor performance benchmarks

For version 0.1.0, Dynatable went through a refactor to use prototypal inheritence as a more memory-efficient foundation. Here are some off-the-cuff benchmarks I set up when doing this.

The performance increase was modest, according to these benchmarks, but more importantly, the code became a bit cleaner and easier to work with.

http://jsperf.com/dynatable-prototypal-refactor

http://jsperf.com/dynatable-refactor/3

Currently, there's still a bit of performance improvement to be gained by further grouping DOM reads and writes (though they're already mostly grouped together), and by using JS string concatenation instead of jQuery to build the HTML for rendering step.

The new string concatenation has started to roll out in v0.2.

jquery-dynatable's Issues

records.updateFromJson [data] Does not work

Three Issues:

• Calling records.updateFromJson fails because the default value of 'settings.params.records' seems to be modified between the initial dynatable construction and the call to records.updateFromJson.
• Forcing a specific value for 'settings.params.records' in a global configuration allows updateFromJson to work, however, the visual table is not updated (this may just be a documentation oversight - should the visual table update?)
• After successfully calling updateFromJson, I can call dom.update which causes the visual table to updated, however, the number of total records does not update.

provide a way to clear out the dynatable.queries array.

Right now the workflow, wrt adding the queries to the dynatable object seems to be .

dynatable.queries.add("key1", value1);
dynatable.queries.add("key2", value2);

if in the UI , the key2 field was removed, the query entry would also have to be removed before calling dynatable.process.
so, rather than calling

dynatable.queries.remove("key1") and // calling remove on all fields, 

there should be something like

dynatable.queries.clear() // This sets the queries to a fresh initial state

[Feature request] Column resizing

Any thoughts on allowing the user to resize the columns?

colspan support in head

Seems that colspan is not supported in dynatable.

http://jsfiddle.net/47j3C/
http://i.imgur.com/KbEvEcw.png

The result is same with or without data-dynatable-column

"malformed URI sequence" error if column title contains a %

when the column title contains the % character (e.g. <th>Margin %</td>), the following error happends when clicking for the second time on the sort link:

URIError: malformed URI sequence
http://localhost/theliasvn/client/plugins/fournisseurs/dynatable/jquery.dynatable.js
Line 1460

This is so good!

Not an issue, just wanted to tell you how amazing Dynatable is. Every now and again you see a bit of software that is so good, it makes you want cry with happiness because somebody "get's it".

Dynatable is definitely on that list.

Impossible to add an array on queries

I have add a functionality when you try to add a queries. It was only one value, now with this code, it's possible to add an array of value.

// collect all records that return true for query
settings.dataset.records = $.map(settings.dataset.records, function(record) {
var $return = null;
if(!$.isArray(value)){
if(record[query] == value)
$return = record;
}
else{
if($.inArray(record[query],value) != -1)
$return = record;
}
return $return;
});

On line 1114

Support for nested pagination attributes

The rails gem https://github.com/rails-api/active_model_serializers really encourages json responses for meta data like pagination to be included like so:

{"countries":[{"id":1,"code":"AU","description":"Australia"}],"meta":{"count":1,"total_count":1}}

It would be great if dynatable supported this, keep up the great work.

can we export datas on csv files or excel L

Hello
can we export data in csv files or other ?

thanks

Clearing Search terms from input field.

I love the search function. Easy to use an all. One feature request would be clickable clear of search terms to revert to the original view before search terms was used.

Something like this perhaps.

http://jsbin.com/ekaZUR/1/edit

Obviously not urgent, but a UX nice to have.

Keep up the great work. love it.

Automatic Search

Instead of having to push enter or tab can I have the search initialize off of any user input? I.E. when typing?

Thanks,
-John

Trouble loading JSON periodically

@JangoSteve
As discussed in the other issue, I'm still having trouble getting this to work.

I believe I am now doing it the way you specified. I fetched today's jquery-dynatable version directly from the website less than an hour ago.

https://gist.github.com/flexd/357b24bb20308e247dbf

In both creating the dynatable instance and trying to update it, it is null.

What am I doing wrong here?

How do i display the table

If the AJAX JSON data is something like this how do i display the data in the table. Currently the AJAX example you have has a parent JSON identifier called records. How would you process the data without that parent.

[{"band": "Weezer","song": "El Scorcho"},
{"band": "Chevelle","song": "Family System"}]

Presenting nested JSON data in table

I have JSON that has data nested like below.

"typeOfprice": "default",
"resourceTypeId": {
"id": 8,
"name": "name",
"code": "1234",
"enable": 1
},

Is there a way of adding the detail within "resourceTypeId" in the table that is sortable and searchable?

I can get it to appear by creating a rowWriter and targeting it from the record (record.resourceStatusId.name), but it isn't searchable and sortable. I'm no dev, so perhaps I am missing something in the documentation.

[Feature Request] Add/Edit/Delete records in the table

This Dynatable has a lot of potential. Is is possible to have a feature that allows Add/Edit/Delete records in the table?

Disable query string parameter in uri

Is there a way to disable the update of the query string in url ?

Make headers remain at top of table?

I'm new to Javascript and really love Dynatable. It was trivial to integrate and a significant improvement to my site. Thank you.

One feature I'd love it so be able to configure the table so that the headings don't scroll out of view when I scroll down. Is that something that would fit into your library? I've done some research and it appears to be possible through various mechanisms. But it would be wonderful if it were easier.

Use spaces as token separators in searches, rather than as part of the search.

This is related to #39 but not the identically same issue.

I believe spaces should be treated as token separators in searches, rather than as part of the search term. To give a real example that I just ran into, I searched for "flat " (with a space) and failed to get results with "flatbread" or results with "flatbrd" (with an ugly abbreviation). Once I removed the space, they appeared.

Why would I have a space? Because I initially had a second search term, but got nothing because the two terms did not appear together as a single string in the data. I removed the second search term but not the space between them, and expected to get something, but did not.

Multiple Search Terms Support

It would be great to have multiple search term support in dynatable.

Something like a comma being used as an and operator.

So foo, bar would search dynatable for rows that match foo and bar.

Dynatable using the wrong JSON after loading JSON manually in browser

In the process of trying to get JSON loaded from a URL to be used for my data in Dynatable I discovered a strange bug. This issue is about the bug, not about the problem I'm trying to solve, but if you are moved to answer the question on StackOverflow, I certainly wouldn't complain about it. :)

The circumstances in which I find the bug are a bit different from what is described in the SO question. I've got an HTML page with two tables. One pulls data from JSON that is embedded inside the page, in a <script> element (just like the example in the documentation that uses a <pre> element, but this hides it without adding any CSS to do so). The other pulls data (or tries to pull data) from a URL. In order to make sure that the problem was not merely the same origin policy blocking me, I am serving the page and assets with Serve running locally on my laptop.

It's not working (for reasons I haven't discovered yet—and as I said, that is not what this bug report is about) but if I load the JSON file manually by entering http://localhost:4000/music.json in the browser's address field, and then hit the back button to go back to http://localhost:4000/index.html, suddenly I'll see both tables filled out. At first I thought I'd gotten my Dynatable to do what I wanted, until I noticed that it had data in it that was not in music.json. I've got 13 records in the embedded JSON, but only 8 in music.json. For some reason both tables were taking their data from the embedded JSON. That's the bug.

Here's the version of index.html and music.json with which I noticed this bug:

<!DOCTYPE html>
<html>
<head>
  <title>Ad-Related Reports</title>
  <script src="./vendor/jquery-1.7.2.min.js"></script>
<!-- 
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
  <script>window.jQuery || document.write('<script src="./vendor/jquery-1.7.2.min.js"><\/script>')</script>
 -->
  <script src="./jquery.dynatable.js"></script>
  <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css">
  <!-- <link rel="stylesheet" href="./jquery.dynatable.css" /> -->
  <link rel="stylesheet" type="text/css" href="./jquery.dynatable.css">
  <style type="text/css">
    body {
      padding: 10px;
    }
  </style>
</head>
<body>
<h3>Remote JSON</h3>
<table class="table table-striped" id="remote">
  <thead>
    <th>Band</th>
    <th>Album</th>
  </thead>
  <tbody>
  </tbody>
</table>

<hr>

<h3>Local JSON</h3>
<table class="table table-striped" id="local">
  <thead>
    <th>Band</th>
    <th>Album</th>
  </thead>
  <tbody>
  </tbody>
</table>


<script id="music">
[
  {
    "band": "The Police",
    "album": "Ghost In The Machine"
  },{
    "band": "Supertramp",
    "album": "Breakfast In America"
  },{
    "band": "Peter Tosh",
    "album": "Mama Africa"
  },{
    "band": "The Police",
    "album": "Regatta d'Blanc"
  },{
    "band": "The Police",
    "album": "Zenyatta Mondatta"
  },{
    "band": "Supertramp",
    "album": "Crime of the Century"
  },{
    "band": "Talking Heads",
    "album": "Remain in Light"
  },{
    "band": "Talking Heads",
    "album": "More Songs About Buildings & Food"
  },{
    "band": "Talking Heads",
    "album": "77"
  },{
    "band": "Talking Heads",
    "album": "Stop Making Sense"
  },{
    "band": "Talking Heads",
    "album": "Fear of Music"
  },{
    "band": "Talking Heads",
    "album": "Sand In The Vaseline"
  },{
    "band": "Talking Heads",
    "album": "Little Creatures"
  }
]
</script>



<script type="text/javascript">
  // getting JSON from the document works, but of what use is that?
  $(document).ready( function() {
    $('#local').dynatable({
      dataset: {
        records: JSON.parse($('#music').text())
      }
    });

    // var json_url = '//www.dynatable.com/dynatable-ajax.json';
    var json_url = '/music.json';
    $.getJSON(json_url, function(data) {
      //alert(data); //uncomment this for debug
      // for(proper_tea in data){
      //   alert(JSON.stringify(data[proper_tea]));
      // }
      //alert (":" + JSON.stringify(data));
      //$('#showdata').html("<p>item1="+data.item1+" item2="+data.item2+" item3="+data.item3+"</p>");
    });

    var json_string;
    $.get(json_url, function(json) {
      json_string = JSON.stringify(json); 
    })
      .done( function() {
        alert(json_string);
        alert("made it");
      });

    // getting JSON from a remote source fails:
    $('#remote').dynatable({
      dataset: {
        ajax: true,
        ajaxOnLoad: true,
        ajaxUrl: 'http://localhost:4000/music.json',
        records: []
      }
    });
  });
</script>

        <!-- ajaxUrl: '//www.dynatable.com/dynatable-ajax.json', -->

</body>
</html>

and

[
  {
    "band": "The Police",
    "song": "Ghost In The Machine"
  },{
    "band": "Supertramp",
    "song": "Breakfast In America"
  },{
    "band": "Peter Tosh",
    "song": "Mama Africa"
  },{
    "band": "The Police",
    "song": "Regatta d'Blanc"
  },{
    "band": "The Police",
    "song": "Zenyatta Mondatta"
  },{
    "band": "Supertramp",
    "song": "Crime of the Century"
  },{
    "band": "Talking Heads",
    "song": "Remain in Light"
  },{
    "band": "Talking Heads",
    "song": "Speaking in Tongues"
  }
]

Writer and reader examples

I believe we need more writer and reader examples. I successfully integrated dynatable to my project and completed server-side process but still didn't figure out how can I add attributes to specific td, e.g. class, id, data- etc...

Scrollable table

It would be nice if the table could be scrollable for when it overflows the container's max witdh or height. Probably including a wrapping div on the table, not including the table controls and paging (so they won't scroll along the table).

Nice table btw!

Example AJAX setup and response in documentation

I realize the demo omits this, but we aren't able to get this to work properly. Pagination seems to be broken and we are unable to navigate pages. Not sure how people are using dynatables, but we'd love to use it as an ajax replacement for Datatables.

$('#homes-table').dynatable({
  features: {
    paginate: true
  },
  dataset: {
    ajax: true,
    ajaxUrl: '<%= homes_path %>',
    ajaxOnLoad: true,
    records: []
  },
  params: {
    sorts: 'order',
    page: 'page',
    perPage: 'per_page',
    queryRecordCount: 'count',
    totalRecordCount: 'total_count'
  },
  table: {
    defaultColumnIdStyle: 'underscore'
  },
  inputs: {
    paginationClass: 'pagination',
    paginationActiveClass: 'active',
    paginationDisabledClass: 'disabled'
  }
});

Current JSON response

{
"records": [
  {
    "name": "1 Testing Ave",
    "customer": "<a href='/customers/2'>Eric Customer 2</a>",
    "development": "Inglewood",
    "actions": "<a class='btn btn-info btn-block btn-xs' href='/homes/4'>View</a>"
  },
],
"count": 10,
"total_count": 29
}

TR data- tags, and TR jquery on(click)

I have two issues that I'm trying to figure out that seem related. I have a two-column dynatable that has about 50 records, and I have it set to 10 per page (so there are five pages). I'm pretty green with javascript/jquery, so it's entirely possible I'm overlooking something very simple.

The first issue: If I set any sort of html attributes on a TR in the table, Dynatable strips them out. I was trying to save information that looks like this for subsequent reference (more on this in a minute):

I've confirmed that the data is there before calling the dynatable function, and it's gone after the dynatable function completes. I'd really like to be able to stuff this data in the TR element.

The second issue, I have a jQuery on(click) function bound to the table's TR. When I added the function BEFORE initializing dynatable, it was removed. If I attached the event listener AFTER initializing dynatable, it works. So it seems like dynatable is also stripping jQuery event bindings.

In addition, even though I can get the function to work (by binding the click function after intializing dynatable), if I click on any page link (I have 5 pages of results), the click event listener gets stripped again.

It seems like dynatable is stripping to much information. Thoughts?

What is a license of this project?

I could not find information about license of this project, neither here, nor on documentation page. Could you specify it?

interactive chart error when some item value less than zero

cart become below 0 and their value become maximum minus, is there possible to show minus number height such as plus number height, thanks

Internalisation feature

I think it would be a good idea to add internalisation to dynatable.
At the moment we can only overwrite some words in the inputs:{} default configuration object.
Maybe we could use some sentences to parse like :
inputs: {
recordCountText: 'Showing {x} to {y} of {z} records'
}

Integrate with Sharepoint 2013 App (JSOM)

I've managed to Dynatable into the SP2013 app I'm building and whilst the HTML table is being "Dynafied" I'm seeing all the records (252) and when I click the link to sort the column the data disappears.

Would this be something to do with how SP is bring back the data? I'm using JSOM to present the data.

Knockout integration

It would be great if there was some relatively easy way to integrate this with Knockout, as it's a relatively popular and useful library yet there is currently no good way to make nice tables/grids like you can with Dynatable.

Knockout is a data binding library. You give it a JS object and some HTML which references it, and it turns the JS object into an "observable" and it displays the contents. When part of the observable changes, it updates only that part of the UI. This makes updating fast and smooth, since it minimizes messing with the DOM.

Consider a table. If you have a normal table like this in Knockout.

HTML:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
    </tr>
  <tbody data-bind="foreach: people">
    <tr>
      <td data-bind="text: name"></td>
      <td data-bind="text: age"></td>
      <td data-bind="text: sex"></td>
    </tr>
  </tbody>
</table>

JS:

viewModel = {};
viewModel.people = [
  {name: ko.observable("Bob"), age: ko.observable(26), ko.observable(sex: "M")},
  {name: ko.observable("Joe"), age: ko.observable(22), ko.observable(sex: "M")},
  ...
];
ko.applyBindings(viewModel);

That will render a normal HTML table with all the people in it. Then, the beauty is that... say Bob changes his name to Robert. You do:

viewModel.people[0].name("Robert");

and then "Bob" changes to "Robert" in the displayed table while everything else remains untouched.

The problem is, when you introduce a library like DataTables or (presumably, because I haven't looked too closely at it) Dynatable, this stops working because both Knockout and the table library want to "manage" the contents of the table and they step on each others' toes. The only easy way to work around this is to reload the entire contents of the table whenever something changes in Knockout, which is easy to do, but doesn't perform very well, especially for large tables.

There are various hacky solutions to this floating around, but they range from "really hacky and marginally working" to "completely broken". I'm not sure if it's even feasible for you to imagine some kind of better integration between Knockout (or other similar libraries, there are many) and Dynatable, but it would be really cool if you could.

I suspect that this issue will become more important as the trend of "real time" JavaScript applications continues, as most of those are based on some kind of Knockout-like data binding.

Filter results with checkboxes

I'd like to have the ability to bind custom query functions to the checked or unchecked state of a checkbox. For example, if a checkbox labeled "show disabled items" is unchecked I want to only show enabled items, and if it is checked I want to remove the filter so that all items are shown.

Example seems broken

Is it possible to place the search input anywhere on a page?

Does anyone know if it is possible to have total control over the placement of the search input, or perhaps how create a custom search input that replaces the default one?

I'm looking to have it within bootstrap 3 formatted code as follows:

Job: Account Representative Email Coordinator

                <div class="col-md-3">
                    <span class="tools">
                        Start Date:
                        <input type="text" id="start-date" class="form-control date-picker">
                    </span>
                </div>
                <div class="col-md-3">
                    <span class="tools">
                        End Date:
                        <input type="text" id="end-date" class="form-control date-picker">
                    </span>
                </div>
                <div class="col-md-3">
                    <span class="tools">
                        Search
                        <input type="search" id="search" class="form-control search">
                    </span>
                </div>

Compatibility with Meteor?

Any thoughts on getting Dynatable to work with Meteor? (I dropped it in an app but it looks like there's a scoping issue and the dynatable() method isn't exported - need to look into it further).

Dynatable's initialization from existing JSON is a perfect fit for for Meteor's data-on-the-wire approach.

Details view

Would be awesome if you could do a master details view using dynatable.

Problems using custom rowWriter with Markup.js, content ends up outside <tbody></tbody>

Hi there.

I am experiencing a very odd problem trying to use Markup.js in my custom rowWriter.
My code works fine when just returning a string ala.

return "<tr><td>" + record.ident + "</td><td>" + record.first_name + " " + record.last_name + "</td><td>" + record.open_incidents + " åpne saker</td><td><button data-id='" + record.id + "' class='process_button btn btn-success btn-xs'>Behandle</button></td></tr>";

Using the code above in a custom rowWriter, like this, https://gist.github.com/flexd/427ac875d96735f2711c

It looks like this,

But, if I use Markup.js to generate the HTML string using the commented out code in the gist above, it looks like this:

As you can see in the second screenshot, the row has now somehow ended up outside <tbody></tbody>

I am not sure why this happens, as you can see here https://gist.github.com/flexd/333768cabcb5f7462ae2
Both methods return proper HTML, the only difference is that the template is formatted to be readable.

Looking at the default rowWriter and the source code, I have not yet found out what may be causing this, but since Markup.js seems to return a perfectly good HTML string I believe the problem exists within dynatable at the moment, I may of course be wrong.

https://github.com/alfajango/jquery-dynatable/blob/master/jquery.dynatable.js#L373

I am on IRC for the next 4-5 hours today and a while during the day tomorrow (CET). :-)

Allow displaying (e.g.) "Show [10] records" instead of just "Show [10]"

It would be nice to have the ability to have the more readable (and grammatical) "Show x records" instead of just "Show x". With "records" appended, it is immediately obvious what the control does, while without it you have to think about it a moment or two.

Syntax for adding multiple custom queries

This might be more of a question rather than an issue. In the documentation it says that "we can just pass an array of jQuery selectors which point to our filter inputs"

$('#search-example').dynatable({
  features: {
    paginate: false,
    recordCount: false,
    sorting: false
  },
  inputs: {
    queries: $('#search-year')
  }
});

I added another selector and tried doing stuff like

  inputs: {
    queries: { 
        $('#search-year'),
        $('#search-model')
    }
  }

but no such luck... What am i doing wrong?

I know it is possible and is probably just a syntax issue because if i do it the long way a.k.a. bind the query to the input's change event, everything works.

$('#search-model').change( function() {
  var value = $(this).val();
  if (value === "") {
    dynatable.queries.remove("model");
  } else {
    dynatable.queries.add("model",value);
  }
  dynatable.process();
});

Thank you.

Responsive Mode ?

resetting page number when sorting

Hi !

I was wondering if there is an option to set the page number to 1 when the user is sorting the table.

I think that keeping the same page number when changing sort is quite confusing.

Thanks

HTML tag in JSON not work

I put HTML tag in JSON
such as <a> , <img>
dynatable does not show link or image in row of table

Bootstrap 3 compatible

Hello,
I think it would be a good thing to make the pagination compatible with bootstrap 3, or at least to be able to overwrite the pagination implementation. What do you think ?

Swapped `readers._rowReader` with `writers._rowWriter`

In the documentation, it says

NOTE: We'll also need a readers._rowReader function to tell dynatable how to write the JSON records back to the page, but we'll get to that in the Render section.

I'm pretty sure that what was meant was

NOTE: We'll also need a writers._rowWriter function to tell dynatable how to write the JSON records back to the page, but we'll get to that in the Render section.

since this NOTE comes right after talking about the readers._rowReader, and it doesn't make sense to say "we'll also need what we just told you all about" and because the Render section introduces writers._rowWriter.

I didn't see a repo (or a branch) for the docs, so I'm posting the issue here. I hope that's not a problem.

Example on using custom column name transformation function cant work

I initially tried this

$('#my-table')
    .bind('dynatable:init', function (e, dynatable) {
        dynatable.utility.textTransform.getFieldLabel = function (text) {
            var newText = text;
            return newText;
        };
    })
    .dynatable({
        table: {
            defaultColumnIdStyle: 'getFieldLabel'
        },
        dataset: {
            records: this.data.toJSON()
        }
    });

1. utility doesnt seem to be exposed so calling dynatable.utility returns undefined
2. For tables, is seems that the transformation function is called before init, so even if utility was exposed, the function would not be found as it would be called before the init event

I ended up defining my custom function inline, which required a small change to the dynatable's source on line 1412 to call the custom function to

text = (typeof(style) === 'function')?style(text):this.textTransform[style](text);

Did I completely miss how to use it or should I make a pull request?

offset in query string is (apparently) redundant

In the query string, the offset parameter seems to make no difference. For instance, if I go to http://www.dynatable.com/?page=3&offset=19 it will be corrected to 20, since the default perPage value is 10, and the page=3. Likewise, if I go to http://www.dynatable.com/?page=3&offset=21 it will be corrected to 21.

Are there any cases where this does not hold true? I thought that it might be used in cases where you've paged through data and then change the perPage setting, but that (unfortunately) sends you back to the beginning of the data. Is the offset there just so that this behavior (of going back to the start) can be changed later, and users can keep their place when they change the page size?

Adding links

I couldn't find in the documentation on how to add links when pulling data from a JSON file. Also if a link was added how can you add attributes such as
data-id='1' or data-toggle="tab" href="#mytab"

When you click on that link is it possible to fire a function that will get the data-id='1' attribute.

Detail "row" that is not actually its own row (in the DOM)

(I don't have any idea what is intended in this issue, but I'm assuming it's different.)

I've seen many cases where the tabular nature of tabular data gets compromised for display purposes, such as putting a comment column in its own row below the record it pertains to:

_____________________________________________________________
| Order # |  Description  | Price |  Discount | Coupon Code |
| 1234567 |   Welch's Jam |  $7.77|      $0.00|   1234567890|
|         | Some long note that won't fit in a column easily|
|         | but relates to the Welch's Jam in the row above.|
| 1234568 |  Smuckers Jam |  $7.77|      $0.00|   1234567890|
| 1234569 | Peanut Butter |  $7.77|      $0.00|   1234567890|

If I put these notes in their own tr elements, then that breaks Dynatable's ability to manipulate the data, since I've broken the expectation of the table containing consistently tabular data. Yet this is a very common (though semantically ugly!) thing to do with tables.

The best solution I can think of, is for Dynatable to allow such content to be kept in a single table cell (keeping the semantics consistent!) and then display it (after sorting and other manipulation) in its own <tr> element and hide the <td> that contains the same content. The JSON would keep the data consistent as well, so every new sort would treat this content is just another table cell, but after sorting and filtering it would appear again as a row in the browser.

Rails UTF8 ✓ doesn't get properly encoded / decoded

With several ajax calls, I end up with an exponentially increasing number of characters for the utf8 query parameter.

Integer sorting

I'm trying to sort a table by an integer column, but it keeps sorting it like strings.

Heres an screenshot.

I'm using latest dynatable.

Thanks!

Drag & Drop Rows/Columns

The ability to shift rows up and down within a table order by dragging them up or down.

Ability to change column order as well by dragging to the column position desired

sort dates column

I didn't find anywhere in the doc how does DynaTable sort dates. I must be missing something here because I didn't find anywhere how to specify the column type for sorting..