Bryntum Grid

Features

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

Cell editing

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].

Row editing

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].

Cell tooltip

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

Collapsible columns

A grid with collapsible grouped columns

Collapsible inline columns

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

Column drag toolbar

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

Drag between grids

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

Drag between tree grids

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

Export to PDF/PNG

Demonstrates how to export the grid to PDF/PNG

Demonstrates how to print component using browser print dialog

Export to Excel

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)

Facet filtering

Shows a filter panel that can filter to specific data values

Features showcase

This example has multiple features enabled:

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

Field filters

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

Filter bar

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

Filtering

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

Grouped headers

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

Grouping

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.

Group summary

This example shows the summary grouping feature

Import from Excel

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

Merge cells

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

Multiple summaries

This example shows how to configure columns with multiple summaries

Nested grids

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

Paged grid with remote sort and filter

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

Pin columns left/right

Shows a grid with ability to pin columns on the start or end of the grid

Quick find

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].

Row expanding

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

Row expander region support

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

Row expander span regions

Demonstrates the spanRegions config of the row expander feature

Variable row height

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

Row reordering

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

Scaling

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

Searching

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

Sorting

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.

Splitting the Grid

This example demonstrates how split the grid into multiple views

Storing and restoring state

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

Summary

This example shows the summary feature

Tree grouping

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

Multi group membership

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

Locking records at top of view

This example shows how to use the LockRows feature

Charts

thin

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

Nested grid with a chart

thin

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

Sparklines

thin

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

Stock list

thin

This example shows the grid refreshing rapidly due to changes in the dataset, such in the live streaming of a stock exchange

Resource monitor

thin

Grid showing multiple servers with live‑updating sparkline charts for CPU, network, memory and disk usage

Basics

Basic setup

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

Locked columns

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

Multiple regions

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

Selection

This example shows the different selection configurations available for the Grid

Tree 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

Tree grid with locked columns

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

Columns

Adding & removing columns

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

Aggregation column

Shows how to aggregate values in a column

Column types

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

Widget column

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

Customization

Cell and header menus

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

Cell and header renderers

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

Custom cell and header menus

A custom cell menu and header menu implemented with Bootstrap

Custom theme

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

Localization

Shows how to preload a specific locale and localize the application

Responsive behaviour

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

Rich text editor

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

Theme browser

This demo lets you switch between the different themes

AI

Use AI to mass generate SEO descriptions in an e-commerce data grid

Use the AI FormulaProvider to populate SEO description + keywords in the Grid

AI-powered review insights grid

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

Power demos

Big data set

Demonstrates that the grid scrolls nicely even with many many rows

Infinite scroll

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

Lazy loaded tree grid

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

Master detail (grid-in-grid)

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

Grid + TaskBoard combo

thin

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

Misc

Cascading combos

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

Content-Security-Policy (CSP)

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

Multiple instances

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

Project summary

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

Shared 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

Spreadsheet

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

Remotely paged Grid with non-Ajax Store

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

Sparse index

This example demonstrates the sparse index feature in a Grid. Rows can be reordered by drag and drop, and the updated sparseIndex will be persisted to the API.

The API is implemented as a service worker and stores data in an IndexedDB on localhost.

Sparse index tree

This example demonstrates the sparse index feature in a TreeGrid. Grid rows can be reordered by drag and drop, and the updated sparseIndex will be persisted to the API.

The API is implemented as a service worker and stores data in an IndexedDB on localhost.