I want to make the second column in datatable to have the responsive button not the first one
I want to make the second column in datatable to have the responsive button, not the first one. I have tried different ways it works but not as I want when I use the design on the phone I need to scroll left to see the buttons and I have added the button manually:
the JS:
datatable_options = {
searching: true,
paging: true,
responsive: {
details: {
type: 'column',
target: 1,
}
},
columnDefs: [{
responsivePriority: 0,
targets: 1
},
{
responsivePriority: 2,
targets: 0,
orderable: false,
}
,
{
targets: -1,
orderable: false,
}
],
}
the HTML for the second column in the table:
<td class="d-flex align-items-center">
<!-- Start Needed For Responsive Plus Button -->
<span class=dtr-control></span>
<!-- End Needed For Responsive Plus Button -->
<!--begin:: Avatar -->
<div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
<div class="symbol-label">
<img src="{{team.member.image.url}}" alt="{{team.member.english_name}}" class="w-100" />
</div>
</div>
<!--end::Avatar-->
<!--begin::User details-->
<div class="d-flex flex-column">
{{team.member.english_name}}
<span><a class="text-muted" href="mailto:{{team.member.phone_number}}">{{team.member.email}}</a></span>
</div>
<!--begin::User details-->
</td>
I don't know what I need to do and I have tried several things.
and when I use the responsive the browser some times it works but when I use it on my phone the problem appears and I have tried different phones with different sizes and resolutions and I find the same problem
Replies (5)
Hi
Sorry for the delay.
1. Use word-break for Long Email Addresses
One of the main reasons the first column is getting very wide is due to long email addresses that don’t wrap. You can control how long text behaves with CSS by using word-break to wrap long content, like emails.
Add this CSS to your second column for the email:
td {
word-break: break-all;
}Long emails will wrap and don’t push other columns off-screen.
2. Check Column Widths and Priorities
Ensure that you set proper priorities and widths for your columns to prevent the first column from expanding too much:
columnDefs: [
{
responsivePriority: 1, // Ensure the responsive column gets high priority
targets: 1
},
{
responsivePriority: 2,
targets: 0, // Lower priority for the first column
orderable: false,
width: "50px" // Limit the width of the first column
},
{
targets: -1,
orderable: false,
}
]3. Debugging Responsive Button Visibility
You mentioned having trouble with the responsive button not showing up. Check that you’re using the className property correctly in your datatable initialization:
responsive: {
details: {
type: "column",
target: 1,
renderer: function ( api, rowIdx, columns ) {
// You can customize how the hidden columns are displayed here if needed
return $.map( columns, function ( col, i ) {
return col.hidden ?
"<tr data-dt-row=""+col.rowIndex+"" data-dt-column=""+col.columnIndex+"">"+
"<td>"+col.title+":"+"</td> "+
"<td>"+col.data+"</td>"+
"</tr>" :
"";
}).join("");
}
}
}I have found the problem but I don't know how to fix it the problem is I use the design of the table in app -> user management -> users -> user list
but I have converted the table to be responsive and the responsive column to be the user column which is the second column in the table:
when the email gets tall like "ahmedalaatalaatahmedalaatalaat@kpmg.com" and the screen size won't fit it the first column will get very wide and the second column which should be the column with the responsive button will get hidden in the right of the screen and you will need to scroll right to get to the column and it needs only one tall email in the whole table to do that which happen a lot with me.
another problem I have with it is when I make the second column responsive there is no plus button and I need to add the button manually myself at the start of the second column <span class="dtr-control"></span> and if I used the calssName attribute like in the docs the column wouldn't appear in the normal full-screen situation.
No one answered my question. I need the solution ASAP
I am using Metronic 8.2.7 with bootstrap
Hi Ahmed Elkady,
Could you please let me know which version of Metronic you are using? Kindly specify whether it's version 8 or 9, as both versions come with different datatable plugins.
Thank you!
