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

Changelog History
Page 2

  • v4.1.0

    July 26, 2020
    rowReordering: true
    

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

    And also:

  • v4.0.1

    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.7.1

    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

    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

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

    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

    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

    January 27, 2020

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

  • v2.5.3

    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} />