Full-featured Dynamic Data Table Plugin - Folium

File Size: 19.6 KB
Views Total: 5767
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Full-featured Dynamic Data Table Plugin - Folium

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.

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

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

// Columns
const colData = [{
  columnId: "id1", 
  displayText: "ID 1"
  columnId: "id2", 
  displayText: "ID 2"
  columnId: "id3", 
  displayText: "ID 3"

// Rows
rowData = [{
  id1: 'Cell 1.1', 
  id2 : "Cell 1.2", 
  id3 : "Cell 1.3"
  id1: 'Cell 2.1', 
  id2 : "Cell 2.2", 
  id3 : "Cell 2.3"
  id1: 'Cell 3.1', 
  id2 : "Cell 3.2", 
  id3 : "Cell 3.3"

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

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

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

const myTable = $('#foliumTableId').FoliumTable({
      columns: colData,
      rows: rowData,
      sortable: true

5. Enable the user to edit table cells.

const myTable = $('#foliumTableId').FoliumTable({
      columns: colData,
      rows: rowData,
      editable: true

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

<input type="text" id="searchBox" />
  const searchBoxText = $('#searchBox').val();
  // allows the first column
  foliumTable.search(searchBoxText, 0);

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

const myTable = $('#foliumTableId').FoliumTable({
      columns: colData,
      rows: rowData,
      pagination: {
        active: true, 
        size: 5

8. Add/remove/update table rows.

// add a new row
  id1: 'ID 4.1', 
  id2: "ID 4.2", 
  id3: "ID 4.3"

// delete row 1
// detete row 1,2
myTable.deleteRows([0, 1]);

// update a row
myTable.updateRow(0, {
  id1: 'new value'

9. Custom cell rendering.

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

10. API methods.

// returns the selected row index

// returns the selected row index according to the table model

// returns the selected column index

// returns the number of rows

// returns the number of columns

// returns the row from the model according to the index parameter

// returns the model of the table

// returns the current page number

// returns the id of the table

// clears the data

11. Event handlers.

// on click
myTable.on('rowClicked', rowIndex => {
  console.log(`Clicked Row Index: ${rowIndex}`);

// double click
myFoliumTable.on('rowDoubleClicked', rowIndex => {
  console.log(`Clicked Row Index: ${rowIndex}`);


v1.1.3beta (2019-11-21)

  • Changed search function behaviour


  • Fixed a bug that causes not to re-render the table when a row is updated in rows as array mode.


  • Fixed bugs that were causing not to render the table when pagination is not active

This awesome jQuery plugin is developed by cemozden. For more Advanced Usages, please check the demo page or visit the official website.