<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Jason Howard - Software Development Blog]]></title><description><![CDATA[Jason Howard - Software Development Blog]]></description><link>http://Blaug.azurewebsites.net/</link><generator>Ghost 0.5</generator><lastBuildDate>Fri, 17 Apr 2026 10:21:05 GMT</lastBuildDate><atom:link href="http://Blaug.azurewebsites.net/author/jason/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[DataTables vs KoGrid: Which To Use?]]></title><description><![CDATA[<h3 id="datatables">DataTables</h3>

<p><a href="https://github.com/DataTables/DataTables">https://github.com/DataTables/DataTables</a></p>

<p><img src="http://i.imgur.com/BhDM1Sr.png" alt="alt"></p>

<p><em>(Above: DataTable with <a href="https://datatables.net/manual/styling/bootstrap">Bootstrap Styles</a>. 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)</em></p>

<h6 id="positive">Positive:</h6>

<ol>
<li>jQuery based with lots of <a href="https://datatables.net/plug-ins/">plugins</a> and <a href="http://www.datatables.net/reference/option/">configuration options</a>  </li>
<li>Great <a href="http://www.datatables.net/examples/">examples</a> and documentation  </li>
<li>Modern look and feel  </li>
<li>Easy to match styles with Bootstrap, Foundation or jQuery ThemeRoller  </li>
<li><a href="http://abrudtkuhl.github.io/Simple-Knockout-Js-Paging-Datatables/">Works with KnockoutJS</a>  </li>
<li><a href="http://www.datatables.net/plug-ins/i18n/">Internationalisation language plugins</a> available with CDN  </li>
<li><a href="https://datatables.net/extensions/responsive/">Responsive</a> </li>
</ol>

<h6 id="negative">Negative:</h6>

<ol>
<li>So many options and plugins that it can be a challenge to find exactly what you are looking for. <br>
<br>  </li>
</ol>

<h2 id="kogrid">KoGrid</h2>

<p><a href="https://github.com/Knockout-Contrib/KoGrid">https://github.com/Knockout-Contrib/KoGrid</a> <br>
<img src="http://i.imgur.com/xHagssk.png" alt="alt">
<em>(Above: KoGrid with <a href="http://gustavohenke.github.io/jquery-ui-bootstrap/">jQuery UI Bootstrap-like theme</a>.  Despite its simplicity, it took a lot of time and custom CSS to make the jQuery UI tabs look somewhat decent)</em></p>

<h6 id="positive">Positive:</h6>

<ol>
<li>Easy to get up and running in a KnockoutJS environment</li>
<li>Good <a href="http://knockout-contrib.github.io/KoGrid/#/examples">code examples</a>.</li>
<li><a href="https://github.com/Knockout-Contrib/KoGrid/wiki/Configuration">Configuration options</a> are easy to implement and understand.</li>
</ol>

<h6 id="negative">Negative:</h6>

<ol>
<li>Limited functionality and plugins  </li>
<li>Not responsive out of the box  </li>
<li>Outdated look and feel  </li>
<li>No longer actively maintained (last updated 2 years ago)  </li>
<li>Sort and pagination functionality is not user friendly (hidden behind a small nondescript triangle...really)</li>
</ol>

<h4 id="usecases">Use Cases:</h4>

<p><strong>DataTables Grid Use Case:</strong> 
Great for any grid project that uses jQuery!!  </p>

<p><strong>Knockout Grid Use case:</strong>
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.</p>

<p>Below is a list of alternatives that I explored, but ultimately decided against for one reason or another. <br>
<a href="https://github.com/mleibman/SlickGrid">SlickGrid</a>
<a href="https://github.com/robertpiira/ingrid">InGrid</a>
<a href="http://ui-grid.info/">Angular UI Grid</a></p>

<h4 id="summary">Summary:</h4>

<p>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 <a href="http://zurb.com/word/mobile-first">mobile first development</a>, DataTables simple wins out.  Not only is DataTables compatible with the biggest responsive frameworks of the day including <a href="http://getbootstrap.com/">Bootstrap</a> and <a href="http://foundation.zurb.com/">Foundation</a>, but the jQuery DataTable plugin itself is responsive right out of the box. </p>

<p>Making a DataTable responsive is as easy as <code>responsive: true:</code> <br>
<code>
  $(document).ready(function() {
    $('#example').DataTable( {
        responsive: true
    });
  }); <br>
</code> 
In my own project, I started off with KoGrid, but started using DataTables after I found it was the <a href="http://stackoverflow.com/questions/8677298/best-dynamic-javascript-jquery-grid">most highly ranked dynamic JavaScript grid on StackOverflow</a> and compatible with KnockoutJS and Bootstrap.  Since then, our team has been so impressed with the plugin that we have started <br>
using it for other dynamic tables in our application. </p>]]></description><link>http://Blaug.azurewebsites.net/kogrid-vs-datatables/</link><guid isPermaLink="false">77ec33aa-d9fe-4ca3-b02e-8068b054793f</guid><dc:creator><![CDATA[Jason Howard]]></dc:creator><pubDate>Mon, 12 Jan 2015 16:31:03 GMT</pubDate></item></channel></rss>