Angular8 realizes the fixed effect of table table header

Time:2020-11-24

Recently, there is a requirement in the project. The header is fixed and the scroll bar is implemented internally. In addition to a single header, there are multiple headers (described in the next article).

design sketch:

表头固定

HTML structure

HTML结构

According to the region, it can be divided into three parts, and a total of four tables are combined into a whole table.
Then set the column width through col attribute. Note: the width here must be set to a fixed value.
The header filtering function has not been implemented for the time being.

切割分析

Horizontal and vertical scrolling effects

Listen to the main body table (light green part) scroll event, and synchronize the table (dark green part) in the head and the left fixed table (purple part in the red part) to scroll up and down

Code 1

$(this.tableContent.nativeElement).on('scroll', (e) => {
   $(this.fixedRowWrapper.nativeElement).prop('scrollTop', $(this.tableContent.nativeElement).prop('scrollTop'));
   //Method 1: set the scroll bar of the fixed column table at the head, and hide the scroll bar with the less style (if the compatibility of IE9 is not considered, it can be used. Less style reference code 2)
   // $(this.tableHeader.nativeElement).prop('scrollLeft', $(this.tableContent.nativeElement).prop('scrollLeft'))
   //Method 2: set the margin left attribute of the fixed header column table to a negative value, indirectly realizing the synchronous left scrolling effect of the fixed head column, compatible with IE9
   $(this.tableHeader.nativeElement).css({ marginLeft: `${-$(this.tableContent.nativeElement).prop('scrollLeft')}px` })
  })

Code 2

.ngx-table__header-inner {
      //Hide the scroll bar. The page div keeps scrolling horizontally, but does not support IE9. For compatibility, it is not used. In TS, it scrolls synchronously
      //Instead, it dynamically sets the NGX table__ Using margin left of header inner to realize rolling effect
      overflow: -moz-scrollbars-none;
      overflow-x: auto;
     -ms-overflow-style: none;

      &::-webkit-scrollbar {
       width: 0 !important;
       display: none;
     }
    }

Full code address

GitHub project address, you can click to visit if you need https://github.com/zjinger/ngx-TPR/tree/master/src/app/components/scroll-table

summary

The above is the introduction of angular8 table table table header fixed effect, I hope to help you, if you have any questions, please leave me a message, the editor will reply you in time. Thank you very much for your support to the developeppaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!