Vertical Page Fitting

[jackcrymble]

Suggested Enhancement: Vertical Page Fitting

In datatables you can set the number of records shown per page with the top left drop-down menu. This feature is useful if you adjust the size of the container based on number of rows shown. In a case where the container has a set size and you want the datatable to fill the vertical space I believe it would be of use to have an option to set the table to fill vertically.

I've come across this plug in on datatables.net which fit's the datatable to the vertical size of its container: https://datatables.net/blog/2015-04-10

Could this be added to the dc.datatables package? I presume the option could be set through the exposed dt object?

Thanks

Jack

[gordonwoodhull]

Very cool. This will be a good test case of using datatables plugins and setting datatables options.

The library should be designed so that plugins and special options can be used without modifying the library. I don't know if that is true yet.

I think you should be able to load the plugin just by making sure the linked script runs before you initialize the table.

It seems that options can only be set when initializing the data table, according to the manual.

Would you be willing to try adding the option directly to the source, in the render function above columns:? If loading the plugin yourself and adding the option works, we can add an options getter/setter which adds to the options sent when DataTables is initialized.

[jackcrymble]

Hi @gordonwoodhull,

In my Angular 6 project I've installed jquery and added the plugin to the index.html file.

<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/features/pageResize/dataTables.pageResize.min.js"></script>

This is trying to load the plugin but an error occurs at run time: Referring to this line of code:

Perhaps this plug in is not yet compatible with Angular 6?

[jackcrymble]

I have, however, found that if you add options directly to the dc.datatables.js file (in render() before columns: ) then they are picked up by the datatable and applied.

_dt = jQuery(table.node()).DataTable({
            "scrollY": "200px",
            "scrollCollapse": true,
            "paging": false,
            columns: _table.columns().map(function(c) {
                var col = {

So the ability to add options would be possible with built-in datatables options.

[jackcrymble]

I propose three changes which work together to allow project side selection of options:

1. Adding an _options var to the dc_datatables.datatable object

var _table = {}, // this object
        _dt, // jquery.dataTables object
        _root, // selected div
        _dimension, // crossfilter dimension
        _options, // options for datatable customisation
        _group, _size, _columns, _sortBy, _order; // for compatibility; currently unused

2. Add function to allow project side to specify _options

   _table.options = function(_) { 
     if(!arguments.length) {
         return _options;
     }
     _options = _;
     return this;
   };

3. Adjust _table.render() to merge columns: with the _options provided:

   _dt = jQuery(table.node()).DataTable({
           columns: _table.columns().map(function(c) {
               var col = {
                   name: typeof c === 'string' ? c : c.label,
                   type: typeof c === 'object' ? c.type : 'num',
                   render: columnRenderer(c)
               };
               col.title = col.name.charAt(0).toUpperCase() + col.name.slice(1);
               return col;
           }),
           ..._options

What do you think?

[gordonwoodhull]

These changes make a lot of sense.

However, I take it you were not able to get the plugin to work? It looks like the plugin uses exactly the same mechanism to modify DataTables that DataTables uses to modify jQuery - so I think there should be a way to make this work.

Did you add the plugin in the same way that you added dc.datatables.js and/or jQuery?

Are answers like this one helpful? https://stackoverflow.com/questions/16935095/correct-way-to-integrate-jquery-plugins-in-angularjs

I think you need to tie in to Angular's dependencies/modules somehow, rather than just including the script.

[jackcrymble]

That is correct, I could not get the plugin working within Angular 6.

• I have tried adding a link to the plugin inside the angular.json as part of the scripts array. This cases angular to look for the file locally.
• Using a Githubissues.
• Githubissues is a development platform for aggregating issues.