THEMETRIAL

Flexible Interactive Data Table In Pure JavaScript – JSTable

Author:Trekky12
Views Total:4 views
Official Page:Go to website
Last Update:May 16, 2021
License:MIT

Preview:

Flexible Interactive Data Table In Pure JavaScript – JSTable

Description:

JSTable is a tiny, flexible, powerful data table library to make your HTML table interactive with sorting, filtering, and pagination functionalities.

Inspired by Vanilla-DataTables and DataTables jQuery plugin.

Works both with static HTML table and dynamic tabular data stored on the server-side (JSON, PHP, etc).

How to use it:

1. Add JSTable’s JavaScript and Stylesheet to the webpage.

<link rel="stylesheet" href="https://www.cssscript.com/jstable.css" />
<script src="jstable.min.js"></script>

2. Load optional polyfills if your visitors are still using legacy browsers.

<script src="https://www.cssscript.com/polyfill-babel.min.js"></script>
<script src="polyfill-promise.min.js"></script>
<script src="polyfill-fetch.min.js"></script>

3. Initialize the JSTable on your existing HTML table and done.

<table id="example">
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Date</th>
      <th>Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rhona Carey</td>
      <td>Northern Mariana Islands</td>
      <td>2020-03-12 03:47:43</td>
      <td>9761</td>
    </tr>
    ...
  </tbody>
</table>
new JSTable("#example");

4. Or load tabular data from an external data source via AJAX as follows:

new JSTable("#example", {
      serverSide: true,
      deferLoading: 1000,
      ajax: 'data.json', 
      ajaxParams: {
        // ajax params here
      }
    }
);

5. Determine how many rows to display per page. Default: 5.

new JSTable("#example", {
    perPage: 5,
    perPageSelect: [5, 10, 15, 20, 25]
});

6. Customize the pagination controls.

new JSTable("#example", {
    nextPrev: true,
    firstLast: false,
    prevText: "&lsaquo;",
    nextText: "&rsaquo;",
    firstText: "&laquo;",
    lastText: "&raquo;",
    ellipsisText: "&hellip;",
    truncatePager: true,
    pagerDelta: 2,
});

7. Enable/disable the table filter functionality. Default: true.

new JSTable("#example", {
    searchable: false
});

8. Enable/disable the table sort functionality. Default: true.

new JSTable("#example", {
    sortable: false
});

9. You’re also allowed to specify the options for each column:

new JSTable("#example", {
    columns: [
      {
        select: 3,
        sortable: true,
        searchable: true
        sort: "asc",
        render: function(cell, idx){
          // custom render function 
        }
      }
    ]
});

10. Or by using data attributes:

<table id="example">
  <thead>
    <tr>
      <th data-sortable="false">Name</th>
      <th data-sort="asc">Country</th>
      <th>Date</th>
      <th>Number</th>
    </tr>
  </thead>
</table>

11. Override the default CSS classes.

new JSTable("#example", {
    top: "dt-top",
    info: "dt-info",
    input: "dt-input",
    table: "dt-table",
    bottom: "dt-bottom",
    search: "dt-search",
    sorter: "dt-sorter",
    wrapper: "dt-wrapper",
    dropdown: "dt-dropdown",
    ellipsis: "dt-ellipsis",
    selector: "dt-selector",
    container: "dt-container",
    pagination: "dt-pagination",
    loading: "dt-loading",
    message: "dt-message"
});

12. Customize the display text.

new JSTable("#example", {
    labels: {
      placeholder: "Search...",
      perPage: "{select} entries per page",
      noRows: "No entries found",
      info: "Showing {start} to {end} of {rows} entries",
      loading: "Loading...",
      infoFiltered: "Showing {start} to {end} of {rows} entries (filtered from {rowsTotal} entries)"
    },
});

13. Customize the layout.

new JSTable("#example", {
    layout: {
      top: "{select}{search}",
      bottom: "{info}{pager}"
    },
});

14. Event handlers.

const myTable = new JSTable("#example");

myTable.on("init", function () {
  // on init
});    
                   
myTable.on("update", function () {
  // when the data is updated
});    
                                
myTable.on("getData", function (dataRows) {
  // when the data is processed
});     
                  
myTable.on("fetchData", function (serverData) {
  // when the data is fetched from the server
});    
                    
myTable.on("search", function (query) {
  // after filtering
});   
                     
myTable.on("sort", function (column, direction) {
  // after the data is sorted
});   
                    
myTable.on("paginate", function (old_page, new_page) {
  console.log(old_page);
  console.log(new_page);
}); 
                      
myTable.on("perPageChange", function (old_value, new_value) {
  console.log(old_value);
  console.log(new_value);
});

Changelog:

v1.2 (05/16/2021)

  • Update dependencies and change how table cells are rendered

12/11/2020


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.