How to freeze header and left columns of a table output

[Nestor Montaño]

When we show a table report in a spreadsheet we usually freeze the header (1 or more rows) and some (1 or more again) left columns, is there a way to do this in a output table in shiny?

[Kirill Savin]

Possible with some dancing with CSS styles. You can override default bootstrap styles with yours by adding tags$style(type = 'text/css', 'insert your tags here') to ui.r or by creating a separate css file and linking it with tags$link(rel="stylesheet", type="text/css", href=*yourfile.css in www folder")

You may want to check for CSS styles here and here.

I may put up an example on weekend if you kindly remind me.

[Nestor Montaño]

Thanks, 

I have no experience with css so I'll read about it and give it a try.

[Monika Cichocka]

Hi Nestor. Did you find the solution? I've got the same problem and I am also not familiar with CSS styles.

[Stéphane Laurent]

Nice thing to investigate.

Here are some links about this topic:

http://jsfiddle.net/emn13/YMvk9/

http://mkoryak.github.io/floatThead/

http://stackoverflow.com/questions/8423768/freeze-the-top-row-for-an-html-table-only-fixed-table-header-scrolling

[Monika Cichocka]

Thanks Stéphane. I get the idea but have problems with implementing it in R.
So far I made this:

tags$style(type="text/css", '#my_Table  td:first-child {position: fixed;
  top: auto;
  }

The problem is that I want the first column to have fixed position when I scroll horizontally but to move when I scroll vertically (like in Excel with freeze panes command).
I like the idea in the link you provided (http://jsfiddle.net/emn13/YMvk9/) but I can't implement it in R.
Do you have any idea how to do this?

[Stéphane Laurent]

I am novice in html, I don't know. If nobody provides a solution then I will try myself in the future.

I would firstly try that, but this is rather a random attempt :

tags$script(type="text/css", 

   "#my_Table  td {

            margin:0;

            border:3px solid grey; 

            border-top-width:0px; 

            white-space:nowrap;

        }

        div { 

            width: 600px; 

            overflow-x:scroll;  

            margin-left:5em; 

            overflow-y:visible;

            padding-bottom:1px;

        }

        .headcol {

            position:absolute; 

            width:5em; 

            left:0;

            top:auto;

            border-right: 0px none black; 

            border-top-width:3px; /*only relevant for first row*/

            margin-top:-3px; /*compensate for top border*/

        }

        .headcol:before {content: 'Row ';}

        .long { background:yellow; letter-spacing:1em; }"
  }

[Monika Cichocka]

It didn't work even when I renamed e.g. ".headcol" to "td:first-child" because this is my "headcol". I got stuck here:
   tags$style(type="text/css", '#my_Table th:first-child{
            position:absolute;
            width:5em;
            left:auto;
            top:auto;
            padding-bottom:1px;
        }'),

    tags$style(type="text/css", '#my_Table td:first-child{

            position:absolute;
            width:5em;
            left:auto;
            top:auto;
            padding-bottom:1px;
        }'),
    tags$style(type="text/css",'#my_Table {

      width: 600px;
      overflow-x:scroll; 
      margin-left:5em;
      overflow-y:visible;
     

    }')
Now I scroll horizontally all the table so it gives me strange effect- the first column has fixed position so when scrolling it overlaps other columns. I don't know how to exclude first column from scrolling so that scrolling panel start after first column like here http://jsfiddle.net/emn13/YMvk9/.

[Dmitri]

Check http://datatables.net/release-datatables/extras/FixedHeader/ for DataTables