All Versions
27
Latest Version
Avg Release Cycle
14 days
Latest Release
1236 days ago

Changelog History
Page 2

  • v4.1.0 Changes

    July 26, 2020 
    rowReordering: true

    Demo: https://komarovalexander.github.io/ka-table/#/row-reordering

    And also:

  • v4.0.1 Changes

    July 19, 2020

    What was done

    1. childComponents setting for customization (instead of childAttributes)

    this is a list of child components which user can override at this time (list can be extended by request):

    export class ChildComponents {
  public cell?: ChildComponent<ICellProps>; 
  public cellEditor?: ChildComponent<ICellEditorProps>; 
  public cellText?: ChildComponent<ICellTextProps>; 
  public dataRow?: ChildComponent<IDataRowProps>;
  public detailsRow?: ChildComponent<IDataRowProps>;
  public filterRowCell?: ChildComponent<IFilterRowEditorProps>;
  public groupCell?: ChildComponent<IGroupRowProps>;
  public groupRow?: ChildComponent<IGroupRowProps>;
  public headCell?: ChildComponent<IHeadCellProps>;
  public noDataRow?: ChildComponent<INoDataRowProps>;
  public table?: ChildComponent<ITableProps>;
  public tableHead?: ChildComponent<ITableHeadProps>;
}

    ChildComponent is a class with two settings:

    export class ChildComponent<TProps> {
  public elementAttributes?: (props: PropsWithChildren<TProps>) => ChildAttributesItem<TProps>;
  public content?: (props: PropsWithChildren<TProps>) => any;
}

    elementAttributes - function which returns attributes for particular component element

     childComponents={{
  table: {
    elementAttributes: (props: ITableProps) => ({
      className: 'table table-striped table-hover table-bordered'
    })
  }
}}

    content - function overrides component content

        childComponents={{
        cellEditor: {
          content: (props) => {
            switch (props.column.key) {
              case 'passed': return <CustomLookupEditor {...props}/>;
              case 'name': return <CustomEditor {...props}/>;
            }
          }
        }
      }}

    the ability to set up nested fields in one property using the dots #62

    tableProps.search option renamed to tableProps.searchText

    💥 Breaking Changes

    Because childComponents covers almost all cases for grid elements customization, API has been reworked.

    1. component customization properties in columns moved to childComponents

    Before:

      columns:[{ key: 'columnKey', cell: (props) => <AlertCell {...props}/> ... }]`

    After:

     childComponents={{
        cellText: {
          content: (props) => {
            switch (props.column.key) {
              case 'columnKey': return <AlertCell {...props}/>;
            }
            // don't return anything for using default value
          }
        }
      }}

    there is a list of settings which were in the column and their names in childComponents:

    • cell -> cellText (cell in childComponents is a parent for cellText & cellEditor)
    • editor -> cellEditor
    • filterRowCell -> filterRowCell
    • groupCell -> groupCell
    • headCell -> headCell
    1. component customization properties in ITableProps also moved to childComponents (the same way as in (1)):
    • dataRow -> dataRow
    • groupRow -> groupRow
    • detailsRow -> detailsRow

    1. column.fieldParents were removed
      before:

      key: 'field', fieldParents: ['parent1', 'parent2']

    after:

    key: 'parent1.parent2.field',

    1. column.format & column.search & column.validation functions were moved to ITableProps. params became one object, and column option was added to this object
      before:

      columns: [{ key: 'price', format: (value: number) => { return $${value}; }, validation: (value) => { return value ? '' : 'value must be specified'; } }, { dataType: DataType.Boolean, key: 'passed', search: (searchText?: string, rowData?: any) => { return (searchText === 'false' && !rowData.passed) || (searchText === 'true' && rowData.passed); }, }]

    after:

    format: ({ column, value }) => {
    if (column.key === 'price'){
      return `$${value}`;
    }
},
search: ({ searchText, rowData, column }) => {
    if (column.key === 'passed'){
      return (searchText === 'false' && !rowData.passed) || (searchText === 'true' && rowData.passed);
    }
},
validation: ({ column, value }) => {
    if (column.key === 'price'){
      return value ? '' : 'value must be specified';
    }
 },

    search was renamed to searchText, (because search is used for another purpose - see (4))

    childAttributes were removed, use childComponents.[componentName].elementAttributes instead.
    before:

    childAttributes={{
  table: {
    className: 'custom-editor-demo-table'
  } 
}}

    after:

    childComponents={{
  table: {
    elementAttributes:{
      className: 'custom-editor-demo-table'
    }
  } 
}}

    🚚 1. All component props moved to /props directory (except for ITableProps - they are in root) 🚚 2. A lot of Redundant types were removed (old way -> new way to use):

    • CellFunc -> React.FC<ICellContentProps>
    • React.FC<PropsWithChildren<ICellContentProps>> -> React.FC<ICellContentProps>
    • DataRowFunc -> React.FC<IDataRowProps>
    • React.FC<PropsWithChildren<IDataRowProps>> -> React.FC<IDataRowProps>
    • EditorFunc -> React.FC<ICellEditorProps>
    • React.FC<PropsWithChildren<ICellEditorProps>> -> React.FC<ICellEditorProps>
    • FilterRowFunc -> React.FC<IFilterRowEditorProps>
    • React.FC<PropsWithChildren<IFilterRowEditorProps>> -> React.FC<IFilterRowEditorProps>
    • GroupCellFunc -> React.FC<IGroupRowProps>
    • React.FC<PropsWithChildren<IGroupRowProps>> -> React.FC<IGroupRowProps>
    • GroupRowFunc -> React.FC<IGroupRowProps>
    • HeaderCellFunc -> React.FC<IHeadCellProps>
    • React.FC<PropsWithChildren<IHeadCellProps>> -> React.FC<IHeadCellProps>

    1. Signatures for the next functions were changed:

      type FormatFunc = (value: any) => any; // changed to: type FormatFunc = (props: { value: any, column: Column }) => any;

      type SearchFunc = (searchText?: string, rowData?: any, column?: Column) => boolean; // changed to: type SearchFunc = (props: { searchText: string, rowData: any, column: Column }) => boolean;

      type ValidationFunc = (value: any, rowData?: any) => string | void; // changed to: type ValidationFunc = (props: { value: any, rowData: any, column: Column }) => string | void;

    2. columnUtils, dateUtils & typeUtils were renamed to kaColumnUtils, kaDateUtils, kaTypeUtils

    3. .ka-group-column* classes were renamed to .ka-group-cell*

    4. IPagingProps for settings was renamed to PagingOptions

  • v3.8.1 Changes

    July 11, 2020

    📄 Docs: http://ka-table.com/docs_props.html#column
    Demo: https://komarovalexander.github.io/ka-table/#/column-resizing

  • v3.7.1 Changes

    May 31, 2020

    pagesCount sets the count of pages for specific data and disables local data pagination:

    paging: {
 pagesCount?: number; 
 // ....
}

    ⚡️ also the action creator to update pagesCount value was added:

    updatePagesCount(pagesCount: number)

    Remote Data Demo

  • v3.6.1 Changes

    May 31, 2020

    🆕 new options:

      detailsRows: [1], // ids of rows, which details are shown
  detailsRow: DetailsRow, // detail row component

    image

    to add custom attributes to the details row element:

      childAttributes={{
    detailsRow: {
       style: {
         backgroundColor: '#eee'
       }
     }
  }}

  • v2.10.1 Changes

    February 23, 2020
    1. Select / Deselect all rows Demo
    2. Single selection action Demo

  • v2.9.4 Changes

    February 16, 2020

    #29
    🚀 Horizontal scroll bar works with header and body starting from this release
    https://komarovalexander.github.io/ka-table/#/many-columns

  • v2.6.1 Changes

    February 11, 2020

    🆕 New Feature: #32
    🛠 Fix: #33

    🆕 new options for group customization have been added:

    groupRow
    Option customizes whole group row and allows to control empty spaces and override a group arrow
    Demo
    📄 Docs
    image

    column.groupCell
    Option customizes only a group text cell, it does not change empty spaces and a group arrow
    Demo
    📄 Docs
    image

  • v2.5.4 Changes

    January 27, 2020

    issues: #26 #24
    PRs: #27 #28

  • v2.5.3 Changes

    January 25, 2020

    fieldParents option has been added for this purpose

    const data = [{ 
    representative: {
        name: 'Alex'
    }
}, { 
    representative: {
        name: 'Mike'
    }
}]
const tableOption: ITableOption = {
  columns: [{
      field: 'name', // field name
      key: 'representative.name', // just an unique value
      fieldParents: ['representative'] // this value contains names of parent fields (for acces to nested field) 
    }
  ],
  //...
};
<Table {...tableOption} data={data} />