JS Grid Tables

Basic Scenario

Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.
TaskEmailPhoneAssignDatePriceStatusProgress
WordpressPixel@efo.com+91 9152639845Otto Clay26/09/2022$2315.00In progress100%
Web DesignerDewvrak12@gmail.com+91 9563256895Mark Jecno26/09/2022$1598.50In progress60%
PhpLakhsr33@gmail.com+91 8569325641Ruby Rocha12/07/2022$1598.50In progress42%
Web DevelopmentFatik02@gmail.com+91 7589563241Connor Johnston26/09/2022$2315.00Pending90%
WordpressQmab555@gmail.com+91 6598741235Christopher Mcclure12/07/2022$1598.50Done100%
ReactTatypd85@gmail.com+91 9586471230Otto Clay26/09/2022$2315.00Done75%
Laraveldohamo6883@gmail.com+91 7152849563Christopher Mcclure26/09/2022$2315.00Pending42%
Flutterfemecom377@gmail.com+91 7594826315Connor Johnston26/09/2022$1598.50In progress60%
Phpgawej29037@gmail.com+91 6235845932Mark Jecno12/07/2022$2315.00In progress100%
Reactpohoca6274@gmail.com+91 7584698512Otto Clay26/09/2022$1598.50Done42%
Graphicsbonowap375@gmail.com+91 8412369572Ruby Rocha26/09/2022$1598.50Pending75%
Reactxatov42918@gmail.com+91 8529631478Ruby Rocha12/07/2022$2315.00In progress90%
Flutterjodokar148@gmail.com+91 7145632896Mark Jecno26/09/2022$1598.50Done42%
Laravelhapif86263@gmail.com+91 7402258963Otto Clay26/09/2022$1598.50Done60%
Web Designercehewe9494@gmail.com+91 9563201456Christopher Mcclure26/09/2022$2315.00In progress100%
Pages: First Prev 12345... Next Last    1 of 7

Sorting Scenario

Sorting can be done not only with column header interaction, but also with sort method.
IdProductOrder IdPriceQuantityShippedTotal
1Samsung S22 ultra #F8ST59L$2315.002Out For Delivery$25364
2Airpord Pro#TD6Y56W$1598.501Order Cancelled$12457
3OnePlus Nord CE 2 Lite#9E75CF4$1598.504Delivery Completed$89241
4i phone 14 pro Max#1A84RD3$2315.001Order Cancelled$89241
5i phone 11 pro#1A84RD3$1598.504On The Way$89241
6Samsung S22 ultra #F8ST59L$2315.005Out For Delivery$56893
7Airpord Pro#J56F8S7$2315.003Out For Delivery$56893
8i phone 11 pro#J56F8S7$1598.503Delivery Completed$15645
9OnePlus Nord CE 2 Lite#TD6Y56W$2315.001Order Cancelled$45680
10Airpord Pro#F8ST59L$1598.506Order Cancelled$12457
11i phone 14 pro Max#J56F8S7$1598.501Out For Delivery$25364
12Samsung S22 ultra #1A84RD3$2315.002On The Way$45680
13Airpord Pro#TD6Y56W$1598.502Out For Delivery$56893
14i phone 11 pro#1A84RD3$1598.501Out For Delivery$15645
15i phone 11 pro#F8ST59L$2315.002Delivery Completed$12457
16Airpord Pro#9E75CF4$2315.003Order Cancelled$89241
17OnePlus Nord CE 2 Lite#J56F8S7$1598.502Out For Delivery$25364
18Samsung S22 ultra #1A84RD3$1598.501Delivery Completed$25364
19Airpord Pro#F8ST59L$2315.001On The Way$89241
20i phone 14 pro Max#TD6Y56W$1598.503Out For Delivery$56893
21OnePlus Nord CE 2 Lite#9E75CF4$2315.005Out For Delivery$56893
22Airpord Pro#J56F8S7$1598.506Order Cancelled$45680
23OnePlus Nord CE 2 Lite#1A84RD3$1598.501Out For Delivery$25364
24i phone 11 pro#F8ST59L$2315.004On The Way$12457
25Samsung S22 ultra #1A84RD3$2315.002On The Way$89241
26Airpord Pro#9E75CF4$1598.504Out For Delivery$56893
27i phone 14 pro Max#TD6Y56W$1598.503Delivery Completed$25364
28i phone 14 pro Max#TD6Y56W$2315.001Delivery Completed$15645
29i phone 11 pro#F8ST59L$2315.001Out For Delivery$15645
30Airpord Pro#1A84RD3$1598.505Order Cancelled$45680
31OnePlus Nord CE 2 Lite#J56F8S7$1598.503Delivery Completed$89241
32i phone 14 pro Max#1A84RD3$2315.002Out For Delivery$25364
33Samsung S22 ultra #9E75CF4$1598.506Order Cancelled$12457
34Airpord Pro#F8ST59L$2315.002Delivery Completed$25364
35i phone 14 pro Max#1A84RD3$1598.501Out For Delivery$15645
36i phone 11 pro#9E75CF4$1598.503Order Cancelled$89241
37Airpord Pro#9E75CF4$2315.001Order Cancelled$45680
38i phone 11 pro#F8ST59L$2315.002Out For Delivery$15645
39Samsung S22 ultra #TD6Y56W$1598.501Delivery Completed$56893
40Airpord Pro#J56F8S7$1598.505Delivery Completed$25364
41i phone 14 pro Max#1A84RD3$2315.004Out For Delivery$25364
42OnePlus Nord CE 2 Lite#F8ST59L$1598.503On The Way$45680
43Airpord Pro#J56F8S7$2315.001On The Way$12457
44OnePlus Nord CE 2 Lite#J56F8S7$2315.001Out For Delivery$56893
45OnePlus Nord CE 2 Lite#9E75CF4$1598.502Delivery Completed$89241
46Airpord Pro#TD6Y56W$2315.006Order Cancelled$12457
47Samsung S22 ultra #F8ST59L$2315.003Delivery Completed$25364
48i phone 11 pro#1A84RD3$1598.504Out For Delivery$56893
49i phone 14 pro Max#TD6Y56W$2315.001Order Cancelled$89241
50Airpord Pro#9E75CF4$2315.005On The Way$89241
51i phone 11 pro#9E75CF4$1598.502Out For Delivery$15645
52i phone 11 pro#F8ST59L$2315.001Delivery Completed$25364
53Airpord Pro#J56F8S7$2315.003Order Cancelled$45680
54Samsung S22 ultra #1A84RD3$1598.501Delivery Completed$56893
55i phone 11 pro#TD6Y56W$2315.003Out For Delivery$15645
56Airpord Pro#9E75CF4$2315.002On The Way$45680
57i phone 14 pro Max#F8ST59L$1598.502Delivery Completed$45680
58OnePlus Nord CE 2 Lite#TD6Y56W$2315.006Order Cancelled$89241
59Airpord Pro#J56F8S7$2315.003Out For Delivery$56893
60Samsung S22 ultra #1A84RD3$1598.501Order Cancelled$12457
61Samsung S22 ultra #9E75CF4$2315.005Order Cancelled$12457
62Airpord Pro#F8ST59L$2315.002Delivery Completed$15645
63OnePlus Nord CE 2 Lite#TD6Y56W$1598.503Out For Delivery$25364
64OnePlus Nord CE 2 Lite#9E75CF4$2315.004Delivery Completed$25364
65Airpord Pro#9E75CF4$2315.003On The Way$89241
66i phone 14 pro Max#1A84RD3$1598.501On The Way$45680
67i phone 11 pro#F8ST59L$1598.503Out For Delivery$25364
68Samsung S22 ultra #TD6Y56W$2315.002Order Cancelled$89241
69Samsung S22 ultra #J56F8S7$1598.502Order Cancelled$89241
70i phone 11 pro#TD6Y56W$2315.006Delivery Completed$56893
71OnePlus Nord CE 2 Lite#1A84RD3$1598.501On The Way$45680
72i phone 14 pro Max#F8ST59L$1598.502Out For Delivery$56893
73Samsung S22 ultra #J56F8S7$2315.003Delivery Completed$56893
74OnePlus Nord CE 2 Lite#J56F8S7$2315.003Order Cancelled$12457
75i phone 14 pro Max#9E75CF4$1598.504Order Cancelled$12457
76i phone 11 pro#J56F8S7$1598.503Order Cancelled$45680
77Samsung S22 ultra #F8ST59L$2315.001Out For Delivery$25364
78i phone 11 pro#1A84RD3$1598.502Delivery Completed$56893
79OnePlus Nord CE 2 Lite#TD6Y56W$2315.003On The Way$89241
80i phone 11 pro#TD6Y56W$1598.502Order Cancelled$89241
81Samsung S22 ultra #9E75CF4$1598.504Out For Delivery$15645
82i phone 14 pro Max#F8ST59L$2315.003Order Cancelled$12457
83i phone 14 pro Max#9E75CF4$2315.006Delivery Completed$25364
84Samsung S22 ultra #1A84RD3$1598.501Delivery Completed$25364
85i phone 14 pro Max#J56F8S7$1598.505Out For Delivery$15645
86OnePlus Nord CE 2 Lite#TD6Y56W$2315.003On The Way$12457
87OnePlus Nord CE 2 Lite#F8ST59L$1598.502Order Cancelled$89241
88Samsung S22 ultra #9E75CF4$2315.002Order Cancelled$45680
89i phone 14 pro Max#J56F8S7$1598.504Out For Delivery$15645
90i phone 11 pro#1A84RD3$1598.501On The Way$45680
91i phone 14 pro Max#TD6Y56W$2315.002Order Cancelled$89241
92i phone 14 pro Max#J56F8S7$2315.003Delivery Completed$56893
93Samsung S22 ultra #TD6Y56W$1598.503Out For Delivery$25364
94OnePlus Nord CE 2 Lite#J56F8S7$1598.506Delivery Completed$15645
95i phone 11 pro#9E75CF4$2315.001Order Cancelled$89241
96i phone 11 pro#1A84RD3$1598.505On The Way$45680
97Samsung S22 ultra #J56F8S7$2315.002Out For Delivery$56893
98i phone 14 pro Max#9E75CF4$1598.502Order Cancelled$12457
99OnePlus Nord CE 2 Lite#F8ST59L$1598.503Delivery Completed$25364
100OnePlus Nord CE 2 Lite#TD6Y56W$2315.003On The Way$12457

Batch Delete

Cell content of every column can be customized with itemTemplate, headerTemplate, filterTemplate and insertTemplate functions specified in field config. This example shows how to implement batch deleting with custom field for selecting items.
IdEmployee NameSalarySkillOfficeHoursExperience
1Virat Kohli$12,000
India4:3012 Year
2Ronaldo$80,000
UK3:0020 Year
3Jos Buttler$70,000
Englend4:008 Year
4Jos Buttler$70,000
Englend4:008 Year
5Otto Clay$10,000
London9:305 Year
6Virat Kohli$12,000
India4:3012 Year
7Kane Williamson$25,000
New Zealand5:0015 Year
8Jos Buttler$70,000
Englend4:008 Year
9Otto Clay$10,000
London9:305 Year
10Ronaldo$80,000
UK3:0020 Year
11Virat Kohli$12,000
India4:3012 Year
12Jos Buttler$70,000
Englend4:008 Year
13Otto Clay$10,000
London9:305 Year
14Kane Williamson$25,000
New Zealand5:0015 Year
15Virat Kohli$12,000
India4:3012 Year
16MS Dhoni$50,000
India5:0010 Year
17Jos Buttler$70,000
Englend4:008 Year
18Ronaldo$80,000
UK3:0020 Year
19Virat Kohli$12,000
India4:3012 Year
20MS Dhoni$50,000
India5:0010 Year
Pages: First Prev 12345 Next Last    1 of 5
Preview Settings

Try It Real Time

Layout Type
    • LTR
    • RTL
    • Box
Sidebar Type
Sidebar Icon
Unlimited Color
Light layout
Dark Layout
Mix Layout