• Material 3
  • Bootstrap 5
  • Fluent 2
  • Tailwind CSS
  • Fluent 2 High Contrast
  • High Contrast
  • Tailwind
  • Fluent
Preferences
Theme Selection
Theme Mode
Mode Selection
Touch
Mouse
Localization
* Translated by Google Translator
Currency
Essential JS 2
HOME
  • Smart Components
    • Smart Pastepreview
    • Smart TextAreapreview
  • Smart AI Solutions
    • Data Grid
    • Diagram
    • Query Builder
    • ComboBox
    • Rich Text Editor
    • Word Processor
    • Spreadsheet
    • Gantt Chart
    • Image Editor
    • Pivot Table
    • Scheduler
    • Maps
  • Grids
    • Data GridUpdated
    • Pivot TableUpdated
    • Tree GridUpdated
    • Spreadsheet
  • Data visualization
    • ChartUpdated
    • 3D Chart
    • 3D Circular Chart
    • Stock ChartUpdated
    • Arc Gauge
    • Circular Gauge
    • DiagramUpdated
    • HeatMap Chart
    • Linear Gauge
    • Maps
    • Range Navigator
    • Smith Chart
    • Barcode
    • Sparkline Charts
    • TreeMap
    • Bullet Chart
    • Kanban
  • Forms
    • Form Validator
    • Query Builder
  • File Viewers & Editors
    • Block Editorpreview
    • PDF ViewerUpdated
    • Rich Text EditorUpdated
    • Markdown Editor
    • Word ProcessorUpdated
    • Image EditorUpdated
  • Buttons
    • Button
    • Chips
    • Floating Action Button
    • SpeedDial
  • Dropdowns
    • AutoCompleteUpdated
    • ComboBoxUpdated
    • Dropdown ListUpdated
    • Dropdown Tree
    • MultiSelect DropdownUpdated
    • List Box
    • Mention
    • MultiColumn Combobox
  • Inputs
    • TextBox
    • TextArea
    • Input Mask
    • Numeric Textbox
    • Color Picker
    • File Upload
    • Range Slider
    • Signature
    • In-place Editor
    • Rating
    • OTP Input
    • Speech To Text
  • Calendars
    • SchedulerUpdated
    • Gantt ChartUpdated
    • Calendar
    • DatePicker
    • DateRangePickerUpdated
    • DateTimePicker
    • TimePicker
  • Interactive Chat
    • AI AssistViewUpdated
    • Chat UIpreview
  • Navigation
    • Accordion
    • AppBar
    • Breadcrumb
    • Carousel
    • Context Menu
    • Menu Bar
    • Sidebar
    • Tab
    • Toolbar
    • TreeView
    • File Manager
    • Ribbon
    • Stepper
  • Notifications
    • Badge
    • Message
    • Toast
    • Progress Bar
    • Skeleton
  • Layout
    • Avatar
    • Card
    • Dialog
    • Predefined Dialogs
    • ListView
    • Tooltip
    • Splitter
    • Dashboard Layout
    • Timeline
All Controls
  • Overview
  • Live Data
  • Default Functionalities
  • Adaptive Layout
  • Loading Animation
  • Empty Record Template
  • Integrate Chart in Grid new
  • FIFA Statistics
  • Local Data
  • Remote Data
  • Flexible Data
  • Async Pipe
  • Column Template
  • Header Template
  • Stacked Header
  • Foreign Key Column
  • Reorder
  • AutoFit and Resizing
  • Column Menu
  • AutoWrap Column cells
  • Column Chooser
  • Show or Hide Column
  • Column Spanning
  • Row Template
  • Detail Template
  • Drag and Drop
  • Drag and Drop within Grid
  • Row Height
  • Row Spanning
  • Inline Editing
  • Dialog Editing
  • Batch Editing
  • Command Column
  • Reactive Forms
  • Template-driven Forms
  • Sorting
  • Default Filtering
  • Filter Template
  • Filter Menu
  • Search
  • Paging
  • Grouping
  • Default Aggregate
  • Group and Caption Aggregate
  • Reactive Aggregate
  • Default Selection
  • Selection API
  • Checkbox Selection
  • Hierarchy Grid
  • Master/Detail
  • Default Scrolling
  • Sticky Header
  • Frozen Rows and Columns
  • Frozen API
  • Virtual Scrolling
  • Infinite Scrolling
  • Grouping with Paging
  • Grouping with Infinite Scrolling
  • Grouping with Virtual Scrolling
  • Default Exporting
  • Advanced Exporting
  • Hierarchy Exporting
  • Detail Template Exporting
  • Multiple Exporting
  • Print
  • Grid Lines
  • Context Menu
  • Clipboard
  • Keyboard Navigation
  • RTL

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.

Load Time: 166ms

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.

You can follow the guidelines in this documentation to get around the browser height restriction when loading and viewing millions of records.

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