Hi Ravi

This is default behavior in DataTables for numeric columns. Let's fix this by explicitly setting left alignment for all columns.
Here's how to modify your code:

ngOnInit(): void {
 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..."
 },
 // Add columnDefs to force left alignment for all columns
 columnDefs: [
 {
 targets: "_all",
 className: "text-start dt-left", // Combine Bootstrap and DataTables classes
 type: "html" // Prevent automatic type detection that might trigger right alignment
 }
 ],
 ...this.datatableConfig,
 };

 if(this.module !== "statistics" && this.authService.checkUserRole())
 this.renderActionColumn();

 this.dtOptions.ordering = true;
 this.setupSweetAlert();

 // ... existing code ...
}

ngOnInit(): void {
 this.datatableConfig = {
 serverSide: true,
 ajax: (dataTablesParameters: any, callback) => {
 // ... existing ajax code ...
 },
 columns: [
 {
 title: "Account Name",
 data: "accountResponse.accountName",
 className: "text-start dt-left",
 },
 {
 title: "Age",
 data: "accountResponse.age",
 className: "text-start dt-left",
 // Force this column to be treated as string to avoid numeric alignment
 type: "string" 
 },
 ],
 // You can keep this if you specifically need it for the first column
 createdRow: function (row) {
 $("td:eq(0)", row).addClass("d-flex align-items-center");
 }
 // Remove initComplete as we"re handling alignment in columnDefs
 };
}

I want table data into the left side of columns, so initially its showing correct but when i am reordering the table data, the numeric data is go from left to right side

This is my code:
ngOnInit(): void {
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: 'Age',
data: 'accountResponse.age',
render: function (data) {
return data;
},
},
],
createdRow: function (row) {
$('td:eq(0)', row).addClass('d-flex align-items-center');
},
initComplete: () => {
$('td.dt-type-numeric').css('text-align', 'left');
},
};
}


<app-crud [datatableConfig]="datatableConfig" route="/apps/accounts"
(deleteEvent)="delete($event)" (editEvent)="editAccount($event)"
(createEvent)="createAccount()" [reload]="reloadEvent"
[module]="'account'"
[modal]="formModal"></app-crud>

In crud component
ngOnInit(): void {
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,
};

if(this.module !== 'statistics' && this.authService.checkUserRole())
this.renderActionColumn();

this.dtOptions.ordering = true;
this.setupSweetAlert();

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

I need the data should not be changed there position after reordering the column

Thanks Its working

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