📔
📔
📔
📔
DataGrid Documentation
Search…
📔
📔
📔
📔
DataGrid Documentation
Getting Started
Buy DataGrid on CodeCanyon
Controls
Text Filter
Sort DropDown Control
Sort Button Control
Checkbox Filter
Radio Button Filter
Select Filter
Button Filter
Pagination
Page Size Control
Label Control
Multiple version of the same control (data-id attribute)
Languages Support
Special Classes
Deep Links
Storage
Multiple DataGrids on Page
How To
How To Sort Table in JavaScript
HTML Table with Sortable Headers
How to Filter HTML Table By Multiple Columns
Double Sort (Multiple Column Ordering)
Powered By GitBook
Getting Started
​DataGrid Library is a simple and powerful solution to enable sorting, filtering, and pagination on any page.
On behalf of our team, we would like to thank you for purchasing this library. Your support encourages us to build better plugins and continuously bring value to our products. This documentation file covers all the information needed to install and use this library.

Bootstrap 5 Example

Let's build a page based on Bootstrap 5 with a text filter by item title. Get started with a minimal Bootstrap layout as described in Bootstrap 5 documentation:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DataGrid Example</title>
​
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
​
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous" />
</head>
<body>
​
​
<!-- Bootstrap Script (Optional) -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
</body>
</html>
DataGrid library can be used with any CSS Framework or with your custom HTML & CSS.
Copy-paste the stylesheet <link> into your <head> to load DataGrid CSS:
<link href="datagrid.min.css" rel="stylesheet" />
Place the <script> near the end of your pages, right before the closing </body> tag:
<script src="datagrid.min.js"></script>
Add a container element that will hold all items that need to be filtered, sorted, etc. This container should have thedata-gridattribute.
<div class="container">
<div class="row" data-grid>
<!-- content -->
</div>
</div>
Add several items to the container. The items can have any HTML layout, for example like this:
<div class="container">
<div class="row" data-grid>
<!-- item #1 -->
<div class="col" data-grid-item>
<p class="title">Lorem ipsum sed</p>
</div>
<!-- item #2 -->
<div class="col" data-grid-item>
<p class="title">Est ullamcorper eget</p>
</div>
<!-- item #2 -->
<div class="col" data-grid-item>
<p class="title">Amet tellus cras</p>
</div>
<!-- more items ... -->
</div>
</div>
​
​
Every item should havedata-grid-item attribute.
Let's add text filter control:
<div class="row mb-4">
<div class="col">
<input
type="text"
class="form-control"
placeholder="Filter by title"
data-grid-control="text-filter"
data-path=".title"
/>
</div>
</div>
data-path attribute points to the text that should be filtered. It accepts any valid CSS selector string, for example, class or ID.
Add DataGrid library initialization:
<script>
datagrid();
</script>
DataGrid settings can be passed in the following way:
<script>
datagrid({
// Settings ....
});
</script>
The final version:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>DataGrid Example</title>
​
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
​
<!-- Bootstrap CSS -->
<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous" />
<!-- DataGird CSS -->
<link href="datagrid.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row mb-4">
<div class="col">
<!-- text filter by title -->
<input
type="text"
class="form-control mr-2"
placeholder="Filter by title"
data-grid-control="text-filter"
data-path=".title"
/>
</div>
</div>
<!-- DataGrid container -->
<div class="row" data-grid>
<!-- item #1 -->
<div class="col" data-grid-item>
<p class="title">Lorem ipsum sed</p>
</div>
<!-- item #2 -->
<div class="col" data-grid-item>
<p class="title">Est ullamcorper eget</p>
</div>
<!-- item #2 -->
<div class="col" data-grid-item>
<p class="title">Amet tellus cras</p>
</div>
<!-- more items ... -->
</div>
</div>
​
​
<!-- Bootstrap Script -->
<script
src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"></script>
<!-- DataGird Script -->
<script src="datagrid.min.js"></script>
<!-- DataGird initialization -->
<script>
datagrid();
</script>
</body>
</html>
Next - Controls
Text Filter
Last modified 1yr ago
Copy link