Bryntum Grid

Features

Automatic row height demo - 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 edit demo - <p>Demonstrates the CellEdit feature, that makes cells editable.</p> <p>Each column can be configured with an editor, which is activated by double clicking the cell or by pressing [enter] or [F2].</p>
Row edit demo - <p>Demonstrates the RowEdit feature, that edits records in a docked panel.</p> <p>Each column can be configured with an editor, which is activated by double clicking the cell or by pressing [enter] or [F2].</p>
Cell tooltip demo - This example uses the CellTooltip feature to display a tooltip when the user hovers a cell
Collapsible group headers demo - A grid with collapsible grouped columns.
Collapsible inline column demo - A grid showing how to reveal more columns when clicking a button in the column header.
Column drag toolbar demo - 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 demo - This example shows how to drag drop rows between different Grid instances.
Drag Between TreeGrids demo - This example shows how to drag drop rows between different TreeGrid instances.
Export to PDF demo - Demonstrates how to export the grid to PDF/PNG.
Print demo - Demonstrates how to print component using browser print dialog
Export Grid 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 demo - Shows a filter panel that can filter to specific data values
Features demo - This example has multiple features enabled: <ul> <li>Cell editing</li> <li>Column renaming</li> <li>Context menu</li> <li>Grouping</li> <li>Quick find</li> <li>Reorder columns</li> <li>Resize columns</li> <li>Resize region</li> <li>Sorting</li> <li>Striping</li> <li>Summary</li> </ul>
FieldFilterPickerGroup demo - Shows how to use FieldFilterPickerGroup to filter a Grid store, synchronized with the Grid Filter feature.
Filter bar demo - This example shows how the grid can be filtered using a basic filter bar (by filtering its store which reflects onto the grid).
Filtering demo - This example shows how the grid can be filtered (by filtering its store which reflects onto the grid).
Grouped headers demo - A grid with grouped columns. Has the ResizeColumn and ReorderColumn features enabled.
Grouping demo - <p>This example shows the grouping feature. Grid rows can be grouped by a column, either programmatically or by [shift] + clicking a header.</p> <p>On touch devices you can also touch a header with one finger and then anywhere on the grid with another to group.</p>
Group summary demo - 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 demo - 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 demo - 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
Nested grid with chart - Shows how to render nested widgets such as grids and charts using the row expander feature
Paged grid with mocked Ajax - This example demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering with mocked Ajax
QuickFind demo - <p>This example demonstrates the QuickFind feature, which enables quick searching in the grid. </p> <p>Just select a cell and start typing to search that column. Jump to the next hit using <code>[f3]</code> or <code>[ctrl] + [g]</code>.</p>
Row expander demo - 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 demo - Demonstrates the spanRegions config of the row expander feature
Row height demo - Demonstrates that rows can have variable row heights, which can be set in cell renderers or from data (field height).
Row reordering demo - This example shows how you can use drag drop to reorder rows in the grid.
Scaling demo - 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.
Search demo - Demonstrates how to search the entire grid. Navigate between hits using keyboard or buttons.
Sorting demo - <p>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.</p> <p>To sort by multiple columns, [win]/[cmd] click the additional columns headers.</p> <p>Sorting can also be performed programmatically, using methods on the grids store.</p>
Splitting demo - This example demonstrates how split the grid into multiple views
State demo - 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 demo - This example shows the summary feature.
Tree Grouping demo - Uses the TreeGroup feature to group the tree by transforming its data.
Multi-grouping demo - This example shows how store members can be in more than one group
LockRows demo - This example shows how to use the LockRows feature

Basics

Basic demo - 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 demo - Shows a grid with locked (frozen, fixed) columns on the left side and scrollable on the right.
Multi-region demo - Shows a grid with multiple regions, a left and right region with fixed widths and a flexing center region.
Selection demo - This example shows the different selection configurations available for the Grid
Tree Grid demo - 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 with locked columns - Renders a frozen column as a tree with nodes that can be collapsed/expanded.

Columns

Columns demo - Shows how to add, remove, rename, rearrange and resize columns.
Aggregation column demo - Shows how to aggregate values in a column
Column types demo - Shows how to create a custom column type and how to use the different built-in types: <ul> <li>Text (no type specified)</li> <li>Check</li> <li>Date</li> <li>Percent</li> <li>Rating</li> <li>Template</li> <li>Widget</li> </ul>
Widget column demo - Shows the power of the widget column, which allows you to embed widgets inside grid cells

Customization

Cell and header menus demo - Shows how to add custom items to the cell/header context menu
Renderers demo - Demonstrates the use of renders for content and styling of cells and headers.
Custom Cell and Header menus demo - A custom cell menu and header menu implemented with Bootstrap
Custom theme demo - 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 demo - Shows how to preload a specific locale and localize the application.
Responsive demo - Shows how the grid can be easily made responsive using a combination of configs and styling.

AI

AI-Powered E-Commerce Product 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 demo - Demonstrates that the grid scrolls nicely even with many many rows.
Infinite scroll with lazy loading - Shows a grid with infinite scroll implemented with a backend in Express.js?484519
Master detail demo - A multi-level grid-in-grid scenario for master/detail view, powered by the RowExpander feature
Stock list demo - This example shows the grid refreshing rapidly due to changes in the dataset, such in the live streaming of a stock exchange.
Grid + TaskBoard demo - This example shows how combine the Grid and Kanban widgets sharing the same dataset.

Misc

Cascading combos demo - This example shows how to setup combos to be dependent one on the other
Content Security Policy demo - This example uses a Content Security Policy meta tag to show that the grid works with CSP.
Multiple instances demo - This examples embeds three instances of the grid in a single page, each with its own data.
Project summary demo - This example demonstrates how to combine multiple Grid features to provide a visually nice looking list of data
Shared data demo - 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 demo - Demonstrates a whole lot of the Grid's powerful functionality: cell selection, multi-edit, cell-copy-paste, fill handle and more
Remotely paged, sorted and filtered non-AjaxStore Grid - This example demonstrates the remote paging, sorting and filtering capabilities in the regular non-Ajax Store
Transaction demo - Demonstrates transaction handling using StateTrackingManager
Tooltip - This example illustrates interactively how the various align and constrain options of the Tooltip class play into tooltip behaviour.
Tree load on demand demo - 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.

Integration

EcmaScript module demo - This example shows how to include and use the grid using EcmaScript modules (import)
ExtJS Modern App integration demo - Example of a Bryntum Grid embedded in an ExtJS Modern application. Read more about ExtJS here: <a href='https://www.sencha.com/products/extjs' style='color: white; font-weight: bold'>https://www.sencha.com</a>
PHP backend - simple grid - Demonstrates an editable simple grid with a PHP backend (only stores data in session, no database)
PHP backend - Paged grid - Demonstrates that the grid can access large data sets page by page. Uses remote sorting and filtering at server side using PHP backend.
Salesforce demo - This demo shows how to embed Bryntum Grid into the Lightning Web Component to use in your salesforce org.
Web Components demo - This example shows how to use the Custom elements version of the grid
Script tag demo - This example shows how to include and use the grid bundle using an ordinary script tag.
Custom build using WebPack - This very basic demo shows how to use GridBase and webpack to do a custom build from our sources
Custom build using WebPack and thin bundles - This very basic demo shows how to use GridBase and webpack to do a custom build from our thin packages
Ionic data grid demo - This demo is based on Ionic framework and uses Bryntum Angular Grid.
Ionic data grid themes demo - This demo shows how to include and switch themes in Ionic application with Bryntum Grid.