Sunday, December 22, 2013

HTML: fixed table header with scrollable data (Angular?)

Having fixed / floating header in a table is not easy even in Excel.
It should be, that is an obvious use-case.

After 20+ years, HTML still does not have an universal, easy, declarative or plug-in solution either, to preserve semantics of a data table.
Most "solutions" fix width of columns, reducing flexibility of HTML tables, and require investigations, plugins, testing...
Time to add this to HTML6 or as Angular "directives"?

Here are some ad-hock solutions

html - How to make fixed header table inside scrollable div? - Stack Overflow:

(1) Edit fiddle - JSFiddle
(2) Edit fiddle - JSFiddle

Persistent Headers | CSS-Tricks

Table with Persistent Headers

Here is Angular's "generic" solution...

Releasing Angular Table, the first 100% declarative angular table grid directive - Google Groups

Demo of Angular table with fixed header

No comments: