AgGrid Table

The AgGrid table component wraps Ag Grid so you can drop a fully-featured data grid into an Orvanta app: sortable and filterable columns, inline cell editing, row selection, and row-level actions, without writing any grid boilerplate yourself.

AgGrid table input

Property	Type	Connectable	Templatable	Default	Description
Data	Array<Object>	true	false	—	The table data, which can be static or dynamic through eval functions or inline scripts

Static data example

[
  {
    "id": 1,
    "name": "John Doe",
    "age": 25
  },
  {
    "id": 2,
    "name": "Jane Doe",
    "age": 30
  }
]

Dynamic data example

export async function main() {
  const res = await fetch('https://api.sampleapis.com/recipes/recipes', {
    headers: { 'Content-Type': 'application/json' }
  });
  return res.json();
}

Controls

Two frontend script helpers give scripted control over the grid at runtime:

• getAgGrid(id): Returns the underlying ag-grid instance for the table, for calling the ag-grid API directly.
• setSelectedIndex(id, index): Programmatically selects a row by index.

Table actions

You can attach row-level actions to an AgGrid table by dropping these components into its actions slot:

• Button
• Toggle
• Select

Configuration properties

Name	Type	Connectable	Templatable	Default	Description
Column Defs	object	true	false	Id, Name, Age	Column definitions and names
Flex	boolean	false	false	true	Distributes available space among elements
All Editable	boolean	false	false	false	Makes all columns editable
Multiple Selectable	boolean	false	false	false	Allows selecting multiple rows
Row Multiselect With Click	boolean	false	false	true	Enables multiselect via clicking
Pagination	boolean	false	false	false	Enables table pagination
Select First Row By Default	boolean	false	false	false	Auto-selects the first row
Extra Config	object	true	false	{}	Additional AgGrid configuration
Compactness	select	true	false	normal	Row height options: normal, compact, comfortable
Wrap Actions	boolean	false	false	false	Wraps actions in the table
Footer	boolean	false	false	false	Shows the table footer
Custom Actions Header	string	true	false	—	Custom header for actions

Outputs

Name	Type	Description
result	object	The AgGrid table data
loading	boolean	Loading state
selectedRow	object	The selected row
selectedRowIndex	number	The selected row index
selectedRows	array	All selected rows
page	number	Current page number
newChanges	object	Latest updated row
ready	boolean	Component readiness state
inputs	object	Action outputs organized by action ID
filters	object	Applied filters
displayRowCount	number	Number of rows displayed

Column definitions

Column objects support these properties:

Property	Type	Description
field	string	Field name to display
headerName	string	Display name (if different from field)
editable	boolean	Allows user editing
minWidth	number	Minimum column width
flex	number	Allocates remaining space based on flex value
hide	boolean	Hides the column
valueFormatter	string	Formats values (currencies, dates, percentages, etc.)
sort	string	Sort order: asc or desc
filter	boolean	Enables column filtering
cellRendererType	string	Cell renderer type (link, image, button, etc.)

AgGrid infinite table

For datasets too large to load in one go, use the AgGrid Infinite Table variant instead. Rather than binding to a static array, it calls a runnable per page of rows and passes it five managed fields the runnable can consume as parameters:

• $1 (limit): Rows per fetch
• $2 (offset): Rows to skip
• $3 (search): Current value of the grid’s search bar
• orderBy: Column to sort by
• isDesc: Sort direction

SQL example

SELECT * FROM products
WHERE title ILIKE '%' || $3 || '%'
LIMIT $1::INT OFFSET $2::INT;

Enterprise variants

On Enterprise-tier workspaces, both table types are also available as Enterprise variants that unlock AgGrid Enterprise capabilities (e.g. row grouping, pivoting, and range selection):

• AgGrid Table EE
• AgGrid Infinite Table EE