Skip to content

Commit ff3b67f

Browse files
jfrosoriojfrosorio
committed
feat(styles): table and row classes
1 parent e932328 commit ff3b67f

File tree

6 files changed

+100
-30
lines changed

6 files changed

+100
-30
lines changed

‎README.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,21 @@ import VueTable from '@kriptiko/vue-table'
4646

4747
## Props
4848

49-
| Prop | Type | Default | Description |
50-
|-----------|:-------:|:-----------------------------------:|--------------------------------------------------------------------------------------------------|
51-
| actions | Object | { classes: "", slots: [] } | The actions' slots names. See the [Actions API](#actions-api) for more info. |
52-
| columns | Array | [] | The table columns. See the [Columns API](#columns-api) for more info. |
53-
| uri | String | null | Data source URI |
54-
| data-key | String | 'data' | The path to the data in the server's JSON response. |
55-
| meta-key | String | null | The path to the pagination meta in the server's JSON response. |
56-
| per-page | Number | 20 | Number of items displayed per page. |
57-
| paginate | Boolean | true | Paginates the records and enables the pages links. |
58-
| locale | String | en | Sets the locale. Supported values: en, es, fr, pt. |
59-
| orderable | Boolean | false | When set to true, the rows can be reorder by dragging them. |
60-
| checkable | Object | { display: false, attribute: null } | Show/hide checkboxes for bulk operations. See the [Checkable API](#checkable-api) for more info. |
61-
| sorting | Array | [] | The columns' sorting directions. See the [Sorting API](#sorting-api) for more info. |
49+
| Prop | Type | Default | Description |
50+
|-------------|:-------------------:|:-----------------------------------:|--------------------------------------------------------------------------------------------------|
51+
| actions | Object | { classes: "", slots: [] } | The actions' slots names. See the [Actions API](#actions-api) for more info. |
52+
| checkable | Object | { display: false, attribute: null } | Show/hide checkboxes for bulk operations. See the [Checkable API](#checkable-api) for more info. |
53+
| columns | Array | [] | The table columns. See the [Columns API](#columns-api) for more info. |
54+
| data-key | String | 'data' | The path to the data in the server's JSON response. |
55+
| locale | String | en | Sets the locale. Supported values: en, es, fr, pt. |
56+
| meta-key | String | null | The path to the pagination meta in the server's JSON response. |
57+
| paginate | Boolean | true | Paginates the records and enables the pages links. |
58+
| per-page | Number | 20 | Number of items displayed per page. |
59+
| orderable | Boolean | false | When set to true, the rows can be reorder by dragging them. |
60+
| row-class | String or Function | '' | The row CSS classes. It can be a String or a callback Function. |
61+
| sorting | Array | [] | The columns' sorting directions. See the [Sorting API](#sorting-api) for more info. |
62+
| table-class | String | 'table table-striped' | The CSS classes of the table. |
63+
| uri | String | null | Data source URI |
6264

6365

6466
## Slots

‎dev/App.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@
7171
cities: [],
7272
},
7373
options: {
74+
tableClass: 'table',
7475
columns: [
7576
{
7677
slotName: "star-slot",

‎dist/vue-table.esm.js

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -812,6 +812,14 @@ var script$3 = {
812812
return Object.prototype.hasOwnProperty.call(actions, 'slots') && typeof actions.slots === "object";
813813
}
814814
},
815+
tableClass: {
816+
type: String,
817+
default: 'table table-striped'
818+
},
819+
rowClass: {
820+
type: [String, Function],
821+
default: ''
822+
},
815823
columns: {
816824
type: Array,
817825
default: function () {
@@ -954,6 +962,20 @@ var script$3 = {
954962
}
955963
},
956964

965+
/**
966+
* Evaluates whether the rowClass property is a String or a Function and returns the resulting evaluation.
967+
*
968+
* @param item
969+
* @param index
970+
*/
971+
setRowClass(item, index) {
972+
if (typeof this.rowClass === 'function') {
973+
return this.rowClass(item, index);
974+
}
975+
976+
return this.rowClass;
977+
},
978+
957979
...mapActions('sortingModule', {
958980
addSort: 'addSortAction'
959981
}),
@@ -1122,7 +1144,7 @@ var __vue_render__$3 = function () {
11221144
}, [_vm._v("\n " + _vm._s(_vm.lang.no_records) + "\n ")]) : _c('div', [_c('div', {
11231145
staticClass: "table-responsive"
11241146
}, [_c('table', {
1125-
staticClass: "table table-striped"
1147+
class: _vm.tableClass
11261148
}, [_c('thead', [_c('tr', [_vm.orderable ? _c('th', {
11271149
staticClass: "fit-content"
11281150
}) : _vm._e(), _vm._v(" "), _vm.checkable.display ? _c('th', {
@@ -1172,7 +1194,8 @@ var __vue_render__$3 = function () {
11721194
}
11731195
}, _vm._l(_vm.items, function (item, index) {
11741196
return _c('tr', {
1175-
key: index
1197+
key: index,
1198+
class: _vm.setRowClass(item, index)
11761199
}, [_vm.orderable ? _c('td', {
11771200
staticClass: "fit-content align-middle"
11781201
}, [_c('button', {
@@ -1258,16 +1281,16 @@ var __vue_staticRenderFns__$3 = [];
12581281

12591282
const __vue_inject_styles__$3 = function (inject) {
12601283
if (!inject) return;
1261-
inject("data-v-6003b847_0", {
1262-
source: ".fit-content[data-v-6003b847]{width:1%;white-space:nowrap}",
1284+
inject("data-v-0272658a_0", {
1285+
source: ".fit-content[data-v-0272658a]{width:1%;white-space:nowrap}",
12631286
map: undefined,
12641287
media: undefined
12651288
});
12661289
};
12671290
/* scoped */
12681291

12691292

1270-
const __vue_scope_id__$3 = "data-v-6003b847";
1293+
const __vue_scope_id__$3 = "data-v-0272658a";
12711294
/* module identifier */
12721295

12731296
const __vue_module_identifier__$3 = undefined;

0 commit comments

Comments
 (0)