@tof06 I thought this
computed: {
...mapGetters("central", ["searchTerm", "selectedTableData"])
},
already did the job.
I guess I will use 2-way-computed
thanks for the info
@tof06 I thought this
computed: {
...mapGetters("central", ["searchTerm", "selectedTableData"])
},
already did the job.
I guess I will use 2-way-computed
thanks for the info
This is what I have that is working ok-ish:
width: 'Npx'
does nothing
<template v-slot:body-cell-description="props">
<q-td :props="props" :style="{ width: '50px', whiteSpace: 'normal' }">
<div class="tableCell">
{{ props.value }}
</div>
</q-td>
</template>
What I have tried:
this method from googling
cols: [
{
name: “status”,
align: “left”,
filter: true,
sortable: true,
style: ‘width: 40px’,
type: “string”
},
]
OK I lied, but not.
I have a QTable with multi select, it works fine. but the project was getting a bit too big so I decided to separate into modules. But now I would need to somehow pass the selected data into the module(s).
I decided to use Vuex for this.
The Problem:
The Qtable does not have an API for detecting what items are selected or deselected. There are 2 API Events for Selections:
@selection -> function(details)
This one is not very useful because it only detects what item got selected or deselected. It triggers before the array of selection is modified. I am not able to get the modified array. (maybe I could with some workaround but is this the way?)
@update:selected -> function(newSelected)
This one is the one QTable uses for updating the selected item’s array. The problem with t his one is that it does not triggers when the array is empty.
My current template is using @selection -> function(details)
method to update the selected array in vuex store but there is a delay of 1 change because the method triggers before the array is modified.
<template>
<div>
<q-table
ref="mainTable"
class="my-sticky-virtscroll-table"
style="height: 800px"
:data="tableData"
:columns="columns"
row-key="CODIGO"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected"
virtual-scroll
:pagination.sync="pagination"
:rows-per-page-options="[0]"
:virtual-scroll-sticky-size-start="48"
:filter="term"
flat
bordered
@focusin.native="activateNavigation"
@focusout.native="deactivateNavigation"
@keydown.native="onKey"
@selection="onSelect"
>
<template v-slot:top-left>
<q-input
ref="mainSearchInput"
debounce="0"
v-model="term"
label="Búsqueda"
filled
bottom-slots
clearable=""
style="width:500px"
@input="updateSearchTerm(term)"
>
<template v-slot:hint
>Puede hacer búsquedas online con commandos.</template
>
</q-input>
</template>
<template v-slot:body-cell-qty="props">
<q-td :props="props">
<q-badge
:class="{
'bg-black': props.value <= 0,
'bg-red': props.value > 0,
'bg-orange': props.value >= 100 && props.value < 500,
'bg-green': props.value >= 500,
'text-body1': true
}"
:label="props.value"
/>
</q-td>
</template>
<template v-slot:body-cell-code="props">
<q-td :props="props">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template>
<template v-slot:body-cell-description="props">
<q-td :props="props" :style="{ width: '50px', whiteSpace: 'normal' }">
<div class="tableCell">
{{ props.value }}
</div>
</q-td>
</template>
<!-- <template v-slot:body-cell-qty="props">
<q-td :props="props">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template> -->
<template v-slot:body-cell-codAlt="props">
<q-td :props="props" :style="{ width: '50px', whiteSpace: 'normal' }">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template>
<template v-slot:body-cell-desAlt="props">
<q-td :props="props" :style="{ width: '50px', whiteSpace: 'normal' }">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template>
<template v-slot:body-cell-group="props">
<q-td :props="props">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template>
<template v-slot:body-cell-price="props">
<q-td :props="props">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template>
<template v-slot:body-cell-discount20="props">
<q-td :props="props">
<div class="tableCell">{{ props.value }}</div>
</q-td>
</template>
</q-table>
<!-- <div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div> -->
<chipDetails></chipDetails>
</div>
</template>
<script>
import path from "path";
import { remote } from "electron";
import { Platform } from "quasar";
import { mapGetters, mapActions } from "vuex";
export default {
computed: {
...mapGetters("central", ["searchTerm", "selectedTableData"])
},
components: {
chipDetails: require("components/chipDetails.vue").default
},
data() {
return {
term: "",
tableData: [],
selected: [],
selectedTableData: [],
navigationActive: false,
pagination: {
rowsPerPage: 300
},
columns: [
{
name: "code",
required: true,
label: "Código",
align: "left",
// field: row => row.name,
field: "CODIGO",
format: val => `${val}`,
sortable: true
},
{
name: "description",
align: "left",
label: "Descipción",
field: "DESCRIPCION",
sortable: true
},
{
name: "qty",
label: "Qty",
field: "INVENT",
sortable: true,
align: "right"
},
{ name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
{
name: "desAlt",
label: "Desc Alt",
field: "DESC.ALT.",
align: "left"
},
{
name: "group",
label: "Grupo",
field: "GRUPO",
align: "left"
},
{ name: "price", label: "Precio", field: "PRECIO", align: "right" },
{
name: "discount20",
label: "20 %",
field: "PRECIO",
align: "right",
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
]
};
},
methods: {
...mapActions("central", ["updateSearchTerm", "updateSelectedTableData"]),
getSelectedString() {
return (
this.selected.length +
" selecionado" +
(this.selected.length > 1 ? "s" : "") +
" de " +
this.tableData.length
);
},
activateNavigation() {
this.navigationActive = true;
},
deactivateNavigation() {
this.navigationActive = false;
},
onSelect(evt) {
console.log(evt);
this.updateSelectedTableData(this.selected);
console.log(this.selected);
},
onKey(evt) {
if (
this.navigationActive !== true ||
[33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
this.$refs.mainTable === void 0
) {
return;
}
evt.preventDefault();
switch (evt.keyCode) {
case 36: // Home
page = 1;
index = 0;
break;
case 35: // End
page = lastPage;
index = rowsPerPage - 1;
break;
case 33: // PageUp
page = currentPage <= 1 ? lastPage : currentPage - 1;
if (index < 0) {
index = 0;
}
break;
case 34: // PageDown
page = currentPage >= lastPage ? 1 : currentPage + 1;
if (index < 0) {
index = rowsPerPage - 1;
}
break;
case 38: // ArrowUp
if (currentIndex <= 0) {
page = currentPage <= 1 ? lastPage : currentPage - 1;
index = rowsPerPage - 1;
} else {
index = currentIndex - 1;
}
break;
case 40: // ArrowDown
if (currentIndex >= lastIndex) {
page = currentPage >= lastPage ? 1 : currentPage + 1;
index = 0;
} else {
index = currentIndex + 1;
}
break;
}
if (page !== this.pagination.page) {
this.pagination = {
...this.pagination,
page
};
this.$nextTick(() => {
const { computedRows } = this.$refs.mainTable;
this.selected = [
computedRows[Math.min(index, computedRows.length - 1)]
];
});
} else {
this.selected = [computedRows[index]];
}
}
},
mounted() {
if (Platform.is.electron) {
// get file path
const filePath = path.join(
remote.app.getPath("home"),
"/Dropbox/Sync/inventarioHL.json"
);
// load the File System to execute our common tasks (CRUD)
var fs = require("fs");
// read file content
fs.readFile(filePath, "utf-8", (err, getData) => {
if (err) {
alert("An error ocurred reading the file :" + err.message);
}
// parse text into json
var jsonData = JSON.parse(getData);
// add entire data to table
this.tableData = jsonData;
// console.log(jsonData[0]);
// focus on q-input
this.$refs.mainSearchInput.$el.focus();
});
}
// update the q-input with searchTerm
this.term = this.searchTerm;
}
};
</script>
<style lang="sass">
.my-sticky-virtscroll-table
/* height or max-height is important */
height: 310px
/* specifying max-width so the example can
highlight the sticky column on any browser window */
max-width: 1300px
td:first-child
/* bg color is important for td; just specify one */
background-color: #fafafa !important
tr th
position: sticky
/* higher than z-index for td below */
z-index: 2
/* bg color is important; just specify one */
background: #fafafa
/* this will be the loading indicator */
thead tr:last-child th
/* height of all previous header rows */
top: 48px
/* highest z-index */
z-index: 3
thead tr:first-child th
top: 0
z-index: 1
tr:first-child th:first-child
/* highest z-index */
z-index: 3
td:first-child
z-index: 1
td:first-child, th:first-child
position: sticky
left: 0
</style>
<style>
.tableCell {
font-size: 18px;
}
</style>
This is the component I am using to access the selected array
<template>
<div class="q-pt-sm">
<q-chip
color="secondary"
text-color="white"
v-for="(sel, index) in selectedTableData"
:key="index"
:label="sel['CODIGO']"
removable
@remove="removeSelectedChip(index)"
clickable
@click="fixed = true"
/>
<q-dialog v-model="fixed">
<q-card>
<q-card-section>
<div class="text-h6">Terms of Agreement</div>
</q-card-section>
<q-separator />
<q-card-section style="max-height: 50vh" class="scroll">
<p v-for="n in 15" :key="n">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis
perferendis totam, ea at omnis vel numquam exercitationem aut, natus
minima, porro labore.
</p>
</q-card-section>
<q-separator />
<q-card-actions align="right">
<q-btn flat label="..." color="primary" v-close-popup />
<q-btn flat label="OK" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
fixed: false
};
},
computed: {
...mapGetters("central", ["selectedTableData"])
}
};
</script>
Finally this is the vuex store
const state = {
searchTerm: "",
selectedTableData: []
};
const mutations = {
updateSearchTerm(state, term) {
state.searchTerm = term;
},
updateSelectedTableData(state, data) {
state.selectedTableData = data;
}
};
const actions = {
updateSearchTerm({ commit }, term) {
commit("updateSearchTerm", term);
},
updateSelectedTableData({ commit }, data) {
commit("updateSelectedTableData", data);
}
};
const getters = {
searchTerm: state => {
return state.searchTerm;
},
selectedTableData: state => {
return state.selectedTableData;
}
};
export default {
namespaced: true,
state,
mutations,
actions,
getters
};
Is this possible?
I just want to press X button and trigger electron minimize action.
Thank you again lol. You solved 2 of my posts already @tof06
unfortunately I don’t know how to change post as solved and site is not allowing me to edit post title either.
This is how it looks initially
This is what happens when I scroll to the right
I would like Codigo
column to be stickied, how can I do this?
Below the entire table code
<template>
<div>
<q-table
ref="mainTable"
class="my-sticky-virtscroll-table"
style="height: 800px"
:data="data"
:columns="columns"
row-key="name"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected"
virtual-scroll
:pagination.sync="pagination"
:virtual-scroll-sticky-size-start="48"
:rows-per-page-options="[0]"
:filter="filter"
flat
bordered=""
@focusin.native="activateNavigation"
@focusout.native="deactivateNavigation"
@keydown.native="onKey"
>
<template v-slot:top-left>
<q-input
ref="mainSearchInput"
debounce="0"
v-model="filter"
label="Búsqueda"
filled
bottom-slots
clearable=""
style="width:500px"
>
<template v-slot:hint
>Puede hacer búsquedas online con commandos.</template
>
</q-input>
</template>
<template v-slot:body-cell-qty="props">
<q-td :props="props">
<q-badge
:class="'(props.value < 1000) ? bg-red : bg-green'"
:label="props.value"
/>
</q-td>
</template>
<template v-slot:body-cell-code="props">
<q-td :props="props">
<q-badge
:class="'!props.value ? bg-orange : bg-red'"
:label="props.value"
/>
</q-td>
</template>
</q-table>
<div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
<br />
</div>
</template>
<script>
import path from "path";
import { remote } from "electron";
export default {
data() {
return {
navigationActive: false,
filter: "",
selected: [],
pagination: {
rowsPerPage: 0
},
columns: [
{
name: "code",
required: true,
label: "Código",
align: "left",
// field: row => row.name,
field: "CODIGO",
format: val => `${val}`,
sortable: true
},
{
name: "description",
align: "left",
label: "Descipción",
field: "DESCRIPCION",
sortable: true
},
{ name: "qty", label: "Qty", field: "INVENT", align: "right" },
{ name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
{
name: "desAlt",
label: "Desc Alt",
field: "DESC.ALT.",
align: "left"
},
{
name: "groups",
label: "Grupo",
field: "GRUPO",
align: "left"
},
{ name: "price", label: "Precio", field: "PRECIO", align: "right" },
{
name: "discount20",
label: "20 %",
field: "PRECIO",
align: "right",
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
],
data: []
};
},
methods: {
getSelectedString() {
return this.selected.length === 0
? ""
: `${this.selected.length} record${
this.selected.length > 1 ? "s" : ""
} selected of ${this.data.length}`;
},
activateNavigation() {
this.navigationActive = true;
},
deactivateNavigation() {
this.navigationActive = false;
},
onKey(evt) {
if (
this.navigationActive !== true ||
[33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
this.$refs.mainTable === void 0
) {
return;
}
evt.preventDefault();
switch (evt.keyCode) {
case 36: // Home
page = 1;
index = 0;
break;
case 35: // End
page = lastPage;
index = rowsPerPage - 1;
break;
case 33: // PageUp
page = currentPage <= 1 ? lastPage : currentPage - 1;
if (index < 0) {
index = 0;
}
break;
case 34: // PageDown
page = currentPage >= lastPage ? 1 : currentPage + 1;
if (index < 0) {
index = rowsPerPage - 1;
}
break;
case 38: // ArrowUp
if (currentIndex <= 0) {
page = currentPage <= 1 ? lastPage : currentPage - 1;
index = rowsPerPage - 1;
} else {
index = currentIndex - 1;
}
break;
case 40: // ArrowDown
if (currentIndex >= lastIndex) {
page = currentPage >= lastPage ? 1 : currentPage + 1;
index = 0;
} else {
index = currentIndex + 1;
}
break;
}
if (page !== this.pagination.page) {
this.pagination = {
...this.pagination,
page
};
this.$nextTick(() => {
const { computedRows } = this.$refs.mainTable;
this.selected = [
computedRows[Math.min(index, computedRows.length - 1)]
];
});
} else {
this.selected = [computedRows[index]];
}
}
},
mounted() {
// get file path
const filePath = path.join(
remote.app.getPath("home"),
"/Dropbox/Sync/inventarioHL.json"
);
// load the File System to execute our common tasks (CRUD)
var fs = require("fs");
// read file content
const fsData = fs.readFileSync(filePath, "utf-8");
// parse text into json
var jsonData = JSON.parse(fsData);
// add entire data to table
this.data = jsonData;
// for (const x in jsonData) {
// console.log(x);
// }
console.log(jsonData[0]);
// focus on q-input
this.$refs.mainSearchInput.$el.focus();
}
};
</script>
<style lang="sass">
.my-sticky-virtscroll-table
/* height or max-height is important */
height: 310px
/* specifying max-width so the example can
highlight the sticky column on any browser window */
max-width: 1300px
td:first-child
/* bg color is important for td; just specify one */
background-color: #fafafa !important
tr th
position: sticky
/* higher than z-index for td below */
z-index: 2
/* bg color is important; just specify one */
background: #fafafa
/* this will be the loading indicator */
thead tr:last-child th
/* height of all previous header rows */
top: 48px
/* highest z-index */
z-index: 3
thead tr:first-child th
top: 0
z-index: 1
tr:first-child th:first-child
/* highest z-index */
z-index: 3
td:first-child
z-index: 1
td:first-child, th:first-child
position: sticky
left: 0
</style>
This is a simple template for a table I created with Quasar.
:class="'(props.value < 1000) ? bg-red : bg-green'"
I am not able to color each cell according to the number conditional and it keeps being false (In this case bg-green gets triggered on every cell). I checked that all cell’s typeOf
is number
.
<template>
<div class="q-pa-sm">
<q-table
ref="mainTable"
class="my-sticky-virtscroll-table"
style="height: 800px"
:data="data"
:columns="columns"
row-key="name"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected"
virtual-scroll
:pagination.sync="pagination"
:virtual-scroll-sticky-size-start="48"
:rows-per-page-options="[0]"
:filter="filter"
flat
bordered=""
@focusin.native="activateNavigation"
@focusout.native="deactivateNavigation"
@keydown.native="onKey"
>
<template v-slot:top-left>
<q-input
ref="mainSearchInput"
debounce="10"
v-model="filter"
label="Búsqueda"
filled
bottom-slots
clearable=""
style="width:500px"
>
<template v-slot:hint
>Puede hacer busquedas online con commandos.</template
>
</q-input>
</template>
<template v-slot:body-cell-qty="props">
<q-td :props="props">
<q-badge
:class="'(props.value < 1000) ? bg-red : bg-green'"
:label="props.value"
/>
</q-td>
</template>
<template v-slot:body-cell-code="props">
<q-td :props="props">
<q-badge
:class="'props.value < 5 ? bg-orange : bg-red'"
:label="props.value"
/>
</q-td>
</template>
</q-table>
<div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
</div>
</template>
You can see here the Qty Column
is always green
and for some reason, Código Column
is always true.
Below is my Script and Style Section.
<script>
import path from "path";
import { remote } from "electron";
export default {
data() {
return {
navigationActive: false,
filter: "",
selected: [],
pagination: {
rowsPerPage: 0
},
columns: [
{
name: "code",
required: true,
label: "Código",
align: "left",
// field: row => row.name,
field: "CODIGO",
format: val => `${val}`,
sortable: true
},
{
name: "description",
align: "left",
label: "Descipción",
field: "DESCRIPCION",
sortable: true
},
{ name: "qty", label: "Qty", field: "INVENT", align: "right" },
{ name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
{
name: "desAlt",
label: "Desc Alt",
field: "DESC.ALT.",
align: "left"
},
{
name: "groups",
label: "Grupo",
field: "GRUPO",
align: "left"
},
{ name: "price", label: "Precio", field: "PRECIO", align: "right" },
{
name: "discount20",
label: "20 %",
field: "PRECIO",
align: "right",
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
],
data: []
};
},
methods: {
getSelectedString() {
return this.selected.length === 0
? ""
: `${this.selected.length} record${
this.selected.length > 1 ? "s" : ""
} selected of ${this.data.length}`;
},
activateNavigation() {
this.navigationActive = true;
},
deactivateNavigation() {
this.navigationActive = false;
},
onKey(evt) {
if (
this.navigationActive !== true ||
[33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
this.$refs.mainTable === void 0
) {
return;
}
evt.preventDefault();
switch (evt.keyCode) {
case 36: // Home
page = 1;
index = 0;
break;
case 35: // End
page = lastPage;
index = rowsPerPage - 1;
break;
case 33: // PageUp
page = currentPage <= 1 ? lastPage : currentPage - 1;
if (index < 0) {
index = 0;
}
break;
case 34: // PageDown
page = currentPage >= lastPage ? 1 : currentPage + 1;
if (index < 0) {
index = rowsPerPage - 1;
}
break;
case 38: // ArrowUp
if (currentIndex <= 0) {
page = currentPage <= 1 ? lastPage : currentPage - 1;
index = rowsPerPage - 1;
} else {
index = currentIndex - 1;
}
break;
case 40: // ArrowDown
if (currentIndex >= lastIndex) {
page = currentPage >= lastPage ? 1 : currentPage + 1;
index = 0;
} else {
index = currentIndex + 1;
}
break;
}
if (page !== this.pagination.page) {
this.pagination = {
...this.pagination,
page
};
this.$nextTick(() => {
const { computedRows } = this.$refs.mainTable;
this.selected = [
computedRows[Math.min(index, computedRows.length - 1)]
];
});
} else {
this.selected = [computedRows[index]];
}
}
},
mounted() {
// get file path
const filePath = path.join(
remote.app.getPath("home"),
"/Dropbox/Sync/inventarioHL.json"
);
// load the File System to execute our common tasks (CRUD)
var fs = require("fs");
// read file content
const fsData = fs.readFileSync(filePath, "utf-8");
// parse text into json
var jsonData = JSON.parse(fsData);
// add entire data to table
this.data = jsonData;
// for (const x in jsonData) {
// console.log(x);
// }
console.log(jsonData[0]);
// focus on q-input
this.$refs.mainSearchInput.$el.focus();
}
};
</script>
<style lang="sass">
.my-sticky-virtscroll-table
/* height or max-height is important */
height: 310px
/* specifying max-width so the example can
highlight the sticky column on any browser window */
max-width: 1300px
td:first-child
/* bg color is important for td; just specify one */
background-color: #fafafa !important
tr th
position: sticky
/* higher than z-index for td below */
z-index: 2
/* bg color is important; just specify one */
background: #fafafa
/* this will be the loading indicator */
thead tr:last-child th
/* height of all previous header rows */
top: 48px
/* highest z-index */
z-index: 3
thead tr:first-child th
top: 0
z-index: 1
tr:first-child th:first-child
/* highest z-index */
z-index: 3
td:first-child
z-index: 1
td:first-child, th:first-child
position: sticky
left: 0
</style>
I am new to JS and Quasar so please pardon my ignorance.
We can clearly see here that only 1 item is selected but visually all boxes are checked.
initially, I was thinking maybe row-key="name"
is incorrect? but I have no idea how to test if this is correct or not.
Below is the entire Page for the table.
<template>
<div>
<q-table
ref="mainTable"
class="my-sticky-virtscroll-table"
style="height: 800px"
:data="data"
:columns="columns"
row-key="name"
:selected-rows-label="getSelectedString"
selection="multiple"
:selected.sync="selected"
virtual-scroll
:pagination.sync="pagination"
:virtual-scroll-sticky-size-start="48"
:rows-per-page-options="[0]"
:filter="filter"
flat
bordered=""
@focusin.native="activateNavigation"
@focusout.native="deactivateNavigation"
@keydown.native="onKey"
>
<template v-slot:top-left>
<q-input
ref="mainSearchInput"
debounce="0"
v-model="filter"
label="Búsqueda"
filled
bottom-slots
clearable=""
style="width:500px"
>
<template v-slot:hint
>Puede hacer búsquedas online con commandos.</template
>
</q-input>
</template>
<template v-slot:body-cell-qty="props">
<q-td :props="props">
<q-badge
:class="'(props.value < 1000) ? bg-red : bg-green'"
:label="props.value"
/>
</q-td>
</template>
<template v-slot:body-cell-code="props">
<q-td :props="props">
<q-badge
:class="'!props.value ? bg-orange : bg-red'"
:label="props.value"
/>
</q-td>
</template>
</q-table>
<div class="q-mt-md">Selected: {{ JSON.stringify(selected) }}</div>
<br />
</div>
</template>
<script>
import path from "path";
import { remote } from "electron";
export default {
data() {
return {
navigationActive: false,
filter: "",
selected: [],
pagination: {
rowsPerPage: 0
},
columns: [
{
name: "code",
required: true,
label: "Código",
align: "left",
// field: row => row.name,
field: "CODIGO",
format: val => `${val}`,
sortable: true
},
{
name: "description",
align: "left",
label: "Descipción",
field: "DESCRIPCION",
sortable: true
},
{ name: "qty", label: "Qty", field: "INVENT", align: "right" },
{ name: "codAlt", label: "Cod Alt", field: "COD.ALT.", align: "left" },
{
name: "desAlt",
label: "Desc Alt",
field: "DESC.ALT.",
align: "left"
},
{
name: "groups",
label: "Grupo",
field: "GRUPO",
align: "left"
},
{ name: "price", label: "Precio", field: "PRECIO", align: "right" },
{
name: "discount20",
label: "20 %",
field: "PRECIO",
align: "right",
sort: (a, b) => parseInt(a, 10) - parseInt(b, 10)
}
],
data: []
};
},
methods: {
getSelectedString() {
return this.selected.length === 0
? ""
: `${this.selected.length} record${
this.selected.length > 1 ? "s" : ""
} selected of ${this.data.length}`;
},
activateNavigation() {
this.navigationActive = true;
},
deactivateNavigation() {
this.navigationActive = false;
},
onKey(evt) {
if (
this.navigationActive !== true ||
[33, 34, 35, 36, 38, 40].indexOf(evt.keyCode) === -1 ||
this.$refs.mainTable === void 0
) {
return;
}
evt.preventDefault();
switch (evt.keyCode) {
case 36: // Home
page = 1;
index = 0;
break;
case 35: // End
page = lastPage;
index = rowsPerPage - 1;
break;
case 33: // PageUp
page = currentPage <= 1 ? lastPage : currentPage - 1;
if (index < 0) {
index = 0;
}
break;
case 34: // PageDown
page = currentPage >= lastPage ? 1 : currentPage + 1;
if (index < 0) {
index = rowsPerPage - 1;
}
break;
case 38: // ArrowUp
if (currentIndex <= 0) {
page = currentPage <= 1 ? lastPage : currentPage - 1;
index = rowsPerPage - 1;
} else {
index = currentIndex - 1;
}
break;
case 40: // ArrowDown
if (currentIndex >= lastIndex) {
page = currentPage >= lastPage ? 1 : currentPage + 1;
index = 0;
} else {
index = currentIndex + 1;
}
break;
}
if (page !== this.pagination.page) {
this.pagination = {
...this.pagination,
page
};
this.$nextTick(() => {
const { computedRows } = this.$refs.mainTable;
this.selected = [
computedRows[Math.min(index, computedRows.length - 1)]
];
});
} else {
this.selected = [computedRows[index]];
}
}
},
mounted() {
// get file path
const filePath = path.join(
remote.app.getPath("home"),
"/Dropbox/Sync/inventarioHL.json"
);
// load the File System to execute our common tasks (CRUD)
var fs = require("fs");
// read file content
const fsData = fs.readFileSync(filePath, "utf-8");
// parse text into json
var jsonData = JSON.parse(fsData);
// add entire data to table
this.data = jsonData;
// for (const x in jsonData) {
// console.log(x);
// }
console.log(jsonData[0]);
// focus on q-input
this.$refs.mainSearchInput.$el.focus();
}
};
</script>
<style lang="sass">
.my-sticky-virtscroll-table
/* height or max-height is important */
height: 310px
/* specifying max-width so the example can
highlight the sticky column on any browser window */
max-width: 1300px
td:first-child
/* bg color is important for td; just specify one */
background-color: #fafafa !important
tr th
position: sticky
/* higher than z-index for td below */
z-index: 2
/* bg color is important; just specify one */
background: #fafafa
/* this will be the loading indicator */
thead tr:last-child th
/* height of all previous header rows */
top: 48px
/* highest z-index */
z-index: 3
thead tr:first-child th
top: 0
z-index: 1
tr:first-child th:first-child
/* highest z-index */
z-index: 3
td:first-child
z-index: 1
td:first-child, th:first-child
position: sticky
left: 0
</style>