tablesorter resize issue.

[beenabegum2012]

I used your tablesorter for displaying data. I used also that for resizing column, the whole things working fine & it is awesome. I have only one issue in resize column through header. If I change the width of column through the header it change the width other columns it’s just like puzzle. I would like to request you how I can make the column width adjustment just like excel. I hope you understand what I want. I would like to again advance thank you for my help.

Your earlier reply will appreciated

[Mottie]

HI @beenabegum2012!

I do understand what you're saying, but if the table is already set to 100% width, making a column wider would make the table overflow off the screen. Or overflow outside of it's container. What should be done in that case?

I did just get an idea though. What if you hold down the shift key while resizing the column, it will push the other columns to the right making the last one smaller?

Hmm, I also need to make the resizer widget use a percentage width so it will resize proportionally.

[beenabegum2012]

I am glad you reply me & give me importance on this issue. I really aprecaiated your support . Basically i want to show you one link link. http://flexigrid.info/ . If you see this example 1 & if you resize any column it will not distrube other column width. can you help me how tablesorter work like this. Again thanks for your reply

[cspeerly]

I have the same problem as beenabegum2012.
Also, I need to be able to set anycolumn to a fixed width NOT RESIZABLE.
Leaving the field name blank works for the last columns but then on my 5th column, Which is next to one I have no header name in give me a problems. When resizing it, it also resizes the column to the right if you resized to big and then bring it back.
see my example here on jsFiddle (make the Results widow bigger and you will see what I mean
http://jsfiddle.net/cspeerly/VJ5uC/

Thank's for reading this and I hope it can be solved. I really see a future in TableSorter.
Chuck

[Mottie]

Please see this updated resizable widget demo

[cspeerly]

Thanks so much. This is what I want.
There is one problem I think.
When I add the filter widget it goes to full width and the columns at
different widths.
See example here http://jsfiddle.net/cspeerly/eAsRj/ then add the filter
widget and you will see what I mean.

Chuck

On Tue, Jan 29, 2013 at 4:47 PM, Rob G [email protected] wrote:

Please see this updated resizable widget demohttp://mottie.github.com/tablesorter/docs/example-widget-resizable.html

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/215#issuecomment-12863212.

Chuck Speerly
[email protected]
(901) 529-7002
(901) 279-9350

[Mottie]

Hi Chuck!

Yeah, I had some issues with getting it all to work smoothly. There are a lot of factors in this situation the biggest one being the width of the input. If I set the input width to a percentage, it always seems to make the filter jump when it comes into view - so maybe setting the filter_hideFilters option to false might be better.

Anyway, I updated the demo to hide the disabled filters:

.tablesorter-filter.disabled {
    display: none;
}

then set the width of each filter input:

$(function () {
    var filter_widths = [ '80%', '70%', '60%', 30, 30, 30, 10, 10, 10 ];

    $("table")
    .bind('filterInit', function () {
        $(this).find('.tablesorter-filter').each(function(i){
            // set filter widths
            $(this).width( filter_widths[i] || 0 );
        });
    })
    .tablesorter({
        widgets: ["zebra", "resizable", "filter"],
        theme: 'blue',
        headers: {
            6: {
                sorter: false,
                filter: false
            },
            7: {
                sorter: false,
                filter: false
            },
            8: {
                sorter: false,
                filter: false
            }
        },
        widgetOptions: {
            filter_hideFilters: true
        }
    });
});

[cspeerly]

Rob,
You are the greatest!
That worked like a charm.
Thank you very much.

Chuck

On Wed, Jan 30, 2013 at 2:36 PM, Rob G [email protected] wrote:

Hi Chuck!

Yeah, I had some issues with getting it all to work smoothly. There are a
lot of factors in this situation the biggest one being the width of the
input. If I set the input width to a percentage, it always seems to make
the filter jump when it comes into view - so maybe setting the
filter_hideFilters option to false might be better.

Anyway, I updated the demo http://jsfiddle.net/Mottie/eAsRj/33/ to hide
the disabled filters:

.tablesorter-filter.disabled {
display: none;}

then set the width of each filter input:

$(function () {
var filter_widths = [ '80%', '70%', '60%', 30, 30, 30, 10, 10, 10 ];

$("table")
.bind('filterInit', function () {
    $(this).find('.tablesorter-filter').each(function(i){
        // set filter widths
        $(this).width( filter_widths[i] || 0 );
    });
})
.tablesorter({
    widgets: ["zebra", "resizable", "filter"],
    theme: 'blue',
    headers: {
        6: {
            sorter: false,
            filter: false
        },
        7: {
            sorter: false,
            filter: false
        },
        8: {
            sorter: false,
            filter: false
        }
    },
    widgetOptions: {
        filter_hideFilters: true
    }
});});

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/215#issuecomment-12910985.

Chuck Speerly
[email protected]
(901) 529-7002
(901) 279-9350

[indrajh]

When a column is resized, I wanted to be able to expand the table (it's in a horiz scrollable div). I couldn't find a way to do this with the api, so i modified the code in vers 2.8.1:
adding 1 line to tablesortor-widget.js:928

        $(table).width($(table).width() + w);

That seemed to work for FF, but I see Chrome resizing improperly.

[cspeerly]

My app resizes table with column resize. I wraped it into two div's.
You can download it here. https://github.com/cspeerly/Simple-ConnectDB
There are several bugs which I have worked out in my next release.

On 3/28/13, indrajh [email protected] wrote:

When a column is resized, I wanted to be able to expand the table (it's in a
horiz scrollable div). I couldn't find a way to do this with the api, so i
modified the code in vers 2.8.1:
adding 1 line to tablesortor-widget.js:928

      $(table).width($(table).width() + w);

That seemed to work for FF, but I see Chrome resizing improperly.

---

Reply to this email directly or view it on GitHub:
#215 (comment)

Chuck Speerly
[email protected]
(901) 529-7002
(901) 279-9350

[indrajh]

Thanks for showing me the Connect app, but I am seeing the same issue with resize. Like the current version of tablesorter, columns can be resized, but it's limited by the parents width. I have a table with 15 columns, like an excel spreadsheet, and I have it wrapped by a div with overflow:auto, so you can scroll to the side. I'd like to expand columns and have the entire table expand it's width. Without doing this, I need to set the html page or the parent div much larger than needed, but the extra space messes up the scrollbars (with blank content to the right).

My patch above adjusts the width of the table itself, so it can expand with larger columns. I also had to disable the a few other things to make it work, and it's still not perfect.

It seems the html table element does not automatically have the width to hold the columns (even with table-layout:fixed and width:auto), and if the table is resized by setting its width, it auto expands the width of all the columns. This behavior makes it tricky to control size. It also seems to behave differently between Firefox and chrome.

[Mottie]

@indrajh Can you please set up a demo of the issue you're having, you can use this one as a starting point, and I'll try to make it resize as you are describing.

[indrajh]

Hi Rob, Thanks for your help!

I modified the example to show the issue: http://jsfiddle.net/abkNM/573/

I just added a parent div with a smaller size and turned on the resizable widget. Since the table fills the parent div, I can't drag the columns to expand them.

The actual use case is a full page div wrapper and an even wider table like an excel sheet. I'd like to be able to expand the cells by dragging, but they are stuck to the size of the table.

[Mottie]

HI @indrajh!

I've updated your demo and from seeing it I plan on adding a new option to the resizable widget named resizable_addLastColumn which when true will add a resizer to the last column.

Now in this updated demo, I noticed that the "Animals" column wasn't resizing very well. I think this might be a problem because of the demo site because when I run that same demo code locally, it resizes very smoothly.

[indrajh]

hi @Mottie, thanks for the quick reply. The new option sounds helpful to expand the last column.

I'm not sure if you added it or if I left it in there, but there was a wrap div around the table. That makes it possible to resize the table but messes up the scroll bar. By that, I mean you can scroll to the right, but then you get a large blank area. It would be nice if the table matched the width of the scroll contents, so the slider controlled the table. I removed the wrap div so the extra space would disappear. When I do that, the table is stuck to the original width of the table, so scrolling isn't possible. The only way I could find to correct this was the JS line I posted above to resize the table itself (plus disabling the follow up resize of other columns). That mostly worked, but resize would sometimes trigger the resize of several columns at once.

Thanks again for your help.

[indrajh]

hi Mottie,

I found a solution that looks much better, based on what some other table components are doing. The trick is sizing the div in the header not the TH itself. This isn't compatible with setting th width, but it makes resize work as needed. Here's a patch against the JS file.

jquery.tablesorter.widgets.js

@@ -927,8 +925,10 @@
            // resize columns
            w = e.pageX - position;
            tw = $target.width();
-           $(table).width($(table).width() + w);
-           $target.width( tw + w );
+           //$(table).width($(table).width() + w);
+           
+           var divTarget = $target.find("div.tablesorter-wrapper");
+           $(divTarget).width( tw + w );
            //if ($target.width() !== tw && fullWidth){
            //  $next.width( $next.width() - w );
            //}

[Elisa-Adela]

Hello, I'm trying to combine resizable columns widget with scroller widget (ONLY vertical scrollbar). Is this possible? For now they work separately in my application. Using resizable widget breaks scroller widget and vice-versa.
Thanks.

[Mottie]

Hi @Elisa-Adela!

Sorry, I don't think I ever tested the combination of scroller + resizable widgets. The scroller has been causing me a lot of issues, so I plan on rewriting it, but sadly my time is limited over the next month. So I won't be able to do anything about it until the end of next month.

[serGlazkov]

@Mottie hi, still not have a solution of problem with scroller + resizable widgets?

[Mottie]

Hi @BackSik!

Sorry no. Once again my time is limited and I really have been avoiding making changes to the scroller widget since I plan to replace it some time in the future.

[sennz]

Hi,

I have trouble in using Table sorter resizable with reorder, I can’t resize when reorder widget is active, when I resize it moves instead. Is there any workaround to resize without affecting the reorder?

Thanks in advance.

[Mottie]

Hi @sennz!

Please see issue #781 for a demo & code which combines reorder + resizable + filter. In the next update, I'll include a mod to the jQuery UI dragtable widget (requires jQuery UI sortable).

[sennz]

Thanks. I will try the demo code.

[Mottie]

New dragtable demo available.