<template>

<div class="c-table-wrapper">
<!--DATA TABLE TO SHOW RECORDS-->
<div class="c-table-spacing">
<div class="c-dynamicDataTable">
<template if:true={hideAndShowDatatable}>

<lightning-datatable data-id="table" key-field="Id" class="table-test

unique-datatable" data={lstDataResult} columns={columnsData}
sorted-by={sortBy} sorted-direction={sortDirection}
onsort={doSorting} onrowaction={actionDecision}
max-row-selection={maxRowSelection}
onrowselection={handleRowSelection}
hide-checkbox-column={hideCheckbox} resize-column-disabled=true >
</lightning-datatable>
</template>
</div>
</div>

<!-- PAGINATION -->

<template if:true={isHideDatatable}>
<div class="c-pagination-container slds-align_absolute-center">

<span class="slds-p-around_x-small">
<lightning-button variant="base" label="Previous" icon-
name="utility:chevronleft" onclick={previousHandler}
disabled={disablePrevious} class="slds-m-left_x-small c-
pagination-btn">
</lightning-button>
<!-- <lightning-button label="Previous" icon-
name="utility:chevronleft" onclick={previousHandler}
disabled={disablePrevious}></lightning-button> -->
</span>
<span class="slds-badge slds-p-around_x-small"><p>{startingRecord}-
{endingRecord} of {totalRecordCount} | Page {page} of {totalPage}</p>
</span>
<span class="slds-p-around_x-small">
<lightning-button variant="base" label="Next" icon-
name="utility:chevronright" icon-position="right"
onclick={nextHandler} disabled={disableNext} class="c-
pagination-btn">
</lightning-button>
<!-- <lightning-button label="Next" icon-
name="utility:chevronright" icon-position="right"
onclick={nextHandler} disabled={disableNext}></lightning-
button> -->
</span>
</div>
</template>
</div>
</template>

JS

/*
*
***********************************************************************************
***********
* Component Name : lwc_ac_patientDetails
* Version : 0.2
* Created Date : 22-August-2024
* Description : Dynamic Datable Component in Accessioner Flow.
* Author : Persistent
* Modification Log :
* --------------------------------------------------------------------------------
* User Story Date Description
* ---------------- ----------------------- ---------------------
* 21-August-2024 Initial version
* CDP-10424 09-May-2025 Changes done in HTML File to
the read only mode for cancelled order.
***********************************************************************************
************/
import { LightningElement,track,api } from 'lwc';
import { OmniscriptBaseMixin } from "omnistudio/omniscriptBaseMixin";
/* import { loadStyle } from 'lightning/platformResourceLoader';
import NeoStyleSheet from '@salesforce/resourceUrl/NeoStyleSheet' */

export default class Lwc_ac_dynamicDatatable extends

OmniscriptBaseMixin(LightningElement){

/* PAGINATION VARIABLES */
@api pageSize; //PAGINATION STARTING SIZE
@api maxRowSelection = 1;
@track page = 1; //PAGINATION USE TO SET PAGE
@track startingRecord = 1; //PAGINATION STARTING STAGE
@track endingRecord = 0; //PAGINATION END STAGE
@track totalPage = 0; //PAGINATION STARTING SIZE
isPageChanged = false; //PAGINATION CONDITIONAL RENDERING
isHideDatatable = false; //PAGINATION TO HIDE AND SHOW
hideAndShowDatatable = true
disableNext = false
disablePrevious = true
@api compName;

/* DATA TABLE VARIABLES */

@api columnsData; //DATA TABLE COLUMNS
@api hideCheckbox; //DATA TABLE TO HIDE CHECK BOX
@track sortBy; //DATA TABLE TO SORT ICD CODES
@track sortDirection; //DATA TABLE TO SORTING DIRECTION

/* JS VARIABLES */
@track items = []; //ARRAY TO STORE RECORD DATA
@track totalRecordCount = 0; //STORE TOTAL COUNT OF RECORD
@track lstDataResult = []; //GETTING DATA FROM PARENT COMPONENT
@track removedvalues = []; //TO STORE REMOVED VALUES
daynamicdatatable_key = 'daynamicdatatable';
@track fullData = []; //For storing all the records

//@api isReadOnly;

/* TO GET VALUES FROM PARENT COMPONENT */

@api
get lstResult() {
return this.lstDataResult;
}
 set lstResult(value) {
this.processRecords(value);
}

/* connectedCallback() {
loadStyle(this, NeoStyleSheet);
} */

/* INITIAL FUNCTION TO MANIPULATE DATA */

processRecords(data) {
if (data.length > 0) {
this.hideAndShowDatatable = true
if (this.removedvalues.length == 0) {
const state = this.omniGetSaveState(this.daynamicdatatable_key);
if (state) { this.removedvalues = state.RemovedValue; }
}
if (this.removedvalues.length > 0) {
data = data.filter(item => !this.removedvalues.includes(item));
}
this.items = data;
this.fullData = [...this.items]; // sort
this.totalRecordCount = data.length;
this.totalPage = Math.ceil(this.totalRecordCount / this.pageSize);
this.lstDataResult = this.items.slice(0, this.pageSize);
this.startingRecord = 1;
this.endingRecord = this.pageSize;
this.page = 1
if (data.length > this.pageSize) {
this.isHideDatatable = true;
}
else if (data.length <= this.pageSize) {
this.isHideDatatable = false;
}
this.disablePrevious = this.startingRecord == 1 ? true : false
this.disableNext = this.endingRecord == this.totalRecordCount ? true :
false
}
if (data.length == 0) {
this.hideAndShowDatatable = false
}
}

/* FOR SORTING DATA TABLE */

doSorting(event) {
this.sortBy = event.detail.fieldName;
this.sortDirection = event.detail.sortDirection;
this.sortData(this.sortBy, this.sortDirection);
}

/* FOR SORTING DATA TABLE */

sortData(fieldname, direction) {
let parseData = JSON.parse(JSON.stringify(this.fullData));
// let parseData = JSON.parse(JSON.stringify(this.lstDataResult));
//RETURN THE VALUE STORED IN THE FIELD
let keyValue = (a) => {
return a[fieldname];
};
//CHECKING REVERSE DIRECTION
 let isReverse = direction === 'asc' ? 1 : -1;
//SORTING DATA
parseData.sort((x, y) => {
x = keyValue(x) ? keyValue(x) : ''; //HANDLING NULL VALUES
y = keyValue(y) ? keyValue(y) : '';
//SORTING VALUES BASED ON DIRECTION
return isReverse * ((x.toLowerCase() > y.toLowerCase()) -
(y.toLowerCase() > x.toLowerCase()));
});
this.processRecords(parseData); //sort
}

actionDecision(event) {
const actionName = event.detail.action.name;
if (actionName == 'Remove') {
this.removeRow(event);
} else if (actionName == 'Edit') {
this.handleEditRow(event); // FOR HANDLING THE EDIT FUNCTIONALITY
} else if (actionName == 'Add') {
this.handleAddRowToSelectedDT(event); // FOR HANDLING THE EDIT
FUNCTIONALITY
}
}

handleRowSelection(event) {
const selectedRows = event.detail.selectedRows;
this.dispatchEvent(new CustomEvent('rowselection', { detail:
{ selectedRows: selectedRows } }));
}

/* TO REMOVE ROW FROM DATA TABLE */

removeRow(event) {
let toBeDeletedRowIndex = event.detail.row.Id;
let veritems = [];
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].Id !== toBeDeletedRowIndex) {
veritems.push(this.items[i]);
}
}
//REFRESH DATA IN DATA TABLE
this.lstDataResult = null;
this.removedvalues.push(toBeDeletedRowIndex);
this.processRecords(veritems);
this.dispatchEvent(new CustomEvent('removerowdd', { detail: { rowIds:
toBeDeletedRowIndex, compName: this.compName } }));
}

/* TO EDIT ROW FROM DATA TABLE */

handleEditRow(event) {
let toBeEditRowIndex = event.detail.row.Id;
let rowData = event.detail.row;
this.dispatchEvent(new CustomEvent('editrow', { detail: { rowIds:
toBeEditRowIndex, rowData: rowData } }));
}

/* TO Add ROW Into Selected Datatable */

handleAddRowToSelectedDT(event) {
let addRowId = event.detail.row.Id;
let rowData = event.detail.row;
 this.dispatchEvent(new CustomEvent('addrow', { detail: { rowId: addRowId,
rowData: rowData } }));
}

//DISCONNECTED CALL BACK

disconnectedCallback() {
let removeddata = { "RemovedValue": this.removedvalues };
let usePubSub = true;
this.omniSaveState(removeddata, this.daynamicdatatable_key, usePubSub);
}

/* TO HANDLE PREVIOUS DATA TABLE */

previousHandler() {
this.isPageChanged = true;
if (this.page > 1) {
this.page = this.page - 1; //DECREASE PAGE BY 1
this.displayRecordPerPage(this.page);
}
}

/* TO HANDLE NEXT DATA TABLE */

nextHandler() {
this.isPageChanged = true;
if ((this.page < this.totalPage) && this.page !== this.totalPage) {
this.page = this.page + 1; //INCREASE PAGE BY 1
this.displayRecordPerPage(this.page);
}
}

/* TO SHOW DATA IN DATATABLE AFTER TOGGLING TO NEXT OR PREVIOUS BUTTON IN

PAGINATION */
displayRecordPerPage(page) {
this.startingRecord = ((page - 1) * this.pageSize);
this.endingRecord = (this.pageSize * page);
this.endingRecord = (this.endingRecord > this.totalRecordCount) ?
this.totalRecordCount : this.endingRecord;
this.lstDataResult = this.items.slice(this.startingRecord,
this.endingRecord);
this.startingRecord = this.startingRecord + 1;
this.disablePrevious = this.startingRecord == 1 ? true : false
this.disableNext = this.endingRecord == this.totalRecordCount ? true :
false
}
renderedCallback() {
this.applyCustomStyles();
}

// Function to inject styles dynamically

applyCustomStyles() {
// Check if the style has already been added
if (!this.template.querySelector('.c-datatable-style')) {
const style = document.createElement('style');
style.className = 'c-datatable-style'; // To avoid re-adding the style
multiple times

// Add styles specific to this component's datatable

style.innerText = `
.table-test .slds-has-button-menu .slds-th__action,
.table-test .slds-th__action {
 padding: 0 0.4rem !important; /* Adjust padding as needed */
}
`;

// Append the style element to the template

this.template.querySelector('.c-dynamicDataTable').appendChild(style);
}
}
}

CSS

/* .slds-th__action {
background-color: #f3f3f3;
}
.THIS .table-test thead th span {
background-color: #16325c;
color: white} */

.c-dynamicDataTable{
border: 1px solid #d4d4d4;

}
.unique-datatable .slds-has-button-menu .slds-th__action,
.unique-datatable .slds-th__action {
padding: 0 0.4rem !important; /* Adjust the padding specifically for this table
*/
}

Metaxml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>59.0</apiVersion>
<isExposed>true</isExposed>
<runtimeNamespace>omnistudio</runtimeNamespace>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__Tab</target>
<target>lightningCommunity__Page</target>
</targets>
</LightningComponentBundle>