DataGrid - JavaScript Pagination, Sort and Filter

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.

DataGrid Library

Visit Live Preview

DataGrid Library Controls

Visit Online Documentation

Shoe Product List (Bootstrap Layout)
Real Estate Listing (Bootstrap Layout)
Restaurants Demo (Bootstrap Layout)
Vehicles (Foundation CSS Framework)
Dogs Breeds List (Materialize CSS Framework)
Courses List (Semantic UI)
Deep-Link Example
Wallpapers Example with Local Storage HTML Table with sortable headers

\\ 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 support local storage, session storage and cookies .

\\ Examples

\\ 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.


v1.0.2 – 08 January 2021

v1.0.1 – 31 December 2020

    The initial plugin upload.