Skip to content
This repository has been archived by the owner on Jun 14, 2018. It is now read-only.

Commit

Permalink
feat(table): add row selection & attr validation
Browse files Browse the repository at this point in the history 
Added support to select rows within the table. Added attribute validation and error logging to the console to address directive guidelines [007](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/DIRECTIVE-CHECKLIST.md#directive-attribute-validation) & [008](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/blob/master/docs/guides/DIRECTIVE-CHECKLIST.md#error-messages).

Closes #61. Closes #101. Closes #115.
  • Loading branch information
@waldekmastykarz @andrewconnell
waldekmastykarz authored and andrewconnell committed Jan 23, 2016
1 parent b8d00b1 commit d101e10
Show file tree
Hide file tree
Showing 5 changed files with 747 additions and 16 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@

#### Features
- **uif-contextual-menu**: added attribute validation & error logging to console (by @s-KaiNet; closes [#99](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/99))
- **uif-table**: added support to select multiple rows (by @waldekmastykarz; closes [#61](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/61))
- **uif-table**: added attribute validation & error logging to console (by @waldekmastykarz; closes [#101](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/issues/101))

<a name="0.2.0"</a>
### [0.2.0 (January 19, 2016)](/~https://github.com/ngOfficeUIFabric/ng-officeuifabric/releases/tag/0.2.0)
Expand Down
160 changes: 160 additions & 0 deletions src/components/table/demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,166 @@ <h2>Sorting table</h2>
</uif-table-row>
</uif-table>
</p>

<h2>Selecting rows</h2>
<p>
The <code>uif-table</code> directive supports three different modes for selecting table rows:
<ul>
<li><code>none</code> - table doesn't support selecting rows</li>
<li><code>single</code> - table allows selecting a single row</li>
<li><code>multiple</code> - tables allows selecting multiple rows</li>
</ul>
The row selection mode is set using the <code>uif-row-select-mode</code> attribute on the <code>uif-table</code>
directive, eg.
<code>&lt;uif-table uif-row-select-mode="multiple"&gt;</code>
</p>
<p>
Data items corresponding to the selected rows can be retrieved using the <code>table.selectedItems</code> property.
</p>
<p>
Please note that the ability to select rows works independent of the ability to mark rows as selected using the <code>uif-selected</code> attribute on the <code>uif-table-row</code> directive. Even if you choose to not to allow users to select rows in the table, you can still render some rows as selected.
</p>
<h3>Selecting rows disabled (<code>&lt;uif-table uif-row-select-mode="none"&gt;</code>)</h3>
<p>
This markup: <br />
<pre>
&lt;uif-table uif-row-select-mode="none"&gt;
&lt;uif-table-row&gt;
&lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
&lt;uif-table-header uif-order-by="fileName"&gt;File name&lt;/uif-table-header&gt;
&lt;uif-table-header&gt;Location&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="modified"&gt;Modified&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="type"&gt;Type&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="size"&gt;Size&lt;/uif-table-header&gt;
&lt;/uif-table-row&gt;
&lt;uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}<!---->}"&gt;
&lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
&lt;uif-table-cell&gt;{{f.fileName}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.location}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.modified | date}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.type}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.size}}&lt;/uif-table-cell&gt;
&lt;/uif-table-row&gt;
&lt;/uif-table&gt;
</pre>
</p>
<p ng-controller="demoController">
Renders this (selecting rows disabled, one row marked as selected):
<br />
<uif-table uif-row-select-mode="none">
<uif-table-row>
<uif-table-row-select></uif-table-row-select>
<uif-table-header uif-order-by="fileName">File name</uif-table-header>
<uif-table-header>Location</uif-table-header>
<uif-table-header uif-order-by="modified">Modified</uif-table-header>
<uif-table-header uif-order-by="type">Type</uif-table-header>
<uif-table-header uif-order-by="size">Size</uif-table-header>
</uif-table-row>
<uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
<uif-table-row-select></uif-table-row-select>
<uif-table-cell>{{f.fileName}}</uif-table-cell>
<uif-table-cell>{{f.location}}</uif-table-cell>
<uif-table-cell>{{f.modified | date}}</uif-table-cell>
<uif-table-cell>{{f.type}}</uif-table-cell>
<uif-table-cell>{{f.size}}</uif-table-cell>
</uif-table-row>
</uif-table>
</p>
<h3>Selecting single row (<code>&lt;uif-table uif-row-select-mode="single"&gt;</code>)</h3>
<p>
This markup: <br />
<pre>
&lt;uif-table uif-row-select-mode="single"&gt;
&lt;uif-table-row&gt;
&lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
&lt;uif-table-header uif-order-by="fileName"&gt;File name&lt;/uif-table-header&gt;
&lt;uif-table-header&gt;Location&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="modified"&gt;Modified&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="type"&gt;Type&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="size"&gt;Size&lt;/uif-table-header&gt;
&lt;/uif-table-row&gt;
&lt;uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}<!---->}"&gt;
&lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
&lt;uif-table-cell&gt;{{f.fileName}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.location}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.modified | date}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.type}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.size}}&lt;/uif-table-cell&gt;
&lt;/uif-table-row&gt;
&lt;/uif-table&gt;
</pre>
</p>
<p ng-controller="demoController">
Renders this (selecting single row enabled, one row marked as selected):
<br />
<uif-table uif-row-select-mode="single">
<uif-table-row>
<uif-table-row-select></uif-table-row-select>
<uif-table-header uif-order-by="fileName">File name</uif-table-header>
<uif-table-header>Location</uif-table-header>
<uif-table-header uif-order-by="modified">Modified</uif-table-header>
<uif-table-header uif-order-by="type">Type</uif-table-header>
<uif-table-header uif-order-by="size">Size</uif-table-header>
</uif-table-row>
<uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
<uif-table-row-select></uif-table-row-select>
<uif-table-cell>{{f.fileName}}</uif-table-cell>
<uif-table-cell>{{f.location}}</uif-table-cell>
<uif-table-cell>{{f.modified | date}}</uif-table-cell>
<uif-table-cell>{{f.type}}</uif-table-cell>
<uif-table-cell>{{f.size}}</uif-table-cell>
</uif-table-row>
</uif-table>
</p>
<h3>Selecting multiple rows (<code>&lt;uif-table uif-row-select-mode="multiple"&gt;</code>)</h3>
<p>
When allowing to select multiple rows it is possible to toggle selection of all rows using the table row selector (<uif-icon uif-type="check" style="color: #a6a6a6; border: 1px solid #a6a6a6;"></uif-icon>) in the header row. If not all rows are selected, clicking the table row selector will select all rows. If all rows are selected, clicking it will deselect all rows.
</p>
<p>
This markup: <br />
<pre>
&lt;uif-table uif-row-select-mode="multiple"&gt;
&lt;uif-table-row&gt;
&lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
&lt;uif-table-header uif-order-by="fileName"&gt;File name&lt;/uif-table-header&gt;
&lt;uif-table-header&gt;Location&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="modified"&gt;Modified&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="type"&gt;Type&lt;/uif-table-header&gt;
&lt;uif-table-header uif-order-by="size"&gt;Size&lt;/uif-table-header&gt;
&lt;/uif-table-row&gt;
&lt;uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}<!---->}"&gt;
&lt;uif-table-row-select&gt;&lt;/uif-table-row-select&gt;
&lt;uif-table-cell&gt;{{f.fileName}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.location}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.modified | date}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.type}}&lt;/uif-table-cell&gt;
&lt;uif-table-cell&gt;{{f.size}}&lt;/uif-table-cell&gt;
&lt;/uif-table-row&gt;
&lt;/uif-table&gt;
</pre>
</p>
<p ng-controller="demoController">
Renders this (selecting multiple rows enabled, one row marked as selected):
<br />
<uif-table uif-row-select-mode="multiple">
<uif-table-row>
<uif-table-row-select></uif-table-row-select>
<uif-table-header uif-order-by="fileName">File name</uif-table-header>
<uif-table-header>Location</uif-table-header>
<uif-table-header uif-order-by="modified">Modified</uif-table-header>
<uif-table-header uif-order-by="type">Type</uif-table-header>
<uif-table-header uif-order-by="size">Size</uif-table-header>
</uif-table-row>
<uif-table-row ng-repeat="f in files | orderBy:table.orderBy:!table.orderAsc" uif-item="f" uif-selected="{{f.isSelected}}">
<uif-table-row-select></uif-table-row-select>
<uif-table-cell>{{f.fileName}}</uif-table-cell>
<uif-table-cell>{{f.location}}</uif-table-cell>
<uif-table-cell>{{f.modified | date}}</uif-table-cell>
<uif-table-cell>{{f.type}}</uif-table-cell>
<uif-table-cell>{{f.size}}</uif-table-cell>
</uif-table-row>
</uif-table>
</p>
</body>

</html>
Loading

0 comments on commit d101e10

Please sign in to comment.