Definition

ka-table UI is the Table component

Table is stateless - every change of the UI can dispatch the action

  <Table
    {...tableProps} // render according to props
    dispatch={dispatch} // subscribe to dispatch to be able to change tableProps
  />

Elements

Every part of the UI (Row, GroupRow, Column, HeaderCell, Cell, Editors) is customizable and can be set up as a custom component (see props)

Pattern

  // custom lookup editor example

  // define editor component
  const CustomLookupEditor: React.FC<EditorFuncPropsWithChildren> = ({
    column, dispatch, rowKeyValue, value,
  }) => {
    const close = () => {
      dispatch(closeEditor(rowKeyValue, column.key));
    };
    const [editorValue, setValue] = useState(value);
    return (
      <div>
        <select
          className='form-control'
          autoFocus={true}
          defaultValue={editorValue}
          onBlur={() => {
            dispatch(updateCellValue(rowKeyValue, column.key, editorValue));
            close();
          }}
          onChange={(event) => {
            setValue(typeUtils.toBoolean(event.currentTarget.value));
          }}>
          <option value={'true'}>True</option>
          <option value={'false'}>False</option>
        </select>
      </div >
    );
  };

  // set editor for specific column of tableProps
  const tableProps: ITableProps = {
    columns: [
      // ...
      {
        dataType: DataType.Boolean,
        editor: CustomLookupEditor,
        key: 'passed',
        title: 'Passed',
      }
      // ...
    ],
    // ...
  };

Child Components

Attributes & Components of the child UI elements also can be customized using childComponents (see Events Demo, Custom Cell).

  const childComponents = {
    cell: {
      elementAttributes: (props) => ({
        className: 'my-cell-class', // add custom class to cell element
        onClick: (e, extendedEvent) => {  // additional onClick handler for cell
          const { childProps: { dispatch } } = extendedEvent;
          dispatch('MY_CELL_onClick', { extendedEvent });
        },
      }),
      content: (props) => props.column.key === 'someKey' && <div>Custom Content</div>; // default in case nothing is returned
    }
    dataRow: {
      elementAttributes: (props) => ({
        onContextMenu: (e, extendedEvent) => { // additional onContextMenu handler for dataRow
          extendedEvent.dispatch('MY_CELL_onContextMenu', { extendedEvent });
        },
      })
    }
  };

UI Actions

There are actions which ka-table UI dispatches in response to user interaction out-of-the-box:

Action Type UI event
‘CloseEditor’ click outside editor or Enter Key press (to apply value) or ESC press (to discard changes)
‘OpenEditor’ click by data cell
‘ReorderColumns’ drag and prop the column
‘ReorderRows’ drag and prop the row
‘ResizeColumn’ drag and drop of the right border of the column
‘UpdateCellValue’ click outside editor or Enter Key press - executes before ‘CloseEditor’ action
‘UpdateFilterRowValue’ each change of value in filter row editor
‘UpdateGroupsExpanded’ click by group arrow cell
‘UpdatePageIndex’ click by page number
‘UpdateSortDirection’ click by sort button