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

• 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

Documentation

• Online Documentation
• How To Sort Table in JavaScript
• HTML Table with Sortable Headers
• How to Filter HTML Table By Multiple Columns
• Double Sort (Multiple Column Ordering)

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

12 January, 2023

• Added filter AND/OR Logic.
• Fixed radio button filter.

5 November, 2022

• Added reset button control.

11 November, 2021

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

01 November, 2021

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

08 January, 2021

• Added “initial” sort type to the sort control.
• Added new Sort button control.
• Added a demo of table with sortable headers.
• Added an article “How To Sort Table in JavaScript” in the documentation

31 December, 2020

    The initial plugin upload.