jQuery Datatables align center 1 column

Question

Want to align center just the first column called \"Status\":

        $(\"#TransactionTable\").DataTable({
            ajax: {
                url: \'/Transactio         


        

Answer 1

You can use your theme classes (bootstrap), or your own in columndef. like

text-right, text-left,text-center

 'columnDefs': [
  {
      "targets": 0, // your case first column
      "className": "text-center",
      "width": "4%"
 },
 {
      "targets": 2,
      "className": "text-right",
 }],

Answer 2

Also, you can group the columns to apply one style to many like so:

  columnDefs: [
    { className: 'text-right', targets: [7, 10, 11, 14, 16] },
    { className: 'text-center', targets: [5] },
  ], ...

Answer 3

You can style that manually

$("select_your_table").DataTable({
    ....
    columns: [
        {
            mData: "select_property_from_json",
            render: function (data) {
                return '<span style="display: flex; flex-flow: row nowrap; justify-content: center;">data</span>';
            }
        },
    ],
    ....
});

Answer 4

You can also specify a single css class name inside each column object.

In your case:

{
    data: 'Status', 
    render: function (data, type, row) {
        switch (data) {
            case 1:
                 return '<div id="circleRed"></div>';
            case 2:
                 return '<div id="circleGreen"></div>';
            case 3:
                 return '<div id="circleOrange"></div>';
        }
    },
    className: "text-center"
}