Bryntum Grid 7.0.0-alpha.1

Demonstrates the autoHeight config on columns, that enables automatic row height based on cell content. Please note that it has a considerable impact on rendering performance

Demonstrates the CellEdit feature, that makes cells editable.

Each column can be configured with an editor, which is activated by double clicking the cell or by pressing [enter] or [F2].

Demonstrates the RowEdit feature, that edits records in a docked panel.

Each column can be configured with an editor, which is activated by double clicking the cell or by pressing [enter] or [F2].

This example uses the CellTooltip feature to display a tooltip when the user hovers a cell

A grid with collapsible grouped columns

A grid showing how to reveal more columns when clicking a button in the column header

By default, Column drag toolbar demo is enabled on touch devices. This example has the it enabled for all devices, give it a shot by dragging a column header

This example shows how to drag drop rows between different Grid instances

This example shows how to drag drop rows between different TreeGrid instances

Demonstrates how to export the grid to PDF/PNG

Demonstrates how to print component using browser print dialog

This demo shows a custom solution of exporting grid data to Excel without involving the server based on a third party library called write-excel-file (https://www.npmjs.com/package/write-excel-file)

Shows a filter panel that can filter to specific data values

This example has multiple features enabled:

• Cell editing
• Column renaming
• Context menu
• Grouping
• Quick find
• Reorder columns
• Resize columns
• Resize region
• Sorting
• Striping
• Summary

Shows how to use FieldFilterPickerGroup to filter a Grid store, synchronized with the Grid Filter feature

This example shows how the grid can be filtered using a basic filter bar (by filtering its store which reflects onto the grid)

This example shows how the grid can be filtered (by filtering its store which reflects onto the grid)

A grid with grouped columns. Has the ResizeColumn and ReorderColumn features enabled

This example shows the grouping feature. Grid rows can be grouped by a column, either programmatically or by [shift] + clicking a header.

On touch devices you can also touch a header with one finger and then anywhere on the grid with another to group.

This example shows the summary grouping feature

This demo shows how to import Excel documents based using the awesome SheetJS

This example shows how to use the `mergeCells` option on columns to merge cells with the same value into a single cell spanning multiple rows

This example shows how to configure columns with multiple summaries

Demonstrates the use of the row expander feature to display a nested Grid in expanded rows

This example demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax

This example demonstrates the QuickFind feature, which enables quick searching in the grid.

Just select a cell and start typing to search that column. Jump to the next hit using [f3] or [ctrl] + [g].

Demonstrates the use of the row expander feature by rendering a grid with detailed data into a expanded row

Demonstrates how to render different widgets in different regions of the expanded row

Demonstrates the spanRegions config of the row expander feature

Demonstrates that rows can have variable row heights, which can be set in cell renderers or from data (field height)

This example shows how you can use drag drop to reorder rows in the grid

This example shows how setting the font-size affects the size of the grid and widgets. Made possible since grid is styled using 'em' for sizes

Demonstrates how to search the entire grid. Navigate between hits using keyboard or buttons

This example shows the sorting feature. Grid rows can be sorted by a single column or by multiple columns. To sort by a single column, click its header.

To sort by multiple columns, [win]/[cmd] click the additional columns headers.

Sorting can also be performed programmatically, using methods on the grids store.

This example demonstrates how split the grid into multiple views

This example demonstrates auto state handling for the grid. It allows the user to store state in localStorage and restore it across page reloads

This example shows the summary feature

Uses the TreeGroup feature to group the tree by transforming its data

This example shows how store members can be in more than one group

This example shows how to use the LockRows feature

Shows how to use a chart designer widget to configure and display a chart from Grid data

Shows how to render nested widgets such as grids and charts using the row expander feature

This example shows how the SparklineColumn can display sparkline charts inline in a Grid row

This example shows basic setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

Shows a grid with locked (frozen, fixed) columns on the left side and scrollable on the right

Shows a grid with multiple regions, a left and right region with fixed widths and a flexing center region

This example shows the different selection configurations available for the Grid

The Bryntum Grid also supports TreeGrid, with a TreeColumn showing the tree structure. In this demo, it is the first column showing nodes that can be collapsed & expanded

Renders a frozen column as a tree with nodes that can be collapsed/expanded

Shows how to add, remove, rename, rearrange and resize columns

Shows how to aggregate values in a column

Shows how to create a custom column type and how to use the different built-in types:

• Text (no type specified)
• Check
• Date
• Percent
• Rating
• Template
• Widget

Shows the power of the widget column, which allows you to embed widgets inside grid cells

Shows how to add custom items to the cell/header context menu

Demonstrates the use of renders for content and styling of cells and headers

A custom cell menu and header menu implemented with Bootstrap

Shows how to preload a specific locale and localize the application

Shows how the grid can be easily made responsive using a combination of configs and styling

This example shows how to use TinyMCE as a cell editor in the Bryntum Grid

Shows how to use an AI FormulaProvider to populate cell values and display them in the Grid

Demonstrates that the grid scrolls nicely even with many many rows

Shows a grid with infinite scroll implemented with a backend in Express.js

Shows a tree grid with infinite scroll implemented with a backend in PHP

A multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature

This example shows how combine the Grid and Kanban widgets sharing the same dataset

This example shows how to setup combos to be dependent one on the other

This example uses a Content Security Policy meta tag to show that the grid works with CSP

This examples embeds three instances of the grid in a single page, each with its own data

This example demonstrates how to combine multiple Grid features to provide a visually nice looking list of data

This examples embeds two instances of the grid on a single page. The instances shares the same data, editing in one reflects on the other

Demonstrates a whole lot of the Grid's powerful functionality: cell selection, multi-edit, cell-copy-paste, fill handle and more

This example demonstrates the remote paging, sorting and filtering capabilities in the regular non-Ajax Store

Demonstrates transaction handling using StateTrackingManager

This example illustrates interactively how the various align and constrain options of the Tooltip class play into tooltip behaviour

Demonstrates a tree in which some of the nodes load their children on demand. Uses a php backend that adds a bit of delay for demo purposes. Also contains one failing load that displays an error message

This example shows how to include and use the grid using EcmaScript modules (import)

Demonstrates an editable simple grid with a PHP backend (only stores data in session, no database)

Demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering at server side using PHP backend

This demo shows how to embed Bryntum Grid into the Lightning Web Component to use in your salesforce org

This example shows how to use the Custom elements version of the grid

This example shows how to include and use the grid bundle using an ordinary script tag

This very basic demo shows how to use GridBase and webpack to do a custom build from our thin packages

This demo is based on Ionic framework and uses Bryntum Angular Grid

This demo shows how to include and switch themes in Ionic application with Bryntum Grid

This demo contains the Bryntum Angular Grid component showing Angular 9 compatibility

This demo contains the Bryntum Angular Grid component showing Angular 10 compatibility

This demo contains the Bryntum Angular Grid component showing Angular 11 compatibility

This demo contains the Bryntum Angular Grid component showing Angular 12 compatibility

This demo contains the Bryntum Angular Grid component showing Angular 13 compatibility

This demo contains the Bryntum Angular Grid component showing Angular 14 compatibility

This demo shows how to render Angular Components into cells of the Angular data grid component

Demonstrates the autoHeight config on columns, that enables automatic row height based on cell content. Please note that it has a considerable impact on rendering performance

This example shows basic setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

This example shows basic thin setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

Demonstrates the CellEdit feature, that makes cells editable.

Each column can be configured with an editor, which is activated by double clicking the cell or by pressing [enter] or [F2].

This example uses the CellTooltip feature to display a tooltip when the user hovers a cell

Shows how to create a custom column type and how to use the different built-in types: Text (no type specified), Check, Date, Percent, Rating, Template & Widget

Shows how to add custom items to the cell/header context menu

This demo has a custom theme to showcase how you can create your own. Check the scss file to see how it is done

This example shows how the grid can be filtered using a basic filter bar (by filtering its store which reflects onto the grid)

This example shows how the grid can be filtered (by filtering its store which reflects onto the grid)

Shows a tree grid with infinite scroll implemented with a backend in PHP

This example shows how to use the LockRows feature

A multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature

This example demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax

This example demonstrates how to combine multiple Grid features to provide a visually nice looking list of data

This example shows how setting the font-size affects the size of the grid and widgets. Made possible since grid is styled using 'em' for sizes

Demonstrates the Summary feature

The Bryntum Grid also supports TreeGrid, with a TreeColumn showing the tree structure

This demo contains a basic React data grid component implementation. Rows can be added and removed and the row height is bound to then number field in the header

This demo contains a basic thin React Grid component implementation

Demonstrates the CellEdit feature, that makes cells editable. Each column can be configured with an editor, which is activated by double clicking the cell or by pressing [enter] or [F2]

This demo has a custom theme to showcase how you can create your own. Check the scss file to see how it is done

Shows a filter panel that can filter to specific data values

This example shows how the grid can be filtered (by filtering its store which reflects onto the grid)

Demo showing how to implement infinite scrolling with RTK Query and PHP backend

Shows a tree grid with infinite scroll implemented with a backend in PHP

This example shows how to use the LockRows feature

A multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature

This example demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax

This example demonstrates how to combine multiple Grid features to provide a visually nice looking list of data

This example demonstrates remote paging, sorting and filtering implemented by binding data directly to the Grid (not using AjaxStore)

Shows how to configure React renderers to use the React Context

Shows how to configure React renderers to use the React 19 Context

This example shows how setting the font-size affects the size of the grid and widgets. Made possible since grid is styled using 'em' for sizes

Demonstrates the Summary feature

The Bryntum Grid also supports TreeGrid, with a TreeColumn showing the tree structure

Demonstrates the autoHeight config on columns, that enables automatic row height based on cell content. Please note that it has a considerable impact on rendering performance

Demonstrates that the grid scrolls nicely even with many many rows

This demo contains a React Column State example. Columns can be reordered, gets hidden, or resized. Then by the Store State button, the Grid state is stored to the localStorage. Whenever you reload the page, or click the Apply State button, the column state is restored

This example uses the CellTooltip feature to display a tooltip when the user hovers a cell

Shows how to create a custom column type and how to use the different built-in types: Text (no type specified), Check, Date, Percent, Rating, Template & Widget

Shows how to add custom items to the cell/header context menu

This example shows how the grid can be filtered using a basic filter bar (by filtering its store which reflects onto the grid)

This demo contains a React TreeGrid example. It shows 500 rows each with 100 children

This example shows basic setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

This example shows basic thin setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

This demo has a custom theme to showcase how you can create your own. Check the resources/ folder to see how it is done

This example shows how to use FieldFilterPickerGroup to filter a Grid store, synchronized with the Grid Filter feature

This example shows how the grid can be filtered (by filtering its store which reflects onto the grid)

Shows a tree grid with infinite scroll implemented with a backend in PHP

This example shows how to use the LockRows feature

A multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature

This example demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax

This example demonstrates how to combine multiple Grid features to provide a visually nice looking list of data

This example shows how setting the font-size affects the size of the grid and widgets. Made possible since grid is styled using 'em' for sizes

Demonstrates the Summary feature

The Bryntum Grid also supports TreeGrid, with a TreeColumn showing the tree structure

The Vue Wrapper of the Bryntum Grid product is compatible with Vue 3 and lets you render Vue components directly into grid cells

Demonstrates the autoHeight config on columns, that enables automatic row height based on cell content. Please note that it has a considerable impact on rendering performance

This example shows basic setup of the grid with sorting enabled. It has a few columns with generated data and it uses date and percent columns

Shows how to add custom items to the cell/header context menu

This example uses the CellTooltip feature to display a tooltip when the user hovers a cell

This example shows how the grid can be filtered using a basic filter bar (by filtering its store which reflects onto the grid)

Demonstrates the use of the row expander feature by rendering a grid with detailed data into a expanded row

Shows a simple data grid integration with Vue 3

This demo contains the TreeGrid feature of the Bryntum Vue Data Grid, integrated in a Vue 3 app. It shows 500 rows each with 100 children

This example shows basic setup of the grid with sorting enabled. It has a few columns with inline data and it uses date and percent columns

Shows how to create a custom column type and how to use the different built-in types: Text (no type specified), Check, Date, Percent, Rating, Template & Widget

A demo showing Vue Material Dasboard (MIT licensed) with the Bryntum Data Grid integrated in one of the tabs

This demo shows how to use the Excel export feature of the Vue data grid

A demo showing how to render Vue components into the cells of the Bryntum Vue Data Grid

An advanced demo of the Vue data grid integrated into a Vuetify app with 2-way communication