Frozen Headers

Webix JS
1

am wondering if it’s possible to ‘freeze’ header rows, in addition to columns.

ie: assume that you want the first 3 rows in a table to be fixed, how best to implement that?

2

best I’ve been able to come up with so far is to put components in the header using html:

{view: ‘datatable’, height: 500,

columns: [

   {id: "column_one", width: 230, header: [

       "",

       "<div style='text-align: right'>Price:</div>",

       "<div style='text-align: right'>Total volume:</div>",

       "<div style='text-align: center; font-weight: bold'>Bidders</div>"

     ]},

     {id: 'previous', width: 150, header: [

       'Previous',

       "<input type='text' style='text-align: center'/>",

       "<input type='text' style='text-align: center'/>",

       ""

 ]}

]}

3

The other option I can think of is to use 2 datables, one for fixed header rows, and the other for non-fixed rows, with the horizontal scrollbars of the two tables synchronized.

However, that seems like functionality that’s better off in the Webix core.

4

There is no way to freeze header’s rows.
You can have multi-line headers though.
http://docs.webix.com/samples/15_datatable/12_header_footer/03_multiline.html

5

Can you share a sketch of desired UI ?

6

I tried multi-line headers, but my problem is that I need text input boxes in those headers (or at least, labels which have id’s so that I can edit their contents)

7

You can place any html in the header
http://webix.com/snippet/9a370be5

8

thanks