Wednesday 03:42 PM
Wednesday 03:42 PM
Monday 11:26 AM
Thursday 06:59 AM
Sub Total : | $2,847.55 |
Discount (METRONIC50): | -$476.00 |
Shipping Charge : | $89.00 |
Estimated Tax (12.5%) : | $70.62 |
Total : | $2,531.17 |
Name | Email | Phone Number |
---|---|---|
John | john@example.com | (353) 01 222 3333 |
Mark | mark@gmail.com | (01) 22 888 4444 |
Eoin | eoin@gmail.com | 0097 22 654 00033 |
Sarah | sarahcdd@gmail.com | +322 876 1233 |
Afshin | afshin@mail.com | (353) 22 87 8356 |
Pagination can be enabled by setting pagination: true
.
Name | Email | Phone Number |
---|---|---|
John | john@example.com | (353) 01 222 3333 |
Mark | mark@gmail.com | (01) 22 888 4444 |
Eoin | eoin@gmail.com | 0097 22 654 00033 |
Grid.js supports global search on all rows and columns. Set search: true
to enable the search plugin:
Name | Email | Phone Number |
---|---|---|
John | john@example.com | (353) 01 222 3333 |
Mark | mark@gmail.com | (01) 22 888 4444 |
Eoin | eoin@gmail.com | 0097 22 654 00033 |
Sarah | sarahcdd@gmail.com | +322 876 1233 |
Sarah | sarahcdd@gmail.com | +322 876 1233 |
Afshin | afshin@mail.com | (353) 22 87 8356 |
To enable sorting, simply add sort: true
to your config:
Name | Email | Position | Company | Country |
---|---|---|---|---|
Jonathan | jonathan@example.com | Senior Implementation Architect | Hauck Inc | Holy See |
Harold | harold@example.com | Forward Creative Coordinator | Metz Inc | Iran |
Shannon | shannon@example.com | Legacy Functionality Associate | Zemlak Group | South Georgia |
Robert | robert@example.com | Product Accounts Technician | Hoeger | San Marino |
Noel | noel@example.com | Customer Data Director | Howell - Rippin | Germany |
Simply add resizable: true
to your config to enable resizable columns:
Name | Email | Phone Number |
---|---|---|
John | john@example.com | (353) 01 222 3333 |
Mark | mark@gmail.com | (01) 22 888 4444 |
Grid.js renders a loading bar automatically while it waits for the data to be fetched. Here we are using an async function to demonstrate this behaviour (e.g. an async function can be a XHR call to a server backend)
Name | Email | Position | Company | Country |
---|---|---|---|---|
Loading... |
Simply add height
and fixedHeader
to your Grid.js config object to enable fixed header feature:
Name | Email | Position | Company | Country |
---|---|---|---|---|
Jonathan | jonathan@example.com | Senior Implementation Architect | Hauck Inc | Holy See |
Harold | harold@example.com | Forward Creative Coordinator | Metz Inc | Iran |
Shannon | shannon@example.com | Legacy Functionality Associate | Zemlak Group | South Georgia |
Robert | robert@example.com | Product Accounts Technician | Hoeger | San Marino |
Noel | noel@example.com | Customer Data Director | Howell - Rippin | Germany |
Traci | traci@example.com | Corporate Identity Director | Koelpin - Goldner | Vanuatu |
Kerry | kerry@example.com | Lead Applications Associate | Feeney, Langworth and Tremblay | Niger |
Patsy | patsy@example.com | Dynamic Assurance Director | Streich Group | Niue |
Cathy | cathy@example.com | Customer Data Director | Ebert, Schamberger and Johnston | Mexico |
Tyrone | tyrone@example.com | Senior Response Liaison | Raynor, Rolfson and Daugherty | Qatar |
Add hidden: true
to the columns definition to hide them.
Name | Email | Position | Company |
---|---|---|---|
Jonathan | jonathan@example.com | Senior Implementation Architect | Hauck Inc |
Harold | harold@example.com | Forward Creative Coordinator | Metz Inc |
Shannon | shannon@example.com | Legacy Functionality Associate | Zemlak Group |
Robert | robert@example.com | Product Accounts Technician | Hoeger |
Noel | noel@example.com | Customer Data Director | Howell - Rippin |
You can customize cells and format them at runtime using formatter
property:
Salary 1 | Salary 2 | Sum |
---|---|---|
96394 | 46886 | $143,280 USD |
95018 | 4439 | $99,457 USD |
49036 | 35996 | $85,032 USD |
59156 | 96515 | $155,671 USD |
20490 | 14739 | $35,229 USD |
Choose your themes & layouts etc.