<template>
|
<template if:true={records}>
|
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
|
<div class="slds-col"><!--RECORDS PER PAGE-->
|
<div style={paginationVisibility} class="slds-list_inline slds-p-bottom_xx-small customSelect">
|
<label class="slds-text-color_weak slds-p-horizontal_x-small" for="recordsPerPage">Page Size:</label>
|
<div class="slds-select_container">
|
<select class="slds-select" id="recordsPerPage" onchange={handleRecordsPerPage}>
|
<template for:each={pageSizeOptions} for:item="option">
|
<option key={option} value={option}>{option}</option>
|
</template>
|
</select>
|
</div>
|
</div>
|
</div>
|
<!-- <div class="slds-col">
|
<div if:true={showSearchBox}>
|
<div class="slds-p-horizontal_x-small slds-p-bottom_xx-small">
|
<lightning-input label="" type="search" placeholder="Search" variant="label-hidden" onchange={handleKeyChange}></lightning-input>
|
</div>
|
</div>
|
</div> -->
|
</div>
|
|
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread">
|
<div class="slds-col">
|
<div class="slds-col slds-p-bottom_xx-small">
|
<span>
|
<label class="slds-text-color_weak slds-p-horizontal_x-small" >Total: {filtredNum}</label>
|
</span>
|
<span>
|
<label class="slds-text-color_weak slds-p-horizontal_x-small" >Selected: {totalSelected}</label>
|
</span>
|
</div>
|
</div>
|
</div>
|
|
|
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread" >
|
<div class="slds-col" style={tableHeightStyle}>
|
<lightning-datatable key-field={keyField}
|
hide-checkbox-column = {hidecheckboxcolumn}
|
data={recordsToDisplay}
|
columns={columns}
|
max-row-selection={maxRowSelection}
|
onrowselection={getSelectedRows}
|
selected-rows={preSelected}
|
default-sort-direction={defaultSortDirection}
|
sorted-direction={sortDirection}
|
sorted-by={sortedBy}
|
onsort={handelSort}
|
show-row-number-column = {showrownumber}>
|
</lightning-datatable>
|
</div>
|
</div>
|
|
<div class="slds-grid slds-grid_vertical-align-center slds-grid_align-spread" style="padding-top: 0.5em;">
|
<div class="slds-col"></div>
|
<div class="slds-col"></div>
|
<!--PAGE NAVIGATION-->
|
<div class="slds-col">
|
<div style={paginationVisibility}>
|
<div class="slds-col slds-p-bottom_xx-small">
|
<span>
|
<lightning-button-icon icon-name="utility:chevronleft" variant="bare" size="medium" alternative-text="Previous Page" onclick={previousPage}></lightning-button-icon>
|
</span>
|
<label class="slds-text-color_weak slds-p-horizontal_x-small" for="pageNum">Page:</label>
|
<input type="number" id="pageNum" value={pageNumber} maxlength="4" onkeypress={handlePageNumberChange} class="customInput" title="Go to a Page"></input>
|
<span> of <b id="totalPages">{totalPages}</b></span>
|
<span>
|
<template if:true={pageNumber}></template>
|
<lightning-button-icon icon-name="utility:chevronright" variant="bare" size="medium" alternative-text="Next Page" onclick={nextPage} class="slds-p-horizontal_x-small"></lightning-button-icon>
|
</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
</template>
|
</template>
|
