« Changelog History


ka-table v4.0.1 Release Notes

Release Date: 2020-07-19 // almost 4 years ago

  • 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