|
1 | | -# Thoughts |
2 | | - |
3 | | -> Don't build the 'everything-in-one' solution first. Build a "you must put the components together yourself" approach |
4 | | -> first. Then create some directives afterwards that simply packages everything together _for_ you. |
5 | | -
|
6 | | -## Outstanding Problems |
7 | | - |
8 | | -* pinned columns performance |
9 | | -* Core performance (multiple grids, grids loading slowly, horizontal scrolling peformance in general) |
10 | | -* Events (many bugs) |
11 | | -* Layout flexibility |
12 | | - |
13 | | -# Desired Functionality |
14 | | - |
15 | | -* Pinning columns |
16 | | -* Sorting Columns |
17 | | -* Easy-to-customize templates |
18 | | -* Editing |
19 | | -* Grouping |
20 | | -* Searching / filtering (over whole grid, by column) |
21 | | -* Pagination (with hooks for backend retrieval) |
22 | | -* Row / column selection (both by user and programmatically) |
23 | | -* Column resizing (drag separator to resize, double-click to auto-size) |
24 | | -* Mobile/responsive options? (Column |
25 | | -* Swappable templating. [seems like a common request, update/swap template and alter grid look+feel+functionality] |
26 | | - |
27 | | -# Browser Support? |
28 | | -* IE9+, latest FF, Opera and Chrome. (Which safari version? jQuery 2.* goes with 5.1) |
29 | | - |
30 | | -# Angular Support? |
31 | | -* We should state support up front with each release. Also, one of the things that has come up a lot is issues with unstable releases. We should state whether or not we're going to support unstable angular. Just as a standard. |
32 | | - |
33 | | -## Plugins? |
34 | | -* Column reordering |
35 | | -* Row reordering |
36 | | -* Exporting? |
37 | | - |
38 | | -# Declaritive HTML |
39 | | - |
40 | | -```html |
41 | | -<div ui-grid> |
42 | | - <div ui-grid-header> |
43 | | - <!-- auto-generate column headers if no content supplied? --> |
44 | | - </html> |
45 | | - |
46 | | - <!-- ui-grid-repeat auto-generates columns, ui-repeat-virtual handles the actual virtual repeater functionality? --> |
47 | | - <div ui-grid-repeat ui-repeat-virtual="d in data"> |
48 | | - <!-- auto-generate columns if no content supplied? --> |
49 | | - </div> |
50 | | - |
51 | | - <!-- or perhaps this?? (from ProLoser) --> |
52 | | - <ng-repeat="item in $virtualized" ui-virtualize="items"> |
53 | | - <!-- |
54 | | - ui-virtualize virtualizes a list of items and hands it to the built-in repeater, if the repeater is performant enough |
55 | | - --> |
56 | | -</div> |
57 | | -``` |
58 | | -> We need to do a default rendering anyway, so yes, we would auto-generate column headers and columns. |
59 | | -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. |
60 | | - |
61 | | -> rob |
62 | | -
|
63 | | -## Alternative |
64 | | - |
65 | | -```html |
66 | | -<div class="grid"> |
67 | | - <div ui-grid-header scrollsync> |
68 | | - <!-- auto-generate column headers if no content supplied? --> |
69 | | - </div> |
70 | | - |
71 | | - <div class="grid-body" ui-virtualize="data as $rows" scrollsync ui-pinnable="columns"> |
72 | | - <!-- virtualize creates `$rows` that is passed to ng-repeat --> |
73 | | - <div ng-repeat="row in $rows"> |
74 | | - |
75 | | - |
76 | | - <div ng-repeat="column in row"> |
77 | | - <!-- ability to define custom columns --> |
78 | | - <!-- ability to virtualize columns too: |
79 | | - <div ng-repeat="column in $columns" ui-virtualize="row as $columns"> |
80 | | - --> |
81 | | - </div> |
82 | | - |
83 | | - <!-- or pretty much a default template of the above snippet ^^ --> |
84 | | - <ui-grid-row data="row"></ui-grid-row> |
85 | | - |
86 | | - </div> |
87 | | - </div> |
88 | | -</div> |
89 | | -``` |
90 | | - |
91 | | -> 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. |
92 | | -> Declarative pinning might look something like this? |
93 | | -> rob |
94 | | -
|
95 | | -```html |
96 | | - |
97 | | -<div class="grid"> |
98 | | - <!-- probably a new implementation of sortable or just renamed to ui-reorder, etc --> |
99 | | - <div ui-grid-header ui-pinnable="data.columns" ui-sortable="data.columns"> |
100 | | - <!-- how to mark-up pinned columns so they align with resepective pinned grid-body below? --> |
101 | | - <div ng-repeat="column in data.columns"> |
102 | | - {{ column }} |
103 | | - <!-- Pinning is handled by heading row only, updated $pinnable object reflects changes to body automatically --> |
104 | | - <a ng-click="$pinnable.pin(column, 'left')">Pin</a> |
105 | | - </div> |
106 | | - </div> |
107 | | - <div class="grid-body" ui-virtualize="data.rows as $rows"> |
108 | | - <div ng-repeat="row in $rows"> |
109 | | - <!-- ui-pinnable creates a subset of columns --> |
110 | | - <div ng-repeat="column in $pinnable.unpinned" ui-editable="row[column]"> |
111 | | - {{ row[column] }} |
112 | | - </div> |
113 | | - </div> |
114 | | - </div> |
115 | | - <!-- left and right pin-tables might be auto-generated by cloning the body table in compile phase --> |
116 | | - <div class="grid-body pinned left" ui-virtualize="data as $rows"> |
117 | | - <div ng-repeat="row in $rows"> |
118 | | - <div ng-repeat="column in $pinnable.left" ui-editable="row[column]"> |
119 | | - {{ row[column] }} |
120 | | - </div> |
121 | | - </div> |
122 | | - </div> |
123 | | - <div class="grid-body pinned right" ui-virtualize="data as $rows"> |
124 | | - <div ng-repeat="row in $rows"> |
125 | | - <div ng-repeat="column in $pinnable.right" ui-editable="row[column]"> |
126 | | - {{ row[column] }} |
127 | | - </div> |
128 | | - </div> |
129 | | - </div> |
130 | | -</div> |
131 | | -``` |
132 | | - |
133 | | - |
134 | | -# CSS |
135 | | -```css |
136 | | -.pinned.left { |
137 | | - float: left; |
138 | | -} |
139 | | -.pinned.right { |
140 | | - float: right; |
141 | | -} |
142 | | -``` |
| 1 | +Moved to https://docs.google.com/document/d/1fk7EwwJUGq3MTXaE6vp29rA4sXgzp5DA_rn_ERcPIz8/edit?usp=sharing |
| 2 | +(Please sign-in to google so that we know who changed what for followup questions) |
0 commit comments