Skip to content

ag-grid/react-data-grid

Repository files navigation

CDNJS npm npm

React Data Grid Examples

React Data Grid Examples used on the AG Grid blog.

See the Posts:

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

Video Tutorials

We have created a series of Video Tutorials which can be found on YouTube.

All videos are available in a playlist:

And directly available below:

Source code for all videos is available on Github:

There are also tutorial write ups which support following the videos:

https://github.com/ag-grid/react-data-grid/tree/main/getting-started-video-tutorial/docs

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 React 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:

alt text

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.

License

This example project code is licensed under the MIT license. See the LICENSE file for more info.

Issue Reporting

If you have found a bug, please report them at this repository issues section. If you're using Enterprise version please use the private ticketing system to do that zendesk.

Asking Questions

Look for similar problems on StackOverflow using the ag-grid tag. If nothing seems related, post a new message there. Do not use GitHub issues to ask questions.