Skip to content

Row's class name customization and event for bulk selection change #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Row's class name customization and event for bulk selection change #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
461eb62
added event for items selection via checkbox
romalytvynenko Feb 28, 2019
385bf68
added ability to customize row class name based on row values
romalytvynenko Feb 28, 2019
9af64de
Add button and disabled classes to pagination buttons
ediamin Mar 12, 2019
7c65c54
factory functions for pros
romalytvynenko Mar 22, 2019
1745a99
Merge pull request #1 from ediamin/master
romalytvynenko Mar 22, 2019
f6f5958
Added `one-page` class to navigation when there is only one page (hel…
romalytvynenko Apr 15, 2019
6aa7df1
Added `one-page` class to navigation when there is only one page (hel…
romalytvynenko Apr 15, 2019
8e9a9eb
Added ability to customize column name
romalytvynenko Apr 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules/
dist
dist
.idea/
54 changes: 36 additions & 18 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,24 +130,25 @@ export default {
### Props


| Property | Type | Required | Default | Description |
|----------------|---------|----------|---------------------------------------|-------------------------------------------------------------------------|
| `columns` | Object | **yes** | `{}` | |
| `rows` | Array | **yes** | `[]` | |
| `notFound` | String | no | `No items found.` | Shows if no items are found |
| `index` | String | no | `id` | The index identifier of the row |
| `showCb` | Boolean | no | `true` | Wheather to show the bulk checkbox in each rows |
| `loading` | Boolean | no | `false` | To show the loading effect, pass `true` |
| `actionColumn` | String | no | ` ` (empty) | Define which is the action column so we could place action items there. |
| `actions` | Array | no | `[]` | If you want to show row actions, pass an **Array** of **Objects** |
| `bulkActions` | Array | no | `[]` | Wheather to show the bulk actions |
| `tableClass` | String | no | `wp-list-table widefat fixed striped` | The table classes |
| `totalItems` | Number | no | `0` | Total count of rows in the database |
| `totalPages` | Number | no | `1` | How many pages are there for pagination |
| `perPage` | Number | no | `20` | Items to show per page |
| `currentPage` | Number | no | `1` | Current page we are in |
| `sortBy` | String | no | `null` | The property in data on which to initially sort. |
| `sortOrder` | String | no | `asc` | The initial sort order. |
| Property | Type | Required | Default | Description |
|----------------|----------|----------|---------------------------------------|-------------------------------------------------------------------------|
| `columns` | Object | **yes** | `{}` | |
| `rows` | Array | **yes** | `[]` | |
| `notFound` | String | no | `No items found.` | Shows if no items are found |
| `index` | String | no | `id` | The index identifier of the row |
| `showCb` | Boolean | no | `true` | Wheather to show the bulk checkbox in each rows |
| `loading` | Boolean | no | `false` | To show the loading effect, pass `true` |
| `actionColumn` | String | no | ` ` (empty) | Define which is the action column so we could place action items there. |
| `actions` | Array | no | `[]` | If you want to show row actions, pass an **Array** of **Objects** |
| `bulkActions` | Array | no | `[]` | Wheather to show the bulk actions |
| `tableClass` | String | no | `wp-list-table widefat fixed striped` | The table classes |
| `totalItems` | Number | no | `0` | Total count of rows in the database |
| `totalPages` | Number | no | `1` | How many pages are there for pagination |
| `perPage` | Number | no | `20` | Items to show per page |
| `currentPage` | Number | no | `1` | Current page we are in |
| `sortBy` | String | no | `null` | The property in data on which to initially sort. |
| `sortOrder` | String | no | `asc` | The initial sort order. |
| `rowClass` | Function | no | `(row) => ''` | Function for customizing a row's class name. |


## Listeners
Expand Down Expand Up @@ -229,6 +230,23 @@ methods: {
}
```

**checked**: When rows are selected using checkbox

```html
<!-- template -->
<list-table
@checked="itemsChecked"
</list-table>

<!-- method -->
methods: {
itemsChecked(ids) {
console.info('these ids are selected:', ids);
// Output: these ids are selected: [247, 123]
}
}
```

### Loading via Ajax

```html
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "vue-wp-list-table",
"name": "@rebelcode/vue-wp-list-table",
"description": "WordPress List Table component for Vue.js",
"version": "1.1.0",
"version": "1.1.4",
"author": {
"name": "Tareq Hasan",
"email": "[email protected]"
Expand Down
79 changes: 53 additions & 26 deletions src/components/ListTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,15 +24,15 @@
<slot name="filters"></slot>
</div>

<div class="tablenav-pages">
<div class="tablenav-pages" :class="{'one-page': totalPages === 1 || totalPages === 0}">
<span class="displaying-num">{{ itemsTotal }} items</span>

<span class="pagination-links" v-if="hasPagination">
<span v-if="disableFirst" class="tablenav-pages-navspan" aria-hidden="true">&laquo;</span>
<a v-else href="#" class="first-page" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>
<span v-if="disableFirst" class="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>
<a v-else href="#" class="first-page button" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>

<span v-if="disablePrev" class="tablenav-pages-navspan" aria-hidden="true">&lsaquo;</span>
<a v-else href="#" class="prev-page" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>
<span v-if="disablePrev" class="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>
<a v-else href="#" class="prev-page button" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>

<span class="paging-input">
<span class="tablenav-paging-text">
Expand All @@ -41,11 +41,11 @@
</span>
</span>

<span v-if="disableNext" class="tablenav-pages-navspan" aria-hidden="true">&rsaquo;</span>
<a v-else href="#" class="next-page" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>
<span v-if="disableNext" class="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>
<a v-else href="#" class="next-page button" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>

<span v-if="disableLast" class="tablenav-pages-navspan" aria-hidden="true">&raquo;</span>
<a v-else href="#" class="last-page" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
<span v-if="disableLast" class="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
<a v-else href="#" class="last-page button" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
</span>
</div>
</div>
Expand All @@ -56,6 +56,7 @@
<th v-for="(value, key) in columns" :class="[
'column',
key,
value.class || '',
{ 'sortable': isSortable(value) },
{ 'sorted': isSorted(key) },
{ 'asc': isSorted(key) && sortOrder === 'asc' },
Expand All @@ -74,16 +75,16 @@
<tfoot>
<tr>
<td v-if="showCb" class="manage-column column-cb check-column"><input type="checkbox" v-model="selectAll"></td>
<th v-for="(value, key) in columns" :class="['column', key]">{{ value.label }}</th>
<th v-for="(value, key) in columns" :class="['column', key, value.class || '']">{{ value.label }}</th>
</tr>
</tfoot>
<tbody>
<template v-if="rows.length">
<tr v-for="row in rows" :key="row[index]">
<tr v-for="row in rows" :key="row[index]" :class="rowClass(row)">
<th scope="row" class="check-column" v-if="showCb">
<input type="checkbox" name="item[]" :value="row[index]" v-model="checkedItems">
</th>
<td v-for="(value, key) in columns" :class="['column', key]">
<td v-for="(value, key) in columns" :class="['column', key, value.class || '']">
<slot :name="key" :row="row">
{{ row[key] }}
</slot>
Expand Down Expand Up @@ -120,11 +121,11 @@
<span class="displaying-num">{{ itemsTotal }} items</span>

<span class="pagination-links" v-if="hasPagination">
<span v-if="disableFirst" class="tablenav-pages-navspan" aria-hidden="true">&laquo;</span>
<a v-else href="#" class="first-page" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>
<span v-if="disableFirst" class="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>
<a v-else href="#" class="first-page button" @click.prevent="goToPage(1);"><span aria-hidden="true">&laquo;</span></a>

<span v-if="disablePrev" class="tablenav-pages-navspan" aria-hidden="true">&lsaquo;</span>
<a v-else href="#" class="prev-page" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>
<span v-if="disablePrev" class="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>
<a v-else href="#" class="prev-page button" @click.prevent="goToPage(currentPage - 1);"><span aria-hidden="true">&lsaquo;</span></a>

<span class="paging-input">
<span class="tablenav-paging-text">
Expand All @@ -133,11 +134,11 @@
</span>
</span>

<span v-if="disableNext" class="tablenav-pages-navspan" aria-hidden="true">&rsaquo;</span>
<a v-else href="#" class="next-page" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>
<span v-if="disableNext" class="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>
<a v-else href="#" class="next-page button" @click.prevent="goToPage(currentPage + 1);"><span aria-hidden="true">&rsaquo;</span></a>

<span v-if="disableLast" class="tablenav-pages-navspan" aria-hidden="true">&raquo;</span>
<a v-else href="#" class="last-page" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
<span v-if="disableLast" class="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
<a v-else href="#" class="last-page button" @click.prevent="goToPage(totalPages)"><span aria-hidden="true">&raquo;</span></a>
</span>
</div>
</div>
Expand All @@ -153,12 +154,16 @@ export default {
columns: {
type: Object,
required: true,
default: {},
default () {
return {}
},
},
rows: {
type: Array, // String, Number, Boolean, Function, Object, Array
required: true,
default: [],
default () {
return []
},
},
index: {
type: String,
Expand All @@ -179,12 +184,16 @@ export default {
actions: {
type: Array,
required: false,
default: [],
default () {
return []
},
},
bulkActions: {
type: Array,
required: false,
default: [],
default () {
return []
},
},
tableClass: {
type: String,
Expand Down Expand Up @@ -217,7 +226,13 @@ export default {
sortOrder: {
type: String,
default: "asc",
}
},
rowClass: {
type: Function,
default () {
return row => ''
},
},
},

data () {
Expand Down Expand Up @@ -316,6 +331,18 @@ export default {
}
},

watch: {
/**
* Watch for `checkItems` change, so parent can have some
* additional logic for bulk selection.
*
* @param value
*/
checkedItems(value) {
this.$emit('checked', value);
},
},

methods: {

hideActionSeparator(action) {
Expand Down Expand Up @@ -459,4 +486,4 @@ export default {
}
}

</style>
</style>