Skip to content

Grouped Columns

Compare
Choose a tag to compare
@komarovalexander komarovalexander released this 08 Aug 20:43
· 579 commits to master since this release
339a589

#170 #153

Demo: https://komarovalexander.github.io/ka-table/#/grouped-columns
Docs: http://ka-table.com/docs_props.html#toc0

image

colGroup is used to set width #153 to support column resizing in this feature

  1. column has 2 new options: width & colGroup (width actually is syntax sugar and it is the same as colGroup.width)
  2. Table has new groupedColumns option:
{
  ...
  gropedColumns: [{
    public key!: string;
    public title?: string;
    public columnsKeys!: string[]; // list of children keys (can be Column or another GropedColumn)
  }]
}

recommendations:

  1. use column.width instead of column.styles.width - note: column.width should has bigger value because it will include padding as well (this is the difference between colGroup width and td width)

breaking changes:

  1. IPagingPagesProps was removed and pages property does not exist anymore in PagesSelector component
  2. removed filterRow js-autocalcutation. Its top position calculated according to $ka-header-cell-height scss variable
  3. Virtual scrolling does not show empty element in top or bottom if its height === 0 https://github.com/komarovalexander/ka-table/pull/173/files#diff-feb5dffdce3a5adf4ad4d12f2fb22e40fe19728bd485828cb63988e90873a4aaR44 - if you have infinite scrolling add this offset value to condition https://github.com/komarovalexander/ka-table/pull/173/files#diff-984127a1c2b9946bf5daf8a43cb4829c5e85d407421efeaa3c172c15e88c19b1R52
  4. New colgroup element was added to mockup
  5. resizeColumn(key, newWidth) is used instead of {type: 'HeadCellResizeStateAction', width: 50}