Currently, I am working on data-tables and have successfully created one. However, I am facing an issue with aligning the data to the right of some columns.
Snippet:
var data=[
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
.
. // rest of the array elements
.
];
var columndef=[{title:"amount",data:"amount"},{title:"billdate",data:"billdate"},{title:"outlet",data:"outlet"}];
$('#tbl').DataTable({
columns:columndef,
data : data,
scrollY: '30vh',
scrollCollapse: true,
paging: true,
"columnDefs" : [ {
"targets" : [0],
className : 'dt-body-right',
"render" : function(data, type, row) {
return Number(data).toLocaleString('en-IN', {
maximumFractionDigits : 2,
});
}
}]
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.css"/>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="tbl"></table>In addition, I am implementing a comma separator for Indian currency, which is functioning correctly but the alignment remains problematic.
I am currently attempting to align the first column (amount) to the right, however, the alignment appears to be off. I am unsure where the mistake lies in my code.