Unable to make colOps work

[vagamente]

Hi all. Sorry if I post in the wrong place but I need some help with colOps: I'm not able to make it work.

That's my code:

<script src="https://unpkg.com/tablefilter@0.6.82/dist/tablefilter/tablefilter.js"></script>
<script src="https://unpkg.com/tablefilter@0.6.82/src/extensions/colOps/colOps.js"></script>
<script data-config>
    var tf = new TableFilter(
        document.querySelector('#tabellaore'),
        {
            base_path: 'https://unpkg.com/tablefilter@0.6.82/dist/tablefilter/',
            clear_filter_text: 'Tutti',
            col_0: 'select',
            col_1: 'select',
            col_2: 'select',
            col_3: 'select',
            col_4: 'none',
            col_5: 'none',
            col_6: 'none',
            col_7: 'none',
            mark_active_columns: true,
             highlight_keywords: true,
            themes: [{
                name: 'transparent'
            }],
            popup_filters: true,
            auto_filter: {
                delay: 1100 //milliseconds
            },
            alternate_rows: true,
            rows_counter: false,
            btn_reset: false,
            status_bar: false,
             paging: {
              results_per_page: ['Righe: ', [10, 25, 50, 100]]
            },
            msg_filter: 'Sto Filtrando...',
            col_types: [
                    'none', 'none', 'none', 'none','number', 'number', 'number','none'
                ],
            extensions: [ {
                        name: 'colOps',
                        id: ['consuntivo', 'budget', 'delta'],
                        col: [4, 5, 6],
                        operation: ['sum','sum','sum'],
                        decimal_precision: [2, 2, 2]
            }]
        },
    );
    tf.init();
    var colOps = tf.extension('colOps');

</script>

What am I doing wrong?

[vagamente]

Thats the table where the total should be shown

<div data-config>
        <table class=\"TF\">
            <thead>
                <tr>
                    <th></th>
                    <th >Consuntivo</th>
                    <th >Budget</th>
                    <th >Delta</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Totale</td>
                    <td id=\"consuntivo\"></td>
                    <td id=\"budget\"></td>
                    <td id=\"delta\"></td>
                </tr>
            </tbody>
        </table>
    </div>

[koalyptus]

Ciao @vagamente, as a first remark, you better remove this

<script src="https://unpkg.com/tablefilter@0.6.82/src/extensions/colOps/colOps.js"></script>

you are actually importing a source file.

Then the table you posted contains 4 columns and you are referencing at least 8 columns in your configuration, specifically the column indexes for the column operations are [4, 5, 6] which do not exist in the table. Fix the columns mismatch and tell me how it goes.

Cheers

[vagamente]

Thanks @koalyptus. Removed the importing of the source file and I've added the columns. Now I've got

<div data-config>
    <table class=\"TF\">
        <thead>
            <tr>
                <th>A</th>
                <th>A</th>
                <th>A</th>
                <th>A</th>
                <th>A</th>
                <th >Consuntivo</th>
                <th >Budget</th>
                <th >Delta</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Totale</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td id="consuntivo"></td>
                <td id="budget"></td>
                <td id="delta"></td>
            </tr>
        </tbody>
    </table>
</div>

And this

<script data-config>
    var tf = new TableFilter(
        document.querySelector('#tabellaore'),
        {
            base_path: 'https://unpkg.com/tablefilter@0.6.82/dist/tablefilter/',
            clear_filter_text: 'Tutti',
            col_0: 'select',
            col_1: 'select',
            col_2: 'select',
            col_3: 'select',
            col_4: 'none',
            col_5: 'none',
            col_6: 'none',
            col_7: 'none',
            mark_active_columns: true,
             highlight_keywords: true,
            themes: [{
                name: 'transparent'
            }],
            popup_filters: true,
            auto_filter: {
                delay: 1100 //milliseconds
            },
            alternate_rows: true,
            rows_counter: false,
            btn_reset: false,
            status_bar: false,
             paging: {
              results_per_page: ['Righe: ', [10, 25, 50, 100]]
            },
            msg_filter: 'Sto Filtrando...',
            col_types: [
                    'none', 'none', 'none', 'none','number', 'number', 'number','none'
                ],
            extensions: [ {
                name: 'colOps',
                id: ['consuntivo', 'budget', 'delta'],
                col: [4, 5, 6],
                operation: ['sum','sum','sum'],
                decimal_precision: [2, 2, 2]
            }]
        },
    );
    tf.init();
    var colOps = tf.extension('colOps');
</script>

But still not working... You can see a simplified version of the page here.

What am I doing wrong?

P.S. I've read that you are "half" italian... As you can see I'm italian too... ;-)

[koalyptus]

@vagamente you are using formatted numbers in your numeric columns with , as decimal separator, you simply need to specify it in the col_types setting:

...
col_types: ['none', 'none', 'none', 'none',
 { type: 'formatted-number', decimal: ',' }, 
 { type: 'formatted-number', decimal: ',' },
 { type: 'formatted-number', decimal: ',' },
 'none'
],
...

[vagamente]

@koalyptus , YOU'RE SO COOL!!! \m/

It works!!! Thanks a lot...

[koalyptus]

@vagamente tx for your enthusiasm and support :)