Skip to content

Commit

Permalink
Formatted Row for dynamic table
Browse files Browse the repository at this point in the history
  • Loading branch information
xaksis committed Sep 6, 2017
1 parent 03cc648 commit 0c93bd3
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 3 deletions.
8 changes: 6 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -116,12 +116,16 @@ This should result in the screenshot seen above
<template slot="table-row" scope="props">
<td>{{ props.row.name }}</td>
<td class="fancy">{{ props.row.age }}</td>
<td>{{ props.row.btn }}</td>
<td>{{ props.formattedRow.date }}</td>
<td>{{ props.index }}</td>
</template>
</vue-good-table>
```
In addition to `prop.row` that contains the row object, `prop.index` contains the index for the table display row. And `prop.row.originalIndex` contains the original row index. You can access the original row object by using `row[prop.row.originalIndex]`.
**Note:**
* The original row object can be accessed via `prop.row`
* The currently displayed table row index can be accessed via `prop.index` .
* The original row index can be accessed via `prop.row.originalIndex`. You can access the original row object by using `row[prop.row.originalIndex]`.
* You can access the formatted row data (for example - formatted date) via `prop.formattedRow`

### Component Options

Expand Down
11 changes: 10 additions & 1 deletion src/components/Table.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
<tbody>
<tr v-for="(row, index) in paginated" :class="onClick ? 'clickable' : ''" @click="click(row, index)">
<th v-if="lineNumbers" class="line-numbers">{{ getCurrentIndex(index) }}</th>
<slot name="table-row" :row="row" :index="index">
<slot name="table-row" :row="row" :formattedRow="formattedRow(row)" :index="index">
<td v-for="(column, i) in columns" :class="getDataStyle(i, 'td')" v-if="!column.hidden">
<span v-if="!column.html">{{ collectFormatted(row, column) }}</span>
<span v-if="column.html" v-html="collect(row, column.field)"></span>
Expand Down Expand Up @@ -237,6 +237,15 @@ import compareAsc from 'date-fns/compare_asc';
}
},
formattedRow(row) {
var formattedRow = {};
for(const col of this.columns) {
for(const key in row) {
formattedRow[key] = this.collectFormatted(row, col);
}
}
return formattedRow;
},
// Get the necessary style-classes for the given column
//--------------------------------------------------------
Expand Down

0 comments on commit 0c93bd3

Please sign in to comment.