Data Grid

The DataGrid is a powerful and feature-rich widget for displaying and managing tabular data. It provides a flexible and interactive interface for users to view, sort, filter, group, edit, and export large datasets efficiently.

It supports a wide range of data shaping operations, various editing modes, and advanced features like master-detail views and automatic column configuration.

Screenshot of a fully featured data grid including sorting, filtering, grouping, editing, exporting and master-detail view.

Data Binding

Connect the widget to your application's logic by dragging the corresponding items from the Flow Builder.

Input

Property	Type	Description
onChange	Object	Fired when a row is successfully updated. The payload is the complete, updated data object for that row.
onInsert	Object	Fired when a new row is successfully added. The payload is the data object for the new row.
onDelete	Object or String	Fired when a row is deleted. The payload is the key of the deleted row.
onSelectionChange	Object or Array	Fired when the row selection changes. The payload is the selected row's data object or an array of objects if multi-selection is enabled.
onRowClick	Object	Fired when a user clicks on any part of a row.
onLinkClick	Object	Fired when a user clicks on a cell that has been configured as clickable. The payload includes the row data and an __origin__ property indicating which column was clicked.

Output

Property	Type	Description
rowFilter	Object	Applies a filter to the grid's rows. The object keys should match the dataField of the columns to be filtered, and the values are the filter criteria.
headerFilter	Object	Applies a filter from the column header. The object keys should match the dataField of the columns, and the values are the filter criteria.
isLoading	Boolean	When true, displays a loading indicator, useful for showing progress during data fetching.

Automatic Configuration

If you provide data to the widget without pre-defining any columns in the Data Settings, the widget will automatically inspect the first 100 data records. It will generate a column for each field, infer the data type (text, number, dateTime, media, etc.), and apply default settings. These automatically generated columns will then appear in the configuration panel for you to customize further.

Default view as generated by dragging random person data.

Configuration

Grid Settings

These properties control the overall appearance, behavior, and features of the grid.

Appearance

Label	Description	Type	Property
Paging Mode	Infinite Scrolling loads data as the user scrolls. Paged View uses traditional page navigation.	String	pagingMode
Show Borders	Toggles the visibility of the outer border of the grid.	Boolean	showBorders
Show Headers	Toggles the visibility of the column headers.	Boolean	showColumnHeaders
Show Vertical Lines	Toggles the visibility of vertical lines between columns.	Boolean	showColumnLines
Show Horizontal Lines	Toggles the visibility of horizontal lines between rows.	Boolean	showRowLines
Alternate Row Color	If true, applies a different background color to alternating rows.	Boolean	rowAlternationEnabled
Column Auto Width	If true, automatically adjusts column widths to fit their content.	Boolean	columnAutoWidth

Data Display

Label	Description	Type	Property
Selection Mode	Allows single or multiple row selection.	String	selectionMode
Allow Column Reordering	Allows users to drag and drop column headers to reorder them.	Boolean	allowColumnReordering
Allow Column Resizing	Allows users to resize columns by dragging the edge of the header.	Boolean	allowColumnResizing
Allow Column Pinning	Allows users to "pin" or "fix" columns to the left or right side of the grid.	Boolean	allowColumnFixing
Allow Column Choosing	Adds a column chooser button, allowing users to show or hide columns.	Boolean	allowColumnChoosing
Allow Multiple Column Sorting	Allows users to sort the grid by multiple columns (e.g., sort by Country, then by City).	Boolean	allowMultipleSorting
Allow Grouping	Allows users to drag column headers to a group panel to group data by that column.	Boolean	allowGrouping
Allow Searching	Adds a global search box to filter all data in the grid.	Boolean	allowSearching
Allow Row Filtering	Adds a filter row below the headers for per-column filtering.	Boolean	allowRowFiltering
Allow Header Filtering	Adds a filter icon to each column header for more advanced filtering options.	Boolean	allowHeaderFiltering
Allow Filter Building	Provides a powerful UI for creating complex filter criteria.	Boolean	allowFilterBuilding
Show Item Count	Displays a total count of items in the grid's summary area.	Boolean	showItemCount

Data Editing

Label	Description	Type	Property
Mode	The editing mode: cell, row, form, or popup.	String	mode
Allow Adding	Allows users to add new rows to the grid.	Boolean	allowAdding
Allow Updating	Allows users to edit existing rows.	Boolean	allowUpdating
Allow Deleting	Allows users to delete rows.	Boolean	allowDeleting
Show All Fields On Edit	If true, the editing form will show all fields, even those not visible as columns.	Boolean	showAllFieldsOnEdit

Data Export

Label	Description	Type	Property
Allow PDF Export	Adds a button to export the grid data to a PDF file.	Boolean	allowPdfExport
Allow Excel Export	Adds a button to export the grid data to an Excel file (.xlsx).	Boolean	allowExcelExport
Allow CSV Export	Adds a button to export the grid data to a CSV file.	Boolean	allowCsvExport
Allow Export Data Selection	If true, allows users to export only the selected rows.	Boolean	allowExportSelectedData
Hint text	A prefix for the export button text (e.g., "Export as"). The file type is added automatically.	String	exportHint

Data Settings

This is where you define the columns that make up your grid.

Label	Description	Type	Property
Data Field	The field from your data source that this column is bound to.	String	dataField
Column Name	The user-friendly text displayed in the column header.	String	caption
Visibility	Controls how the column is displayed: Visible, Detail (only in master-detail view), Hidden, or Removed.	String	visibility
Editing	Controls the editing state of the column: Optional, Required, Disabled, or Hidden in edit forms.	String	editing
Editor Widget	The editor to use when this column is being edited.	String	widget

Editor Widget Options

Each widget type has its own set of specific configuration options.

Text (text)

Label	Description	Type	Property
Is Clickable	If true, makes the text in this cell a clickable link that fires the onLinkClick event.	Boolean	isClickable

Number (number) / Slider (slider)

Label	Description	Type	Property
Minimum	The minimum allowed value.	Number	min
Maximum	The maximum allowed value.	Number	max
Default Value	The initial value of the editor.	Number	defaultValue
Precision	(number only) The number of decimal places to allow.	Number	precision
Currency	(number only) A currency symbol or code to display (e.g., $, €, EUR).	String	currency
Handle Large Numbers	(number only) Formats large numbers with abbreviations (e.g., 1,200,000 becomes 1.2M).	Boolean	handleLargeNumber

Dropdown (dropdown) / Tags (tags)

Label	Description	Type	Property
Discover Options	If true, automatically populates the dropdown options from the unique values in this column's data.	Boolean	discover
Options	A comma-separated list of predefined options.	String	options
Default Value	The initial selected value.	String	defaultValue

Switch (switch)

Label	Description	Type	Property
Switched On Text	Text displayed when the switch is ON.	String	switchedOnText
Switched Off Text	Text displayed when the switch is OFF.	String	switchedOffText

Date/Time (dateTime)

Label	Description	Type	Property
Date Type	The type of picker to display: Date Only, Time Only, or Date & Time.	String	dateType
Format Description	Choose between a Preset format or an Explicit, custom format.	String	formatDescription

Media (media)

Label	Description	Type	Property
Media Type	The type of media to display (png, jpeg, svg, pdf).	String	mediaType
Is Central Element	If true, the media is displayed as a large, central element in the edit form.	Boolean	isCentralElement
Thumbnail Size	The height (in pixels) of the media thumbnail displayed in the grid cell.	Integer	thumbnailSize

Tips and Tricks

Performance with Large Datasets

• Virtual Scrolling: The DataGrid is optimized for performance out-of-the-box. By default, it uses Infinite Scrolling (virtual paging mode), which renders only the rows currently visible in the viewport. This allows the grid to handle hundreds of thousands of rows smoothly without any noticeable lag.

• Data Shaping on the Server: While the DataGrid's client-side filtering, sorting, and grouping are highly efficient, for extremely large datasets (millions of rows), consider performing these operations on your database server. You can connect the DataGrid to a backend that supports these operations and let it handle the heavy lifting.

User Experience and Layout

• Master-Detail View: To avoid cluttering your main grid with too many columns, use the Master-Detail feature. Set a column's Visibility to Detail to hide it from the main grid. It will then be displayed in an expandable detail section for each row, providing a clean and organized way to show additional information.

• Column Management: Empower your users by enabling features like Allow Column Choosing, Allow Column Reordering, and Allow Column Resizing. This allows them to create a personalized view of the data that best suits their needs.

• Editing Modes: Choose the editing mode that best fits your use case. Cell mode is quick for minor changes, while Popup or Form mode provides a more structured editing experience for complex data entry.