Grid features

Features are classes that add functionality to the Grid. The purpose of this guide is to give an overview of the features that ships with Grid and show how you can configure them.

Enabling/disabling and configuring features

Features are configured using Grids features-config. Some features are enabled by default, in which case you can disable them like this:

const grid = new Grid({
    features : {
        sort  : false,
        group : false
    }
});

Others require you to enable them:

const grid = new Grid({
    features : {
        filter    : true,
        quickFind : true
    }
});

Some features have configuration options (see the API docs for each feature for the options). In such cases you can specify an configuration object instead of true:

const grid = new Grid({
    features : {
        filter : { // Default filter, configuration object
            property : 'city',
            name     : 'Stockholm'
        },
        sort   : 'name' // Sort by name, configuration shortcut using string
    }
});

If you need to access a feature at runtime, they are available through the features property on Grid:

grid.features.search.gotoNextHit();

If you want to create a custom feature, head over to GridFeatureManager docs.

Built-in features

Grid itself has lots of built-in core functionality such rendering of cells, selection and keyboard navigation. On top of that, it ships with the features described below, some of which are enabled by default and others that have to be enabled manually.

AI (API docs)

This feature provides an AI agent for Grid which allows the user to use natural language to interact with the Grid in different ways. The feature and all its related components are marked as experimental and are subject to change.

This feature is disabled by default.

AIFilter (API docs)

Natural language filter tool

This feature is disabled by default.

CellCopyPaste (API Docs)

Allows using [Ctrl/CMD + C], [Ctrl/CMD + X] and [Ctrl/CMD + V] to cut, copy and paste cell or cell ranges. Also makes cut, copy and paste actions available via the cell context menu.

This feature is disabled by default.

CellEdit (API docs)

Inline editing of cell values.

This feature is enabled by default.

Double click a cell to start editing:

RowEdit (API docs)

Editing of a record in a side docked editing panel.

This feature is disabled by default.

Double click a cell to start editing:

CellTooltip (API docs)

Display per cell tooltips that can contain record data.

This feature is disabled by default.

Hover a cell below to see it in action:

Charts (API docs)

Design charts based on grid data.

This feature is disabled by default.

Hover a cell below to see it in action:

ColumnAutoWidth (API Docs)

Enables the autoWidth config for a grid's columns.

This feature is enabled by default.

ColumnDragToolbar (API docs)

A toolbar on which column headers can be dropped to sort, group etc. Great on touch devices.

This feature is disabled by default, but automatically enabled on touch devices unless explicitly disabled.

Grab a column header and drag it down to show the toolbar:

ColumnPicker (API docs)

Adds item to grid header context menus to toggle column visibility.

This feature is enabled by default.

Right click a header to show the menu:

ColumnRename (API Docs)

Allows user to rename columns by either right-clicking column header or using keyboard shortcuts when column header is focused.

This feature is disabled by default.

ColumnReorder (API docs)

Allows reordering columns by dragging their headers.

This feature is enabled by default.

Drag a header to rearrange:

ColumnResize (API docs)

Lets user resize columns by dragging their headers right hand edge.

This feature is enabled by default.

Try it in this demo:

CellMenu (API docs)

Handles context menu for cells. Other features supply items, additional items can be added in your code.

This feature is enabled by default.

Right click a cell in the demo below to show the menu:

HeaderMenu (API docs)

Handles context menu for headers. Other features supply items, additional items can be added in your code.

This feature is enabled by default.

Right click a header in the demo below to show the menu:

ExcelExporter (API Docs)

A feature that allows exporting Grid data to Excel or CSV without involving the server.

This feature is disabled by default.

FileDrop (API Docs)

An experimental feature that lets users drop files on a Widget. The widget fires an event when a file is dropped onto it. In the event, you get access to the raw files as strings, that were parsed by calling readAsBinaryString.

This feature is disabled by default.

FillHandle (API Docs)

This feature adds a fill handle to a Grid range selection, which when dragged, fills the cells being dragged over with values based on the values in the original selected range. This is similar to functionality normally seen in various spreadsheet applications.

This feature is disabled by default.

Filter (API docs)

Enables the user to filter rows, either by using the cell context menu or through headers.

This feature is disabled by default.

Right click a cell or click the icon in a header in the demo below to see the options:

FilterBar (API docs)

Similar to the Filter feature, but displays fields for filtering directly in the headers.

This feature is disabled by default.

Try it out in this demo:

Group (API docs)

Allows grouping of rows in the Grid. Groups consists of all rows with the same value in the column by which the Grid is being grouped.

This feature is enabled by default.

Click on group headers to expand/collapse the group:

GroupSummary (API docs)

Used in combination with Group feature, displays a summary bar at the bottom of each group.

This feature is disabledby default.

This demo has it enabled:

LockRows (API Docs)

A feature which pins records which fit certain criteria to the top of the grid.

This feature is disabled by default.

This demo has it enabled:

MergeCells (API Docs)

This feature merges cells that have the same value in sorted columns configured to mergeCells.

This feature is disabled by default.

PdfExport (API Docs)

Generates PDF/PNG files from the Grid component.

This feature is disabled by default.

PinColumns (API Docs)

This feature allows users to pin columns to the start or end of the Grid. This improves data visibility and navigation in wide datasets without requiring additional subGrid configuration. When enabled, a Pin columns option is added to both the column header and cell context menus.

This feature is disabled by default.

This demo has it enabled:

Print (API Docs)

Allows printing Grid contents using browser print dialog.

This feature is disabled by default.

QuickFind (API docs)

Quick searching within a column, just click a cell and start typing.

This feature is disabled by default.

Click any cell in this demo and type something:

RegionResize (API docs)

Displays a splitter that allows the user to resize the regions when using a grid with locked & normal columns.

This feature is disabled by default.

Drag the splitter to resize or click the icons in it to expand/collapse:

RowCopyPaste (API Docs)

Allow using [Ctrl/CMD + C/X] and [Ctrl/CMD + V] to copy/cut and paste rows. Also makes cut, copy and paste actions available via the cell context menu.

This feature is enabled by default.

RowExpander (API Docs)

Enables expanding of Grid rows by either row click or double click, or by adding a separate Grid column which renders a button that expands or collapses the row.

This feature is disabled by default.

RowReorder (API Docs)

Allows user to reorder rows by dragging them. To get notified about row reorder listen to change event on the grid store.

This feature is disabled by default.

RowResize (API Docs)

Enables user to change row height by dragging the bottom row border.

This feature is disabled by default.

Search (API docs)

Search has functionality for searching the grid, but it does not have any input UI. That needs to be supplied by the application.

This feature is disabled by default.

This demo uses a basic text field to search from:

Sort (API docs)

Sort by a single or multiple columns, either by clicking headers or by using their context menus.

This feature is enabled by default.

This demo has a default sorter defined:

Split (API Docs)

This feature allows splitting the Grid into multiple views, either by using the cell context menu, or programmatically by calling split().

This feature is disabled by default.

StickyCells (API Docs)

A feature which pins configurable content from a grid row to the top of the grid while the row scrolls off the top but is still visible.

This feature is disabled by default.

Stripe (API docs)

Makes every other rows background have a different color, also hides bottom border of each row. This feature is disabled by default. Grid with striped rows:

Summary (API docs)

Summaries defined per column are displayed in a footer bar.

This feature is disabled by default.

Try changing some values, it will updated the summaries:

Tree (API docs)

Turns the grid into a tree. Requires exactly one TreeColumn to be present.

This feature is disabled by default.

If you want to use this feature, we recommend that you use TreeGrid instead of Grid since it has what is needed included by default.

TreeGroup API Docs

A feature that allows transforming a flat dataset (or the leaves of a hierarchical) into a tree by specifying a record field per parent level. Parents are generated based on each leaf's value for those fields.

This feature is disabled by default.

Importing features from sources

A feature is registered when the application imports it. When using the regular module/umd bundle, this is done automatically, as the bundle encapsulates all code inside. However, when utilizing sources or thin bundles, a feature might not be imported by default. For any feature not enabled by default, it is essential to ensure that you have imported it to be able to use it.

Example:

import Grid from 'PATH_TO_SOURCE/Grid/view/Grid.js';
import 'PATH_TO_SOURCE/Grid/feature/Filter.js';

const grid = new Grid({
    features : {
        filter : {
            // feature config
        }
    }
});

Grid features

Enabling/disabling and configuring features

Built-in features

AI (API docs)

AIFilter (API docs)

CellCopyPaste (API Docs)

CellEdit (API docs)

RowEdit (API docs)

CellTooltip (API docs)

Charts (API docs)

ColumnAutoWidth (API Docs)

ColumnDragToolbar (API docs)

ColumnPicker (API docs)

ColumnRename (API Docs)

ColumnReorder (API docs)

ColumnResize (API docs)

CellMenu (API docs)

HeaderMenu (API docs)

ExcelExporter (API Docs)

FileDrop (API Docs)

FillHandle (API Docs)

Filter (API docs)

FilterBar (API docs)

Group (API docs)

GroupSummary (API docs)

LockRows (API Docs)

MergeCells (API Docs)

PdfExport (API Docs)

PinColumns (API Docs)

Print (API Docs)

QuickFind (API docs)

RegionResize (API docs)

RowCopyPaste (API Docs)

RowExpander (API Docs)

RowReorder (API Docs)

RowResize (API Docs)

Search (API docs)

Sort (API docs)

Split (API Docs)

StickyCells (API Docs)

Stripe (API docs)

Summary (API docs)

Tree (API docs)

TreeGroup API Docs

Importing features from sources

Contents