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.