Slink/sos_sales/report/action_plan_report_result.xml

<odoo>
  <record id="action_report_action_plan" model="ir.actions.report">
        <field name="name">Action Plan Report</field>
        <field name="model">sos_sales_action_plan</field>
        <field name="report_type">qweb-html</field>
        <field name="report_name">sos_sales.report_action_plan</field>
        <field name="report_file">sos_sales.report_action_plan</field>
        <field name="binding_model_id" eval="False"/>
        <field name="binding_type">report</field>
    </record>
<template id="report_action_plan">
    <t t-call="web.html_container">
        <t t-call="web.basic_layout">
 <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
        <script src="http://cdn.datatables.net/2.2.2/js/dataTables.min.js"></script>
            <link rel="stylesheet" href="/sos_inventory/static/src/css/style.css?v=7" />
            <link rel="stylesheet" href="http://cdn.datatables.net/2.2.2/css/dataTables.dataTables.min.css"/>
            <div class="page">
            <style>
table.dataTable>tbody>tr>th, table.dataTable>tbody>tr>td {
    padding:2px;
}
</style>
<script type="text/javascript">
setTimeout(function() {

        $('#myTable').DataTable({
            columnDefs: [{ width: '20%', targets: 7 }]
});
    

}, 100);



</script>
<style>
.table-container {
    width: 100%;
    overflow: hidden;
    border: 1px solid #ddd;
    position: relative;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container thead {
    position: sticky;
    top: 0;
    background-color: lavender;
    z-index: 100;
}

.table-scroll {
    max-height: 400px; 
    overflow-y: auto;
    display: block;
    width: 100%;
}

.table-scroll table {
    width: 100%;
    border-collapse: collapse;
}

td, th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}

th {
    background-color: lavender;
    position: sticky;
    top: 0;
    z-index: 2;
}

.final-row {
    background-color: lavender;
    font-weight: bold;
}
::-webkit-scrollbar {
  width: 2px;
}
::-webkit-scrollbar-thumb {
  background: white; 
}
/*
.table-container {
    width: 100%;
    max-height: 400px; 
    overflow-y: auto;
    border: 1px solid #ddd;
}
*/

.table_custom thead th {
    position: sticky;
    top: 0;
    z-index: 10;
}

.table_custom tfoot {
    position: sticky;
    bottom: 0;
    z-index: 10;
}


</style>
                <br/>
                <div style="box-shadow: 0px 8px 24px rgba(27, 46, 94, 0.12);
                            padding: 12px;
                            border: solid 1px #ccc;
                            border-radius: 20px;">
                    <h6 style="text-align:center">ACTION PLAN REPORT</h6>
                    <table class="table_custom display" id="myTable">
                        <thead style="background-color: #fef0ff;">
                            <tr>
                            <th>Status</th>
                                <th>Customer</th>
                                <th>Location</th>
                                <th>Executive</th>
                                <th>Action Date</th>
                                <th>Product</th>
                                <th>Action</th>
                                <th>Action Plan</th>
                                <th>Result</th>
                                <th>Next Action On</th>
                            </tr>
                        </thead>
                        <tbody>
                            <t t-foreach="docs" t-as="record">
                                <tr>
                                    <td><t t-esc="record.status"/></td>
                                    <td><t t-esc="record.customer_name.customer_name"/></td>
                                    <td><t t-esc="record.location"/></td>
                                    <td><t t-esc="record.sales_executive.name"/></td>
                                    <td><t t-esc="record.date"/></td>
                                    <td><t t-esc="record.product"/></td>
                                    <td><t t-esc="record.action"/></td>
                                    <td><t t-esc="record.action_plan"/></td>
 <td>
                    <a href="#" class="result-link" t-att-data-result="record.result">Click me</a>
                </td>


                                    <td><t t-esc="record.next_action_date"/></td>
                                </tr>
                            </t>
                        </tbody>
                    </table>


<!-- Custom Modal -->
<div id="resultModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000;">
    <div style="background: white; width: 80%; max-width: 500px; margin: 10% auto; padding: 20px; border-radius: 5px;">
        <div style="float:right;">
            <span onclick="closeModal()" style="    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    padding: 1px 5px 1px 5px;
    color: #333;
    border: solid 1px #ccc;">X</span>
        </div>
        <p id="modalResultContent"></p>
    </div>
</div>

<style>
    @media screen and (max-width: 768px) {
        .table_custom {
            width: 100% !important;
        }
    }
    .result-link {
        color: #007bff;
        text-decoration: none;
        cursor: pointer;
    }
    .result-link:hover {
        text-decoration: underline;
    }
</style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const links = document.querySelectorAll('.result-link');
            const modal = document.getElementById('resultModal');
            const modalContent = document.getElementById('modalResultContent');

            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const result = this.getAttribute('data-result') || 'No result available';
                    modalContent.textContent = result;
                    modal.style.display = 'block';
                });
            });

            window.closeModal = function() {
                modal.style.display = 'none';
            };
        });
    </script>
                </div>
            </div>
        </t>
    </t>
</template>



</odoo>