In a normal case, we can create a view by using the corresponding fields in the database table (Odoo model) i.e., the header value of the tree view will be the string value of these fields. But it will be entirely different in case of a button.

In model view, the button will be an instance but not a field (not a column) in the database table. Because of this, in the tree header there will be a blank space for the corresponding button.

Getting started

STEP 1:  ADD  /static/src/xml/{FILENAME}.xml

odoo.define(ModuleName.EditableListRenderer', function (require) {
"use strict";

var ListRenderer = require('web.ListRenderer');

  _renderHeaderCell: function (node) {
        const $th = this._super.apply(this, arguments);
        if (node.attrs.class === 'custom_identifier'){
        return $th;

STEP 2: Add custom class for identifying the button, the given string value is used to render the table header.

<button name="{{ ACTIONNAME }}"
type="{{ ACTIONTYPE }}" 

STEP 3: Add the JS files in Odoo assets.

<template id="assets_frontend" inherit_id="web.assets_backend" name="table style">
    <xpath expr="." position="inside">
         <script type="text/javascript"
src="/ModuleName/static/src/js/{{ FILENAME }}.js"></script>


‘data: [
STEP 5:  Server Restart

if you like us to help you with your next odoo implementation project please contact us