Hello, I am making a table that uses responsive, where it ignores a certain column to show the data in a modal with bootstrap, the problem is that I don't know how to configure the tableClass in my code so that it looks in the modal

Source

     $.fn.dataTable.Responsive.defaults.details.renderer.tableClass = "table"; /* I tried */

      $("#table_test").DataTable({
        responsive: {
            details: {

                display: $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Info of ' + data[3];
                    }
                } ),

                renderer: function ( api, rowIdx, columns ) {

                  var data = $.map( columns, function ( col, i ) {
                      return col.columnIndex != 2 ?
                          '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                              '<td>'+col.title+':'+'</td> '+
                              '<td>'+col.data+'</td>'+
                          '</tr>' :
                          '';
                  }).join('');
   
                  return data ?
                      $('<table/>').append( data ) :
                      false;
                 },


                 /* I need add too
                 renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                  tableClass: 'table'
                 } )*/

            }
        },
        columnDefs: [ {
            className: 'dtr-control',
            orderable: false,
            targets:   0
        }],
        order: [ 1, 'asc' ],
        lengthChange:!1,
        buttons:["copy","excel","pdf","colvis"]}).buttons().container().appendTo("#datatable-buttons_wrapper .col-md-6:eq(0)");

Can somebody help me ?