Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Table Widget for IE? Fixed header, sorting columns, etc

Reply
Thread Tools

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

 
 
Matt Kruse
Guest
Posts: n/a
 
      09-01-2004
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/e...olumn-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


 
Reply With Quote
 
 
 
 
Mick White
Guest
Posts: n/a
 
      09-01-2004
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/e...olumn-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
>

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      09-01-2004
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/e...olumn-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
 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      09-01-2004
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.

--
Matt Kruse
http://www.JavascriptToolbox.com


 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      09-01-2004
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


 
Reply With Quote
 
kaeli
Guest
Posts: n/a
 
      09-01-2004
In article <(E-Mail Removed)>, http://www.velocityreviews.com/forums/(E-Mail Removed)
enlightened us with...
> 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.
>


Will this one do?

http://www.ipwebdesign.net/kaelisSpa...tableSort.html

You'd need to modify it for the first row thing.

--
--
~kaeli~
Why did kamikaze pilots wear helmets?
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace

 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      09-01-2004
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/e...olumn-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_s...bleScroll.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.


 
Reply With Quote
 
Matt Kruse
Guest
Posts: n/a
 
      09-01-2004
Richard Cornford wrote:
>> I've seen one solution at
>> http://web.tampabay.rr.com/bmerkey/e...olumn-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_s...bleScroll.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


 
Reply With Quote
 
Brett Merkey
Guest
Posts: n/a
 
      09-01-2004
"Matt Kruse" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> 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/e...olumn-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/e...le-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


 
Reply With Quote
 
Richard Cornford
Guest
Posts: n/a
 
      09-01-2004
Matt Kruse wrote:
> Richard Cornford wrote:
>>> I've seen one solution at
>>> http://web.tampabay.rr.com/bmerkey/e...olumn-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_s...bleScroll.html >

>
> Cannot find server or DNS Error


Sorry, I forgot the www from the front:-

<URL: http://www.litotes.demon.co.uk/examp...bleScroll.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.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: Tkinter.event.widget: handler gets name instead of widget. Terry Reedy Python 15 07-16-2012 10:32 AM
Re: Tkinter.event.widget: handler gets name instead of widget. Frederic Rentsch Python 0 07-09-2012 08:39 PM
Tkinter.event.widget: handler gets name instead of widget. Frederic Rentsch Python 0 07-08-2012 09:19 PM
user interface widget: ordered selection list: do any UI library has this widget? zhangweiwu@realss.com Javascript 0 10-10-2006 01:02 AM
Scrollable table widget with fixed header Mel Javascript 2 07-10-2004 04:34 PM



Advertisments