React DataGrid DataTable

Most Feature Rich PURE React DataGrid on the Market

  • Simple

    This example demonstrates a number of features of the React DataGrid, including Filter, Footer, Paging, Multi Column Sort, Locked Columns, Grouped Headers, Print, Export, and Preference Persistence

  • Nested

    This example demonstrates support of nested treegrids, where each level contains its own set of columns.

  • Partial Lazy Loaded

    This example demonstrates support for loading inner level details in a lazy fashion. It loads each item completely on demand (when the user clicks the expand icon.

  • Fully Lazy Loaded

    This example demonstrates further extends the lazy loading concept to load each hierarchical levelin a lazy fasion.

  • Grouped Data

    This example demonstrates inner levels that share the same set of columns as the top level

  • Grouped Data2

    This example demonstrates inner levels that share the same set of columns as the top level, as well a common name column.

  • Outlook Grouped Data

    This example shows usage of the built in styles to achieve an Outlook style grouping UI

  • Level Renderers

    This example demonstrates inner levels that render a detail area as opposed to a inner table

  • Level Renderers2

    This example demonstrates immediate inner level that renders details.

  • Programatic Cell Formatting

    This example demonstrates support for programmatic formatting of cell text color,background color, etc.

  • Item Renderers

    This example demonstrates usage of item renderers to generate the contents of cells programmatically.

  • Editable Cells

    This example demonstrates support for inline cell editing. Each column supports an itemEditor which is a class factory that creates an editor component used to edit the data object assoicated with each cell.

  • Large Data set

    This example demonstrates rendering a large dataset in the grid. The grid supports horizontal and vertical renderer recycling (Drawing only the visible area), there by achieving blazing fast performance, even with large datasets

  • Xml Data

    This example demonstrates support for parsing flat XML data and rendering it inside the grid.

  • Xml Grouped Data

    This example support for parsing nested XML data and rendering itinside the grid

  • Auto Resizing Grid

    This example demonstrates support of autosizing the grid based upton number of rows being displayed.

  • Selection Modes

    This example demonstrates support for various selection modes like Single Cell, Multiple Cell, Single Row, Multiple Rows, Multiple Rows (CTRL-Click), and None.

  • Custom Match Filter Control

    This example demonstrates usage of a custom filter control to embed custom logicin the filtering mechanism

  • Column Lock Modes

    This example demonstrates support for various column lock modes, left locked, right locked and unlocked columns

  • Dynamic Columns

    This example demonstrates modifying the columns collection of the grid at runtimein a dynamic fasion.

  • Custom Toolbar

    This example demonstrates support for customization of the pager bar (toolbar)

  • Large Dynamic Grid

    This example demonstrates support for a large number of columns and rows

  • Dynamic Levels

    This example demonstrates the concept of dynamic levels, where the hierarchical levels are created on basis of the data at runtime, as opposed to in markup at compile time.

  • Icon Columns

    This example demonstrates support for icons as well as showing icons by default,on row rollover, or on cell rollover

  • Error Handling

    This example demonstrates support for error handling and highlighting the cells as well as the rows that are in an error state.

  • Dynamic Grouping

    This example shows how to group data dynamically on basis of a property chosen by the user.

  • Selection UI 1

    This example demonstrates support changing the column in which the disclosure icon (expand collapse icon) appears.

  • Selection UI 2

    This example demonstrates support changing the column in which the disclosure icon (expand collapse icon) appears, as well as showing labels along side the default checkboxes.

  • External Filter

    This example demonstrates support applying an external filter to the grid.

  • Change Tracking API

    This example demonstrates the Change Tracking API. The grid tracks changes to the underlying data provider via the cell editors. This can be then used to synchroize with the backend datastore.

  • Row Span Col Span

    This example demonstrates support for Row and Column Spansvia the usage of colSpanFunction and rowSpanFunction

  • Trader View

    This example demonstrates refreshing the grid with rapidly changing data.

  • Variable Row Height

    This example demonstrates support for dynamic row height that is calculated on basisof the underlying data.

  • Selection Options

    This example demonstrates support for a number of selection as well as state maintenance scenarios.

  • Filter ComboBox DataProvider

    This example demonstrates how to provide a custom data provider for the filter combobox.

  • Localization

    This example demonstrates how to customize various places in the grid where we rendertext.

  • Multi Select SetFilter Value

    This example demonstrates prepopulating filter values.

  • Variable Header Row Height

    This example demonstrates support for headers of a dynamic size, where the size of the header is determined dynamically on basis of the header text and column width.

  • Multiple Grouping Manual

    This example demonstrates transposing a flat dataprovider into a hierarchica one while at the same time gathering data to render at parent levels.

  • Custom Footer

    This example demonstrates support for creating dynamic column footers

  • Column Width Mode

    This example demonstrates support for various column lock modes, none,fixed,percent,and fitToContent

  • SortNumeric

    This example demonstrates how to sort string data on a numeric basis