Research notes for the Grid widget.
Review of existing implementations
1 SlickGrid Markup
SlickGrid markup is based around DIV elements. DIV elements are used for the grid container, head, column header, body, rows, and cells.
1.1 SlickGrid Container
The SlickGrid container has a dynically generated class and contains four divs, (seemingly) three for the head and one for the body.
<div class="slickgrid_%randomnumber% ui-widget">
<div class="slick-header ui-state-default"></div>
<div class="slick-headerrow"></div>
<div class="slick-top-panel-scroller"></div>
<div class="slick-viewport"></div>
</div>
In all the SlickGrid examples, the .slick-headerrow and .slick-top-panel-scroller divs are hidden. I'm not yet sure what they're used for.
Grid Container HTML | <div class=slickgrid_%randomnumber%>
class
- slickgrid_%randomnumber%
- ui-widget
style
- width: ___px; height: ___px
- overflow: hidden;
- outline: 0px none;
- position: relative;
tabindex
hidefocus
Grid Container CSS | .slickgrid_%randomnumber%
(none)
Grid Container Notes
- There is no generic class on the slickgrid container such as 'slickgrid' or 'slick-grid' meaning there's no way to style or select all grid container elements. For this reason, there are no static css rules for the grid container.
- The dynamic class such as slickgrid_18615 or slickgrid_36487 is not used for styling the slickgrid container itself, only for dynamically sizing descendent elements such as column headers and cells. Example:
- .slickgrid_933474 .slick-headerrow-columns { height: 25px; }
- The explicit width and height on the slickgrid container are required in the markup, otherwise the grid body is not visible (height:1px) and the grid gets the width of the grid header (width:100000px).
- The style=outline:0px none; as well as the (IE-only) attribute hidefocus=true means there is no visual indicator of the slickgrid having the focus. This could have implications for a11y.
1.2 SlickGrid Head
Grid Head HTML | <div class=slick-header>
class
- slick-header
- ui-state-default
style
- overflow: hidden;
- position: relative;
Grid Head CSS | .slick-header
Grid Column Headers
Grid Column Header
1.3 SlickGrid Column Header
1.4 SlickGrid Body
The SlickGrid body is two nested divs. The inner div, .grid-canvas contains all the visible rows, each with a .slick-row class
<div class="slick-viewport">
<div class="grid-canvas">
<div class="ui-widget-content slick-row even" row="0"></div>
<div class="ui-widget-content slick-row odd" row="1"></div>
<div class="ui-widget-content slick-row even" row="2"></div>
...
<div class="ui-widget-content slick-row even" row="38"></div>
</div>
</div>
Grid Body HTML | <div class=slick-viewport>
class
style
- width: 100%;
- overflow: auto;
- outline: 0pt none;
- position: relative;
- height: ___px;
hidefocus
tabindex
Grid Body HTML | <div class=grid-canvas>
class
style
- width: ___px;
- height: _____px;
hidefocus
tabindex
1.5 SlickGrid Row
Grid Row HTML | <div class=slick-row row=%number%>
class
- slick-row
- ui-widget-content
- even %OR% odd
style
row
1.6 SlickGrid Cell
Cells have their widths set by the dynamically generated "c%number%" CSS classes and are stacked in the row via "float:left".
Grid Cell HTML | <div class=slick-cell>
class
2 jqGrid Markup
jqGrid markup is based around 2 TABLE elements and DIV elements. The column headings are in a TABLE with only a THEAD + TRs + THs. The rows and cells are in a TABLE with only a TBODY + TRs + TDs.
2.1 jqGrid Container
Grid Container HTML |
Grid Container CSS |
2.2 jqGrid Head
Grid Head HTML |
Grid Head CSS |
2.3 jqGrid Column Header
2.4 jqGrid Body
Grid Body HTML |
2.5 jqGrid Row
Grid Row HTML |
2.6 jqGrid Cell
Grid Cell HTML |
3 DataTables Markup
The Big Table Issue
http://www.8164.org/the-big-table-issue/
Table UI Patterns
- Alternating rows styling
- Full row selection
- Table sections
- Sorting
- Filtering
- Pagination
- Continuous scrolling
- Fixed table header
- Headerless table
- Expandable rows
- Row actions
- Inline actions
- Hover actions
- Menu actions
- Actions on multiple rows
source: http://www.jankoatwarpspeed.com/post/2010/02/26/table-ui-patterns.aspx
- Inline Editing
- Super Wide Tables
- In-Column Filtering
source: http://designingwebinterfaces.com/ultimate-guide-to-table-ui-patterns
- Creating/populating the titlebar from caption
- Loading data from the table
- Set column width (defaults to auto, have an 'equal' option, and specify width)
- Div around both tables, can support horizontal scrolling
- Set table height (data-ui-height?) can be a pixel or 'auto' (auto expands to full contents)
- If this is not specified, then we should expand height/width (needs investigation)
- Trimming table cell contents to keep them from wrapping
- A way to highlight a column explicitly
- A way to refresh the table or an individual row
- Alignment of columns
- Ability to Show Row # in a column (dynamic column)
- Theming
- Hover Row / Hover Column / Hover Cell
- Striping
- If height is specified, and row body height could have scrollbar
Comments (0)
You don't have permission to comment on this page.