Feature-rich Data Grid Library – FathGrid

Category: Javascript , Recommended , Table | November 9, 2019
Author: admirhodzic
Views Total: 121
Official Page: Go to website
Last Update: November 9, 2019
License: MIT

Preview:

Feature-rich Data Grid Library – FathGrid

Description:

FathGrid is a lightweight yet full-featured data grid/table library with support for sorting, filtering, pagination, editing, and much more.

More features:

  • Supports static and dynamic tabular data
  • Compatible with 3rd front-end frameworks such as Bootstrap.
  • Export data to TXT, PDF, XLS, HTML, CSV.
  • Visualize tabular data using chart.js.

How to use it:

1. Download and import the FathGrid into the document.

<script src="fathgrid.js"></script>

2. To export the table into a PDF file, you need to load the chart.js library in the document.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>

3. To visualize the data, you need to load the jsPDF.js library in the document.

<script src="https://unpkg.com/[email protected]/dist/jspdf.min.js"></script>

4. Convert a regular HTML table into a data grid.

<table id="example">
  MY TABLE DATA HERE
</table>
const myDataTable =FathGrid("example");

5. Or define the tabular data in the JavaScript.

const myDataTable =FathGrid("example",{
      data:[
        ['1','first row'],
        ['2','second row'],
        ['3','third row']
      ]}
);

6. Or directly insert the data into the table.

myDataTable.setData([['1','first row'],['2','second row'],['3','third row']]);

7. Config the data table with the following optional settings.

const myDataTable =FathGrid("example",{

      // page size
      size:20, 

      // the page number to show
      page:1, 

      // editable
      editable:false,

      // filterable
      filterable:true,

      // sortable
      sortable:true,

      // printable
      printable:true,

      // resizable
      resizable:true,

      // pageable
      pageable:true,

      // exportable
      exportable:true,

      // multi selectable
      multiselect:true,

      // chart.js options
      graphType:'line',
      graphValues:this.undefined,
      graphHeight:'400px',

      // shows table footer
      showFooter:false,

      // allows to show/hide columns
      selectColumns:false,

      // shows group footer
      showGroupFooter:false,

      // defines settings for each column
      // see below
      columns:[],

      // templated string URL for data retrieval
      serverURL:undefined,

      // custom function which converts received JSON object into data array
      prepareData:function(json){},

      // sorting options
      sort:[],
      sortBy:{}

      // function which returns a HTML string to group records on
      groupOn: {},

      // loading message
      loading:'Loading...',

      // rendering template
      template:'{tools}{info}{graph}{table}{pager}',

      // right to left
      rtl: false,

      // decimals
      decimals: 2
      
      // function to return a string with row classes.
      rowClass:function(data,index){},

      // language strings
      lang:{
        of:"of",
        yes:"yes",
        export:"Export",
        previous:"Previous",
        next:"Next",
        last:"Last",
        first:"First",
        gotoPage:"Goto Page",
        loading:'Loading...',
      },

});

8. All column options.

const myDataTable =FathGrid("example",{

      columns:[{

        // field name
        name: '',

        // if is visible
        visible: true,

        // list of values to filter select
        // e.g. [{name:'no',value:0},{name:'yes',value:1}],
        filter: null,

        // function which returns cell text content
        value: function(item){},

        // function which returns cell HTML content
        html: function(item){},

        // header text
        header: '',

        // function which returns footer cell HTML content 
        footer: function(data,element){},

        // function which returns group footer cell HTML content
        groupFooter: function(data,element){},

        // if is editable
        editable: true,

        // input type:
        // text, color, image, date, email, number, checkbox, textarea
        type: 'input'

        // regular expression to check the input value against when editing cell content 
        pattern: null,

        // help string for input in edit mode  
        title: '',

        // printable
        printable:true,

        // array of selectable values when editing 
        listOfValues: [],

        // CSS classes to add to column cells
        class: ''
      }]

});

9. Callback functions.

const myDataTable =FathGrid("example",{

      onInitFilter:function(el){},
      onInitTable:function(el){},
      onInitInput:function(item,idx,el){},
      onRender:function(){},
      onClick:function(data,col,el){editCell(data.rownum,col)},
      onChange:function(data,col,old,value){}

});

10. API methods.

// returns the tabular data
myDataTable.getData();

// sets data
myDataTable.setData(newData);

// exports the tabular data
myDataTable.export(format, filename);

// re-renders the table
myDataTable.render();

// sorts a specific column
myDataTable.sort(column_index, [asc|desc]);

// returns the column index
myDataTable.getSort();

// filters a specific column
myDataTable.filter(column_index, query);

// returns an array of column query strings
myDataTable.getFilter();

// edits a specific cell
myDataTable.editCell(rownum, col);

// searches in all columns
myDataTable.search([query string]);

// gets selected items
myDataTable.getSelectedItem();

// deletes a row
// 1 = first row, 2= second row, ...
myDataTable.deleteRow(rownum);

// inserts a new row
myDataTable.insertRow(rownum, item);

Changelog:

11/09/2019

  • resizable columns

10/11/2019

  • rtl support, translations, onInitInput

10/04/2019

  • Added chart support
  • Added more options & methods

You Might Be Interested In:


Leave a Reply