React Data Grid Examples

React Data Grid Examples used on the AG Grid blog.

See the Posts:

• Get Started with React Data Grid with Hooks in 5 minutes
  • Summary and code in getting-started-5-mins-hooks
• Create Functional React Components using hooks for editing, filters and rendering
  • Summary and code in customization-demo-hooks
• Get Started with React Data Grid with Classes in 5 minutes
  • Summary and code in integration-demo-classes
• Create React Components for editing, filters and rendering of React data grid cells
  • code in customization-demo-classes
• New ReactUI Overview
  • code in reactui-demo
• Creating a Podcast Listening App Using AG Grid and React
  • code in podcast-player
  • The player was built iteratively:
    • use v1
    • use v2
    • use v3
    • use v4
    • use v5
    • use v6
    • use v7
    • use v8 - tests were added in this version using Testing Library
• Create a Slider Puzzle Game using AG Grid and React
  • code in slider-game
  • Play the game here
• Sparklines Demo
  • code for sparklines demo
  • Use Sparklines Here

Feel free to clone, fork or download this repo to use as a base for learning about AG Grid.

More Examples

In addition to this repo, we also have a repo used to support our testing as well as provide example use cases:

The React Data Grid Example repo has three different project samples.

• A Stock Trading Dashboard simulator.
• An interactive feature example.
• Demonstration of a 'large' grid. (676 columns by 1000 rows)

read more about the repo here

We also maintain a Showcase page which lists public live examples of AG Grid usage.

Our documentation based Getting Started Guide covers the enterprise edition as well.

About AG Grid

ag-Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no 3rd party dependencies and integrates with React. Here's how our grid looks like with multiple filters and grouping enabled:

A React Data Grid is different from a React Grid or a React Table.

• Grid provides functionality for page layout vs.
• Data Table which provides data rendering and some interactivity vs.
• Data Grid which provides a data-driven spreadsheet-like level of interactivity.

A React Grid refers typically to a layout control to create a responsive grid layout to organise child components.

A React Table, React Data Table or React Data Grid refers to a component that can render rows and columns of data and allow the user to interact with the data, e.g. sorting and filtering data, exporting data, and in-cell editing.

AG Grid is a React Data Grid for data-driven tabular rendering. Configuration based to offer a rich user experience out of the box with minimal programming. AG Grid can be extended to cover project specific requirements and can also be used with Angular, Vue and JavaScript.

Read more about the differences between a Data Grid and a Table here.

• Grid
  • Helps with page layout.
• Data Table
  • Render data in an HTML table.
  • Support for coding user interaction features.
  • Enabling features requires template changes and event handling code.
  • Some features require additional libraries and programmer effort, e.g., row virtualisation for performance, scrollbars for usability.
  • Template Driven, the template controls the rendering.
• Data Grid
  • Renders data in tabular form with the underlying DOM designed for performance.
  • Enable user interaction with configuration.
  • Configuration over coding for standard use-cases.
  • Feature-rich out of the box without adding dependencies.
  • Data-Driven, once configured, add data and let the Data Grid do the work.

Both Data Tables and Data Grids offer teams the ability to customise with additional features and work with external libraries. With a Data Grid, you should require fewer external libraries and dependencies because the Data Grid is designed to do more heavy lifting out of the box.

AG Grid Features

Besides the standard set of features you'd expect from any grid:

• Column Interactions (resize, reorder, and pin columns)
• Pagination
• Sorting
• Row Selection

Here are some of the features that make ag-Grid stand out:

• Grouping / Aggregation*
• Custom Filtering
• In-place Cell Editing
• Records Lazy Loading *
• Server-Side Records Operations *
• Live Stream Updates
• Hierarchical Data Support & Tree View *
• Customizable Appearance
• Customizable Cell Contents
• Excel-like Pivoting *
• State Persistence
• Keyboard navigation
• Data Export to CSV
• Data Export to Excel *
• Row Reordering
• Copy / Paste
• Column Spanning
• Pinned Rows
• Full Width Rows

* The features marked with an asterisk are available in the enterprise version only.

Check out developers documentation for a complete list of features or visit our official docs for tutorials and feature demos.