div.vue-editable-grid
.grid-tools
.grid-tools-left
slot(name='header')
paginate.grid-tool(
:page='page'
:pages='pages'
:page-count='pageCount'
:total-rows='rowDataFiltered.length'
@count-changed='pageCount=$event'
@prev='page--'
@next='page++'
v-if='pageCount'
)
filters.grid-tool(:filters='filter' :columnDefs='columnDefs' @remove='removeFilter')
.grid-tools-right
slot(name='header-r')
.grid-table-container(ref='container')
table.grid-table(ref='table' :class='{ filters: enableFilters }')
thead(ref='head')
tr.headers-row(:style='{ "grid-template-columns": gridTemplateColumns }')
th(
v-for='(column, index) in columnDefs'
:key='index'
:class='{ sortable: column.sortable, sorting: column.field === sortByColumn, descending: sortByDesc, [column.className || ""]: true }'
@click='sort(column)'
)
span.header-content {{ column.headerName }}
span.resize-handle(@mousedown='initResize(column, $event)' @click.stop)
tr.filters-row(:style='{ "grid-template-columns": gridTemplateColumns }' v-if='enableFilters')
th(
v-for='(column, index) in columnDefs'
:key='index'
:class='{ filter: column.filter }'
)
input(type='text' v-model='filter[column.field]' v-if='column.filter' placeholder='Search with , or &' @input='filtersChanged')
tbody(ref='body')
div(:style=' { "min-height": `${rowDataPage.length * itemHeight}px` }')
tr.gridrow(v-for='(row, rowIndex) in visibleRows' :key='row[rowDataKey]' :style='{ "grid-template-columns": gridTemplateColumns, transform: `translateY(${(itemHeight * rowIndex) + ((itemHeight * offsetRows))}px)`, height: `${itemHeight}px` }')
cell(
v-for='(column, columnIndex) in columnDefs'
:ref='`cell`'
:key='columnIndex'
:column='column'
:row='row'
:columnIndex='columnIndex'
:rowIndex='offsetRows + rowIndex'
:selStart='selStart'
:selEnd='selEnd'
:cellEditing='cellEditing'
:cellsWithErrors='cellsWithErrors'
:onlyBorder='onlyBorder'
@click='selectCell(offsetRows + rowIndex, columnIndex, $event)'
@dblclick='tryEdit(row, column, offsetRows + rowIndex, columnIndex)'
@edited='cellEdited'
@edit-cancelled='cellEditing = []'
@link-clicked='linkClicked(row, column, offsetRows + rowIndex, columnIndex)'
@contextmenu='contextMenu(row, column, rowIndex, columnIndex, $event)'
@mousedown='startSelection(offsetRows + rowIndex, columnIndex, $event)'
@mouseover='onSelection(offsetRows + rowIndex, columnIndex)'
@mouseup='stopSelection'
)
textarea.hidde(ref='tmp')