jsGrid

  1. Home
  2. Tables
  3. jsGrid

Basic

Static Data

OData Service

Sorting

Loading Data by Page

Custom View

Custom Row Renderer

Batch Delete

Rows Reordering

Custom Grid Field

Basic Tables

  1. Home
  2. Tables
  3. Basic

Basic

Add class .table.

# First Name Last Name Username Role
1 Teagan Prohaska @Elijah admin
2 Andy Gaylord @Ramiro member
3 Veronica Gusikowski @Maxime developer
4 Bruce Rogahn @Maggio supporter
5 Carolina Hickle @Hammes member
6 Madaline Eichmann @Amaya supporter

Hover Table

Add.table-hoverto enable a hover state on table rows within a<tbody>

# Products Popularity Sales
1 Milk Powder 5,3,2,-1,-3,-2,2,3,4,1 28.76%
2 Air Conditioner 1,-1,-2,1,2,1,0,1,3,2 8.55%
3 RC Cars 3,2,3,-1,-3,-1,0,2,4,5 58.56%
4 Down Coat 1,-2,0,2,4,5,3,2,3,5 35.76%
5 SLR Camera 1,-1,0,2,3,1,-1,1,4,2 21.13%
6 Jacket 4,2,-1,-3,-2,1,3,5,2,4 26.88%

Bordered Table

Add.table-borderedfor borders on all sides of the table and cells.

Task Progress Deadline Action
Lunar probe project
May 15, 2015
Dream successful plan
July 1, 2015
Office automatization
Apr 12, 2015
The sun climbing plan
Aug 9, 2015
Open strategy
Apr 2, 2015
Tantas earum numeris
July 11, 2015

Striped Rows

Use.table-stripedto add zebra-striping to any table row within the<tbody>.Striped tables are styled via the:nth-childCSS selector, which is not available in Internet Explorer 8.

Order ID Username Payment Amount
2569 @Jessica Credit Card $256.10
4582 @William Paypal $96.75
2563 @Jennifer Credit Card $458.00
4378 @Rolando Paypal $30.25
8465 @Katelin Credit Card $158.50
1526 @Richard Paypal $58.80

Condensed Table

Add.table-condensedto make tables more compact by cutting cell padding in half.

Invoice Username Amount Date
Order #53451 Mary Adams $24.98 2015/7/26
Order #53452 Caleb Richards $564.00 2015/7/15
Order #53453 June Lane $58.87 2015/7/01
Order #53454 Crystal Bates $97.50 2015/6/26
Order #53455 Heather Harper $249.99 2015/6/09
Order #53456 Willard Wood $24.98 2015/6/01

Table Section

Project Progress
Project #25369 Canceled
##MODULE-1111 Done
##MODULE-723 Done
##MODULE-4200c Done
Project #28686 Testing
##MODULE-3100c Doing
##MODULE-6400 Done
##MODULE-2210 Done
Project #29587 Developing
##MODULE-7400 Done
##MODULE-510c Done
##MODULE-3a00 Done

Table Selectable

Id Project
619 The sun climbing plan
620 Lunar probe project
621 Dream successful plan
622 Office automatization
623 Open strategy

Responsive

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Invoice User Date Amount Status Country
Order #26589 Herman Beck Oct 16, 2015 $45.00
Paid
 EN
Order #58746 Mary Adams Oct 12, 2015 $245.30
Shipped
 CN
Order #98458 Caleb Richards May 18, 2015 $38.00
Shipped
 AU
Order #32658 June Lane Apr 28, 2015 $77.99
Paid
 FR

Contextual Classes

Use classes( .active, .success, .info, .warning, .danger ) to color table rows or individual cells.

Order ID Order note Product Buyer payment Date
# 259648 As we got further and further away, it [the Earth] diminished in size. Kode Gaming Laptop Crystal Bates Credit Card 5/10/2015
# 486524 Tantas earum numeris, scribi innumerabiles quietae clariora. New Season Jacket Nathan Watts Paypal 5/11/2015
# 985632 Metum quieti agatur ut sequitur delectatio accusamus. IO Mouse Ronnie Ellis Credit Card 5/16/2015
# 159853 Incorrupte torquatum animi nudus, pendet fugiamus pariter. Doe Bike Daniel Russell Paypal 5/22/2015
# 753698 Opes oculis forte omnisque virtute caecilii ceterorum. Zets Baseball Bat Sarah Graves Credit Card 5/28/2015
# 154789 Supplicii nominavi studiose sequimur vidisse. Air Condition Camila Lynch Paypal 6/10/2015
# 321489 Amentur pellat sinat commemorandis Vivatur. DSLR Ramon Dunn Credit Card 6/19/2015
# 568741 Applies the hover color to a particular row or cell. Camping Bag Scott Sanders Paypal 6/23/2015
# 369852 Indicates a dangerous or potentially negative action. Jogging Shoes Nina Wells Credit Card 6/25/2015

FooTable

  1. Home
  2. Tables
  3. FooTable

Row Toggler

First Name Last Name Job Title DOB Status
Isidra Boudreaux Traffic Court Referee 22 Jun 2014 Active
Shona Woldt Airline Transport Pilot 3 Oct 2015 Disabled
Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
Easer Dragoo Drywall Stripper 13 Dec 2014 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
Lizzee Goodlow Technical Services Librarian 1 Nov 2014 Suspended
Judi Badgett Electrical Lineworker 23 Jun 2013 Active
Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended

Accordion

First Name Last Name Job Title DOB Status
Shona Woldt Airline Transport Pilot 3 Oct 2015 Active
Lizzee Goodlow Technical Services Librarian 1 Nov 2014 Suspended
Isidra Boudreaux Traffic Court Referee 22 Jun 2014 Active
Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
Easer Dragoo Drywall Stripper 13 Dec 2014 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
Judi Badgett Electrical Lineworker 23 Jun 2013 Active

Expand / Collapse All Rows

First Name Last Name Job Title DOB Status
Shona Woldt Airline Transport Pilot 3 Oct 2015 Active
Lizzee Goodlow Technical Services Librarian 1 Nov 2014 Suspended
Isidra Boudreaux Traffic Court Referee 22 Jun 2014 Active
Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
Easer Dragoo Drywall Stripper 13 Dec 2014 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
Judi Badgett Electrical Lineworker 23 Jun 2013 Active

Pagination

First Name Last Name Job Title DOB Status
Shona Woldt Airline Transport Pilot 3 Oct 2015 Active
Lizzee Goodlow Technical Services Librarian 1 Nov 2014 Suspended
Isidra Boudreaux Traffic Court Referee 22 Jun 2014 Active
Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
Easer Dragoo Drywall Stripper 13 Dec 2014 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
Judi Badgett Electrical Lineworker 23 Jun 2013 Active
Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
Easer Dragoo Drywall Stripper 13 Dec 2014 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
Judi Badgett Electrical Lineworker 23 Jun 2013 Active
Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
Easer Dragoo Drywall Stripper 13 Dec 2014 Active
Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled

    Filtering

    First Name Last Name Job Title DOB Status
    Shona Woldt Airline Transport Pilot 3 Oct 2015 Active
    Lizzee Goodlow Technical Services Librarian 1 Nov 2014 Suspended
    Isidra Boudreaux Traffic Court Referee 22 Jun 2014 Active
    Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
    Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
    Easer Dragoo Drywall Stripper 13 Dec 2014 Active
    Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
    Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
    Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
    Judi Badgett Electrical Lineworker 23 Jun 2013 Active
    Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
    Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
    Easer Dragoo Drywall Stripper 13 Dec 2014 Active
    Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
    Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
    Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
    Judi Badgett Electrical Lineworker 23 Jun 2013 Active
    Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
    Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
    Easer Dragoo Drywall Stripper 13 Dec 2014 Active
    Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
    Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
    Easer Dragoo Drywall Stripper 13 Dec 2014 Active
    Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
    Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
    Easer Dragoo Drywall Stripper 13 Dec 2014 Active
    Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
    Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled

      Add & Remove Rows

      First Name Last Name Job Title DOB Status Delete
      Shona Woldt Airline Transport Pilot 3 Oct 2015 Active
      Lizzee Goodlow Technical Services Librarian 1 Nov 2014 Suspended
      Isidra Boudreaux Traffic Court Referee 22 Jun 2014 Active
      Doris Michael Business Services Sales Representative 19 Apr 2013 Suspended
      Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
      Jason Statham Drywall Stripper 13 Dec 2014 Disabled
      Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
      Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
      Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
      Judi Badgett Electrical Lineworker 23 Jun 2013 Active
      Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
      Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
      Archer Lily Drywall Stripper 13 Jun 2014 Disabled
      Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
      Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
      Lorraine Mcgaughy Hemodialysis Technician 11 Nov 2014 Active
      Judi Badgett Electrical Lineworker 23 Jun 2013 Active
      Granville Leonardo Business Services Sales Representative 19 Apr 2013 Suspended
      Lauri Hyland Blackjack Supervisor 15 Nov 2014 Suspended
      Easer Dragoo Drywall Stripper 13 Dec 2014 Active
      Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
      Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
      Maria Tangeli Drywall Stripper 21 May 2014 Active
      Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
      Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled
      Easer Dragoo Drywall Stripper 13 Dec 2014 Active
      Maple Halladay Aviation Tactical Readiness Officer 30 Dec 2015 Suspended
      Maxine Woldt Business Services Sales Representative 17 Oct 2014 Disabled