• Material
  • Fabric
  • Bootstrap
  • Bootstrap v4
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Localization
* Translated by Google Translator
Currency
Essential JS 2
HOME
  • Grids
    • Data GridUpdated
    • Tree GridUpdated
    • Pivot TableUpdated
    • SpreadsheetUpdated
  • Data visualization
    • ChartUpdated
    • Circular GaugeUpdated
    • Linear GaugeUpdated
    • Diagram
    • Stock Chart
    • MapsUpdated
    • Range Navigator
    • Sparkline Charts
    • Smith Chart
    • Barcode
    • TreeMap
    • HeatMap
    • Bullet ChartUpdated
    • Kanbanpreview
  • Editors
    • Button
    • Chips
    • DocumentEditorUpdated
    • Form Validator
    • Rich Text Editor
    • In-place Editor
  • Dropdowns
    • AutoComplete
    • ComboBox
    • Dropdown List
    • Dropdown Treepreview
    • MultiSelect Dropdown
    • List Box
  • Calendars
    • Scheduler
    • GanttUpdated
    • Calendar
    • DatePicker
    • DateRangePicker
    • DateTimePicker
    • TimePicker
  • Navigation
    • Sidebar
    • TreeView
    • Tab
    • Toolbar
    • Context Menu
    • Menu Bar
    • Accordion
    • File ManagerUpdated
  • Notifications
    • Badge
    • Toast
    • ProgressBarpreview
  • Inputs
    • Input Mask
    • Numeric Textbox
    • Range Slider
    • TextBox
    • File Upload
    • Color Picker
  • Layout
    • Splitter
    • ListView
    • DialogUpdated
    • Tooltip
    • Card
    • Avatar
    • Dashboard Layout
  • Forms
    • Query Builder
  • Viewer
    • PdfViewer
All Controls
Data Grid
Data Grid
Overview

This sample demonstrates the overview of basic grid features with its performance metrics of large data. To change datasource count, select rows and columns count from dropdown.


Employee ID
Employee Name
Designation
Mail
Location
Status
Trustworthiness
Rating
Software
Current Salary
Address
overviewgrid_header_table
10001
Vinet Zachery
Program Directoryvinet44@arpy.com
GermanyGermany
Active
Insufficient
74%
$41,520.00Rua do Paço, 67
10002
Nancy Nancy
Managernancy60@arpy.com
ArgentinaArgentina
Active
Sufficient
67%
$66,599.00Via Ludovico il Moro 22
10003
Jack Anne
Developerjack56@jourrapide.com
FranceFrance
Active
Perfect
59%
$15,895.00Av. Copacabana, 267
10004
Van Michael
Project Leadvan54@arpy.com
CanadaCanada
Active
Sufficient
66%
$81,512.00Torikatu 38
10005
Laura Peacock
Program Directorylaura70@sample.com
SwedenSweden
Active
Perfect
38%
$84,786.00Avda. Azteca 123
10006
King Nancy
CFOking78@mail.com
USAUSA
Inactive
Perfect
41%
$56,879.00Av. Inês de Castro, 414
10007
Jack Zachery
Developerjack11@sample.com
AustriaAustria
Inactive
Insufficient
37%
$47,016.00Rua da Panificadora, 12
10008
Dodsworth Van
Managerdodsworth82@mail.com
AustriaAustria
Active
Sufficient
92%
$43,823.00Gran Vía, 1
10009
Buchanan Davolio
Developerbuchanan37@rpy.com
MexicoMexico
Inactive
Insufficient
94%
$21,318.00Taucherstraße 10
10010
Fuller Leverling
Designerfuller37@sample.com
MexicoMexico
Active
Perfect
38%
$39,087.00Rua da Panificadora, 12
10011
Rose Andrew
Project Leadrose87@rpy.com
GermanyGermany
Active
Insufficient
76%
$90,769.00Starenweg 5
10012
Laura Margaret
Program Directorylaura63@sample.com
SwedenSweden
Inactive
Perfect
37%
$39,774.002817 Milton Dr.
10013
Jack Fuller
System Analystjack99@mail.com
CanadaCanada
Inactive
Perfect
88%
$59,568.00Berliner Platz 43
10014
Vinet Michael
Designervinet67@rpy.com
AustriaAustria
Active
Perfect
65%
$27,788.00Åkergatan 24
10015
Vinet Buchanan
Program Directoryvinet84@sample.com
SwedenSweden
Inactive
Sufficient
37%
$82,967.00Gran Vía, 1
10016
Andrew Margaret
Project Leadandrew87@jourrapide.com
UKUK
Inactive
Sufficient
30%
$68,537.00Rua do Mercado, 12
10017
Fuller Callahan
Designerfuller13@rpy.com
CanadaCanada
Inactive
Insufficient
50%
$18,766.00Taucherstraße 10
10018
Jack Martin
Project Leadjack82@mail.com
CanadaCanada
Inactive
Perfect
38%
$26,476.005ª Ave. Los Palos Grandes
10019
Leverling Van
CFOleverling95@sample.com
UKUK
Inactive
Sufficient
64%
$16,346.001029 - 12th Ave. S.
10020
Davolio King
Managerdavolio29@jourrapide.com
USAUSA
Active
Insufficient
92%
$97,966.00P.O. Box 555
10021
Fleet Janet
CFOfleet37@rpy.com
USAUSA
Inactive
Insufficient
53%
$87,135.00Av. dos Lusíadas, 23
10022
Martin Fuller
Project Leadmartin106@jourrapide.com
SwedenSweden
Inactive
Perfect
35%
$9,518.002817 Milton Dr.
10023
Peacock Bergs
Program Directorypeacock80@mail.com
GermanyGermany
Inactive
Insufficient
41%
$73,617.00Berliner Platz 43
10024
Margaret Tamer
Project Leadmargaret61@arpy.com
UKUK
Active
Insufficient
38%
$511.00Boulevard Tirou, 255
10025
Leverling King
Developerleverling36@rpy.com
FranceFrance
Inactive
Sufficient
36%
$45,230.00Kirchgasse 6
10026
Van Bergs
Developervan46@arpy.com
ArgentinaArgentina
Active
Insufficient
98%
$1,307.00Via Ludovico il Moro 22
10027
Anne Kathryn
Designeranne67@jourrapide.com
USAUSA
Active
Perfect
34%
$20,176.00Rua da Panificadora, 12
10028
Martin Fuller
Program Directorymartin54@sample.com
SwedenSweden
Active
Sufficient
30%
$44,006.00Strada Provinciale 124
10029
Kathryn Laura
Managerkathryn32@sample.com
MexicoMexico
Inactive
Perfect
34%
$9,041.00Av. dos Lusíadas, 23
10030
Vinet Fleet
Program Directoryvinet80@sample.com
GermanyGermany
Active
Sufficient
94%
$1,915.00Av. dos Lusíadas, 23

The Grid is used to display and manipulate tabular data with configuration options to control the way the data is presented and manipulated. It will pull the data from a data source, such as an array of JSON objects, OData web services, or DataManager binding data fields to columns. Also, displaying a column header to identify the field with support for grouped records.

In this demo, Grid features such as Virtual Scrolling, Filtering, Sorting, Column Template etc... are used along with large data source.

More information on the Grid instantiation can be found in this documentation section.