DataTables columnDefs.targets

DataTables columnDefs.targets

by CloudTables

HTML

<link rel="stylesheet" href="https://nightly.datatables.net/css/jquery.dataTables.min.css">
<script src="https://nightly.datatables.net/js/jquery.dataTables.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;1,100&display=swap" rel="stylesheet">

<table id="example" class="display" cellspacing="0" width="100%" style="font-family: 'Poppins', sans-serif;">
    <thead>
        <tr>
            <th>First name</th>
            <th>Last name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger</td>
            <td>Nixon</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>2011/07/25</td>
            <td>170750</td>
        </tr>
    </tbody>
</table>

CSS

.rupeefont {
  font-family: Arial, sans-serif;
}

JavaScript

var table = $('#example').DataTable({
  columns: [{
      data: 'first_name'
    },
    {
      data: 'last_name'
    },
    {
      data: 'position'
    },
    {
      data: 'office'
    },
    {
      data: 'salary'
    },
    {
      data: 'start_date'
    },
  ],
  "columnDefs": [{
    "targets": [5],
    "render": function(data, type, row) {
      return '<span class="rupeefont">₹</span><span style="color:firebrick">' + Number(data).toLocaleString('en-IN', {
        maximumFractionDigits: 2,
      }) + '</span> ';
    },
  }, ]
});