ka-table UI is the Table component

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

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


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


  // 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 (
          onBlur={() => {
            dispatch(updateCellValue(rowKeyValue, column.key, editorValue));
          onChange={(event) => {
          <option value={'true'}>True</option>
          <option value={'false'}>False</option>
      </div >

  // set editor for specific column of tableProps
  const tableProps: ITableProps = {
    columns: [
      // ...
        dataType: DataType.String,
        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



To override colors, sizes and paddings you can use sass valiables: default.scss

Demo: Custom Theme

3-rd party libraries

As ka-table is a real html table it can be easily used with bootstrap, material or other frameworks.

To use other frameworks styles add required css classes for table elements using childComponents:

Bootstrap Demo or Material UI Demo

In most cases there is no need to include ka-table/styles.scss - ka-table can be used with 3rd parties styles only.