DataGrid is a simple and powerful solution to enable sorting, filtering, and pagination on any page.
- 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 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 .
- 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
- Online Documentation
- HTML Table with Sortable Headers
- How to Filter HTML Table By Multiple Columns
- Double Sort (Multiple Column Ordering)
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.
- 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.
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
- Added “initial” sort type to the sort control.
- Added new Sort button control.
- Added a demo of table with sortable headers.
v1.0.1 – 31 December 2020
The initial plugin upload.