data grid folium - Free Download Full-featured Dynamic Data Table Plugin - Folium

Free Download Full-featured Dynamic Data Table Plugin – Folium

Posted on

This time I will share jQuery Plugin and tutorial about Full-featured Dynamic Data Table Plugin – Folium, hope it will help you in programming stack.

data grid folium - Free Download Full-featured Dynamic Data Table Plugin - Folium
File Size: 19.6 KB
Views Total: 3787
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Folium is a jQuery data table plugin for creating spreadsheet-like CRUD data grids with sorting, filtering, pagination, and custom cell rendering support.

Key features:

  • Sortable table rows.
  • Filterable with a search field.
  • Add/Remove/Update table rows.
  • Editable table cells.
  • Render tabular data in a custom format.
  • Scrollable with fixed table header.
  • Pagination bar for large data set.
  • Callback functions wnen you click/double click a table row

How to use it:

1. To use the plugin, include jQuery library and the Folium’s files on the web page.

1 <link href="/path/to/folium.css" rel="stylesheet">
2 <script src="/path/to/jquery.min.js"></script>
3 <script src="/path/to/folium.js"></script>

2. Define your tabular data (columns & rows) in the JavaScript as follows:

01 // Columns
02 const colData = [{
03   columnId: "id1",
04   displayText: "ID 1"
05 },{
06   columnId: "id2",
07   displayText: "ID 2"
08 },{
09   columnId: "id3",
10   displayText: "ID 3"
11 }],
12  
13 // Rows
14 rowData = [{
15   id1: 'Cell 1.1',
16   id2 : "Cell 1.2",
17   id3 : "Cell 1.3"
18 },{
19   id1: 'Cell 2.1',
20   id2 : "Cell 2.2",
21   id3 : "Cell 2.3"
22 },{
23   id1: 'Cell 3.1',
24   id2 : "Cell 3.2",
25   id3 : "Cell 3.3"
26 }]

3. Polulate your HTML table with the tabular data you defiend.

1 <table id="example""></table>
1 const myTable = $('#foliumTableId').FoliumTable({
2       columns: colData,
3       rows: rowData
4 });

4. Enable the user to sort the table by clicking on the table header.

1 const myTable = $('#foliumTableId').FoliumTable({
2       columns: colData,
3       rows: rowData,
4       sortable: true
5 });

5. Enable the user to edit table cells.

1 const myTable = $('#foliumTableId').FoliumTable({
2       columns: colData,
3       rows: rowData,
4       editable: true
5 });

6. Enable the user to filter through table rows with a search box.

1 <input type="text" id="searchBox" />
1 $('#searchBox').on('keyup',function(){
2   const searchBoxText = $('#searchBox').val();
3   foliumTable.search(searchBoxText);
4   // allows the first column
5   foliumTable.search(searchBoxText, 0);
6 });

7. Add a pagination bar to the table and specify the number of table rows to display per page.

1 const myTable = $('#foliumTableId').FoliumTable({
2       columns: colData,
3       rows: rowData,
4       pagination: {
5         active: true,
6         size: 5
7       }
8 });

8. Add/remove/update table rows.

01 // add a new row
02 myTable.addRow({
03   id1: 'ID 4.1',
04   id2: "ID 4.2",
05   id3: "ID 4.3"
06 });
07  
08 // delete row 1
09 myTable.deleteRows(0);
10 // detete row 1,2
11 myTable.deleteRows([0, 1]);
12  
13 // update a row
14 myTable.updateRow(0, {
15   id1: 'new value'
16 });

9. Custom cell rendering.

1 const myTable = $('#foliumTableId').FoliumTable({
2       columns: colData,
3       rows: rowData,
4       cellRenderer : function(rowIndex, columnIndex, data, rowObject) {
5         if (columnIndex === 5)
6           return <a href="${rowObject.linkUrl}">${data}</a>;
7         return data;
8       }
9 });

10. API methods.

01 // returns the selected row index
02 myTable.rselectedRow()
03  
04 // returns the selected row index according to the table model
05 myTable.selectedRowInModel();
06  
07 // returns the selected column index
08 myTable.selectedColumn();
09  
10 // returns the number of rows
11 myTable.rowCount();
12  
13 // returns the number of columns
14 myTable.columnCount();
15  
16 // returns the row from the model according to the index parameter
17 myTable.getRow(index);
18  
19 // returns the model of the table
20 myTable.getRows():
21  
22 // returns the current page number
23 myTable.currentPage();
24  
25 // returns the id of the table