Group panel

Allowing end-users to group by columns in UI #255
demo: https://komarovalexander.github.io/ka-table/#/grouping

groupPanel: {
    public enabled?: boolean;
    public text?: string;
    public deep?: number;
}

new action creators have been added: moveColumnBefore, insertColumn(#233), moveColumnToIndex, groupColumn, ungroupColumn

new childComponents: emptyCell, groupPanel, groupPanelCell

extendedSort

#241
extendedSort allows fully customize sort logic, as a result you can use any extended sorting library, to implements different sort cases, such as MultipleSorting and others..

      extendedSort={(data, columns) => {
        let sortedColumns = columns.filter(c => c.sortDirection);
        if (sortedColumns.length === 0){
          return data;
        }
        sortedColumns = orderBy(sortedColumns, ['sortIndex'], ['asc']);
        const iteratee = sortedColumns.map(c => c.key);
        const order = sortedColumns.map(c => c.sortDirection === SortDirection.Ascend ? 'asc' : 'desc');
        return orderBy(data, iteratee, order);
      }}
      sortingMode={SortingMode.MultipleTripleStateRemote}

demo: https://komarovalexander.github.io/ka-table/#/sorting-extended

Add noData setting

      noData={{
          text?: string;
          hideHeader?: boolean; // hide table header in case of no data
      }}

childComponents.noDataCell

#281

childComponents: {
  noDataCell: {
    elementAttributes: () => ({
      colSpan: 1
    }),
  }
}

Add childComponents.detailsCell options

#281

childComponents: {
  detailsCell: {
    elementAttributes: () => ({
      colSpan: 1
    }),
  }
}

controlledPropsKeys

controlledPropsKeys is used to specify controlled properties in uncontrolled mode
default: ['searchText', 'loading'] if loading is enabled, ['searchText', 'loading', 'data', 'paging'] if loading is disabled

Uncontrolled mode

uncontrolled mode:

import React from 'react';

import { Table } from 'ka-table';
import { DataType, EditingMode, SortingMode } from 'ka-table/enums';

const OverviewDemo: React.FC = () => {
  return (
    <Table
      columns={[
        { key: 'column1', title: 'Column 1', dataType: DataType.String },
        { key: 'column2', title: 'Column 2', dataType: DataType.String },
        { key: 'column3', title: 'Column 3', dataType: DataType.String },
        { key: 'column4', title: 'Column 4', dataType: DataType.String },
      ]}
      data={dataArray}
      editingMode={EditingMode.Cell}
      rowKeyField={'id'}
      sortingMode={SortingMode.Single}
    />
  );
};

export default OverviewDemo;

controlled mode approach is the same as it was:

import React, { useState } from 'react';

import { ITableProps, kaReducer, Table } from 'ka-table';
import { DataType, EditingMode, SortingMode } from 'ka-table/enums';
import { DispatchFunc } from 'ka-table/types';

const tablePropsInit: ITableProps = {
  columns: [
    { key: 'column1', title: 'Column 1', dataType: DataType.String },
    { key: 'column2', title: 'Column 2', dataType: DataType.String },
    { key: 'column3', title: 'Column 3', dataType: DataType.String },
    { key: 'column4', title: 'Column 4', dataType: DataType.String }
  ],
  data: dataArray,
  editingMode: EditingMode.Cell,
  rowKeyField: 'id',
  sortingMode: SortingMode.Single
};

const OverviewDemo: React.FC = () => {
  const [tableProps, changeTableProps] = useState(tablePropsInit);
  const dispatch: DispatchFunc = action => {
    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
  };

  return <Table {...tableProps} dispatch={dispatch} />;
};

export default OverviewDemo;

Just increased minor version as there are no breaking changes

Add treeExpandButtonColumnKey option to specify the column where tree button should be shown

#262
example:

const tablePropsInit: ITableProps = {
  columns: [
    { key: 'name', title: 'Name', dataType: DataType.String },
    { key: 'productivity', title: 'Productivity', dataType: DataType.Number },
  ],
  //...
  treeExpandButtonColumnKey: 'productivity',
  //...
};

Add column.isSortable & childComponents.sortIcon

column.isSortable - disable sorting for specific column
childComponents.sortIcon - gives ability to customize sortIcon component

  columns: [{
      ...
      isSortable: false,
      ...
    }],
  childComponents={{
        sortIcon: {
           ...
        }
  }}

Demo: https://komarovalexander.github.io/ka-table/#/sorting
Docs: http://ka-table.com/docs_props.html#toc1

Loading panel customization

        childComponents={{
          loading: {
            content: ({ text }) => (
              <>
                <img src='...'/>
                <div className='ka-loading-text'>{text}</div>
              </>
            )
          }
        }}