Undefined width?

[ScriptPup]

Hi there, Most likely this is user error, as I am not very good at javascript/jquery operations or use.... However, I am getting this error and the pluggin doesn't function "Uncaught TypeError: Cannot read property 'width' of undefined fixed_table_rc.js:67 (anonymous function) fixed_table_rc.js:67 jQuery.extend.each jquery-1.11.0.min.js:383 jQuery.fn.jQuery.each jquery-1.11.0.min.js:136 (anonymous function) fixed_table_rc.js:64 jQuery.extend.each jquery-1.11.0.min.js:383 jQuery.fn.jQuery.each jquery-1.11.0.min.js:136 $.fn.fxdHdrCol fixed_table_rc.js:35 (anonymous function) (index):14 fire jquery-1.11.0.min.js:3119 self.fireWith jquery-1.11.0.min.js:3231 jQuery.extend.ready jquery-1.11.0.min.js:3443 completed"

I've ensured that all resources are loaded like this

               <link rel="stylesheet" type="text/css" ref="/resources/jquery/scroll/fixed_table_rc.css">
        <script src="/resources/jquery/jquery-1.11.0.min.js"></script>
        <script src="/resources/jquery/scroll/fixed_table_rc.js"></script>
        <script src="/resources/jquery/scroll/sortable_table.js"></script>
        <script type="text/javascript">
           $(document).ready(function() {
            $('#main_table').fxdHdrCol({
                fixedCols:  0,
                width:     "100%",
                height:    400,
                colModal: [
                       { width: 50, align: 'center' },
                       { width: 110, align: 'center' },
                       { width: 170, align: 'left' },
                       { width: 250, align: 'left' },
                       { width: 100, align: 'left' },
                       { width: 70, align: 'left' },
                       { width: 100, align: 'left' },
                       { width: 100, align: 'center' },
                       { width: 90, align: 'left' },
                       { width: 400, align: 'left' }
                ],
                sort: true
            });
           });
        </script>

My table is just a standard html table similar to this :

<div "wrapper" style="width: 1000px; overflow: auto;">
<table id="main_table">
    <thead>
        <tr>
            <th>col1-fixed</th>
            <th>col2-moving</th>
            <th>col3-moving</th>
            <th>col4-moving</th>
            <th>col5-moving</th>
            <th>col6-moving</th>
            <th>col7-moving</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row1</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
        </tr>
        <tr>
            <td>Row2</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
        </tr>        
        <tr>
            <td>Row3</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
        </tr>        
        <tr>
            <td>Row4</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
        </tr>
                <tr>
            <td>Row5</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
            <td>Datas</td>
        </tr>
    </tbody>
</table>
</div>

If I'm understanding the way this should be working correctly such a simple layout should not be any problem at all... Anyway, any assistance you're able to give is 100% appriciated and I thank you in advance for pointing out whatever foolish mistake I made.

[meetselva]

Could you post the code that actually triggers the plugin? Most likely the width option is not set correctly.

Check the examples in this demo page http://meetselva.github.io/fixed-table-rows-cols/index.html#ft_usage and verify the options passed to the function.

[ScriptPup]

Yeah of course. Sorry, I didn't think properly and forgot markdown wouldn't actually display my code... Let's try this again.

Here's the plugin call :

        <script>
           $(document).ready(function() {
            $('#main_table').fxdHdrCol({
                fixedCols:  0,
                width:     "100%",
                height:    200,
                colModal: [{width: 30, align: 'center'},
                           {width: 70, align: 'center'}, 
                           {width: 200, align: 'left'}, 
                           {width: 100, align: 'center'}, 
                           {width: 70, align: 'center'}, 
                           {width: 250, align: 'center'}
                          ]
                    });
                });
        </script>

Hopefully it's just something simple I did, though I actually copied the example from the demo page you referenced there.

[meetselva]

I updated your original post to show the code. Also I tried the code in jsfiddle and with little changes it is working now,

http://jsfiddle.net/AC725/1/

I commented out extra options in colModal as it had more number of option than the number of columns in the table.

I tested it in Chrome and IE. Let me know if it is not working for you.

[ScriptPup]

Ahhhhh I see what you did... Okay so in that case it requires that a width be set for each column. It can have extra widths for additional columns, but can't have too few... Alright I see. I was correct, it was just user error.

Thank you, you rock! :D

[meetselva]

Thank you for trying out my plugin. Let me know if you face any other issues or suggestion to improve.

Take care and have a good weekend. -SK