At AG Grid we put a lot of effort into our documentation as we understand that good documentation helps developers achieve their goals. In this post I want to highlight some features of our documentation that can greatly improve you productivity.

Framework Of Choice

AG Grid is an agnostic data grid that is shipped with dedicated packages for Angular, React and Vue in addition to the vanilla Javascript/Typescript offering.

As you can imagine, how you interact with the grid will depend on the framework you are using. As a result we customise the documentation code snippets and examples based on your framework. Additionally we add framework specific notes to the text content based on your selection.

This is why it is important to select your framework to view the most accurate documentation for you. As an example see how the column definitions change based on your framework selection in the following code example.

Javascript / Typescript

Angular

React

Vue

Framework Specific Example Code

Another key feature of our documentation is our commitment to providing full code examples for all grid / chart features. To make it possible to copy code from our examples directly into your projects we produce examples written in each framework.

At the time of writing we have all of the following framework variations supported.

Javascript / Typescript
Angular
React - Hooks / Classes
Vue - 2 / 3

Note how the example reloads when you change the framework variation.

To view the source code for an example use the side menu of the example runner.

Modules vs Packages

In a previous post we explained how to use feature modules to minimise your application bundle size. Part of the code required with this approach is the registration of feature modules.

As a developer it is very useful to be able to see which feature modules are required for a given feature. Our module examples do just that. They include the registration of feature modules enabling you to quickly know which modules you need to import into your application.

import { ModuleRegistry } from '@ag-grid-community/core';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';

// Register the required feature modules with the Grid
ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  RangeSelectionModule,
]);

Alternatively, if you are working with packages there is no module registration required so we can give you more concise code.

Correct Import Paths

The import paths for modules and packages are different. So to ensure you can copy code from our examples without having to make changes use the format that is consistent with your application setup.

Packages have imports like:

import { ColDef, GridOptions } from 'ag-grid-community';

Modules have imports like:

import { ColDef, GridOptions } from '@ag-grid-community/core';

Experiment in Plunker

For every example you can click the Open in Plunker button and the example will automatically open in Plunker ready for you to tweak and experiment with. This enables you to get hands on with a feature without having to spend anytime setting up a dev environment.

Coming soon in our next release, Typescript and Angular examples will have type errors and auto-completion within Plunker making it even easier to experiment!

Your Preferences are Remembered

Once you have selected a framework and example variation we remember these so that when you navigate around the docs you don't have to continually update these settings. We hope this enables you to be as productive as possible and make it easy for you to take code from our examples and integrate it seamlessly with your applications.

Previous Versions of AG Grid

If you are not able to use the latest version of AG Grid it is worth knowing that you can view the entire documentation site as it was on previous versions via our archive. However, I would only recommend that if you find inconsistencies with the latest version.

Conclusion

I hope that these hints will help you improve your productivity when using our documentation and enable you to build great applications with AG Grid! As always let us know in the comments section if there are any ideas you have as a user to make the documentation even better!

Maximise your productivity with AG Grid Documentation