jQuery Datatables align center 1 column

Question

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

        $("#TransactionTable").DataTable({
            ajax: {
                url: '/Transaction/SearchMockup',
                type: 'POST',
                data: {
                    cardEndingWith: $("#ccn").val(),
                    status: $("#status").val(),
                    supplier: $("#supplier").val(),
                    fromDate: $("#fromDate").val(),
                    toDate: $("#toDate").val()
                }
            },
            columns: [
            {
                data: 'Status', render: function (data, type, row) {
                    switch (data) {
                        case 1:
                            return '<div id="circleRed"></div>'
                            break;
                        case 2:
                            return '<div id="circleGreen"></div>'
                            break;
                        case 3:
                            return '<div id="circleOrange"></div>'
                            break;
                    }
                }
            },
            { data: 'TransactionId' },
            { data: 'CreditCardNumber' },
            { data: 'Supplier' },
            { data: 'CreatedAt' },
            { data: 'Amount' }
            ]
        });

What i need to add the columns option to make it happen? I try to read all the Datatables doc and google.

Ballon Ura · Accepted Answer · 2021-07-21 11:15:24Z

88

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",
   }
 ]

edited Jul 21, 2021 at 11:15

Ballon Ura

9221 gold badge13 silver badges37 bronze badges

answered Aug 2, 2017 at 7:46

Ahmed Sunny

2,2431 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hardik Over a year ago

Alternative of @aabiro 's answer: "targets": [0,1,2] You can add multiple columns value here as well

aabiro · Accepted Answer · 2018-07-20 07:56:20Z

23

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] },
  ], ...

answered Jul 20, 2018 at 7:56

aabiro

4,3363 gold badges27 silver badges36 bronze badges

Comments

Avshalom · Accepted Answer · 2019-09-02 12:53:33Z

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"
}

edited Sep 2, 2019 at 12:53

Avshalom

8,9471 gold badge29 silver badges50 bronze badges

answered Sep 25, 2018 at 8:27

Mario Tilli

411 bronze badge

Comments

Wahid Masud · Accepted Answer · 2019-01-30 10:23:00Z

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>';
            }
        },
    ],
    ....
});

answered Jan 30, 2019 at 10:23

Wahid Masud

1,10316 silver badges36 bronze badges

1 Comment

priyamtheone Over a year ago

Thanks! This is the best answer. The problem with the columnDefs and className approach shown in other answers is that the style is applied on the entire column including header and body cells. It doesn't work if you want to apply the cell styles on the header or body cells separately. Moreover, the base styles of jQuery DataTable cells don't work with Bootstrap themes. Bootstrap seems to override them. In that scenario, this approach suits the best as you don't have to depend on DataTable styles and apply your own styles on the cell content independently.

Collectives™ on Stack Overflow

jQuery Datatables align center 1 column

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related