Posts Learn Components Snippets Categories Tags Tools new About
/

How to right align numeric data in dataTables?

Learn how to align numeric columns to the right side in dataTable the easy way. Make use of this method to the right align columns such as currency and percentage values.

Created on Nov 07, 2021

10 views

Sometimes you might need to alight a column on the right to display or indicate that it's a numeric column. To do that, you can use the "columnDefs" property and pass in the targets, which is the index value of the column, and specify the class that you want to apply to that column.
$('#my-data-table').DataTable({
    columnDefs: [
        { targets: [1, 2], className: "text-right" },
    ]
});
For this example, we are using text-right, Tailwind CSS classes, which are ready out of the box. Do note that the index which in this case 1 and 2 is the column number, allows you to target which column should be applied with the class above.

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

)