Home / Snippets / How to right align numeric data in dataTables?
How to right align numeric data in dataTables? cover

How to right align numeric data in dataTables?

2K

2 years ago

0 comments

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.
notion avatar

Ahmad Aziz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

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

Post Tutorials

Learn trending tutorials for ReactJs, React Native, VueJS, NextJs, Laravel, Tailwind CSS, and Flutter development.
View Tutorials

Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your web projects
View Components

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this