Definition
Action is an object which contains the type and payload
{
type: string,
...payload
}
Predefined actions
Predefined actions have action creator functions for shorter way to create actions.
UI has predefined behavior and some actions are executed out-of-the-box (OOTB) in the response on events in the UI.
All of actions below are processed by kaReducer:
| Type | Action | ActionCreator | kaReducer | |
|---|---|---|---|---|
| ‘ClearAllFilters’ | { type:’ClearAllFilters’ } |
clearAllFilters() | no | clears all table filters |
| ‘ClearFocused’ | { type:’ClearFocused’ } |
clearFocused() | no | sets focused as undefined |
| ‘ClearSingleAction’ | { type:’ClearSingleAction’ } |
clearSingleAction() | no | sets singleAction as undefined |
| ‘CloseEditor’ | { type:’CloseEditor’, rowKeyValue: any, columnKey: string } |
closeEditor( rowKeyValue, columnKey ) |
yes | removes cell from editableCells note: when EditingMode.Cell is enabled table calls CloseEditor action each time editor loses focus |
| ‘CloseRowEditors’ | { type:’CloseRowEditors’, rowKeyValue: any } |
closeRowEditors( rowKeyValue ) |
no | removes row cells from editableCells |
| ‘DeleteRow’ | { type:’DeleteRow’, rowKeyValue: any } |
deleteRow( rowKeyValue ) |
no | deletes row from data |
| ‘DeselectAllFilteredRows’ | { type:’DeselectAllFilteredRows’} |
deselectAllFilteredRows() | no | remove all filtered items ids of data to selectedRows |
| ‘DeselectAllRows’ | { type:’DeselectAllRows’} |
deselectAllRows() | no | clears selectedRows |
| ‘DeselectAllVisibleRows’ | { type:’DeselectAllVisibleRows’} |
deselectAllVisibleRows() | no | remove all visible items ids of data to selectedRows |
| ‘DeselectRow’ | { type:’DeselectRow’, rowKeyValue: any } |
deselectRow( rowKeyValue ) |
no | removes row id from selectedRows |
| ‘DeselectRows’ | { type:’DeselectRows’, rowsKeyValues: any } |
deselectRows( rowsKeyValues ) |
no | removes rows ids from selectedRows |
| ‘GroupColumn’ | { type:’GroupColumn’, columnKey: string } |
groupColumn( columnKey ) |
no | groups columnKey |
| ‘HideColumn’ | { type:’HideColumn’, columnKey: any } |
hideColumn( rowKeyValue ) |
no | sets visible=false for specific column |
| ‘HideLoading’ | { type:’HideLoading’ } |
hideLoading() | no | set loading = false |
| ‘HideNewRow’ | { type:’HideNewRow’ } |
hideNewRow() | no | removes row cells from editableCells |
| ‘InsertColumn’ | { type:’InsertColumn’, column: Column, index: number } |
insertColumn( column, index) |
no | Inserts column to specific position in the columns |
| ‘InsertRow’ | { type:’InsertRow’, rowData: any, options: { rowKeyValue: any, insertRowPosition: [‘after’ or ‘before’]} } |
insertRow( rowData, options) |
no | Inserts row to specific position in the data |
| ‘LoadData’ | { type:’LoadData’ } |
loadData() | no | notifies grid about time to reload its data |
| ‘MoveColumnBefore’ | { type:’MoveColumnBefore’, columnKey: string, targetColumnKey: string } |
moveColumnBefore(settings) | no | move columnKey to position before targetColumnKey in columns |
| ‘MoveFocusedDown’ | { type:’MoveFocusedDown’, settings?: { end?: boolean } } |
moveFocusedDown(settings) | no | move focused one cell down |
| ‘MoveFocusedLeft’ | { type:’MoveFocusedLeft’, settings?: { end?: boolean } } |
moveFocusedLeft(settings) | no | move focused one cell left |
| ‘MoveFocusedRight’ | { type:’MoveFocusedRight’, settings?: { end?: boolean } } |
moveFocusedRight(settings) | no | move focused one cell right |
| ‘MoveFocusedUp’ | { type:’MoveFocusedUp’, settings?: { end?: boolean } } |
moveFocusedUp(settings) | no | move focused one cell up |
| ‘MoveColumnToIndex’ | { type:’MoveColumnToIndex’, columnKey: string, index: number } |
moveColumnToIndex(settings) | no | move columnKey to index position in columns |
| ‘OpenAllEditors’ | { type:’OpenAllEditors’} |
openAllEditors() | no | adds each data cell to editableCells |
| ‘OpenEditor’ | { type:’OpenEditor’, rowKeyValue: any, columnKey: string, } |
openEditor( rowKeyValue, columnKey ) |
yes | add cell to editableCells |
| ‘OpenRowEditors’ | { type:’OpenRowEditors’, rowKeyValue: any } |
openRowEditors( rowKeyValue ) |
no | add row cells to editableCells |
| ‘ReorderColumns’ | { type:’ReorderColumns’, columnKey: any ,targetColumnKey: any } |
rorderColumns( columnKey , targetColumnKey ) |
yes | place columnKey to the position of targetColumnKey |
| ‘ReorderRows’ | { type:’ReorderRows’, rowKeyValue: any ,targetRowKeyValue: any } |
reorderRows( rowKeyValue , targetRowKeyValue ) |
yes | place rowKeyValue to the position of targetRowKeyValue |
| ‘ResizeColumn’ | { type:’ResizeColumn’, columnKey: string ,width: number } |
resizeColumn( columnKey , width ) |
yes | chane column width |
| ‘SaveAllEditors’ | { type:’SaveAllEditors’} |
saveAllEditors() | no | saves editableCells editorValues to data |
| ‘SaveNewRow’ | { type:’SaveNewRow’, rowKeyValue: any, validate?: boolean } |
saveNewRow( rowKeyValue, settings?: { validate?: boolean } ) |
no | Saves editor values to the new item of data and removes row cells from editableCells. Settings is optional: validate - validate values before save, do not save if validation is unsuccessful. |
| ‘SaveRowEditors’ | { type:’SaveRowEditors’, rowKeyValue: any, closeAfterSave?: boolean, validate?: boolean } |
saveNewRow( rowKeyValue, settings?: { validate?: boolean } ) |
no | Saves editor values to *data** and removes row cells from *editableCells*. Settings is optional: validate - validate values before save, do not save and do not close if validation is unsuccessful. |
| ‘Search’ | { type:’Search’, searchText: string } |
search( searchText ) |
no | change searchText option |
| ‘SelectAllRows’ | { type:’SelectAllRows’ } |
selectAllRows() | no | add all items ids of data to selectedRows |
| ‘SelectAllFilteredRows’ | { type:’SelectAllFilteredRows’ } |
selectAllFilteredRows() | no | add all filtered items ids of data to selectedRows |
| ‘SelectAllVisibleRows’ | { type:’SelectAllVisibleRows’ } |
selectAllVisibleRows() | no | add all visible items ids of data to selectedRows |
| ‘SelectRow’ | { type:’SelectRow’, rowKeyValue: any } |
selectRow( rowKeyValue ) |
no | add row id to selectedRows |
| ‘SelectRows’ | { type:’SelectRows’, rowsKeyValues: any } |
selectRows( rowsKeyValues ) |
no | add rows ids to selectedRows |
| ‘SelectRowsRange’ | { type:’SelectRowsRange’, rowKeyValueFrom: any, rowKeyValueTo: any } |
selectRowsRange( rowKeyValueFrom, rowKeyValueTo ) |
no | rowKeyValueFrom, rowKeyValueTo describe start and end of visible elements range, all ids added to selectedRows |
| ‘SelectSingleRow’ | { type:’SelectSingleRow’, rowKeyValue: any } |
selectSingleRow( rowKeyValue ) |
no | set selectedRows as an array with one row id |
| ‘SetFocused’ | { type:’SetFocused’, focused: any } |
setFocused( focused ) |
no | set focused property |
| ‘SetSingleAction’ | { type:’SetSingleAction’, singleAction: any } |
setSingleAction( singleAction ) |
no | set singleAction property |
| ‘ShowColumn’ | { type:’ShowColumn’, columnKey: any } |
showColumn( rowKeyValue ) |
no | sets visible=true for specific column |
| ‘ShowLoading’ | { type:’ShowLoading’, text?:string } |
showLoading(text?) | no | set loading = true and updates the text if text is specified |
| ‘ShowNewRow ‘ | { type:’ShowNewRow ‘ } |
showNewRow() | no | add new row cells to editableCells |
| ‘UngroupColumn’ | { type:’UngroupColumn’, columnKey: string } |
ungroupColumn( columnKey ) |
no | ungroups columnKey |
| ‘UpdateCellValue’ | { type:’UpdateCellValue’, rowKeyValue: any, columnKey: string, value: any, } |
changeCellValue( rowKeyValue, columnKey, value ) |
yes | update data |
| ‘UpdateData’ | { type:’UpdateData’, data: any[] } |
updateData( data ) |
no | update data |
| ‘UpdateEditorValue’ | { type:’UpdateEditorValue’,, rowKeyValue: any, columnKey: string value: any, } |
updateEditorValue( rowKeyValue, columnKey, value ) |
no | update editorCell in editableCells |
| ‘UpdateFilterRowOperator’ | { type:’UpdateFilterRowOperator’, columnKey: string, filterRowOperator: string } |
updateFilterRowOperator( columnKey, filterRowOperator ) |
no | update filterRowOperator for specific column |
| ‘UpdateFilterRowValue’ | { type:’UpdateFilterRowValue’, columnKey: string, filterRowValue: any } |
updateFilterRowValue( columnKey, filterRowValue ) |
yes | update filterRowValue for specific column |
| ‘UpdateGroupsExpanded’ | { type:’UpdateGroupsExpanded’, groupKey: any[] } |
updateGroupsExpanded( groupKey ) |
yes | add/remove group id to/from groupsExpanded |
| ‘UpdateHeaderFilterValues’ | { type:’UpdateHeaderFilterValues’, columnKey: string, item: any, checked: boolean } |
updateHeaderFilterValues( columnKey, item, checked ) |
yes | fires when user selects/deselects value in the header filter |
| ‘UpdateHeaderFilterPopupState’ | { type:’UpdateHeaderFilterPopupState’, columnKey: string, isHeaderFilterPopupShown?: boolean } |
updateHeaderFilterPopupState( columnKey, isHeaderFilterPopupShown ) |
yes | shows/hides the header filter popup |
| ‘UpdateHeaderFilterSearchValue’ | { type:’UpdateHeaderFilterSearchValue’, columnKey: string, headerFilterSearchValue: string } |
updateHeaderFilterSearchValue( columnKey, headerFilterSearchValue ) |
yes | shows/hides the header filter popup |
| ‘UpdatePopupPosition’ | { type:’UpdatePopupPosition’, x: number, y: number } |
updatePopupPosition( popupPosition: { x: number, y: number } ) |
yes | fires when header filter popup is shown |
| ‘UpdatePageIndex’ | { type:’UpdatePageIndex’, pageIndex: number, } |
updatePageIndex( pageIndex ) |
yes | update paging.pageIndex option and show new page data |
| ‘UpdateSortDirection’ | { type:’UpdateSortDirection’, columnKey: string } |
updateSortDirection( columnKey ) |
yes | update sortDirection to the oposite for specific column |
| ‘UpdateTreeGroupsExpanded’ | { type:’UpdateTreeGroupsExpanded’, rowKeyValue: any } |
updateTreeGroupsExpanded( rowKeyValue ) |
yes | adds/removes rowKeyValue to/from treeGroupsExpanded |
| ‘Validate’ | { type:’Validate’} |
validate() | no | adds/removes validationMessage to/from editableCells items |
Custom actions
Custom actions also can be dispatched and processed by dispatch function or custom reducer:
// declare const and action creator (optional)
export const CUSTOM_ACTION_TYPE = "CUSTOM_ACTION_TYPE";
export customAction = (myData) => ({
type: CUSTOM_ACTION_TYPE, // required
myData // optional payload
});
// dispatch custom action
dispatch(customAction({ value: 5 }));
const [tableProps, changeTableProps] = useState(tablePropsInit);
// process action in the dispatch or pass it to custom reducer
const dispatch: DispatchFunc = (action) => {
switch (action.type) {
case CUSTOM_ACTION_TYPE:
// action.myData.value == 5
// do action things or pass it to the custom reducer
break;
default:
changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
}
};
return (
<Table
{...tableProps}
dispatch={dispatch} // pass dispatch to be able to obtain actions from Table
/>
);