When use columns [ , data table return unknown style error

<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "api.php"
    } );
} );
    </script>

The above code works fine.

But when I change it to

<script type="text/javascript">
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "api.php",
        "columns": [
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "contact_name" },
            { "data": "contact_email" }
        ],
    } );
} );
    </script>

The error is what returns when I use columns with the [ ]

Uncaught TypeError: Cannot read property 'style' of undefined