.w-table.w-table--wrap(:class="classes")
.w-table__scroll-wrap
table.w-table__table(
@mousedown="onMouseDown"
@mouseover="onMouseOver"
@mouseout="onMouseOut")
colgroup(ref="colgroup")
col.w-table__col(
v-for="(header, i) in headers"
:key="i"
:width="header.width || null"
:class="colClasses[i]")
//- Table header.
thead(v-if="!noHeaders")
tr
th.w-table__header(
v-for="(header, i) in headers"
:key="i"
@click="!colResizing.dragging && header.sortable !== false && sortTable(header)"
@pointerdown="onHeaderPointerDown($event, header)"
:class="headerClasses(header)")
w-icon.w-table__header-sort(
v-if="header.sortable !== false && header.align === 'right'"
:class="headerSortClasses(header)") wi-arrow-down
template(v-if="header.label")
slot(
v-if="$slots['header-label']"
name="header-label"
:header="header"
:label="header.label"
:index="i + 1") {{ header.label || '' }}
span(v-else v-html="header.label || ''")
w-icon.w-table__header-sort(
v-if="header.sortable !== false && header.align !== 'right'"
:class="headerSortClasses(header)") wi-arrow-down
//- Notes: prevent click on header (`.stop`), which triggers sorting & DOM refresh.
span.w-table__col-resizer(
v-if="i < headers.length - 1 && resizableColumns"
:class="{ 'w-table__col-resizer--hover': colResizing.hover === i, 'w-table__col-resizer--active': colResizing.columnIndex === i }"
@click.stop)
//- Progress bar only.
w-transition-fade
tr.w-table__progress-bar(v-if="loading === 'header'")
td(:colspan="headers.length")
w-progress(tile)
//- Table body.
tbody
//- Progress bar & loading text.
tr.w-table__progress-bar(v-if="loading === true")
td(:colspan="headers.length")
w-progress(tile)
.w-table__loading-text
slot(name="loading") Loading...
//- No data.
tr.no-data(v-else-if="!tableItems.length")
td.w-table__cell.text-center(:colspan="headers.length")
slot(name="no-data") No data to show.
//- Normal rows.
template(v-if="tableItems.length && loading !== true")
template(v-for="(item, i) in paginatedItems" :key="i")
//- Fully custom tr (`item` slot).
slot(
v-if="$slots.item"
name="item"
:item="item"
:index="i + 1"
:select="() => doSelectRow(item, i)"
:classes="{ 'w-table__row': true, 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined }")
tr.w-table__row(
v-else
@click="doSelectRow(item, i)"
@pointerdown="onRowPointerDown"
:class="{ 'w-table__row--selected': selectedRowsByUid[item._uid] !== undefined, 'w-table__row--expanded': expandedRowsByUid[item._uid] !== undefined, [item.class]: item.class }")
template(v-for="(header, j) in headers")
td.w-table__cell(
v-if="$slots[`item-cell.${header.key}`] || $slots[`item-cell.${j + 1}`] || $slots['item-cell']"
:key="`${j}-a`"
:data-label="header.label"
:class="cellClasses(header)")
slot(
v-if="$slots[`item-cell.${header.key}`]"
:name="`item-cell.${header.key}`"
:header="header"
:item="item"
:label="item[header.key] || ''"
:index="i + 1")
slot(
v-else-if="$slots[`item-cell.${j + 1}`]"
:name="`item-cell.${j + 1}`"
:header="header"
:item="item"
:label="item[header.key] || ''"
:index="i + 1")
slot(
v-else-if="$slots['item-cell']"
name="item-cell"
:header="header"
:item="item"
:label="item[header.key] || ''"
:index="i + 1")
span.w-table__col-resizer(
v-if="j < headers.length - 1 && resizableColumns"
:class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
td.w-table__cell(
v-else
:key="`${j}-b`"
:data-label="header.label"
:class="cellClasses(header)")
div(v-html="item[header.key] || ''")
span.w-table__col-resizer(
v-if="j < headers.length - 1 && resizableColumns"
:class="{ 'w-table__col-resizer--hover': colResizing.hover === j, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
//- Expanded row.
tr.w-table__row.w-table__row--expansion(v-if="expandedRowsByUid[item._uid]")
td.w-table__cell(:colspan="headers.length")
w-transition-expand(y)
div(v-if="expandedRowsByUid[item._uid]")
slot(name="row-expansion" :item="item" :index="i + 1")
span.w-table__col-resizer(
v-if="i < headers.length - 1 && resizableColumns"
:class="{ 'w-table__col-resizer--hover': colResizing.hover === i, 'w-table__col-resizer--active': colResizing.columnIndex === j }")
//- Extra row.
.w-table__extra-row(v-if="$slots['extra-row']")
slot(name="extra-row")
//- Table footer.
tfoot.w-table__footer(v-if="$slots.footer || $slots['footer-row']")
slot(v-if="$slots['footer-row']" name="footer-row")
tr.w-table__row(v-else-if="$slots.footer")
td.w-table__cell(:colspan="headers.length")
slot(name="footer")
.w-table__pagination.w-pagination(v-if="pagination && paginationConfig")
slot(
name="pagination"
:range="`${paginationConfig.start}-${paginationConfig.end}`"
:total="paginationConfig.total"
:pages-count="paginationConfig.pagesCount"
:page="paginationConfig.page"
:goToPage="goToPage")
w-select.w-pagination__items-per-page(
v-if="paginationConfig.itemsPerPageOptions"
v-model="paginationConfig.itemsPerPage"
@input="updatePaginationConfig({ itemsPerPage: paginationConfig.itemsPerPage })"
:items="paginationConfig.itemsPerPageOptions"
label-position="left"
label="Items per page"
label-color="inherit")
.pages-wrap
w-button.w-pagination__arrow.w-pagination__arrow--prev(
@click="goToPage('-1')"
:disabled="paginationConfig.page <= 1"
icon="wi-chevron-left"
text
lg)
template(v-if="paginationConfig.pagesCount > 7")
template(v-for="i in paginationConfig.pagesCount" :key="i")
w-button.w-pagination__page(
v-if="[1, paginationConfig.pagesCount, paginationConfig.page - 1, paginationConfig.page, paginationConfig.page + 1].includes(i)"
@click="i !== paginationConfig.page && goToPage(i)"
:class="{ 'w-pagination__page--active': i === paginationConfig.page }"
round
lg) {{ i }}
w-button.w-pagination__page(
v-else-if="[1, paginationConfig.pagesCount, paginationConfig.page - 1, paginationConfig.page, paginationConfig.page + 1].includes(i - 1)"
@click="i !== paginationConfig.page && goToPage(i)"
:class="{ 'w-pagination__page--active': i === paginationConfig.page }"
round
lg) ...
template(v-else)
w-button.w-pagination__page(
v-for="i in paginationConfig.pagesCount"
:key="i"
@click="i !== paginationConfig.page && goToPage(i)"
:class="{ 'w-pagination__page--active': i === paginationConfig.page }"
round
lg) {{ i }}
w-button.w-pagination__arrow.w-pagination__arrow--next(
@click="goToPage('+1')"
:disabled="paginationConfig.page >= paginationConfig.pagesCount"
icon="wi-chevron-right"
text
lg)
span.w-pagination__results.
{{ paginationConfig.start }}-{{ paginationConfig.end || paginationConfig.total }} of {{ paginationConfig.total }}