EditableTable

Special attributes

The EditableTable component requires a special property fieldConfig.

Configuration example:

{
  "fieldConfig": {
    "pbcToken": "",
    "formEntityToken": "",
    "relations": [
      {
        "colId": "parentDataId",
        "filterType": "text",
        "type": "equals",
        "filter": "$CURRENT_FORM_DATA_ID"
      }
    ]
  }
}

Container properties

All component configurations support Container properties at the first level.

Component properties

Name	Type	Default	Supports Variable Pattern	Description
className	string		✔️	The className of the component
style	object			The style of the component
simpleMode	bool	false		If true is set, all of them are sent to the request when submitting; if false is set, it will automatically be recognized as an incremental modification mode of { inserted, updated, deleted } when submitting.
columnDefs	array			The definition of the column of the table, supporting ag-grid all columnDefs
defaultColDef	object			ag-grid attributes of default column
dataUrl	ConditionalListOrSinglePropertyPropType(string)			Get data via dataUrl.
defaultValueDataUrl	string			The default value of the table is loaded and placed in inserted
dataFilters	ConditionalListPropertyPropType(DataFilters)		✔️	Fixed filter conditions hidden by requesting data source cannot be changed through the interface
dataResponseKeyPath	string	'results'		Take a certain subdata in response data as the result.
transformDataResponse	string			Convert the retrieved data, use the eval expression, this points to the retrieved data.
transformDefaultValueResponse	string			Convert the data obtained from defaultValueDataUrl, use the eval expression, this points to the data obtained
canAddRow	bool	true		Is it supported to add rows
newRowDefaultValues	object			Added default value for new rows
maxRowCount	number	Infinity		The maximum number of rows that can be increased
canDeleteRow	bool	true		Is it supported to delete rows
triggerDataFetchedOnGridReady	bool	true		Does the dataFetched event need to wait until grid ready to ensure that gridApi has a value before triggering

All the remaining componentsProps will be passed to the component root element（Table）。

JS API

The interface obtained through formApi.getFieldApi() is as follows:

Name	Type	Description
node	HTML Element	The root DOM element of the component
on	func	Bind to componentevent
gridApi	object	Ag-Grid's API interface, Official documentation
getComponentProps	() => object	Get all componentProps of component configuration
updateComponentProps	() => void	Update component's componentProps
refresh	() => void	Refresh table data
isSimpleMode	() => bool	Is it simpleMode mode
getRowData	() => array	Get all data in the form
getOldRowData	() => array	Get all data before the form is edited
getChangedData	() => { inserted: [], updated: [], deleted: [] }	Get the modified data for table calculations
addRow	(rows) => void	Add one or more rows of new data to the table. The rows parameter does not need to have an id attribute. The table will automatically add a random id and delete it when submitting the data.
updateRow	(rows) => void	Modify a row or multiple rows of data in a table, and use the id in the rows data to identify which row is modified.
removeRow	(rows) => void	Delete a row or multiple rows of data in the table, and use the id in the rows data to identify which row is modified.
getSelectedIds	(rows) => array	Returns an array of all ids in the selected row of the table

on eventType

Name	callback	Description
dataFetched	(formApi) => array	Triggered when the table obtains data through the data source configuration
addRow	(formApi) => array	Triggered when a new row is added to the table
deleteRow	(formApi) => array	Triggered when a table deletes a row