Grids are one of the most commonly sought after plugins for web sites. There are a huge variety of them out there, and they all work a little bit differently. Grids and visualizations have been something ComponentOne has been doing for a long time, and we pride ourselves in our ability to give you easy solutions that will impress. Wijmo Grid is a jQuery plugin that let’s you get up and running quickly with beautiful theme-rolled Grids. In this post, we’ll explore how to set up a grid from an existing table, and add powerful features such as sorting and paging. Since I’m writing this post in an airport, let’s use the example of a flight tracker board. We’ll have a table containing cities, gate numbers, statuses, and departure times.

<table width="100%">  
    <thead>  
        <tr>  
            <th>  
                City  
            </th>  
            <th>  
                Departure Time  
            </th>  
            <th>  
                Status  
            </th>  
            <th>  
                Gate #  
            </th>  
        </tr>  
    </thead>  
    <tbody>  
        <tr>  
            <td>Norfolk</td>  
            <td>08:00 am</td>  
            <td>ON TIME</td>  
            <td>A1</td>  
        </tr>  
        <tr>  
            <td>Norfolk</td>  
            <td>09:00 am</td>  
            <td>ON TIME</td>  
            <td>A4</td>  
        </tr>  
        <tr>  
            <td>Norfolk</td>  
            <td>10:00 am</td>  
            <td>ON TIME</td>  
            <td>A2</td>  
        </tr>  
        <tr>  
            <td>Pittsburgh</td>  
            <td>08:00 am</td>  
            <td>LATE</td>  
            <td>A11</td>  
        </tr>  
        <tr>  
            <td>Pittsburgh</td>  
            <td>12:00 am</td>  
            <td>ON TIME</td>  
            <td>A1</td>  
        </tr>  
        <tr>  
            <td>Atlanta</td>  
            <td>08:00 pm</td>  
            <td>ON TIME</td>  
            <td>A7</td>  
        </tr>  
        <tr>  
            <td>Atlanta</td>  
            <td>04:00 pm</td>  
            <td>LATE</td>  
            <td>A3</td>  
        </tr>  
    </tbody>  
</table>

When rendered normally, here's how the grid looks (note: I’m using the Studio for MVC Wijmo CTP project template to enable the styles): image This is a nice looking grid, but we can easily enhance it with a little bit of Wijmo magic. In the JavaScript section of our page, I’ll write the following code:

$(document).ready(function () {  
     $("table").wijgrid();  
});

This code will turn our table into a Wijmo grid. You’ll see the ThemeRoller theme for my page has already been pulled in and applied. image By default, I get row selection and highlighting. That’s nice, but let’s go a step farther and add client side sorting to this page. In my JavaScript, I’m going to alter the call to WijGrid a little bit.

$(document).ready(function () {  
$("table").wijgrid({  
**allowSorting: true**  
});  
});

image And there you go! With one more line of code, I’ve added client side sorting. Finally, grids are meant to hold a lot of data efficiently. One of the most efficient ways to display a lot of data is with pages. To add paging to a WijGrid, all you need to do is alter your JavaScript like so:

$(document).ready(function () {  
$("table").wijgrid({  
allowSorting: true,  
**allowPaging: true**,  
**pageSize: 5**  
});  
});

Our end result, with paging and sorting enabled looks like this: image And that’s all there is to it! In upcoming posts, I’ll show you how to get a little more fancy with your grids. And of course, if you have any questions, please feel free to ping me directly. Kevin Griffin keving@componentone.com Follow me on Twitter @1kevgriff