mgsdatatable
Advanced tools
A lightweight and beginner-friendly JavaScript table generator with built-in pagination, sorting, searching, and row-limit controls. This library helps you quickly display tabular data with a clean, responsive design and minimal setup — no external depend
A simple, lightweight JavaScript library to create tables with pagination, sorting, searching, and rows-per-page limits — all with minimal setup and no external dependencies.
All functions are globally accessible via window.
<div id="myTable"> </div>
<script>
mgsDataTable({
target: "#myTable", // Required
url: "http://localhost/mgs/users", // Required
data: {}, // Optional, if use laravel then send Laravel CSRF Token {token: "{{csrf_token()}}"}, if use api with Bearer Token (Auth API) to send {bearerToken: 'bearerToken'} other wise No auth / extra filters to send your data.
pageLimits:[2,3,4,5], // Optional, default: [10,20,30,50,100]
isLimit: true, // Optional, default: true
isSearch: true, // Optional, default: true
isResult: true, // Optional, default: true
isPagination: true, // Optional, default: true
isSorting: true, // Optional, default: true
isSrno: true, // Optional, default: false
isSrnoText: "ID" // Optional, default: "Sr.No",
isAllData: false // Optional, default: false,
// true → Load ALL records once and handle
// searching, sorting, pagination
// entirely on the frontend (no API calls)
// false → Fetch data from server on each
// search/sort/pagination action
});
</script>
🔎Explanation of Each Option -
1 - target (string) – Required
The selector for the table where data will be rendered.
Example: "#myTable" or ".userTable"
Without this, the plugin won’t know which table to build.
2 - url (string) – Required
API endpoint to fetch data.
Example: "http://localhost/mgs/users"
The API should return a JSON response.
Payload -
{
"page": 1,
"limit": 10,
"column": "2", //Optional column index
"sort": "desc", //Optional
"search": "" //Optional
}
Response -
i)- If case isAllData:false then --- (Fetch data from server on each search/sort/pagination action)-
{
"status": true,
"message": "Data Found",
"column": [
"name",
"role",
"email",
"mobile",
"image",
"status",
"action"
],
"data": {
"data": [
{
"id": 1,
"name": "Mangesh",
"role": "superadmin",
"email": "mangesh@gmail.com",
"mobile": "1234567890",
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
"status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
"action": "<span data-id='1' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/1' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
},
{
"id": 2,
"name": "Ashwani",
"role": "superadmin",
"email": "ashwani@gmail.com",
"mobile": "1234567891",
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
"status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
"action": "<span data-id='2' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/2' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
}
],
"from": 1,
"to": 10,
"total": 30
}
}
ii)- If case isAllData:true then --- (Load ALL records once and handle searching, sorting, pagination entirely on the frontend (no API calls))-
{
"status": true,
"message": "Data Found",
"column": [
"name",
"role",
"email",
"mobile",
"image",
"status",
"action"
],
"data": {
"data": [
{
"id": 1,
"name": "Mangesh",
"role": "superadmin",
"email": "mangesh@gmail.com",
"mobile": "1234567890",
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
"status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
"action": "<span data-id='1' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/1' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
},
{
"id": 2,
"name": "Ashwani",
"role": "superadmin",
"email": "ashwani@gmail.com",
"mobile": "1234567891",
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
"status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
"action": "<span data-id='2' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/2' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
}
]
}
}
3 - data (object) – Optional
Extra parameters sent with API requests.
Examples:
Laravel CSRF Token-
data: { token: "{{csrf_token()}}" }
Bearer Token (Auth API) -
data: { bearerToken: "yourAccessTokenHere" }
No auth / extra filters -
data: {}
4 - pageLimits (array) – Optional
Defines the dropdown options for "Items per page".
Default: [10, 20, 30, 50, 100]
Example: [2,3,4,5] → lets user pick 2, 3, 4, or 5 rows per page.
5 - isLimit (boolean) – Optional
Default: true
Example:
true → Shows the page limit dropdown.
false → Hides the page limit dropdown.
6 - isSearch (boolean) – Optional
Default: true
Shows/hides the search bar above the table.
Example:
true → search enabled.
false → no search bar.
7 - isResult (boolean) – Optional
Default: true
Shows/hides the result count summary (e.g., Showing 1–10 of 50).
Example:
true → Shows the result count summary.
false → Hides the result count summary.
8 - isPagination (boolean) – Optional
Default: true
Shows/hides pagination controls (next/previous buttons, page numbers).
Example:
true → Shows the pagination controls.
false → Hides the pagination controls.
9 - isSorting (boolean) – Optional
Default: true
Enables column sorting (clicking on header sorts ASC/DESC).
Example:
true → Enables column sorting.
false → Disables column sorting.
10 - isSrno (boolean) – Optional
Default: false
Adds a Serial Number column at the start of the table.
Numbers auto-increment row by row.
11 - isSrnoText (string) – Optional
Default: "Sr.No"
Lets you rename the serial number column header.
Example:
isSrno: true,
isSrnoText: "User ID"
Column header will show User ID instead of Sr.No.
12 - isAllData (boolean) – Optional
Default: false
When enabled, all records are loaded once at initial load.
Searching, sorting, pagination, and page limits are handled
entirely on the frontend without any server-side requests.
<!DOCTYPE html>
<html>
<head>
<title>mgsDataTable</title>
<script src="https://cdn.jsdelivr.net/npm/mgsdatatable@1.1.4/dist/mgsdatatable.min.js"></script>
</head>
<body>
<div id="myTable"> </div>
<script>
mgsDataTable({
target: "#myTable", // Required
url: "http://localhost/mgs/users", // Required
data: {}, // Optional, if use laravel then send Laravel CSRF Token {token: "{{csrf_token()}}"}, if use api with Bearer Token (Auth API) to send {bearerToken: 'bearerToken'} other wise No auth / extra filters to send your data.
pageLimits:[2,3,4,5], // Optional, default: [10,20,30,50,100]
isLimit: true, // Optional, default: true
isSearch: true, // Optional, default: true
isResult: true, // Optional, default: true
isPagination: true, // Optional, default: true
isSorting: true, // Optional, default: true
isSrno: true, // Optional, default: false
isSrnoText: "ID", // Optional, default: "Sr.No"
isAllData: false // Optional, default: false,
// true → Load ALL records once and handle
// searching, sorting, pagination
// entirely on the frontend (no API calls)
// false → Fetch data from server on each
// search/sort/pagination action
});
</script>
</body>
</html>
npm install mgsdatatable
<!DOCTYPE html>
<html>
<head>
<title>mgsDataTable</title>
</head>
<body>
<div id="myTable"> </div>
<script type="module">
import mgsDataTable from 'mgsdatatable';
mgsDataTable({
target: "#myTable", // Required
url: "http://localhost/mgs/users", // Required
data: {}, // Optional, if use laravel then send Laravel CSRF Token {token: "{{csrf_token()}}"}, if use api with Bearer Token (Auth API) to send {bearerToken: 'bearerToken'} other wise No auth / extra filters to send your data.
pageLimits:[2,3,4,5], // Optional, default: [10,20,30,50,100]
isLimit: true, // Optional, default: true
isSearch: true, // Optional, default: true
isResult: true, // Optional, default: true
isPagination: true, // Optional, default: true
isSorting: true, // Optional, default: true
isSrno: true, // Optional, default: false
isSrnoText: "ID", // Optional, default: "Sr.No"
isAllData: false // Optional, default: false,
// true → Load ALL records once and handle
// searching, sorting, pagination
// entirely on the frontend (no API calls)
// false → Fetch data from server on each
// search/sort/pagination action
});
</script>
</body>
</html>
Payload -
{
"page": 1,
"limit": 10,
"column": "2", //Optional column index
"sort": "desc", //Optional
"search": "" //Optional
}
Response -
{
"status": true,
"data": {
"column": [
"name",
"role",
"email",
"mobile",
"image",
"status",
"action"
],
"data": [
{
"id": 1,
"name": "Mangesh",
"role": "superadmin",
"email": "mangesh@gmail.com",
"mobile": "1234567890",
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
"status": "<span data-id='1' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
"action": "<span data-id='1' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/1' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
},
{
"id": 2,
"name": "Ashwani",
"role": "superadmin",
"email": "ashwani@gmail.com",
"mobile": "1234567891",
"image": "<img src='http://localhost/mgs/storage/user/1692380264.avif' style='height: 50px; width: 100px; border-radius: 50px;'>",
"status": "<span data-id='2' class='status badge badge-sm badge-success' data-status='Inactive'>Active</span>",
"action": "<span data-id='2' class='btn-danger badge badge-sm badge-danger delete' title='Delete'><i class='fa fa-trash'></i></span> <a href='http://localhost/mgs/user-update/2' class='btn-success badge badge-sm badge-success' title='Update'><i class='fa fa-edit'></i></a>"
}
],
"from": 1,
"to": 10,
"total": 30
},
"message": "Data found"
}
FAQs
A lightweight and beginner-friendly JavaScript table generator with built-in pagination, sorting, searching, and row-limit controls. This library helps you quickly display tabular data with a clean, responsive design and minimal setup — no external depend
We found that mgsdatatable demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.