• Fluent
  • Fluent Dark
  • Bootstrap v5
  • Bootstrap v5 dark
  • Tailwind CSS
  • Tailwind CSS Dark
  • Material
  • Material Dark
  • Material 3
  • Material 3 Dark
  • Fabric
  • Fabric Dark
  • Bootstrap v4
  • Bootstrap
  • Bootstrap Dark
  • High Contrast
Preferences
Theme Selection
Localization
* Translated by Google Translator
Currency

Data Grid

DEMO
SOURCE
API

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.

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.

Transform your Next.js web apps today with Syncfusion React components
80+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE