Hi Ravi

1. First, we need to enable scrollX and set autoWidth: false to make the column widths respect our settings:

// In your crud component
this.dtOptions = {
 // ... existing options ...
 scrollX: true,
 autoWidth: false,
 columnDefs: [
 { targets: 0, width: "550px" },
 { targets: 1, width: "200px" },
 { targets: [3, 5], width: "120px" }
 ]
};

this.datatableConfig = {
 // ... existing config ...
 columns: [
 {
 title: "Account Name",
 data: "accountResponse.accountName",
 width: "550px", // Add width here
 render: function (data) {
 return data;
 }
 },
 {
 title: "Account Status",
 data: "accountResponse.accountStatus",
 width: "200px", // Add width here
 render: (data) => {
 return data;
 }
 },
 // ... other columns ...
 ]
};

::ng-deep {
 .dataTables_wrapper {
 .dataTable {
 table-layout: fixed;

 th, td {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 }
 }
}

this.dtOptions = {
 dom: "<"row"<"col-sm-12 overflow-x-auto"tr>>" +
 "<"d-flex justify-content-between"<"col-sm-12 col-md-5"i><"d-flex justify-content-between"p>>",
 // ... rest of your options
};

This is my code
1:======= >>
this code is from crud component
this.dtOptions = {
dom: "<'row'<'col-sm-12 overflow-auto'tr>>" +
"<'d-flex justify-content-between'<'col-sm-12 col-md-5'i><'d-flex justify-content-between'p>>",
processing: true,
ordering: false,
paging: true,
pageLength: 10,
pagingType: 'full_numbers',
language: {
processing: '<span class="spinner-border spinner-border-sm align-middle"></span> Loading...'
},
...this.datatableConfig,
columnDefs: [
{ targets: 0, width: "550px" }, // First column
{ targets: 1, width: "200px" }, // Second column
{ targets: [3, 5], width: "120px" } // Fourth and sixth columns
]
};
the columnDefs is added as per your suggestion but not increasing the witdh of column


2:===== >>
this code is from my component where i am using common crud component for tables
this.datatableConfig = {
serverSide: true,
ajax: (dataTablesParameters: any, callback) => {
var orderColumnIndex = dataTablesParameters.order[0]?.column;
var orderDirection = dataTablesParameters.order[0]?.dir;
var orderColumnName =
dataTablesParameters.columns[orderColumnIndex]?.data;

let reqBody = {
draw: dataTablesParameters.draw,
length: dataTablesParameters.length,
start: dataTablesParameters.start,
search: dataTablesParameters.search.value,
orderBy: orderDirection == undefined ? 'asc' : orderDirection,
column: orderColumnName == undefined ? 0 : orderColumnName,
};
this.accountService
.getAccountDetails(reqBody)
.subscribe((resp: any) => {
callback(resp.Response);
});
},
columns: [
{
title: 'Account Name',
data: 'accountResponse.accountName',
render: function (data) {
return data;
},
},
{
title: 'Account Status',
data: 'accountResponse.accountStatus',
render: (data) => {
return data;
},
},
{
title: 'Application',
data: 'applicationResponse',
render: (data) => {
const names = data.slice(0, 2).map((field: any) => field.name);
return data.length > 2
? names.join(', ') + '...'
: names.join(', ');
},
},
{
title: 'License',
data: 'licenseResponse.name',
render: (data) => {
return data;
},
},
{
title: 'License Validity',
data: 'validityTimeFrame',
render: (data) => {
return moment(data).format('DD/MM/YYYY');
},
},
{
title: 'LicenseBlocked',
data: 'isLicenseBlocked',
render: (data) => {
return data;
},
},
{
title: 'Rate Limit Applies',
data: 'accountResponse.rateLimitApplies',
render: (data) => {
return data;
},
},
{
title: 'Log',
data: 'accountResponse.loggingStatus',
render: (data) => {
return data;
},
},
{
title: 'Rate Limit/Min',
data: 'accountResponse.rateLimitPerMin',
render: (data) => {
return data;
},
},
{
title: 'Rate Limit/Day',
data: 'accountResponse.rateLimitPerDay',
render: (data) => {
return data;
},
},
{
title: 'White List Applies',
data: 'accountResponse.whiteListedIPs',
render: (data) => {
return data != null && data.iPs?.length > 0 ? true : false;
},
},
{
title: 'Provider',
data: 'providerResponse',
render: (data) => {
const providerName = data
.slice(0, 2)
.map((field: any) => field.providerName);
return data.length > 2
? providerName.join(', ') + '...'
: providerName.join(', ');
},
},
{
title: 'Groups',
data: 'groupResponse',
render: (groupResponse) => {
const groupNames = groupResponse
.map((response:any) =>
response.groups.map((group:any) => group.groupName).filter(Boolean)
).flat();

const displayedNames = groupNames.slice(0, 2).join(', ');
return groupNames.length > 2
? displayedNames + '...'
: displayedNames || 'No Groups';
},
},
{
title: 'Users',
data: 'userResponse',
render: (data) => {
const name = data.slice(0, 2).map((field: any) => field.name);
return data.length > 2 ? name.join(', ') + '...' : name.join(', ');
},
width: '300px',
},
],
createdRow: function (row) {
$('td:eq(0)', row).addClass('d-flex align-items-center');
},
initComplete: () => {
$('td.dt-type-numeric').css('text-align', 'left');
},
};
in that also i have added last column width but its not working
html file code .
<app-crud [datatableConfig]="datatableConfig" route="/apps/accounts"
(deleteEvent)="delete($event)" (editEvent)="editAccount($event)"
(createEvent)="createAccount()" [reload]="reloadEvent"
[module]="'account'"
[modal]="formModal"></app-crud>

Hi

Yes, you can set specific widths for individual columns in DataTables. Here are several approaches:

Option 1: Using columns definition

// In your component where you initialize DataTables
this.dtOptions = {
 // other options...
 columns: [
 { title: "ID", width: "50px" },
 { title: "Name", width: "200px" },
 { title: "Position", width: "150px" },
 { title: "Office", width: "120px" },
 { title: "Start date" }, // No width specified, will auto-adjust
 { title: "Salary", width: "100px" }
 ]
};

this.dtOptions = {
 // other options...
 columnDefs: [
 { targets: 0, width: "50px" }, // First column
 { targets: 1, width: "200px" }, // Second column
 { targets: [3, 5], width: "120px" } // Fourth and sixth columns
 ]
};

<table class="display">
 <thead>
 <tr>
 <th >ID</th>
 <th >Name</th>
 <th >Position</th>
 <th >Office</th>
 <th>Start date</th>
 <th >Salary</th>
 </tr>
 </thead>
</table>

this.dtOptions = {
 scrollX: true,
 // other options
 };

Hi
as you know i am using datatables in that for table headings there is not common width are showing, If it is possible to give width for each column or those columns on which i want to give the width

Hi

Glad to hear the solution is working well for you.

Hi

the pagination reset issue is related to how DataTables handles reloading after deletion. The problem is in how the table is refreshed after a delete operation.

The fix needs to be implemented in the component that handles the delete operation and table reload.

The reload handler calls dtInstance.ajax.reload() without parameters.

// CURRENT CODE (resets pagination):
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload());

// CHANGE TO (preserves pagination):
this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));

if (this.reload) {
 this.reload.subscribe(data => {
 this.modalService.dismissAll();
 this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => dtInstance.ajax.reload(null, false));
 });
}

Hi Ravi Kakadiya

The link you provided is the demo page for wizard form component. Are you working on datatable?

Thanks