Feature-rich Data Grid Library – FathGrid

Preview:

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/jspdf@latest/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,
      // automatically restore column widths from previous user session with the same table
      restoreColumns:false,
      // 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/16/2019

• added columnRestore options

11/09/2019

• resizable columns

10/11/2019

• rtl support, translations, onInitInput

10/04/2019

• Added chart support
• Added more options & methods