• 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
    • Spreadsheet
    • Gantt Chart
    • Query Builder
    • ComboBox
    • Image Editor
    • Pivot Table
    • Rich Text Editor
    • Scheduler
    • Maps
    • Word Processor
  • Grids
    • Data GridUpdated
    • Pivot Table
    • Tree GridUpdated
    • Spreadsheet
  • Data visualization
    • ChartUpdated
    • 3D Chart
    • 3D Circular Chart
    • Stock Chart
    • 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
    • PDF ViewerUpdated
    • Rich Text Editor
    • Markdown Editor
    • Word Processor
    • Image Editor
  • Buttons
    • Button
    • ChipsUpdated
    • Floating Action Button
    • SpeedDial
  • Dropdowns
    • AutoComplete
    • ComboBox
    • Dropdown List
    • Dropdown Tree
    • MultiSelect Dropdown
    • List Box
    • MentionUpdated
    • MultiColumn Combobox
  • Inputs
    • TextBox
    • TextArea
    • Input Mask
    • Numeric Textbox
    • Color Picker
    • File Upload
    • Range Slider
    • Signature
    • In-place Editor
    • Rating
    • OTP Input
    • Speech To Textpreview
  • Calendars
    • SchedulerUpdated
    • Gantt ChartUpdated
    • Calendar
    • DatePickerUpdated
    • DateRangePicker
    • DateTimePickerUpdated
    • 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
  • Local Data
  • Remote Data Updated
  • Flexible Data
  • Async Pipe
  • Column Template
  • Header Template
  • Stacked Header Updated
  • 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 Updated
  • 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: 547ms

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.