0

I wanna create UI Like this, I wanna add Pagination in Tiles using LWC is it possible? and this Title of section is accordion it should be expandable/collapsible, when I click on > arrow, the below section will open with tiles and paginationenter image description here

Tile details enter image description here

1 Answer 1

0

Yes you can do by simply passing 8 records to UI first time when they click next then you should update the next records in same variable and you can do this further. Same thing you can follow by decreasing the 8 when they click back button, but must check that we have 8 records or not. You can use below code for reference.

HTML code

<template>
    <div class="container">
        <template for:each={displayedTiles} for:item="tile">
            <div key={tile.id} class="tile">{tile.label}</div>
        </template>
    </div>
    <div class="pagination">
        <lightning-button-group>
            <lightning-button label="Previous" onclick={handlePrevious} disabled={disablePrevious}></lightning-button>
            <lightning-button label="Next" onclick={handleNext} disabled={disableNext}></lightning-button>
        </lightning-button-group>
    </div>
</template>

JS Code

import { LightningElement, track } from 'lwc';

export default class PaginationDemo extends LightningElement {
    @track tiles = []; // Array of all tiles
    @track displayedTiles = []; // Array of tiles to display
    @track currentPage = 1;
    @track pageSize = 8;
    
    connectedCallback() {
        // Initialize tiles data (20 tiles in this example)
        for (let i = 1; i <= 20; i++) {
            this.tiles.push({ id: i, label: `Tile ${i}` });
        }
        // Initial display of tiles
        this.displayTiles();
    }
    
    displayTiles() {
        const startIndex = (this.currentPage - 1) * this.pageSize;
        const endIndex = startIndex + this.pageSize;
        this.displayedTiles = this.tiles.slice(startIndex, endIndex);
    }
    
    get disablePrevious() {
        return this.currentPage === 1;
    }
    
    get disableNext() {
        return this.currentPage === Math.ceil(this.tiles.length / this.pageSize);
    }
    
    handlePrevious() {
        if (!this.disablePrevious) {
            this.currentPage--;
            this.displayTiles();
        }
    }
    
    handleNext() {
        if (!this.disableNext) {
            this.currentPage++;
            this.displayTiles();
        }
    }
}

Please let me know if you have any doubt

8
  • The thing is I am supposed to show 12 tiles on first page and I am not aware how many tiles we will have, because it depends on different scenarios, we might have 7 records in some, in some scenarios we might have 20 records, so will this code work for that?
    – NMS
    Commented Jun 9, 2023 at 15:38
  • @Nia yes you can get the size of records by using length and you can set that in for loop. you can initialize by the length of records and it will work
    – Gopal
    Commented Jun 10, 2023 at 9:26
  • and I wanna add employee ID and name in tiles, I mean these tiles have this data inside it, so how do i do it? I have added data tile on question
    – NMS
    Commented Jun 12, 2023 at 11:07
  • @Nia for that you can use an array of objects. and integrate on that array and use object properties to display the employee id and name. [{Id:'1', Name:'A'},{Id:'2', Name:'B'},...]
    – Gopal
    Commented Jun 13, 2023 at 8:10
  • 1
    i have completed this requirement, thank you
    – NMS
    Commented Jun 17, 2023 at 13:31

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .