DataTables vs KoGrid: Which To Use?



(Above: DataTable with Bootstrap Styles. CDN available for JS and CSS. Note to other devs-- make sure you don't include the default DataTable css if you're using this-- just the bootstrap integration css is sufficient)

  1. jQuery based with lots of plugins and configuration options
  2. Great examples and documentation
  3. Modern look and feel
  4. Easy to match styles with Bootstrap, Foundation or jQuery ThemeRoller
  5. Works with KnockoutJS
  6. Internationalisation language plugins available with CDN
  7. Responsive
  1. So many options and plugins that it can be a challenge to find exactly what you are looking for.

alt (Above: KoGrid with jQuery UI Bootstrap-like theme. Despite its simplicity, it took a lot of time and custom CSS to make the jQuery UI tabs look somewhat decent)

  1. Easy to get up and running in a KnockoutJS environment
  2. Good code examples.
  3. Configuration options are easy to implement and understand.
  1. Limited functionality and plugins
  2. Not responsive out of the box
  3. Outdated look and feel
  4. No longer actively maintained (last updated 2 years ago)
  5. Sort and pagination functionality is not user friendly (hidden behind a small nondescript triangle...really)

Use Cases:

DataTables Grid Use Case: Great for any grid project that uses jQuery!!

Knockout Grid Use case: Limited use cases, but KoGrid could be useful in an application that is already using knockout.js and doesn't need a lot of customization.

Below is a list of alternatives that I explored, but ultimately decided against for one reason or another.
SlickGrid InGrid Angular UI Grid


Having used both DataTables and KoGrid with the same data in the same single-page application (SPA), I would highly likley recommend using DataTables over KoGrid. In the age of mobile first development, DataTables simple wins out. Not only is DataTables compatible with the biggest responsive frameworks of the day including Bootstrap and Foundation, but the jQuery DataTable plugin itself is responsive right out of the box.

Making a DataTable responsive is as easy as responsive: true:
$(document).ready(function() { $('#example').DataTable( { responsive: true }); });
In my own project, I started off with KoGrid, but started using DataTables after I found it was the most highly ranked dynamic JavaScript grid on StackOverflow and compatible with KnockoutJS and Bootstrap. Since then, our team has been so impressed with the plugin that we have started
using it for other dynamic tables in our application.