Datatables JQuery library - Адаптивная таблица

Question

Мы используем библиотеку datatable jquery для отображения адаптивной таблицы и средство визуализации для отображения столбца имени с кнопкой с многоточием. Щелчок по кнопке с многоточием открывает раскрывающийся список, а также одновременно расширяет строку, как показано на изображении Адаптивная таблица . Нам нужно только открыть раскрывающееся меню, не расширяя строку, при нажатии кнопки с многоточием. Используйте это, чтобы воссоздать проблему - https://jsfiddle.net/naveencgr/0ynesm3c/49/

[<div class="tab-pane fade" id="responsive" role="tabpanel" aria-labelledby="responsive-tab">
    <h3>Responsive Table</h3>
    <table id="responsiveTable" class="table table-bordered table-hover table-sm" style="width: 100%">
        <thead class="thead-light">
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th class="none">Salary</th>
            </tr>
        </thead>
    </table>
</div>

<script>
$(function() {
var standardOptions = {
    deferRender: true,
    ajax : "${pageContext.request.contextPath}/test/data/employees.json",
    columns: \[
        { data: "name", render: ActionColumnRenderer },
        { data: "position" },
        { data: "office" },
        { data: "extn" },
        { data: "start_date" },
        { data: "salary" }
    \]
};

var responsiveTable = $('#responsiveTable').DataTable($.extend(true, {}, standardOptions, { responsive: true } ));

$("#responsive-tab").on('click', function()  {
        alert("no of rows-->"+$('#responsiveTable tbody tr').length);
        $('#responsiveTable tbody tr').on( 'click', 'td:first div a.px-2', function () {
            var $item = $(this).closest("tr");
            alert("item-->"+$item);
            var op_row = responsiveTable.row( $item);
            alert("op_row.child.isShown "+ op_row.child.isShown());
            if ( op_row.child.isShown( ) ) op_row.child.remove( );
            $item.removeClass('parent');
        });

    });
});

function ActionColumnRenderer(data, type, row) { 
    return data+'<div class="btn-group float-right">'+
              '<a href="#" class="px-2"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-ellipsis-h"></span><span hidden>Action</span></a>'+
                '<div class="dropdown-menu dropdown-menu-right">'+
                    '<a class="dropdown-item" href="#">Open in Grant Folder</a>'+
                    '<a class="dropdown-item" href="#">Edit</a>'+
                    '<a class="dropdown-item" href="#">Delete from Table</a>'+
                    '<div class="dropdown-divider"></div>'+
                    '<a class="dropdown-item" href="#">Menu Option 1</a>'+
                '</div>'+
            '</div>';
    }
</script>][1]