Skip to content

Home

Jump to bottom
Kiran Mantha edited this page Dec 15, 2017 · 11 revisions

Welcome to the jquery-fixed-columns-dataGrid wiki!

jquery-fixed-columns-dataGrid is a very simple to use and lightweight jquery plugin to convert your html table into a data table with features like frozen columns, frozen header.

Installation

The plugin requires jquery >2.10.*. Download the plugin and include in the head block of the page.
create a simple html table wrapped inside a container i.e., div like below

<div id="tablecontainer">
   <table class="table" id="example">
       <thead></thead>
       <tbody></tbody>
   </table>
</div>

in the script block, initialize the plugin like below

$('#example').dataGrid({
    left: 2,
    right: 2,
    head: true,
    containerId: 'tablecontainer',
    containerHeight: '100px',
    multiRowSelect: true,
    sortableRows: true,
    contextMenuItems: [{
        'text': 'Copy',
        'iconTemplate': '<i class="fa fa-clone"></i>',
        'action': function(selectedRows) { //your custom code }
    }, {
        'text': 'Paste',
        'iconTemplate': '<i class="fa fa-clipboard"></i>',
        'action': function(selectedRows) { //your custom code }
    }]
});

Options

Datagrid supports following options:

Option Type Default Value Comments
head boolean true made the table header as fixed
left integer 0 Make left columns as fixed
right integer 0 Make right columns as fixed
containerId string '' id attribute of the table container. Don't append '#'. the plugin appends it automatically
containerHeight string '50vh' defines the scrollable height of table. Accepts all types of style types like px, vh, %, calc(100% - 10px)
containerWidth string '100vw' defines the scrollable width of table. Accepts all types of style types like px, vh, %, calc(100% - 10px)
multiRowSelect boolean false Allows the multi row selection [Hold 'Shift' key and click on rows for multiselect]
sortableRows boolean false Allows the reordering of table rows through drag and drop. Requires jqueryUI to use this feature. If jqueryui is not loaded, the plugin will throw console error about the dependency.
contextMenuItems array [] Allows user to create highly customizable context menu. The context menu is available only if multiRowSelect is enabled. Any function in context menu will receive the currently seleted rows as their arguments.

Methods

The syntax for calling the dataGrid methods is: $('#example').dataGrid('method-name'); Datagrid plugin provides four methods.

Refresh

Datagrid plugin simply adds the styles to the table and table container. Hence, as datagrid doesn't change the DOM, we can add any 'TR' to the table. But whenever we add a table row, we need to call the 'refresh' method of dataGrid to adjust the styles of the table. To call this method $('#example').dataGrid('refresh')

The dataGrid will automatically remove the row from the fixed section when the original table row is removed. Hence no need to call $('#example').dataGrid('refresh') method.

Destroy

Datagrid provides users to reset the entire styles which were added when binding the plugin to table. In order to do this, call destroy method like $('#example').dataGrid('destroy')

Reload Headers

Datagrid provides an option to just reload the headers when a new column got added. In order to avail this, just add a new column to your table and call $('#example').dataGrid('reloadHeaders'). This avoids the burden of reloading the entire grid which proves a most costly thing when the original table has a lot of rows and fixed columns.

Scroll To Bottom

Datagrid provides a method to scroll to the last row. This adds the flexibility to scroll to bottom whenever a new row is added. This can be done by calling "scrollToBottom" method of DataGrid like $('#example').dataGrid('scrollToBottom')

Events

'stop.dg.row.drop'

Datagrid adds a new functionality to drag and drop rows for rearranging. The plugin emits a event to notify that a row is dropped which helps to execute custom functionality.

$('#example').on('stop.dg.row.drop', function(event) { 
    //your custom code after dropping the row 
});

Case Studies

  1. In order to add new row when fixed columns are used,

    • If there are no rows in the original table, add the row to the original table and bind the datagrid to the table.
    • If there are any rows in the original table, add the row to the original table and call $('#example').dataGrid('refresh') method.

  2. In order to add new column, add the th tag to your original table and add the respective cells to the original table body and call $('#example').dataGrid('reloadHeaders') method. This will be highly useful when fixed header is used. This will eliminate the necessity of rebinding the grid.

  3. When the grid width is dynamic with horizontal scroll, first calculate the actual table width as:$(your-actual- table).css({'width': in-px, 'max-width': in-px}) and destroy the datagrid and rebind the datagrid.

  4. In order to renumber the order of rows after drag and dropping of rows, use the 'stop.dg.row.drop' event emitter of the plugin.

  5. When the 'data' of a particular row is changed. trigger 'dataChange' event on that row so that the dataGrid will update the data of the fixed row associated with the original row. Example:

     $('#example > tbody tr').each(function(i, row) {
     var rowData = $(row).data();
     //update the row data
     rowData['your-variable'] = 'updated-value';

     //set the updated data to the row and trigger 'dataChange' event
     $(row).data(rowData).trigger('dataChange');  // --> this will update the frozen row data too.
 });
Clone this wiki locally