Skip to main content

AgGrid Table

The AgGrid table component allows you to display an agnostic grid table.


Guide

If you are new to Ag Grid, check out our Introduction guide.

The following section details AgGrid Table component's specific settings. For more details on the App Editor, check the dedicated documentation or the App Editor Quickstart:

AgGird Table Input

TypeConnectableTemplatableDefaultDescription
Array<Object>truefalseThe table data.

Controls

getAgGrid: Use the getAgGrid function to get the ag-grid instance of a table.

setSelectedIndex: Use the setSelectedIndex function to select a row in a table or an AG Grid table.

Table Actions

AgGrid Table can define actions that will be displayed in each row of the table. An action is a component that cannot be moved.

Available components are:

AgGrid Actions

AgGrid Table configuration

NameTypeConnectableTemplatableDefaultDescription
Column DefsobjecttruefalseId, Name, AgeThe definition of the columns & their name.
FlexbooleanfalsefalsetrueAllows you to distribute available space among multiple elements to control their relative sizes and positions.
All EditablebooleanfalsefalsefalseWhether you want all columns to be editable.
Multiple SelectablebooleanfalsefalsefalseMake multiple rows selectable at once.
Row Multiselect With ClickbooleanfalsefalsetrueIf multiple selectable, allow multiselect with click.
PaginationbooleanfalsefalsefalseWhether you want pages on your table.
Select First Row By DefaultbooleanfalsefalsefalseWhether you want the first row to be selected by default.
Extra Configobjecttruefalse{}Extra configuration for the AgGrid table.
CompactnessselecttruefalsenormalChange the row height (normal, compact, comfortable).

Outputs

NameTypeDescription
resultobjectThe AgGrid table data.
loadingbooleanThe loading state of the AgGrid table component
selectedRowobjectThe selected row
selectedRowIndexnumberThe selected row index
selectedRowsarrayThe selected rows
pagenumberThe current page
newChangesobjectThe latest updated row