Table Widget for IE? Fixed header, sorting columns, etc

Discussion in 'Javascript' started by Matt Kruse, Sep 1, 2004.

  1. Matt Kruse

    Matt Kruse Guest

    I'm looking for the best JS/CSS solution to add functionality to tables.
    The only browser which needs to be supported is IE5.5+, but no activeX can
    be used.

    to be able to do:
    - Fixed header row
    - Data sorting (preferrably intelligently determining data type based on
    content)
    - If possible, locking the first column from scrolling

    I've seen one solution at
    http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html which is
    pretty good, but it uses a DIV that scrolls and puts the table within it,
    making the header row move down as the DIV is scrolled. This works, but it's
    not as elegant and simple as I'd like.

    I wish IE would support tbody{scroll:auto} but we're not that lucky :(

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
     
    Matt Kruse, Sep 1, 2004
    #1
    1. Advertising

  2. Matt Kruse

    Mick White Guest

    Matt Kruse wrote:

    > I'm looking for the best JS/CSS solution to add functionality to tables.
    > The only browser which needs to be supported is IE5.5+, but no activeX can
    > be used.
    >
    > to be able to do:
    > - Fixed header row
    > - Data sorting (preferrably intelligently determining data type based on
    > content)
    > - If possible, locking the first column from scrolling


    http://mickweb.com/football/aleague/profiles.html

    Something like this?

    Mick
    >
    > I've seen one solution at
    > http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html which is
    > pretty good, but it uses a DIV that scrolls and puts the table within it,
    > making the header row move down as the DIV is scrolled. This works, but it's
    > not as elegant and simple as I'd like.
    >
    > I wish IE would support tbody{scroll:auto} but we're not that lucky :(
    >
     
    Mick White, Sep 1, 2004
    #2
    1. Advertising

  3. Matt Kruse

    Randy Webb Guest

    Matt Kruse wrote:

    > I'm looking for the best JS/CSS solution to add functionality to tables.
    > The only browser which needs to be supported is IE5.5+, but no activeX can
    > be used.


    Curiosity - Why IE5.5+?

    > to be able to do:
    > - Fixed header row


    There are examples in the archives. I will try to hunt them down this
    afternoon if you cant find them.

    It used the TBODY if I remember right. It was even cross-browser :)

    > - Data sorting (preferrably intelligently determining data type based on
    > content)



    > - If possible, locking the first column from scrolling


    In IE, I think you are going to have to go to a second table, to hold
    that first column to keep it from scrolling. Or, are you referring to
    the rows?

    > I've seen one solution at
    > http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html which is
    > pretty good, but it uses a DIV that scrolls and puts the table within it,
    > making the header row move down as the DIV is scrolled. This works, but it's
    > not as elegant and simple as I'd like.
    >
    > I wish IE would support tbody{scroll:auto} but we're not that lucky :(
    >



    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Sep 1, 2004
    #3
  4. Matt Kruse

    Matt Kruse Guest

    Matt Kruse, Sep 1, 2004
    #4
  5. Matt Kruse

    Matt Kruse Guest

    Randy Webb wrote:
    > Curiosity - Why IE5.5+?


    Because the web app in which I'm needing to incorporate it is IE5.5+ only,
    and already relies on many IE-specific functionalities. It's not an internet
    app.

    >> to be able to do:
    >> - Fixed header row

    > There are examples in the archives. I will try to hunt them down this
    > afternoon if you cant find them.
    > It used the TBODY if I remember right. It was even cross-browser :)


    I've had a hard time finding ones that work well. The one I referenced in my
    earlier post, as it turns out, even breaks when I put a <form> tag on the
    page. Renders it fairly useless ;)

    >> - If possible, locking the first column from scrolling

    > In IE, I think you are going to have to go to a second table, to hold
    > that first column to keep it from scrolling. Or, are you referring to
    > the rows?


    Nope, definitely column. And the example url does this also.

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
     
    Matt Kruse, Sep 1, 2004
    #5
  6. Matt Kruse

    kaeli Guest

    kaeli, Sep 1, 2004
    #6
  7. Matt Kruse wrote:
    > I'm looking for the best JS/CSS solution to add functionality
    > to tables. The only browser which needs to be supported is
    > IE5.5+, but no activeX can be used.
    >
    > to be able to do:
    > - Fixed header row
    > - Data sorting (preferrably intelligently determining
    > data type based on content)
    > - If possible, locking the first column from scrolling
    >
    > I've seen one solution at
    > http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html


    Yes, that doesn't work very well without activeX.

    > which is pretty good, but it uses a DIV that scrolls and puts
    > the table within it, making the header row move down as the
    > DIV is scrolled. This works, but it's not as elegant and
    > simple as I'd like.


    I wrote a fixed header scrolling table recently (it is not IE 5.5+
    only):-

    <URL: http://litotes.demon.co.uk/example_scripts/tableScroll.html >

    But trying to combine it with table sorting might get a bit involved as
    it uses two clones of the original table so that the header cells are
    the same dimensions as the corresponding rows/columns so it would
    require re-ordering the rows in two table for the sorting, and the
    re-assignment of the position reporting object for the cell that defines
    the offsets for the various tables. It could be done but it wouldn't be
    that fast on a big table.

    Your desire to have the sort criteria 'intelligently' determined is
    another of your attempts to be overly general. You will not manage to be
    that general as I think you would have no choice but examine the cell
    contents with a regular expression to see if it was a Date, number or
    whatever. You would probably have to run through an entire column when
    making that test and would still be forced to make many assumptions
    about the format of the possible cell contents.

    > I wish IE would support tbody{scroll:auto} but we're not
    > that lucky :(


    The scrolling TBODY approach doesn't work that well anyway. The problem
    is that the TBODY will be as wide as the THEAD so when the TBODY
    acquires a vertical scroll bar its contents overflow the remaining space
    and a horizontal scroll bar appears. So you can scroll the TBODY
    horizontally and so stop the columns lining up with their header cells.

    Richard.
     
    Richard Cornford, Sep 1, 2004
    #7
  8. Matt Kruse

    Matt Kruse Guest

    Richard Cornford wrote:
    >> I've seen one solution at
    >> http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

    > Yes, that doesn't work very well without activeX.


    Actually, it works fine without ActiveX. The only thing X is used for is the
    data population. If you take that out and put in static data, it works fine,
    and purely via CSS.

    > I wrote a fixed header scrolling table recently (it is not IE 5.5+
    > only):-
    > <URL: http://litotes.demon.co.uk/example_scripts/tableScroll.html >


    Cannot find server or DNS Error

    > Your desire to have the sort criteria 'intelligently' determined is
    > another of your attempts to be overly general.


    No it's not. Don't be obtuse.

    > You will not manage to
    > be that general as I think you would have no choice but examine the
    > cell contents with a regular expression to see if it was a Date,
    > number or whatever. You would probably have to run through an entire
    > column when making that test and would still be forced to make many
    > assumptions about the format of the possible cell contents.


    Actually, I was thinking of just looking at the first 3-5 values. If they're
    all numeric, use numeric sort. If they match \d+/\d+/\d+ then use date. Etc,
    etc. If all else fails, fall back to alphanumeric sort. It should handle
    most common cases.

    > The scrolling TBODY approach doesn't work that well anyway. The
    > problem is that the TBODY will be as wide as the THEAD so when the
    > TBODY acquires a vertical scroll bar its contents overflow the
    > remaining space and a horizontal scroll bar appears.


    overflow-x:hidden;

    --
    Matt Kruse
    http://www.JavascriptToolbox.com
     
    Matt Kruse, Sep 1, 2004
    #8
  9. Matt Kruse

    Brett Merkey Guest

    "Matt Kruse" <> wrote in message
    news:...
    > I'm looking for the best JS/CSS solution to add functionality to tables.
    > to be able to do:
    > - Fixed header row
    > - Data sorting (preferrably intelligently determining data type based on
    > content)
    > - If possible, locking the first column from scrolling
    >
    > I've seen one solution at
    > http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html which

    is
    > pretty good, but it uses a DIV that scrolls and puts the table within it,
    > making the header row move down as the DIV is scrolled. This works, but

    it's
    > not as elegant and simple as I'd like.



    I believe the cited URL and this cross-browser variation
    http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

    are as elegant and simple as it gets. Our teams have used it for years in
    forms-based Web apps. Making CSS do most of that work makes all
    scripting tasks, such as sorting, selection for further operations, and
    filtering
    large tables, a whole lot easier.

    Not sure why putting a DIV around a table is a problem for you but I doubt
    if you will find a robust script that "intelligently" figures out the data
    type. It
    is so much easier all around to give the script that information at the
    outset.
    After all, manually or thru database population, you know the datatype at
    the outset. Why not pass on the info to the script?

    If you put together something that does all you want, please post it.

    Brett
     
    Brett Merkey, Sep 1, 2004
    #9
  10. Matt Kruse wrote:
    > Richard Cornford wrote:
    >>> I've seen one solution at
    >>> http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html

    >> Yes, that doesn't work very well without activeX.

    >
    > Actually, it works fine without ActiveX. The only
    > thing X is used for is the data population. If you
    > take that out and put in static data, it works fine,
    > and purely via CSS.


    Fair enough, its not much of a demonstration without the data.

    >> I wrote a fixed header scrolling table recently (it is not IE 5.5+
    >> only):-
    >> <URL: http://litotes.demon.co.uk/example_scripts/tableScroll.html >

    >
    > Cannot find server or DNS Error


    Sorry, I forgot the www from the front:-

    <URL: http://www.litotes.demon.co.uk/example_scripts/tableScroll.html >

    >> Your desire to have the sort criteria 'intelligently' determined
    >> is another of your attempts to be overly general.

    >
    > No it's not. Don't be obtuse.
    >
    >> You will not manage to be
    >> that general as I think you would have no choice but examine
    >> the cell contents with a regular expression to see if it was
    >> a Date, number or whatever. You would probably have to run
    >> through an entire column when making that test and would
    >> still be forced to make many assumptions about the
    >> format of the possible cell contents.

    >
    > Actually, I was thinking of just looking at the first 3-5 values.
    > If they're all numeric, use numeric sort. If they match
    > \d+/\d+/\d+ then use date. Etc, etc. If all else fails,
    > fall back to alphanumeric sort. It should handle most common
    > cases.


    That is quite an assumption.

    >> The scrolling TBODY approach doesn't work that well anyway. The
    >> problem is that the TBODY will be as wide as the THEAD so when the
    >> TBODY acquires a vertical scroll bar its contents overflow the
    >> remaining space and a horizontal scroll bar appears.

    >
    > overflow-x:hidden;


    And with CSS?

    Richard.
     
    Richard Cornford, Sep 2, 2004
    #10
  11. Matt Kruse

    Harag Guest

    On Wed, 1 Sep 2004 10:49:41 -0500, "Matt Kruse"
    <> wrote:

    >I'm looking for the best JS/CSS solution to add functionality to tables.
    >The only browser which needs to be supported is IE5.5+, but no activeX can
    >be used.
    >
    > to be able to do:
    > - Fixed header row
    > - Data sorting (preferrably intelligently determining data type based on
    >content)



    Doesn't your sorting JS routine help you?

    http://www.mattkruse.com/javascript/sorttable/



    HTH lol

    Al.

    > - If possible, locking the first column from scrolling
    >
    >I've seen one solution at
    >http://web.tampabay.rr.com/bmerkey/examples/locked-column-csv.html which is
    >pretty good, but it uses a DIV that scrolls and puts the table within it,
    >making the header row move down as the DIV is scrolled. This works, but it's
    >not as elegant and simple as I'd like.
    >
    >I wish IE would support tbody{scroll:auto} but we're not that lucky :(
     
    Harag, Sep 2, 2004
    #11
  12. JRS: In article <>, dated Wed, 1 Sep 2004
    16:13:36, seen in news:comp.lang.javascript, Matt Kruse
    <> posted :
    >
    >Actually, I was thinking of just looking at the first 3-5 values. If they're
    >all numeric, use numeric sort. If they match \d+/\d+/\d+ then use date. Etc,
    >etc.


    \d+/\d+/\d+ may be sufficient to suggest a date; but \d+-\d+-\d+ also
    should suggest a date. One should not disregard US Federal standards,
    even if they match international ones.

    But that is not sufficient information to enable a sort.

    The field order can be YMD, DMY, or MDY; which it is may be evident on
    closer inspection, or may remain uncertain.

    The year may be YYYY or YY; in the latter case, it will generally need
    to be windowed into YYYY before sorting.

    If the field is a sensible date, it can be sorted as a string; hence it
    does not need to be recognised.

    BTW, not only can YYYY-MM-DD be sorted as string, but YYYY-WW-D can.

    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 MIME. ©
    Web <URL:http://www.merlyn.demon.co.uk/> - w. FAQish topics, links, acronyms
    PAS EXE etc : <URL:http://www.merlyn.demon.co.uk/programs/> - see 00index.htm
    Dates - miscdate.htm moredate.htm js-dates.htm pas-time.htm critdate.htm etc.
     
    Dr John Stockton, Sep 2, 2004
    #12
  13. Matt Kruse

    Matt Kruse Guest

    Matt Kruse, Sep 2, 2004
    #13
  14. Matt Kruse

    Harag Guest

    On Thu, 2 Sep 2004 09:02:50 -0500, "Matt Kruse"
    <> wrote:

    >Harag wrote:
    >> Doesn't your sorting JS routine help you?
    >> http://www.mattkruse.com/javascript/sorttable/
    >> HTH lol

    >
    >Nah, that's ancient and only around for NS4-supporters who still need
    >client-side sorting.
    >Which probably doesn't even exist as a requirement for anyone anymore, so
    >I'll go ahead and remove it when I get time...



    No don't remove it... replace it :) when you find a cool sorting
    script please list it.

    Al.
     
    Harag, Sep 2, 2004
    #14
  15. Matt Kruse

    Mick White Guest

    Matt Kruse wrote:

    > Mick White wrote:
    >
    >>http://mickweb.com/football/aleague/profiles.html
    >>Something like this?

    >
    >
    > For purely sorting, that works. But it doesn't do it intelligently - it
    > requires a parameter to explicitly say what the data type is.
    >

    It would be easy enough to distinguish between String and Number. Just
    test the first entry in the column, and select the appropriate sort
    function. You can add your own rules for dates, heights, etc.
    Mick
     
    Mick White, Sep 2, 2004
    #15
  16. Matt Kruse

    Randy Webb Guest

    Mick White wrote:

    > Matt Kruse wrote:
    >
    >> Mick White wrote:
    >>
    >>> http://mickweb.com/football/aleague/profiles.html
    >>> Something like this?

    >>
    >>
    >>
    >> For purely sorting, that works. But it doesn't do it intelligently - it
    >> requires a parameter to explicitly say what the data type is.
    >>

    > It would be easy enough to distinguish between String and Number. Just
    > test the first entry in the column, and select the appropriate sort
    > function. You can add your own rules for dates, heights, etc.


    That won't work.

    var s='1 day at a time';

    Number or String?


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Sep 3, 2004
    #16
  17. Matt Kruse

    Randy Webb Guest

    Mick White wrote:

    > Matt Kruse wrote:
    >
    >> Mick White wrote:
    >>
    >>> http://mickweb.com/football/aleague/profiles.html
    >>> Something like this?

    >>
    >>
    >>
    >> For purely sorting, that works. But it doesn't do it intelligently - it
    >> requires a parameter to explicitly say what the data type is.
    >>

    > It would be easy enough to distinguish between String and Number. Just
    > test the first entry in the column, and select the appropriate sort
    > function. You can add your own rules for dates, heights, etc.
    > Mick


    That won't work.

    var s='1 day at a time';

    Number or String?

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Sep 3, 2004
    #17
  18. Matt Kruse

    Mick White Guest

    Randy Webb wrote:

    > Mick White wrote:


    >> It would be easy enough to distinguish between String and Number. Just
    >> test the first entry in the column, and select the appropriate sort
    >> function. You can add your own rules for dates, heights, etc.

    >
    >
    > That won't work.
    >
    > var s='1 day at a time';
    >
    > Number or String?


    Neither, it's the start of a Baptist Hymn....
    Mick
    >
    >
     
    Mick White, Sep 3, 2004
    #18
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    5
    Views:
    631
  2. Marrow
    Replies:
    0
    Views:
    4,178
    Marrow
    Jul 2, 2003
  3. Kevin Walzer

    Re: PIL (etc etc etc) on OS X

    Kevin Walzer, Aug 1, 2008, in forum: Python
    Replies:
    4
    Views:
    451
    Fredrik Lundh
    Aug 13, 2008
  4. Mel
    Replies:
    2
    Views:
    211
    Thomas 'PointedEars' Lahn
    Jul 10, 2004
  5. Replies:
    0
    Views:
    355
Loading...

Share This Page