+
+
+
+
+
+
+
diff --git a/list_view_sticky_header_and_column/static/src/js/list_view_sticky_header_and_column.js b/list_view_sticky_header_and_column/static/src/js/list_view_sticky_header_and_column.js
new file mode 100755
index 000000000..d6e2a363c
--- /dev/null
+++ b/list_view_sticky_header_and_column/static/src/js/list_view_sticky_header_and_column.js
@@ -0,0 +1,101 @@
+/** @odoo-module **/
+/** This file will used to stick the selected header and column in the list view **/
+import { patch } from "@web/core/utils/patch";
+import { ListRenderer } from "@web/views/list/list_renderer";
+
+patch(ListRenderer.prototype, {
+ setup() {
+ super.setup();
+ },
+ /**
+ * function defining the button having t-on-click _onClick
+ */
+ _onClickIcon(ev, column) {
+ ev.preventDefault();
+ ev.stopPropagation();
+ const clickedHeader = ev.currentTarget.closest('th');
+ const columnIndex = Array.from(clickedHeader.parentNode.children).indexOf(clickedHeader);
+ console.log(this.__owl__.bdom.parentEl);
+ // Remove 'sticky-column' and 'clicked-header' classes from relevant elements
+ const stickyColumns = this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column');
+ stickyColumns.forEach(el => el.classList.remove('sticky-column'));
+ const clickedHeaders = this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header');
+ clickedHeaders.forEach(el => el.classList.remove('clicked-header'));
+
+ // Add 'clicked-header' class to the clicked header
+ clickedHeader.classList.add('clicked-header');
+
+ // Select table headers, rows, and footer
+ const tableHeaders = this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th');
+ const tableRows = this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tr');
+ const tfootRowCells = this.__owl__.bdom.parentEl.querySelector('.o_list_table tfoot tr')?.children || [];
+
+ // Select footer cells up to columnIndex (inclusive)
+ const selectedFooterCells = Array.from(tfootRowCells).slice(0, columnIndex + 1);
+ selectedFooterCells.forEach(cell => cell.classList.add('sticky-column'));
+
+ // Select data row cells and header cells up to columnIndex (inclusive)
+ const selectedColumns = this.__owl__.bdom.parentEl.querySelectorAll(
+ `.o_data_row td:nth-child(-n+${columnIndex + 1})`
+ );
+ const selectedHeaderCells = Array.from(tableHeaders).slice(0, columnIndex + 1);
+
+ // Remove 'sticky-column' class and 'left' style from all headers and data cells
+ tableHeaders.forEach(header => {
+ header.classList.remove('sticky-column');
+ header.style.left = '';
+ });
+ this.__owl__.bdom.parentEl.querySelectorAll('.o_data_row td').forEach(cell => {
+ cell.classList.remove('sticky-column');
+ cell.style.left = '';
+ });
+
+ // Add 'sticky-column' class to selected columns and headers
+ selectedColumns.forEach(cell => cell.classList.add('sticky-column'));
+ selectedHeaderCells.forEach(header => header.classList.add('sticky-column'));
+
+ this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column').forEach(el => {
+ if (el.tagName === 'TH') {
+ el.style.top = '0';
+ }
+ });
+
+ // Calculate left position for the target column
+ const targetColumn = Array.from(selectedColumns).find(
+ (el, idx) => idx % (columnIndex + 1) === columnIndex
+ );
+ const targetLeftPosition = targetColumn ? targetColumn.getBoundingClientRect().left - this.__owl__.bdom.parentEl.getBoundingClientRect().left : 0;
+
+ // Adjust left position for sticky columns in headers and rows
+ const columnsToAdjust = columnIndex + 1;
+ tableRows.forEach(row => {
+ const headerCells = row.querySelectorAll('th');
+ const rowCells = row.querySelectorAll('td');
+ for (let i = 0; i < columnsToAdjust; i++) {
+ if (headerCells[i]) {
+ const leftPos = headerCells[i].getBoundingClientRect().left - this.__owl__.bdom.parentEl.getBoundingClientRect().left;
+ headerCells[i].style.left = `${leftPos}px`;
+ }
+ if (rowCells[i]) {
+ const leftPos = rowCells[i].getBoundingClientRect().left - this.__owl__.bdom.parentEl.getBoundingClientRect().left;
+ rowCells[i].style.left = `${leftPos}px`;
+ }
+ }
+ });
+ },
+ /**
+ * super onClickSortColumn function and remove the icon and element having the class sticky-column
+ */
+ onClickSortColumn(column) {
+ super.onClickSortColumn(...arguments);
+ const stickyColumns = this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column');
+ stickyColumns.forEach(el => el.classList.remove('sticky-column'));
+ const clickedHeaders = this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header');
+ clickedHeaders.forEach(el => el.classList.remove('clicked-header'));
+ const tableHeaders = this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th');
+ tableHeaders.forEach(header => {
+ header.classList.remove('sticky-column');
+ header.style.left = '';
+ });
+ },
+});
diff --git a/list_view_sticky_header_and_column/static/src/scss/list_view_sticky_header_and_column.scss b/list_view_sticky_header_and_column/static/src/scss/list_view_sticky_header_and_column.scss
new file mode 100755
index 000000000..463d2de99
--- /dev/null
+++ b/list_view_sticky_header_and_column/static/src/scss/list_view_sticky_header_and_column.scss
@@ -0,0 +1,52 @@
+.sticky-column {
+ position: sticky !important;
+ background-color: white;
+ z-index: 2;
+}
+.o_list_view .o_list_table td.sticky-column {
+ z-index: 4;
+ background-color: white;
+}
+.o_list_view .o_list_table thead {
+ position: sticky;
+ top: 0;
+ z-index: 3;
+ background-color: white;
+}
+.o_list_view .o_list_table th.sticky-column {
+ z-index: 4;
+ background-color: white;
+}
+.o_account_reports_page .table-responsive {
+ overflow-x: auto;
+ overflow-y: visible;
+}
+.table-responsive {
+ overflow: visible;
+}
+.o_list_view .table-responsive .table thead {
+ z-index: 5;
+}
+.o_list_renderer .o_list_table thead {
+ position: sticky;
+ top: 0;
+ z-index: 6;
+}
+th.sticky-column::before {
+ content: "";
+ position: absolute;
+ width: 5px;
+ height: 100%;
+ background: white;
+ top: 0;
+ left: -4px;
+}
+.fa-thumb-tack {
+ display: none;
+}
+
+th:hover .fa-thumb-tack,
+th.clicked-header .fa-thumb-tack {
+ display: block;
+}
+
diff --git a/list_view_sticky_header_and_column/static/src/xml/list_view_sticky_header_and_column.xml b/list_view_sticky_header_and_column/static/src/xml/list_view_sticky_header_and_column.xml
new file mode 100755
index 000000000..6871dc310
--- /dev/null
+++ b/list_view_sticky_header_and_column/static/src/xml/list_view_sticky_header_and_column.xml
@@ -0,0 +1,15 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Enhance List Views With Sticky Headers And Columns For + Improved Navigation And Readability. +
+Sticky Header And Column In List View +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Community & Enterprise Support. +
+Available in Odoo 18.0 Community and Enterprise. +
+
+
+
+
+
+
+
+
+ + Enhanced Data Visibility +
++
+
+
+
+
+
+
+
+
+ + Support for Different Modules. +
++
+
+
+
+
+
+
+
+
+
+ Sticky Header And Column In List View
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + select the + + sticky column +
+
+
+ + Click the pin icon in the list view headers to select the sticky column. + Clicking on a column outside the pinned area will unselect the sticky header. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + scroll + + horizontally +
+
+
+ + As you scroll horizontally, you will notice that the pinned records and header row remain in place, + maintaining visibility. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + Vertical + + scrolling +
+
+
+ + Upon vertical scrolling through a list of records, the header row of the table remains sticky. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Community & Enterprise Support.
+
+
+
+
+
+
+
+
+
+
+ + The module introduces sticky headers and columns to Odoo's list view.
+
+
+
+
+
+
+
+
+
+
+ + Enhanced Data Visibility.
+
+
+
+
+
+
+
+
+
+ + Support for Different Modules.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Only the list (tree) views + are affected. Kanban, form, + or calendar views remain unchanged. +
+
+
+
+
+
+ + It adds sticky headers and + sticky columns to list views + in Odoo, so key column labels + and data stay visible while scrolling. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 16th June, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + +
+
+ + Related Products +
+ +
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+