lsmith / yui3

YUI 3.x Source Tree
http://developer.yahoo.com/yui/3/
Other
7 stars 0 forks source link

Add hide/showColumn #6

Closed lsmith closed 11 years ago

lsmith commented 12 years ago

Probably a class extension that auto-mix()es onto Y.DataTable

The implementation I'm thinking of involves adding a <style> block in the contentBox with dynamically generated rules that apply display: none based on the cascade. All cells, including header cells, would need to be stamped with a column-specific class, allowing, e.g.

<style>
.yui3-datatable-hide-foo .yui3-datatable-column-foo,
.yui3-datatable-hide-foo .yui3-datatable-column-bar,
...,
.yui3-datatable-hide-bar .yui3-datatable-column-baz { display: none; }
</style>

...
<div class="yui3-datatable yui3-datatable-hide-foo">
  <div class="yui3-datatable-content">
    <table...>
        ...
        <tbody>
            <tr><td class="yui3-datatable-column-foo"><div ...liner>Foo</div></td>...</tr>

Thus hiding or showing a column would involve boundingBox.addClass(<hide class>) or removeClass(...).

Caveats:

  1. Not all columns have keys, some just formatters - complicates using column classes based on key
  2. The same column can appear in the columns list multiple times - complicates using column classes based on key
  3. Columns can be moved - complicates using classnames based on column position
  4. Nested headers will need to have their colspans adjusted.
  5. Since hidden cells will still be in the DOM, this will impact memory and render time.

The <style> must be replaced wholesale if columns are added. It doesn't need to be changed if columns are moved or deleted. Replacing the <style> will trigger a page reflow, so should be avoided.