Code

DataGrid - JavaScript Pagination, Sort and Filter

DataGrid - JavaScript Pagination, Sort and Filter

5.00 (3 ratings) 5.00 stars
Cart 72 sales
Recently Updated

DataGrid Library

JavaScript library for sorting, filtering, and pagination of any HTML content

DataGrid is a simple and powerful solution to enable sorting, filtering, and pagination on any page.









General Features

  • DataGrid library works with any HTML structure using data attributes.
  • The library allows the sorting of text and numeric information.
  • It has configurable pagination control with a rich set of settings.
  • The library supports text filters with multiple modes and options.
  • The library has different path filters , like checkboxes, radio buttons, and select controls.
  • The widget is written in pure ES6 JavaScript, no dependencies are required.
  • The library has the support of deep links that generate a unique URL for every controls state combination.
  • The library supports local storage, session storage and cookies .

General Features

Documentation

Storage Options

It is possible to save user selection in browser storage or cookies. This way, the previous value selected by the user will be restored once he/she returns to the page from another page or website, or after the page refresh.

  • Local storage – the user selection will be stored in the browser until the user clears browsing data.
  • Session storage – the user selection will be store during one browser session (until the user closes the browser, opens a new browser window or tab, or until the user clears browsing data).
  • Cookies – this option additionally allows sending user selection to the server with each request.

More Features

  • The same control may appear multiple times on the page.
  • Controls may be placed anywhere in the document, event in the content items.
  • Any HTML content is supported, for example, DIV elements, tables, UL / OK lists, etc.
  • DataGrid library can be used with any CSS framework or with custom styles.
  • In most cases, the user defines HTML & CSS of controls (the library does not create their structure except pagination control).
  • The user ultimately defines all look & feel of the page; DataGrid library has minimal CSS styles.

Changelog

v2.0.1 – 11 November 2021

  • Fixed data-value attribute support in filter controls.
  • Added filter demo pages.

v2.0.0 – 01 November 2021

  • The library was rewritten in TypeScript.
  • Added “Multiple Radio Button Filters” demo page.
  • Added demo page with reset button control.

v1.0.2 – 08 January 2021

v1.0.1 – 31 December 2020

    The initial plugin upload.
by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey