Breaking News: Grepper is joining You.com. Read the official announcement!

lwc datatable with search

Attractive Anaconda answered on March 14, 2021 Popularity 6/10 Helpfulness 1/10

answer lwc datatable with search

related lightning datatable with search lwc

lwc datatable with search

Comment

import { LightningElement, wire, api, track} from 'lwc';import { refreshApex } from '@salesforce/apex';import getOpps from '@salesforce/apex/OpportunityController.getOpps';const columns = [{        label: 'Name',        fieldName: 'Name',        type: 'text',        sortable: true    },    {        label: 'Stage',        fieldName: 'StageName',        sortable: true    },    {        label: 'Close Date',        fieldName: 'CloseDate',        sortable: true    }];export default class LightningDatatableExample extends LightningElement {    @track value;    @track error;    @track data;    @api sortedDirection = 'asc';    @api sortedBy = 'Name';    @api searchKey = '';    result;        @track page = 1;     @track items = [];     @track data = [];     @track columns;     @track startingRecord = 1;    @track endingRecord = 0;     @track pageSize = 5;     @track totalRecountCount = 0;    @track totalPage = 0;      @wire(getOpps, {searchKey: '$searchKey', sortBy: '$sortedBy', sortDirection: '$sortedDirection'})    wiredAccounts({ error, data }) {        if (data) {                    this.items = data;            this.totalRecountCount = data.length;             this.totalPage = Math.ceil(this.totalRecountCount / this.pageSize);                         this.data = this.items.slice(0,this.pageSize);             this.endingRecord = this.pageSize;            this.columns = columns;            this.error = undefined;        } else if (error) {            this.error = error;            this.data = undefined;        }    }    //clicking on previous button this method will be called    previousHandler() {        if (this.page > 1) {            this.page = this.page - 1; //decrease page by 1            this.displayRecordPerPage(this.page);        }    }    //clicking on next button this method will be called    nextHandler() {        if((this.page<this.totalPage) && this.page !== this.totalPage){            this.page = this.page + 1; //increase page by 1            this.displayRecordPerPage(this.page);                    }                 }    //this method displays records page by page    displayRecordPerPage(page){        this.startingRecord = ((page -1) * this.pageSize) ;        this.endingRecord = (this.pageSize * page);        this.endingRecord = (this.endingRecord > this.totalRecountCount)                             ? this.totalRecountCount : this.endingRecord;         this.data = this.items.slice(this.startingRecord, this.endingRecord);        this.startingRecord = this.startingRecord + 1;    }            sortColumns( event ) {        this.sortedBy = event.detail.fieldName;        this.sortedDirection = event.detail.sortDirection;        return refreshApex(this.result);            }      handleKeyChange( event ) {        this.searchKey = event.target.value;        return refreshApex(this.result);    }}

Popularity 6/10 Helpfulness 1/10 Language whatever

Source: sfdctree.wordpress.com

Tags: datatable lwc search whatever

Link to this answer
Share Copy Link

Contributed on Mar 14 2021

Attractive Anaconda

0 Answers Avg Quality 2/10

Closely Related Answers

lightning datatable with search lwc

Comment

<template>    <lightning-card title="Lightning Datatable Example">        <div class="slds-m-around_medium">            <lightning-input type="search" onchange={handleKeyChange} class="slds-m-bottom_small" label="Search"                value={searchKey}></lightning-input>            <lightning-datatable key-field="Id" data={data} columns={columns} sorted-by={sortedBy}                sorted-direction={sortedDirection} onsort={sortColumns}>            </lightning-datatable>            </br>            <lightning-layout horizontal-align="space">                <lightning-layout-item flexibility="auto">                    <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}>                    </lightning-button>                </lightning-layout-item>                <lightning-layout-item flexibility="auto">                    Page {page} of {totalPage}                </lightning-layout-item>                <lightning-layout-item flexibility="auto">                    <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right"                        onclick={nextHandler}></lightning-button>                </lightning-layout-item>            </lightning-layout>        </div>    </lightning-card></template>

Popularity 6/10 Helpfulness 2/10 Language whatever

Source: sfdctree.wordpress.com

Tags: whatever lwc datatable search lightning se

Link to this answer
Share Copy Link

Contributed on Apr 17 2021

Attractive Anaconda

0 Answers Avg Quality 2/10

lwc datatable with search

Contents

More Related Answers

lwc datatable with search

Closely Related Answers

lightning datatable with search lwc

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.