Author: | admirhodzic |
---|---|
Views Total: | 3,299 views |
Official Page: | Go to website |
Last Update: | November 16, 2019 |
License: | MIT |
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
Amazingly fast, feature rich, customizable, and easy-to-use, thanks!