Create a Sticky Header in Tree View in Odoo

Introduction

When it comes to a huge data set, tree view table header is invisible in odoo when scrolling down to below. So to fix a table header we can easily map the column with value.

Pre-requisite

To achieve sticky feature in odoo tree view we need to implement a scss file feature.

Implementation

Create a new file in any module using the extension stickly.scss in location /static/src/scss.

.o_list_view .o_list_table thead {
  position: sticky;
  top: 0;
  z-index: 999;
}

.table-responsive {
  overflow: visible;
}

.o_list_view .table-responsive .table thead {
  z-index: 1;
}

.o_field_x2many .table-responsive {
  overflow: auto !important;
}

.o_account_reports_page .table-responsive {
  overflow-x: auto !important;
}

Conclusion

As class is available in odoo we just added the sticky feature in it using CSS.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top