How to configure columns created by javascript

[comanche]

How to configure columns created by javascript

[MikeVolodarsky]

Solved, thanks to Allan of datatables for the tip of how to access the column header to inject the data attributes on pre-draw. In case this helps someone else, here is the approach we went with:

Summary: inject arbitrary attributes into the column headers, including the data-hidden='phone' attributes needed to drive the responsive plugin:

          var columns: [
                                { title: 'name', data: 'name' },
                                // NOTE: Include the data-hidden attribute in the column definition
                                { title: 'type', data: 'type', 'data-hide': 'phone' },
                            ]

            var tableConfig =
            {
                data: [],
                columns: columns,
                // Support for responsive datatables: https://github.com/Comanche/datatables-responsive
                autoWidth: true,
                preDrawCallback: function () {
                    // NOTE: This is where we have to inject the control attributes into each column header
                    // to cause the responsive plugin to correctly mark them for hiding/etc.  We do this by
                    // pushing all data-* attributes from the column definition as properties into the column
                    var api = $(el).dataTable().api();
                    for (var c = 0; c < columns.length; c++) {
                        var columnDef = columns[c];
                        var column = api.columns(c);
                        // split out all data-X attributes into the column header
                        for (var p in columnDef) {
                            if (columnDef.hasOwnProperty(p) && p.indexOf('data-') === 0) {
                                $(column.header()).attr(p, columnDef[p]);
                            }
                        }
                    }

                    // Initialize the responsive datatables helper once.
                    if (!self.responsiveHelper_datatable_tabletools) {
                        self.responsiveHelper_datatable_tabletools = new ResponsiveDatatablesHelper($(el), breakpointDefinition);
                    }
                },

After this, when the table renders, it will push the required attributes which will cause the responsive plugin to correctly set up those columns for collapse. Can be used with all the other data attributes as well.

Thanks,
Mike

[comanche]

Thanks for sharing.