Freeze Header in a table?

Courtney · July 16, 2020, 6:30pm

I would like to suggest a new setting inside the table to freeze the column headings. I have a very large table and quite difficult to remember some of the columns when I scroll away since they’re all numbers.

This would be a life saver for me.

Chem · July 16, 2020, 6:59pm

Hey Courtney!

I love the suggestion I’ll be happy to share some CSS code you can use to accomplish this. The following code will convert all tables on the page so that the Header, First Column, and Summary Row will be sticky.

Here’s how that will look.
2020-07-16_11-48-45 (1)

All you need to do is copy and paste all of the following code into the CSS section of your page.

.table-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 750px;
}

.table-wrap table {
    width: 100%;
    min-width: 1280px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap {
    position: relative;
}

.table-wrap th,
.table-wrap td {
    padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;
}

.table-wrap thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.table-wrap .table-row-summery,
.table-wrap .table-row-summery th,
.table-wrap .table-row-summery td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index: 4;
}
td:nth-child(1), th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
}

thead th:first-child,
.table-row-summery td:first-child {
    z-index: 5;
}

That’s all! Feel free to change the background, color, and border colors or remove them from the code.

Courtney · July 17, 2020, 12:09am

Whoaa!!

This is exactly what I was looking for. Thanks Chem. I owe you a beer or two.
Cheers

SuiteUpstairs · July 17, 2020, 3:15pm

This is awesome Chem! Is there a Javascript trick you can include here to scroll to the top of the table when the page numbers are selected?

Rick · July 17, 2020, 4:59pm

Chem:

.table-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 750px;
}

.table-wrap table {
    width: 100%;
    min-width: 1280px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap {
    position: relative;
}

.table-wrap th,
.table-wrap td {
    padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;
}

.table-wrap thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.table-wrap .table-row-summery,
.table-wrap .table-row-summery th,
.table-wrap .table-row-summery td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index: 4;
}
td:nth-child(1), th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
}

thead th:first-child,
.table-row-summery td:first-child {
    z-index: 5;
}

Great tip, thanks Chem!

Albar0 · April 9, 2021, 4:35pm

Hi and thank you Chem,

How to freeze 4 colums on the left side of the table??

Thank you.

Chem · April 10, 2021, 1:06am

Hey @Albar0

To freeze 4 columns, you should add the following to the CSS Classes under Design Settings for the table component
freeze-header freeze-footer freeze-first-column

After that, change the CSS to the following

.freeze-header .table-wrap,
.freeze-footer .table-wrap,
.freeze-first-column .table-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 750px;
}

.freeze-header .table-wrap table {
    width: 100%;
    min-width: 1280px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.freeze-header .table-wrap {
    position: relative;
}

.freeze-header .table-wrap th,
.freeze-header .table-wrap td {
    padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;
}

.freeze-header .table-wrap thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.freeze-footer .table-wrap .table-row-summery,
.freeze-footer .table-wrap .table-row-summery th,
.freeze-footer .table-wrap .table-row-summery td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index: 4;
}
.freeze-first-column td:nth-child(1),
.freeze-first-colum th:nth-child(1),
.freeze-first-column thead th:nth-child(1),
.freeze-first-column td:nth-child(2),
.freeze-first-colum th:nth-child(2),
.freeze-first-column thead th:nth-child(2),
.freeze-first-column td:nth-child(3),
.freeze-first-colum th:nth-child(3),
.freeze-first-column thead th:nth-child(3),
.freeze-first-column td:nth-child(4),
.freeze-first-colum th:nth-child(4),
.freeze-first-column thead th:nth-child(4){
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
}

.freeze-first-column thead th:nth-child(1),
.freeze-footer .table-row-summery td:nth-child(1),
.freeze-first-column thead th:nth-child(2),
.freeze-footer .table-row-summery td:nth-child(2),
.freeze-first-column thead th:nth-child(3),
.freeze-footer .table-row-summery td:nth-child(3),
.freeze-first-column thead th:nth-child(4),
.freeze-footer .table-row-summery td:nth-child(4){
    z-index: 5;
}
.freeze-first-column thead th:nth-child(1),
.freeze-first-column thead th:nth-child(2),
.freeze-first-column thead th:nth-child(3),
.freeze-first-column thead th:nth-child(4){
    background: #333;
    color: #fff;
}

Important: since the column width can vary depending on the content in the table, you’ll also need to add the following to the JavaScript section as well.

TB.render('component_39',function(){
    var secondColumn = $('.freeze-first-column td:nth-child(2), .freeze-first-colum th:nth-child(2), .freeze-first-column thead th:nth-child(2)'),
        thirdColumn = $('.freeze-first-column td:nth-child(3), .freeze-first-colum th:nth-child(3), .freeze-first-column thead th:nth-child(3)'),
        fourthColumn = $('.freeze-first-column td:nth-child(4), .freeze-first-colum th:nth-child(4), .freeze-first-column thead th:nth-child(4)'),
        firstColumnWidth = $('.freeze-first-column td:nth-child(1)').outerWidth(),
        firstPlusSecond = secondColumn.outerWidth() + firstColumnWidth,
        firstPlusSecondPlusThird = firstPlusSecond + thirdColumn.outerWidth();
    secondColumn.css('left',firstColumnWidth+'px');
    thirdColumn.css('left',firstPlusSecond+'px');
    fourthColumn.css('left',firstPlusSecondPlusThird+'px');
});

Important note!
Make sure you change ‘component_39’ in the JavaScript to your tables component ID

Albar0 · April 18, 2021, 5:00pm

Could someone help me to solve this issue , please?

I don’t have programming skills :0(

Chem · April 19, 2021, 8:12pm

Hey @Albar0

Did you add the JavaScript to the JavaScript section as well?

Can you please do me a favor and send an email to support@tadabase.io

I’ll be happy to take a closer look at your setup and assist you further with this.

Shumon · April 22, 2022, 12:20pm

Chem:

.table-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
    margin: auto;
    overflow: auto;
    height: 750px;
}

.table-wrap table {
    width: 100%;
    min-width: 1280px;
    margin: auto;
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap {
    position: relative;
}

.table-wrap th,
.table-wrap td {
    padding: 5px 10px;
    border: 1px solid #000;
    background: #fff;
    vertical-align: top;
}

.table-wrap thead th {
    background: #333;
    color: #fff;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.table-wrap .table-row-summery,
.table-wrap .table-row-summery th,
.table-wrap .table-row-summery td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: #666;
    color: #fff;
    z-index: 4;
}
td:nth-child(1), th:first-child {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ccc;
}

thead th:first-child,
.table-row-summery td:first-child {
    z-index: 5;
}

I didnt even know i needed this… thats how good this solution is!!

Thank you Chem