+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+ 
+
+ + Sticky Header And Column In List View
++ Enhance List Views With Sticky Headers And Columns For + Improved Navigation And Readability.
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ The module introduces sticky headers and columns to Odoo's list view.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+
+ 
+ Community &
+ Enterprise Support.
+
+
+ Community &
+ Enterprise Support.
+
+
+ The module introduces sticky headers and columns to Odoo's list view.
+
+
+ The module introduces sticky headers and columns to Odoo's list view.
+
+
+ Enhanced Data Visibility.
+
+
+ Enhanced Data Visibility.
+
+
+ Support for Different Modules.
+
+
+ Support for Different Modules.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ + Click on the pin icon in the headers of list views. +
+
+
+
+ 
+
+
+
+ + As you scroll horizontally, you will notice that the pinned records and header row remain in place, maintaining visibility. +
+
+
+
+ 
+
+
+ + Upon vertical scrolling through a list of records, the header row of the table remains sticky.
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
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..079f195f9
--- /dev/null
+++ b/list_view_sticky_header_and_column/static/src/js/list_view_sticky_header_and_column.js
@@ -0,0 +1,63 @@
+/** @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, "my_list_view_patch", {
+ /**
+ * super the setup function
+ */
+ setup() {
+ this._super.apply();
+ },
+ /**
+ * function defining the button having t-on-click _onClick
+ */
+ _onClickIcon(ev, record) {
+ ev.preventDefault();
+ ev.stopPropagation()
+ const $clickedHeader = $(ev.currentTarget).closest('th');
+ const columnIndex = $clickedHeader.index();
+ $(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column');
+ $(this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header')).removeClass('clicked-header');
+ $clickedHeader.addClass('clicked-header');
+ const $tableHeaders = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th'));
+ const $tableRows = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tr'));
+ const $tfootRow = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table tfoot tr')[0].children);
+ const $selectedFooterCells = $tfootRow.filter(`td:nth-child(-n+${columnIndex + 1})`);
+ $selectedFooterCells.addClass('sticky-column');
+ const $selectedColumns = $(this.__owl__.bdom.parentEl.querySelectorAll(`.o_data_row td:nth-child(-n+${columnIndex + 1})`));
+ const $selectedHeaderCells = $tableHeaders.filter(`th:nth-child(-n+${columnIndex + 1})`);
+ $tableHeaders.removeClass('sticky-column').css('left', '');
+ $(this.__owl__.bdom.parentEl.querySelectorAll('.o_data_row td')).removeClass('sticky-column').css('left', '');
+ $selectedColumns.addClass('sticky-column');
+ $selectedHeaderCells.addClass('sticky-column');
+ $tableHeaders.filter('.sticky-column').css('top', '0');
+ const $targetColumn = $selectedColumns.eq(columnIndex);
+ const targetLeftPosition = $targetColumn.position().left;
+ const columnsToAdjust = columnIndex + 1;
+ $tableRows.each(function (index, row) {
+ const $headerCells = $(row).find('th');
+ const $rowCells = $(row).find('td');
+ for (let i = 0; i < columnsToAdjust; i++) {
+ if ($headerCells.eq(i).length > 0) {
+ $headerCells.eq(i).css('left', `${$headerCells.eq(i).position().left}px`);
+ }
+ if ($rowCells.eq(i).length > 0) {
+ $rowCells.eq(i).css('left', `${$rowCells.eq(i).position().left}px`);
+ }
+ }
+ });
+ },
+ /**
+ * super onClickSortColumn function and remove the icon and element having the class sticky-column
+ */
+ onClickSortColumn(column) {
+ this._super(...arguments);
+ $(this.__owl__.bdom.parentEl.querySelectorAll('.sticky-column')).removeClass('sticky-column');
+ $(this.__owl__.bdom.parentEl.querySelectorAll('.clicked-header')).removeClass('clicked-header');
+ const $tableHeaders = $(this.__owl__.bdom.parentEl.querySelectorAll('.o_list_table th'));
+ $tableHeaders.removeClass('sticky-column').css('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..d5f7b8740
--- /dev/null
+++ b/list_view_sticky_header_and_column/static/src/scss/list_view_sticky_header_and_column.scss
@@ -0,0 +1,51 @@
+.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..d6b41000c
--- /dev/null
+++ b/list_view_sticky_header_and_column/static/src/xml/list_view_sticky_header_and_column.xml
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+