Rowspan

Brainstorm.md

@@ -0,0 +1,117 @@
+# Thoughts
+
+> Don't build the 'everything-in-one' solution first. Build a "you must put the components together yourself" approach 
+> first. Then create some directives afterwards that simply packages everything together _for_ you.
+
+## Outstanding Problems
+
+* pinned columns performance
+* Core performance (multiple grids, grids loading slowly, horizontal scrolling peformance in general)
+* Events (many bugs)
+* Layout flexibility 
+
+# Declaritive HTML
+
+```html
+<div ui-grid>
+ <div ui-grid-header>
+ <!-- auto-generate column headers if no content supplied? -->
+ </html>
+
+ <!-- ui-grid-repeat auto-generates columns, ui-repeat-virtual handles the actual virtual repeater functionality? -->
+ <div ui-grid-repeat ui-repeat-virtual="d in data">
+ <!-- auto-generate columns if no content supplied? -->
+ </div>
+
+ <!-- or perhaps this?? (from ProLoser) -->
+ <ng-repeat="item in $virtualized" ui-virtualize="items">
+ <!--
+ ui-virtualize virtualizes a list of items and hands it to the built-in repeater, if the repeater is performant enough
+ -->
+</div>
+```
+> We need to do a default rendering anyway, so yes, we would auto-generate column headers and columns. 
+We'll have the code to do so in order to do some core demo/default implementation- even if we're successful and can get this thing fully customizable. 
+
+> rob
+
+## Alternative
+
+```html
+<div class="grid">
+ <div ui-grid-header scrollsync>
+ <!-- auto-generate column headers if no content supplied? -->
+ </div>
+
+ <div class="grid-body" ui-virtualize="data as $rows" scrollsync ui-pinnable="columns">
+ <!-- virtualize creates `$rows` that is passed to ng-repeat -->
+ <div ng-repeat="row in $rows">
+
+
+ <div ng-repeat="column in row">
+ <!-- ability to define custom columns -->
+ <!-- ability to virtualize columns too:
+ <div ng-repeat="column in $columns" ui-virtualize="row as $columns">
+ -->
+ </div>
+
+ <!-- or pretty much a default template of the above snippet ^^ -->
+ <ui-grid-row data="row"></ui-grid-row>
+
+ </div>
+ </div>
+</div>
+```
+
+> I like this. There are lots of use cases we have to account for if we're going with this pattern, but at least as far as the basics I think it's clear.
+> Declarative pinning might look something like this?
+> rob
+
+```html
+
+<div class="grid">
+ <!-- probably a new implementation of sortable or just renamed to ui-reorder, etc -->
+ <div ui-grid-header ui-pinnable="data.columns" ui-sortable="data.columns">
+ <!-- how to mark-up pinned columns so they align with resepective pinned grid-body below? -->
+ <div ng-repeat="column in data.columns">
+ {{ column }}
+ <!-- Pinning is handled by heading row only, updated $pinnable object reflects changes to body automatically -->
+ <a ng-click="$pinnable.pin(column, 'left')">Pin</a>
+ </div>
+ </div>
+ <div class="grid-body" ui-virtualize="data.rows as $rows">
+ <div ng-repeat="row in $rows">
+ <!-- ui-pinnable creates a subset of columns -->
+ <div ng-repeat="column in $pinnable.unpinned" ui-editable="row[column]">
+ {{ row[column] }}
+ </div>
+ </div>
+ </div>
+ <!-- left and right pin-tables might be auto-generated by cloning the body table in compile phase -->
+ <div class="grid-body pinned left" ui-virtualize="data as $rows">
+ <div ng-repeat="row in $rows">
+ <div ng-repeat="column in $pinnable.left" ui-editable="row[column]">
+ {{ row[column] }}
+ </div>
+ </div>
+ </div>
+ <div class="grid-body pinned right" ui-virtualize="data as $rows">
+ <div ng-repeat="row in $rows">
+ <div ng-repeat="column in $pinnable.right" ui-editable="row[column]">
+ {{ row[column] }}
+ </div>
+ </div>
+ </div>
+</div>
+```
+
+
+# CSS
+```css
+.pinned.left {
+ float: left;
+}
+.pinned.right {
+ float: right;
+}
+```