Documentation

Class: TableView

TableView

new TableView(options)

Table view with virtualization support

Parameters:
Name Type Description
options Object

the constructor options

Properties
Name Type Argument Default Description
classes Array.<string> <optional>
 []

the classes for the TABLE elements (content table and sticky/fixed header)
scrolling ScrollingConfig <optional>
 {virtualized: false, header: 'static'}

the scrolling related configurations
layout string <optional>
 'table'

the layout of the grid. can be 'table' or 'flex'

Extends

  • Backbone.View

Methods

_hookUpStickyHeader()

This is simulating { position: sticky }, but it's still far from perfect.

  1. For window viewport
    • Use { postion: fixed }
    • Adjust the width and the horizontal location on the fly
    • Put an dummy filler into the content flow to take the place of header

The issues are

  • If the subviews in header changes, they have to notify the grid manually to update the filler's size
  • The header doesn't follow the table tightly on horizontal scroll, as the scroll event is triggered after repaint for most browsers
  1. For element viewport
    • Use { position: relative }
    • Adjust the vertical location on the fly

The issues are

  • The header doesn't follow the table tightly on vertical scroll, as the scroll event is triggered after repaint for most browsers. The sticky header could be very jumpy on IE and Edge.

We wish all browsers support { position: sticky } in a not too far future. So that we can have a perfect solution with native support.