• 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
Fleet Andrew
Designerfleet57@mail.com
GermanyGermany
Active
Insufficient
23%
$26,235.00Carrera 22 con Ave. Carlos Soublette #8-35
10002
Anton Callahan
Program Directoryanton12@mail.com
USAUSA
Active
Sufficient
43%
$68,022.00Taucherstraße 10
10003
Vinet Laura
Project Leadvinet15@sample.com
AustriaAustria
Active
Perfect
97%
$43,568.00Magazinweg 7
10004
Rose Kathryn
Program Directoryrose50@sample.com
ArgentinaArgentina
Active
Insufficient
29%
$63,540.00Strada Provinciale 124
10005
Laura Fleet
System Analystlaura30@mail.com
UKUK
Active
Sufficient
97%
$7,009.00Gran Vía, 1
10006
Dodsworth Van
Program Directorydodsworth43@sample.com
FranceFrance
Active
Perfect
44%
$72,729.00Kirchgasse 6
10007
Tamer Leverling
Designertamer23@mail.com
FranceFrance
Active
Insufficient
88%
$32,572.00Rua da Panificadora, 12
10008
Margaret Bergs
Designermargaret85@mail.com
GermanyGermany
Inactive
Perfect
33%
$10,690.001029 - 12th Ave. S.
10009
Janet Zachery
CFOjanet53@jourrapide.com
UKUK
Active
Insufficient
54%
$20,204.00Mehrheimerstr. 369
10010
Rose Janet
CFOrose16@rpy.com
ArgentinaArgentina
Active
Sufficient
20%
$64,360.00Rua da Panificadora, 12
10011
Kathryn Van
Designerkathryn49@sample.com
GermanyGermany
Active
Sufficient
69%
$69,002.005ª Ave. Los Palos Grandes
10012
Janet Rose
System Analystjanet91@sample.com
ArgentinaArgentina
Active
Sufficient
75%
$18,652.002817 Milton Dr.
10013
Andrew Janet
System Analystandrew28@rpy.com
ArgentinaArgentina
Inactive
Sufficient
35%
$61,671.00Av. Copacabana, 267
10014
Andrew Anne
Managerandrew51@jourrapide.com
GermanyGermany
Active
Sufficient
30%
$6,059.002817 Milton Dr.
10015
Rose Zachery
Designerrose75@arpy.com
SwedenSweden
Active
Insufficient
95%
$51,188.002817 Milton Dr.
10016
King Janet
Program Directoryking47@sample.com
AustriaAustria
Active
Perfect
98%
$65,437.00Berguvsvägen 8
10017
Tamer Zachery
Managertamer86@rpy.com
ArgentinaArgentina
Inactive
Sufficient
61%
$32,627.00Magazinweg 7
10018
King Janet
Project Leadking30@sample.com
SwedenSweden
Inactive
Insufficient
21%
$80,005.00Avda. Azteca 123
10019
Dodsworth Callahan
System Analystdodsworth93@arpy.com
UKUK
Active
Perfect
79%
$56,134.00Kirchgasse 6
10020
Bergs Laura
Designerbergs79@mail.com
USAUSA
Inactive
Sufficient
58%
$91,076.00Kirchgasse 6
10021
Laura Leverling
Project Leadlaura48@mail.com
USAUSA
Active
Perfect
37%
$49,687.00Taucherstraße 10
10022
Peacock Laura
System Analystpeacock99@sample.com
MexicoMexico
Active
Insufficient
45%
$42,651.00Sierras de Granada 9993
10023
Callahan Leverling
Developercallahan97@arpy.com
USAUSA
Inactive
Perfect
73%
$21,279.00Rua do Paço, 67
10024
Laura Margaret
System Analystlaura90@sample.com
FranceFrance
Inactive
Perfect
26%
$56,355.00Av. dos Lusíadas, 23
10025
Rose Fleet
CFOrose95@jourrapide.com
UKUK
Inactive
Insufficient
45%
$93,517.0059 rue de l'Abbaye
10026
King Anton
System Analystking63@sample.com
USAUSA
Active
Perfect
43%
$5,209.00Torikatu 38
10027
Kathryn Jack
Developerkathryn14@jourrapide.com
CanadaCanada
Active
Insufficient
91%
$84,688.00Mehrheimerstr. 369
10028
Callahan Janet
Developercallahan52@jourrapide.com
AustriaAustria
Active
Sufficient
99%
$94,938.00Mehrheimerstr. 369
10029
Zachery Leverling
Project Leadzachery73@sample.com
ArgentinaArgentina
Active
Sufficient
84%
$24,453.00Fauntleroy Circus
10030
Fuller Van
System Analystfuller22@rpy.com
ArgentinaArgentina
Active
Sufficient
24%
$49,667.00Carrera 22 con Ave. Carlos Soublette #8-35

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.