Definition

Action is an object which contains 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 UI OOTB kaReducer
‘CloseEditor’ {
type:’CloseEditor’,
rowKeyValue: any,
columnKey: string
}
closeEditor(
rowKeyValue,
columnKey
)
yes removes cell from editableCells
‘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
‘DeselectAllRows’ {
type:’DeselectAllRows’}
deselectAllRows() no clears selectedRows
‘DeselectAllFilteredRows’ {
type:’DeselectAllFilteredRows’}
deselectAllFilteredRows() no remove all filtered items ids of data to 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
‘HideLoading’ {
type:’HideLoading’
}
hideLoading() no set loading = false
‘HideNewRow’ {
type:’HideNewRow’
}
hideNewRow() no removes row cells from 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
‘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’,
searchValue: any
}
search(
searchValue
)
no change search 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
‘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
‘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
‘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
‘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

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
    />
  );