Why is it impossible to sync column title width with column data width?

dugla

Here is a site I am working on that uses Datatables. http://www.broadinstitute.org/cursor/cursor.html

Do this: click the File Open/Save button and select ENCODE to present a Datatables instance

Notice how the column titles are completely mis-aligned with the columns of data. How do I force the two to my in sync?

In addition, I have noticed when I click on the title row they do "snap" into sync with the data. Why? What have I missed?

I am using version 1.10.2. Things are even worse - the titles jam together with no spaces - when using the latest version 1.10.6.

Here is my initialization:

        var encodeModalTable = $('#encodeModalTable'),
            myDataTable = encodeModalTable.dataTable({

                "data": dataSet,
                "scrollY": "400px",
                "scrollCollapse": true,
                "paging": false,

                "columns": [

                    { "title": "cell" },
                    { "title": "dataType" },

                    { "title": "antibody" },
                    { "title": "view" },

                    { "title": "replicate" },
                    { "title": "type" },

                    { "title": "lab" },
                    { "title": "path" }
                ]

            });

allan

You need to call columns.adjust() when the table is inserted into the DOM.

There is an example of that with jQuery UI tabs here. You would just do something similar for your modal display.

Allan

dugla

allan,

I tried calling mDataTable.columns.adjust() but that method is undefined.
Sometimes I see dataTables(...) sometimes I see DataTables(...) in the docs. Completely baffling.

Can you please clarify how to make this function call? Thanks.

allan

Second top FAQ. Use $().DataTable() to return an API instance.

Allan

dugla

allan,
Yep. A bit more involved since I am using a Bootstrap modal dialog. I had to use that function call in one of the Bootstrap provided event callbacks:

        $('#igvEncodeModal').on('shown.bs.modal', function (e) {

            var encodeModalTable = $('#encodeModalTable'),
                dataTableAPIInstance;

            console.log("ENCODE Modal - Shown");

            dataTableAPIInstance = encodeModalTable.DataTable();
            dataTableAPIInstance.columns.adjust();
        });

Thanks.