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)

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

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

Nested grid with a chart

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

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.