I ended up writing a little helper function.
I took some sample code from @metalsadman https://codepen.io/metalsadman/pen/LYNzrEE?editors=1010 and changed it slightly
printTable: function (props) {
const headers = this.columns.map(col => this.$helpers.wrapCsvValue(col.label))
const content = this.$refs.dataTable.filteredSortedRows.map(row => this.columns.map(col => this.$helpers.wrapCsvValue(
typeof col.field === 'function'
? col.field(row)
: row[typeof col.field === 'undefined' ? col.name : col.field],
col.format
)))
this.$helpers.printWindow(headers, content, this.$t('page.title'))
}
And then my helper function takes the table content and uses standard HTML table to render it in a pop-up and calls the window.print()
const printWindow = function (headers, data, title) {
var printWindow = window.open('', '', 'height=600,width=800')
printWindow.document.write(`<html><head><title>${title}</title>`)
printWindow.document.write('<style type = "text/css">')
printWindow.document.write('.q-table {')
printWindow.document.write('width: 100%;')
printWindow.document.write('max-width: 100%;')
printWindow.document.write('border-collapse: collapse;')
printWindow.document.write('margin: 25px 0;')
printWindow.document.write('font-size: 0.9em;')
printWindow.document.write('font-family: sans-serif;')
printWindow.document.write('box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);')
printWindow.document.write('}')
printWindow.document.write('.q-table th, td {')
printWindow.document.write('padding: 12px 15px;')
printWindow.document.write('}')
printWindow.document.write('.q-table tbody tr {')
printWindow.document.write('border-bottom: 1px solid #dddddd;')
printWindow.document.write('}')
printWindow.document.write('.q-table thead tr {')
printWindow.document.write('text-align: left;')
printWindow.document.write('}')
printWindow.document.write('</style>')
printWindow.document.write('</head>')
printWindow.document.write('<body>')
printWindow.document.write('<table class="q-table">')
printWindow.document.write('<thead>')
printWindow.document.write('<tr>')
for (const header of headers) {
if (header !== 'Actions') {
printWindow.document.write(`<th>${header}</th>`)
}
}
printWindow.document.write('</tr>')
printWindow.document.write('</thead>')
printWindow.document.write('<tbody>')
for (const row of data) {
printWindow.document.write('<tr>')
for (const col of row) {
printWindow.document.write(`<td>${col}</td>`)
}
printWindow.document.write('</tr>')
}
printWindow.document.write('</tbody>')
printWindow.document.write('</table>')
printWindow.document.write('</body>')
printWindow.document.write('</html>')
printWindow.document.close()
const afterPrintHandler = (function (vm) {
return function () {
printWindow.close()
}
}(this))
printWindow.onafterprint = afterPrintHandler
printWindow.print()
}
Seems pretty re-usable for all my q-table’s and prints the filtered content too. Maybe someone has a better approach or way to improve it
