Table column data aligning issue
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
Replies (2)
Hi Ravi
The issue occurs because DataTables automatically applies right alignment to numeric columns when sorting. Here's how we can fix this:
// ... existing 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
columnDefs: [
{
targets: "_all", // Apply to all columns
className: "text-start", // Bootstrap class for left alignment
}
],
...this.datatableConfig,
};
// ... existing code ...
}And in your parent component where you define datatableConfig, modify it like this:
ngOnInit(): void {
this.datatableConfig = {
serverSide: true,
ajax: (dataTablesParameters: any, callback) => {
// ... existing ajax code ...
},
columns: [
{
title: "Account Name",
data: "accountResponse.accountName",
className: "text-start", // Add this line
},
{
title: "Age",
data: "accountResponse.age",
className: "text-start", // Add this line
},
],
// Remove or modify createdRow and initComplete as they"re not needed for this
// ... rest of the config
};
}The changes made:
- Added columnDefs in the dtOptions to force left alignment for all columns using Bootstrap's text-start class
- Removed the render functions as they weren't doing anything special
- Added className: 'text-start' to each column definition
- Removed the initComplete callback as it's no longer needed
This solution will:
- Keep all data left-aligned consistently
- Maintain the alignment even after sorting/reordering
- Work with both text and numeric data
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
