Permalink
Browse files

feat(details): add functionality to collapse row data

  • Loading branch information...
VMBindraban
VMBindraban committed Dec 28, 2016
1 parent eeb1f1f commit 6417151d439c10af0fc4bedebdf2dcaa539e7936
Showing with 75 additions and 22 deletions.
  1. +2 −0 README.md
  2. +1 −0 doc/README.md
  3. +27 −1 doc/usage.md
  4. +35 −21 src/bootstrap/datatable.html
  5. +10 −0 src/datatable.js
@@ -14,6 +14,7 @@ Features:
* Custom columns
* Custom button actions
* Custom valueConverters
* Expand data to view additional data
* And more
## Uses
@@ -49,6 +50,7 @@ this.repository = entityManager.getRepository('users');
actions.bind="actions"
populate="user"
footer.bind="footer"
detail-view="./details"
></datatable>
```
@@ -14,6 +14,7 @@ Features:
* Custom button actions
* Custom valueConverters
* Custom criteria
* Expand data to view additional data
* And more
## Enjoy
@@ -15,17 +15,22 @@ this.repository = entityManager.getRepository('users');
actions.bind="actions"
populate="user"
footer.bind="footer"
detail-view="./details"
></datatable>
```
## Attributes
Datatable supports a couple of attributes allowing you to customize behavior.
### columns
Comma-separated string representing the column names to display. Or Array of objects describing the columns. Example:
Comma-separated string representing the column names to display. Or Array of objects describing the columns.
Example:
```html
<datatable resource="user" columns.bind="columns"></datatable>
```
```js
export class List {
columns = [{
@@ -184,6 +189,27 @@ class ViewModel {
It's possible to add an extra row to the bottom of your datatable.
Footer also parses HTML.
### detail-view
When `detail-view` is given a ViewModel, it allows you to expand the row with additional information.
Example:
```html
<!-- details.html -->
<template>
Information about ${row.name}
</template>
```
```js
// details.js
export class Details {
activate(row) {
this.row = row; // row contains the data of the collapse row
}
}
```
### criteria
Full criteria object used to talk to the API. This object contains the `where`, `skip`, `limit`, `sort` and `populate`.
@@ -30,6 +30,8 @@
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th if.bind="detailView" style="width: 50px;"></th>
<!-- Labels -->
<th click.delegate="doSort(columnLabel)" repeat.for="columnLabel of columnLabels">
<!-- Just show the label -->
@@ -50,33 +52,45 @@
<tbody>
<tr if.bind="loadingIndicator && loading">
<td colspan="${columnLabels.length + (showActions() ? 1 : 0)}" innerhtml.bind="loadingIndicator"></td>
<td colspan.bind="colspan" innerhtml.bind="loadingIndicator"></td>
</tr>
<tr repeat.for="row of data" if.bind="!loading">
<template containerless repeat.for="row of data" if.bind="!loading">
<tr>
<td style="text-align: center;" if.bind="detailView" click.delegate="collapseRow(row)"><i class="fa fa-${row._collapsed ? 'chevron-down' : 'chevron-right'}"></i></td>
<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<span if.bind="!columnLabel.route && !route && !select" innerhtml.bind="displayValue(row, columnLabel.column) | convertManager: columnLabel.converter"></span>
<a if.bind="route || select || columnLabel.route" click.delegate="selected(row, columnLabel)" innerhtml.bind="displayValue(row, columnLabel.column) | convertManager: columnLabel.converter"></a>
</td>
<!-- Columns -->
<td repeat.for="columnLabel of columnLabels">
<span if.bind="!columnLabel.route && !route && !select" innerhtml.bind="displayValue(row, columnLabel.column) | convertManager: columnLabel.converter"></span>
<a if.bind="route || select || columnLabel.route" click.delegate="selected(row, columnLabel)" innerhtml.bind="displayValue(row, columnLabel.column) | convertManager: columnLabel.converter"></a>
</td>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" show.bind="showActions() && hasVisibleActions">
<button if.bind="edit !== null" class="btn btn-sm btn-white" click.delegate="doEdit(row)">
<i class="fa fa-pencil"></i>
</button>
<!-- Actions -->
<td style="white-space: nowrap; width: 1px;" show.bind="showActions() && hasVisibleActions">
<button if.bind="edit !== null" class="btn btn-sm btn-white" click.delegate="doEdit(row)">
<i class="fa fa-pencil"></i>
</button>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDestroy(row)">
<i class="fa fa-trash"></i>
</button>
<button if.bind="destroy !== null" class="btn btn-sm btn-danger" click.delegate="doDestroy(row)">
<i class="fa fa-trash"></i>
</button>
<button repeat.for="action of actions" if.bind="checkVisibility(action, row)" t="[title]${action.title}" title.bind="action.title || ''" disabled.bind="checkDisabled(action, row)" class="btn btn-sm btn-${action.type || 'default'}" click.trigger="doCustomAction(action, row)">
<i if.bind="action.icon" class="fa fa-${action.icon}"></i>
<span if.bind="!action.icon && action.title" t="${action.title}">${action.title}</span>
</button>
</td>
</tr>
<button repeat.for="action of actions" if.bind="checkVisibility(action, row)" t="[title]${action.title}" title.bind="action.title || ''" disabled.bind="checkDisabled(action, row)" class="btn btn-sm btn-${action.type || 'default'}" click.trigger="doCustomAction(action, row)">
<i if.bind="action.icon" class="fa fa-${action.icon}"></i>
<span if.bind="!action.icon && action.title" t="${action.title}">${action.title}</span>
</button>
</td>
</tr>
<!-- Needed for table-striped -->
<tr if.bind="detailView && row._collapsed" style="display: none;"></tr>
<tr if.bind="detailView && row._collapsed">
<td colspan.bind="colspan" style="padding: 0;margin: 0;">
<compose view-model.bind="detailView" model.bind="row"></compose>
</td>
</tr>
</template>
</tbody>
<tfoot if.bind="footer" innerhtml.bind="footer"></tfoot>
</table>
@@ -27,6 +27,7 @@ export class DataTable {
@bindable page = 1; // Current page.
@bindable loadingIndicator = '<center>Loading...</center>';
@bindable populate = false; // Which columns to populate. True for all, string for specific.
@bindable detailView = false; // Detail viewmodel
@bindable select; // User provided callback, called upon clicking on a row.
@bindable repository;
@bindable resource;
@@ -232,6 +233,11 @@ export class DataTable {
this.page = 1;
}
@computedFrom('columnLabels', 'hasVisibleActions', 'detailView')
get colspan() {
return this.columnLabels.length + (this.hasVisibleActions ? 1 : 0) + (this.detailView ? 1 : 0);
}
@computedFrom('columns')
get columnLabels() {
function clean(str) {
@@ -334,4 +340,8 @@ export class DataTable {
displayValue(row, propertyName) {
return new Homefront(row, Homefront.MODE_NESTED).fetch(propertyName);
}
collapseRow(row) {
row._collapsed = (row._collapsed) ? false : true;
}
}

0 comments on commit 6417151

Please sign in to comment.