[//]: # (Links in this document only works when viewed in the documentation browser, surf to ./docs)

# Bryntum Grid

## What is Bryntum Grid?

Welcome to Bryntum Grid - a pure JavaScript data grid component which integrates easily with popular frameworks.

For more general information on our Grid product, please read on. This documentation provides you with everything you
need to get started.

If you are excited to have a go now, we suggest you to start with one of our **quick start guides** below:

<div class="framework-logos">
<a href="#Grid/guides/quick-start/react.md"><img src="Core/logo/react.svg" alt="React"><span>React</span></a>
<a href="#Grid/guides/quick-start/angular.md"><img src="Core/logo/angular.svg" alt="Angular"><span>Angular</span></a>
<a href="#Grid/guides/quick-start/vue-3.md"><img src="Core/logo/vue.svg" alt="Vue"><span>Vue</span></a>
<a href="#Grid/guides/quick-start/javascript.md"><img src="Core/logo/vanilla.svg" alt="Vanilla JS"><span>Vanilla JS</span></a>
<a href="#Grid/guides/quick-start/salesforce.md"><img src="Core/logo/salesforce.svg" alt="Vanilla JS"><span>Salesforce</span></a>
</div>

## Live demo

Try out some of the Bryntum Grid features with the Live demo below.

<div class="external-example" data-file="Grid/guides/readme/intro.js"></div>

To get a complete view of Bryntum Grid capabilities, please read topic-specific guides found in the menu and visit
our [API documentation](#Grid/view/Grid) and [examples browser](../examples).

## Integration

Bryntum Grid works in all modern browsers (Chrome, Firefox, Safari, and modern Edge), whatever your target technology is.

You can use Bryntum Grid out of the box or integrate it with the frameworks of your choice and many third-party solutions. Visit the integration section of our documentation for further details:
* <a href="#Grid/guides/integration/react/guide.md">React <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/react.svg" alt="React"></a>
* <a href="#Grid/guides/integration/angular/guide.md">Angular <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/angular.svg" alt="Angular"></a>
* <a href="#Grid/guides/integration/vue/guide.md">Vue <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/vue.svg" alt="Vue"></a>
* <a href="#Grid/guides/integration/ionic/guide.md">Ionic <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/ionic.svg" alt="Ionic"></a>
* <a href="#Grid/guides/integration/salesforce/readme.md">Salesforce <img style="height: 1em;width: 1em;margin-top:0;" src="Core/logo/salesforce.svg" alt="Salesforce"></a>

<div class="note">
If you have already downloaded Bryntum Grid, please note that it ships with framework examples found in the 
<code>examples/frameworks</code> folder. If you have not, you can <a href="https://bryntum.com/download">download your 
free trial version from here</a>
</div>

## How does it work?

A grid consists of one or more subgrids, each with its own horizontal scroller. All subgrids share a vertical scroller.

<img src="Grid/grid-layout.png" class="b-screenshot" alt="Grid layout">

[//]: # (do not change the title of the last section unless you adapt GA Tag tutorial_complete)
## What to do next?

The best way to learn how to use our Grid component is to first select a quick start guide and after that follow our
tutorial. To get started, please choose your target technology below:

<div class="framework-logos">
<a href="#Grid/guides/quick-start/react.md"><img src="Core/logo/react.svg" alt="React"><span>React</span></a>
<a href="#Grid/guides/quick-start/angular.md"><img src="Core/logo/angular.svg" alt="Angular"><span>Angular</span></a>
<a href="#Grid/guides/quick-start/vue-3.md"><img src="Core/logo/vue.svg" alt="Vue"><span>Vue</span></a>
<a href="#Grid/guides/quick-start/javascript.md"><img src="Core/logo/vanilla.svg" alt="Vanilla JS"><span>Vanilla JS</span></a>
</div>

## Professional Services

Feeling you need help? Don’t hesitate to request support from our 
[Professional Services here](https://bryntum.com/services/).

## Copyright and license

Copyright © 2009 - {{YEAR}}, Bryntum

All rights reserved.

[License](https://bryntum.com/products/grid/license/)


<p class="last-modified">Last modified on 2023-10-26 8:19:10</p>