LWC Datatable - Lookup and Picklist supported editable lightning datatable

I have written my first post about Picklist supported editable lightning datatable in lightning aura components and since then I have been asked how to add lookup field to it and how to make row selection consistent along with pagination. I was also thinking to convert the old one from aura to lwc and cover the above functionalities. So, here I am posting the lightning datatable which supports lookup and picklist fields in edit mode and row selection consistency along with the pagination.

This datatable has all the features provided by standard lightning-datatable component and few additional features also.

Additional Features:

• Option to select which edited rows should be updated and which can be skipped. Let's say we have edited 4 rows in which one was edited by mistake and don't want to update that row, we can just unselect that row so that only selected rows will get updated.
• It provides the option to select all rows of a table, select all rows of a page and the consistency of row selection while moving between the pages.
• In built simple and easy pagination where we can navigate to any page by just entering the page number.
• Powerful search funtionality where we can search across all columns of the table.
• Image actions, means you can use images also for actions. We just need to pass the source url of the image.

{label:'Compare', type:'image-action', src: `${imageStaticResource}`, actionName:'compareAction', title:'Click to compare'}

Now, let's just dive into the actual part. Please go ahead and create the components in the below mentioned order.

vkDatatableStyles (Static Resource)

Create a .css file with the below code and upload it to a static resource called 'vkDatatableStyles'.

/* © vkambham.blogspot.com */
.vk-data-table .slds-input {
    height: inherit;
    min-height: inherit;
    line-height: inherit;
    padding: 0 .5rem;
}
.vk-data-table [role=combobox] input[readonly] {
    padding-left: 0.5rem;
}
.vk-data-table .slds-combobox__input {
    padding: 0 1.5rem;
    padding-left: .5rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vk-cell-edit:hover .table-edit-icon{
    visibility: visible !important;
}
.vk-pagination-search input{
    height: 1.5rem;
    min-height: 1.5rem;
    padding: .5rem;
}
.vk-pagination-input input{
    height: 1.5rem;
    min-height: 1.5rem;
    width: 3rem;
    text-align: center;
    padding: .5rem;
}
.slds-datepicker .slds-day:hover {
    border-radius: 50%;
    margin: auto;
    background-color: #ecebea;
}

formElement (LWC)

Create an LWC component called 'formElement' which is created to use as either a form element or a table element. It is a single place holder for all kinds of input elements in view/edit/read-only mode. Here, for datatable we are going to use it as a table element, but in my later posts I will explain how to use it as a form element. Now, go ahead and update this component elements with the below code.

formElement.html

This uses a custom lookup component which was posted in one of my blog posts. If you don't have this lookup component in your org already, create it before proceeding further.

<!-- © vkambham.blogspot.com -->
<template>
    <dl class={listClass}>
        <dt if:false={isTableElement} class="slds-item_label slds-text-color_weak">
            <div class="slds-grid">
                <div class="slds-truncate" title={_label}>
                    <template if:true={editMode}>
                        <abbr if:true={isRequired} class="slds-required vk-ip-required" title="required">*</abbr>
                    </template>
                    {_label}
                </div>
                <div if:true={_helpText} class={helpTextClass}>
                    <lightning-helptext content={_helpText} class="vk-helptext"></lightning-helptext>
                </div>
            </div>
        </dt>

        <dd class={detailClass}>
            <div if:false={editMode} class="slds-grid">
                <div if:true={isText} class="slds-truncate">{_value}</div>
                <div if:true={isPicklist} class="slds-truncate">{_value}</div>
                <div if:true={isLookup} class="slds-truncate">
                    <a href={href} target={target} title={title} class="vk-lookup-link">{linkLabel}</a>
                </div>
                <div if:true={isCheckbox} class="slds-truncate">
                    <lightning-input type="checkbox" variant="label-hidden" name="formCheckbox" checked={_value}
                        disabled></lightning-input>
                </div>
                <div if:true={isDate} class="slds-truncate">
                    <lightning-formatted-date-time value={_value} year="numeric" month="2-digit" day="2-digit"
                        time-zone="UTC"></lightning-formatted-date-time>
                </div>
                <div if:true={isDateTime} class="slds-truncate">
                    <lightning-formatted-date-time value={_value} year="numeric" month="2-digit" day="2-digit"
                        hour="2-digit" minute="2-digit" hour12="true"></lightning-formatted-date-time>
                </div>
                <div if:true={isNumber} class="slds-truncate">
                    <lightning-formatted-number value={_value} minimum-fraction-digits={minFractionDigits}
                        maximum-fraction-digits={maxFractionDigits}></lightning-formatted-number>
                </div>
                <div if:true={isCurrency} class="slds-truncate">
                    <lightning-formatted-number value={_value} format-style="currency" currency-code={currencyCode}
                        minimum-fraction-digits={minFractionDigits} maximum-fraction-digits={maxFractionDigits}>
                    </lightning-formatted-number>
                </div>
                <div if:true={isPercent} class="slds-truncate">
                    <lightning-formatted-number value={_value} format-style="percent-fixed"
                        minimum-fraction-digits={minFractionDigits} maximum-fraction-digits={maxFractionDigits}>
                    </lightning-formatted-number>
                </div>
                <div if:true={isLink} class="slds-truncate">
                    <a href={href} target={target} title={title}>{linkLabel}</a>
                </div>
                <div if:true={isLinkAction} class="slds-truncate">
                    <a name={actionName} title={title} onclick={handleAction}>{linkLabel}</a>
                </div>
                <div if:true={isImageAction} style="text-align:center;">
                    <a name={actionName} title={title} onclick={handleAction}>
                        <img src={imageSource} class="slds-button__icon"></img>
                    </a>
                </div>
                <div if:true={isButtonIcon}>
                    <lightning-button-icon icon-name={iconName} variant={iconVariant} alternative-text={title}
                        title={title} name={actionName} onclick={handleAction}></lightning-button-icon>
                </div>
                <div if:false={isReadOnly} class="slds-col_bump-left">
                    <button class={editIconClass} title="Edit" onclick={editElement}>
                        <svg class="vk-edit-icon slds-button__icon slds-button__icon_hint" aria-hidden="true">
                            <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#edit"></use>
                        </svg>
                        <div class="slds-assistive-text">Edit</div>
                    </button>
                </div>
            </div>
            <div if:true={editMode}>
                <div if:true={isText}>
                    <lightning-input class="inpElm" value={_value} variant="label-hidden" required={isRequired}
                        onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isCheckbox}>
                    <lightning-input class="inpElm" type="checkbox" value={_value} checked={_value}
                        variant="label-hidden" required={isRequired} onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isPicklist}>
                    <lightning-combobox class="inpElm" value={_value} options={_options} variant="label-hidden"
                        onchange={sendValue}></lightning-combobox>
                </div>
                <div if:true={isLookup}>
                    <c-lookup class="inpElm" is-table-element={isTableElement} required={isRequired} value={_value}
                        options={_options} variant="label-hidden" place-holder={placeHolder} icon-name={iconName}
                        icon-size={iconSize} onchange={handleLookupChange}></c-lookup>
                </div>
                <div if:true={isDate}>
                    <lightning-input class="inpElm" type="date" value={_value} variant="label-hidden"
                        required={isRequired} date-style="short" onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isDateTime}>
                    <lightning-input class="inpElm" type="date-time" value={_value} variant="label-hidden"
                        required={isRequired} date-style="short" onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isNumber}>
                    <lightning-input class="inpElm" type="number" value={_value} variant="label-hidden"
                        required={isRequired} onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isCurrency}>
                    <lightning-input class="inpElm" type="number" value={_value} variant="label-hidden"
                        required={isRequired} formatter="currency" onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isPercent}>
                    <lightning-input class="inpElm" type="number" value={_value} variant="label-hidden"
                        required={isRequired} formatter="percent-fixed" onchange={sendValue}></lightning-input>
                </div>
                <div if:true={isLink} class="slds-truncate">
                    <a href={href} target={target} title={title}>{linkLabel}</a>
                </div>
                <div if:true={isLinkAction} class="slds-truncate">
                    <a name={actionName} title={title} onclick={handleAction}>{linkLabel}</a>
                </div>
                <div if:true={isImageAction} class="slds-truncate" style="text-align:center;">
                    <a name={actionName} title={title} onclick={handleAction}>
                        <img src={imageSource} class="slds-button__icon"></img>
                    </a>
                </div>
                <div if:true={isButtonIcon} class="slds-truncate">
                    <lightning-button-icon icon-name={iconName} variant={iconVariant} alternative-text={title}
                        title={title} name={actionName} onclick={handleAction}></lightning-button-icon>
                </div>
            </div>
        </dd>
    </dl>
</template>

formElement.js

/* © vkambham.blogspot.com */
import { LightningElement, api } from 'lwc';

const LISTCLASS = 'slds-list slds-border_bottom';
export default class FormElement extends LightningElement {
    _mode;
    _type;
    _label;
    _value;
    _options;
    _size;
    _variant;
    _helpText;
    href;
    editMode = false;
    isRequired = false;
    isReadOnly = false;
    isConnected = false;

    isText;
    isPicklist;
    isCheckbox;
    isLink;
    isLookup;
    isDate;
    isDateTime;
    isNumber;
    isCurrency;
    isPercent;
    isLinkAction;
    isImageAction;
    isButtonIcon;
    listClass = 'slds-list_stacked '+LISTCLASS;
    detailClass = 'slds-item_detail vk-form-font';
    helpTextClass = '';
    editIconClass = 'slds-button slds-button_icon';
    isTableElement = false;

    @api rowIndex;
    @api colIndex;
    @api name;
    @api title;
    @api placeHolder;    

    @api linkLabel;
    @api actionName;

    @api numberFormat;
    @api currencyCode;
    @api maxFractionDigits;
    @api minFractionDigits;
    @api minValue;
    @api maxValue;

    @api iconName;
    @api iconSize;
    @api iconVariant = 'bare';
    @api imageSource;

    @api set mode(value){
        this._mode = value ? value : 'view';
        this.editMode = value === 'edit';
        this.handleElementClass();
    }
    get mode(){
        return this._mode;
    }
    @api set type(value){
        value = value ? value : 'text';
        this._type = value;
        this.isText = value.toLowerCase() === 'text' || value.toLowerCase() === 'string';
        this.isPicklist = value.toLowerCase() === 'picklist';
        this.isCheckbox = value.toLowerCase() === 'checkbox' || value.toLowerCase() === 'boolean';
        this.isLookup = value.toLowerCase() === 'lookup' || value.toLowerCase() === 'reference';
        this.isDate = value.toLowerCase() === 'date';
        this.isDateTime = value.toLowerCase() === 'date-time' || value.toLowerCase() === 'datetime';
        this.isNumber = value.toLowerCase() === 'number' || value.toLowerCase() === 'integer';
        this.isCurrency = value.toLowerCase() === 'currency';
        this.isPercent = value.toLowerCase() === 'percent';
        this.isLink = value.toLowerCase() === 'link';
        this.isLinkAction = value.toLowerCase() === 'link-action';
        this.isImageAction = value.toLowerCase() === 'image-action';
        this.isButtonIcon = value.toLowerCase() === 'button-icon';
    }
    get type(){
        return this._type;
    }
    @api set label(value){
        this._label = value ? value : '';
    }
    get label(){
        return this._label;
    }
    @api set value(value){
        this._value = value ? value : '';
        if(this.isLookup && this.isConnected) this.populateLookupValue(this._value);
    }
    get value(){
        return this._value;
    }
    @api set options(value){
        this._options = value ? value : [];
    }
    get options(){
        return this._options;
    }
    @api set required(value){
        this.isRequired = value ? value : false;
    }
    get required(){
        return this.isRequired;
    }
    @api set readOnly(value){
        this.isReadOnly = value ? value : false;
    }
    get readOnly(){
        return this.isReadOnly;
    }    
    @api set size(value){
        this._size = value ? value : '';
    }
    get size(){
        return this._size;
    }
    @api set target(value){
        this._target = value ? value : '_blank';
    }
    get target(){
        return this._target;
    }
    @api set variant(value){ //label-inline, label-hidden, and label-stacked
        this._variant = value ? value : 'label-stacked';
    }
    get variant(){
        return this._variant;
    }
    @api set helpText(value){
        this._helpText = value ? value : '';
    }
    get helpText(){
        return this._helpText;
    }
    @api set tableElement(value){
        this.isTableElement = value ? value : false;
        this.handleElementClass();
    }
    get tableElement(){
        return this.isTableElement;
    }
    
    connectedCallback(){
        this.isConnected = true;
        this.href = this.isLink && this._value ? '/'+this._value : '';
        this.readOnly = this.isLink;
        if(this.isLookup) this.populateLookupValue(this._value);
    }

    disconnectedCallback() {
        this.isConnected = false;
    }

    populateLookupValue(value){
        if(this._options){
            this._options.forEach(opt => {
                if(value && value === opt.value){
                    this.linkLabel = opt.label;
                    this.href = '/'+value;
                }
            });
        }else{
            this.linkLabel = value;
            this.href = '/'+value;
        }
    }

    handleElementClass(){
        this.listClass = this.editMode ? 'slds-list' : LISTCLASS;
        if(!this.isTableElement){
            this.listClass += this._variant === 'label-inline' ? ' slds-list_horizontal' : ' slds-list_stacked';
            this.helpTextClass = this._variant === 'label-inline' ? 'slds-col_bump-left' : '';
        }else{
            this.editIconClass += ' table-edit-icon';
            this.listClass = 'slds-list_stacked';
            this.detailClass = 'slds-item_detail';
        }
    }

    handleEditing(){
        if(!this.isReadOnly) this.editElement();
    }

    @api
    editElement(){
        this.editMode = true;
        let obj = {};
        if(this.isTableElement){
            obj = {rowIndex: this.rowIndex, colIndex: this.colIndex};
        }else{
            this.template.querySelector('.slds-list').classList.remove('slds-border_bottom');
        }
        this.dispatchEvent(new CustomEvent('edit', {detail: obj}));
    }

    sendValue(event){
        let obj = {};
        obj.value = this.isCheckbox ? event.target.checked : event.target.value;
        if(this.isTableElement){
            obj.rowIndex = this.rowIndex;
            obj.colIndex = this.colIndex; 
            obj.name = this.name;
        }
        this.dispatchEvent(new CustomEvent('valuechange', {detail: obj}));
    }
    
    @api
    closeEditMode(){
        this.editMode = false;
        if(!this.isTableElement) this.template.querySelector('.slds-list').classList.add('slds-border_bottom');
    }

    handleLookupChange(event){
        this.linkLabel = event.detail.label;

        let obj = {rowIndex: this.rowIndex, colIndex: this.colIndex, name: this.name, value: event.detail.value, label: event.detail.label};
        this.dispatchEvent(new CustomEvent('valuechange', {detail: obj}));
    }

    handleAction(event){
        let currentNode = event.target;
        if(!currentNode.name) currentNode = currentNode.parentNode;
        let actionName = currentNode.name;
        let obj ={rowIndex: this.rowIndex, colIndex: this.colIndex, actionName: actionName};
        this.dispatchEvent(new CustomEvent('action', {detail: obj}));
    }
}

formElement.css

/* © vkambham.blogspot.com */
.vk-edit-icon{
    fill: #dddbda;
}
.vk-form-font{
    font-size: 0.875rem;
    font-weight: 400;
}
.table-edit-icon{
    visibility: hidden;
}
.vk-ip-required{
    vertical-align: top;
}
.vk-lookup-link {
    border-bottom: 1px dotted;
    display: inline;
}
.vk-lookup-link:hover {
    text-decoration: none;
}

Now, let's go to the main component, the datatable.

vkDatatable (LWC)

Create an LWC component called 'vkDatatable' and update it by adding below code.

vkDatatable.html

This uses a custom spinner component which was posted in one of my blog posts. If you don't have this custom spinner component in your org already, create it before proceeding further or replace it with the base spinner component, lightning-spinner.

<!-- © vkambham.blogspot.com -->
<template>
    <div if:true={showTable} class="slds-is-relative">
        <c-spinner if:true={isLoading} size="small" message={spinnerMsg} alternative-text="Loading"></c-spinner>
        <lightning-layout if:true={showPagination} horizontal-align="spread" vertical-align="center" class="slds-border_top">
            <lightning-layout-item class="slds-p-vertical_xx-small">
                <lightning-layout style={controlPagination} vertical-align="center">
                    <lightning-layout-item>
                        <span if:true={showRowNumber} style="padding-left:40px;"></span>
                        <span if:true={showCheckbox} class="slds-checkbox" title="Select/Deselect All" style="text-align:center;width:40px;">
                            <input style={controlPagination} type="checkbox" class="select-all-checkbox" id="selectAll" name="" onchange={handleAllRowsSelection}></input>
                            <label class="slds-checkbox__label" for="selectAll" style="cursor:pointer;">
                                <span class="slds-checkbox_faux"></span>
                            </label>
                        </span>
                    </lightning-layout-item>
                    <lightning-layout-item>
                        <div class="slds-list_inline customSelect">
                            <label class="slds-text-color_weak slds-p-left_x-small slds-p-right_xx-small" for="recordsPerPage">Show:</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><label class="slds-text-color_weak slds-p-left_xx-small" for="recordsPerPage">of<b>&nbsp;{records.length}&nbsp;</b>records</label>
                        </div>
                    </lightning-layout-item>
                </lightning-layout>                
            </lightning-layout-item>
            <lightning-layout-item class="slds-p-vertical_xx-small">
                <lightning-layout vertical-align="center">
                    <lightning-layout-item class="slds-p-right_x-small">
                        <lightning-input label="" type="search" placeholder={placeHolder} variant="label-hidden" onchange={handleSearch} class="vk-pagination-search"></lightning-input>
                    </lightning-layout-item>
                    <lightning-layout-item>
                        <lightning-layout style={controlPagination} vertical-align="center">
                            <lightning-layout-item>
                                <span style={controlPrevious}>
                                    <lightning-button-icon icon-name="utility:chevronleft" variant="" alternative-text="Previous Page" onclick={previousPage} class="vk-btn-icon"></lightning-button-icon>
                                </span>
                            </lightning-layout-item>
                            <lightning-layout-item>
                                <lightning-layout vertical-align="center">
                                    <lightning-layout-item>
                                        <label class="slds-text-color_weak slds-p-horizontal_xx-small" for="pageNum">Page:</label>
                                    </lightning-layout-item>
                                    <lightning-layout-item>
                                        <lightning-input type="number" value={pageNumber} variant="label-hidden" class="vk-pagination-input" onkeypress={handlePageNumberChange}></lightning-input>
                                    </lightning-layout-item>
                                    <lightning-layout-item>
                                        <label class="slds-text-color_weak slds-p-horizontal_xx-small" for="pageNum">of</label><b id="totalPages">{totalPages}</b></span>
                                    </lightning-layout-item>
                                </lightning-layout>
                            </lightning-layout-item>
                            <lightning-layout-item>
                                <span style={controlNext}>
                                    <lightning-button-icon icon-name="utility:chevronright" variant="" alternative-text="Next Page" onclick={nextPage} class="vk-btn-icon slds-p-horizontal_x-small"></lightning-button-icon>
                                </span>
                            </lightning-layout-item>
                        </lightning-layout>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-layout-item>
        </lightning-layout>

        <div class="slds-scrollable_x" onmouseup={stopColumnResizing}>
            <table id="custTable" class="vk-data-table" style={tableStyle} role="grid">
                <thead>
                    <tr>
                        <th if:true={showRowNumber} style="text-align:right;width:40px;padding-right:.4rem"></th>
                        <th if:true={showCheckbox} style="text-align:center;width:40px;font-weight: normal;">                            
                            <span class="slds-checkbox" title="Select/Deselect All Page Rows">
                                <input type="checkbox" class="page-checkbox" id="pageCheckbox" onchange={handlePageRowsSelection}></input>                          
                                <label class="slds-checkbox__label" for="pageCheckbox" style="cursor:pointer;">
                                    <span class="slds-checkbox_faux"></span>
                                </label>
                            </span>
                        </th>
                        <template for:each={columns} for:item="col">
                            <th key={col} id={col.sortBy} aria-label={col.label} class={col.thClass} style={col.style}>
                                <div class="slds-grid">
                                    <div class="slds-col" style="width:100%" onmousemove={setNewWidth}>
                                        <span if:false={col.sortable} class="slds-truncate" title={col.label}>
                                            <abbr if:true={col.required} class="vk-dt-required" title="required">*</abbr>
                                            {col.label}
                                        </span>
                                        <a if:true={col.sortable} class="slds-text-link_reset" role="button" onclick={handleSorting}>
                                            <span class="slds-assistive-text">Sort by: {col.label}</span>
                                            <div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate" title={col.sortByTitle}>
                                                <span class="slds-truncate slds-p-right_xx-small" title={col.label}>
                                                    <abbr if:true={col.required} class="vk-dt-required" title="required">*</abbr>
                                                    {col.label}
                                                </span>
                                                <span class={col.sortIconClass} style={col.sortIconStyle}>
                                                    <svg class="slds-button__icon slds-button__icon_small" aria-hidden="true">
                                                        <use xlink:href="/_slds/icons/utility-sprite/svg/symbols.svg#arrowup"></use>
                                                    </svg>
                                                </span>
                                            </div>
                                        </a>
                                    </div>
                                    <div if:true={col.resizable} class="slds-col slds-resizable" title="resize">
                                        <div class="vk-resizable__handle" onmousedown={calculateWidth} onmousemove={setNewWidth} onmouseup={stopColumnResizing}>
                                            <div class="vk-resizable__divider" style={resizerStyle}></div>
                                        </div>
                                    </div>
                                </div>
                            </th>
                        </template>
                    </tr>
                </thead>
                <tbody onmousemove={stopColumnResizing}>
                    <template for:each={pageData} for:item="row">
                        <tr key={row.id} class={row.rowClass}>
                            <td if:true={showRowNumber} style="text-align:right;width:40px;padding-right:0.4rem;" class="slds-text-color_weak">{row.rowNumber}</td>
                            <td if:true={showCheckbox} style="text-align:center;width:40px;">
                                <span class="slds-checkbox" title="Select/Deselect">
                                    <input type="checkbox" name="isSelected" id={row.index} checked={row.isSelected} onchange={handleRowSelection}></input>
                                    <label class="slds-checkbox__label" for={row.index} style="cursor:pointer;">
                                        <span class="slds-checkbox_faux"></span>
                                    </label>
                                </span>
                            </td>
                            <template for:each={row.fields} for:item="field" for:index="colIndex">
                                <td key={row.index} headers={field.name} class={field.tdClass} role="gridcell">
                                    <c-form-element 
                                        table-element 
                                        row-index={row.index} 
                                        col-index={field.index}
                                        mode={row.mode}
                                        type={field.type}
                                        label={field.label}
                                        value={field.value}
                                        variant={_variant}
                                        required={field.required} 
                                        read-only={field.readOnly}
                                        name={field.name} 
                                        place-holder={field.placeHolder} 
                                        options={field.options} 
                                        title={field.title} 
                                        link-label={field.linkLabel} 
                                        image-source={field.imageSource} 
                                        target={field.target}
                                        icon-name={field.iconName} 
                                        icon-size={field.iconSize} 
                                        action-name={field.actionName}
                                        min-value={field.minValue} 
                                        max-value={field.maxValue}
                                        min-fraction-digits={field.minFractionDigits} 
                                        max-fraction-digits={field.maxFractionDigits}
                                        onedit={handleCellEdit} 
                                        onvaluechange={handleCellChange} 
                                        onaction={handleRowAction}>
                                    </c-form-element>
                                </td>
                            </template>
                        </tr>
                    </template>
                </tbody>
            </table>
            <div if:false={totalRecords} class="slds-var-p-vertical_xx-small slds-var-p-left_small slds-border_bottom">
                No records found to display.
            </div>
            <div if:true={isEdited} class="slds-modal__footer">
                <div class="slds-grid slds-grid_align-center">
					<lightning-button label="Cancel" onclick={cancelChanges} class="slds-p-right_x-small"></lightning-button>
					<lightning-button label="Save" variant="brand" onclick={handleSave}></lightning-button>
                </div>
            </div>
        </div>
    </div>
</template>

vkDatatable.js

/* © vkambham.blogspot.com */
import { LightningElement, api } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import vkStyles from '@salesforce/resourceUrl/vkDatatableStyles';

const DELAY = 300;
const SHOWIT = 'visibility:visible';
const HIDEIT = 'visibility:hidden';
export default class CustomTable extends LightningElement {
    @api columns;
    @api
    set records(value){
        this._records = value ? [...value] : [];
        if(this.isConnected) this.setupTable();
    }
    get records(){
        return this._records;
    }
    @api showCheckbox = false;
    @api showRowNumber = false;
    @api sortedBy;
    @api sortedDirection = 'desc';
    //PAGINATION VARIABLES
    @api showPagination = false;
    @api pageSizeOptions = [5,10,20,30,50,75,100];
    @api showSearchBox = false;
    @api placeHolder = 'Search Table...';
    @api 
    set tableLayout(value){
        this._tableLayout = value ? value : 'fixed';
        this.tableStyle = 'table-layout:'+this._tableLayout;
    }
    get tableLayout(){
        return this._tableLayout;
    }

    //LOCAL VARIABLES
    showTable = false;
    isLoading = false;
    spinnerMsg = 'Loading...';
    _records; //Clone of Original records
    tableData; //Records modified according to table data structure
    tableData2Display; //Table data structured records available to display
    pageData; //Records displayed on a page
    pageSize = 5;
    totalPages;
    pageNumber = 1;
    searchKey;
    controlPagination = SHOWIT;
    controlPrevious = HIDEIT;
    controlNext = SHOWIT;
    isAscending = false;
    isEdited = false;
    isConnected = false;
    _tableLayout = 'fixed';
    tableStyle = 'table-layout:'+this._tableLayout;

    delayTimeout;
    initialLoad = true;
    stylesLoaded = false;
    selectedTotal = 0;
    selectedPerPage = 0;
    selRowsMap = new Map();
    currentElement;
    currentWidth;
    mousePosition;
    resizerStyle;
    recsEdited = new Map();

    connectedCallback(){
        this.isConnected = true;
        this.setupTable();
    }

    disconnectedCallback() {
        this.isConnected = false;
    }

    renderedCallback(){
        if(!this.stylesLoaded){
            Promise.all([
                loadStyle(this, vkStyles)
            ]).then(() => {
                this.stylesLoaded = true;
            }).catch(error => {
                console.log('Error loading styles**'+JSON.stringify(error));
                this.stylesLoaded = false;
            });
        }

        let table = this.template.querySelector('.vk-data-table');
        this.resizerStyle = 'height:'+table.offsetHeight+'px';
        let cols = this.template.querySelectorAll('TH');
        cols.forEach(col=>{
            col.style.width = col.style.width ? col.style.width : col.offsetWidth+'px';
            col.style.minWidth = col.style.minWidth ? col.style.minWidth : '50px';
        });
    }

    setupTable(){
        this.showTable = false;
        this.isEdited = false;
        this.totalRecords = this._records.length;
        if(this.totalRecords === 0){
            this.showPagination = false;
            return;
        }
        if(this.sortedBy) this._records = this.sortData(this._records,this.sortedBy,this.sortedDirection);

        this.setupColumns();
        this.setupPagination();
        this.setupData();
        this.showTable = true;
        this.initialLoad = false;
    }

    setupColumns(){
        let tempCols = [], i=0;
        //set col values
        this.columns.forEach(val => {
            let col = {...val};
            col.index = i++;
            col.thClass = 'slds-truncate';
            col.thClass += val.resizable ? ' vk-is-resizable' : '';
            col.style = col.width ? 'width:'+col.width+'px;' : '';
            col.style += col.minWidth ? 'min-width:'+col.minWidth+'px;' : '';
            col.style += col.maxWidth ? 'max-width:'+col.maxWidth+'px;' : '';
            if(col.sortable === true){
                col.thClass += ' vk-is-sortable';
                col.sortBy = col.sortBy ? col.sortBy : col.fieldName;
                col.sortByTitle = 'Sort By: '+col.label;
                let sortIconClass = this.sortedDirection === 'asc' ? 'vk-sort_desc' : 'vk-sort_asc';
                col.sortIconStyle = 'visibility:hidden;';
                if(col.sortBy === this.sortedBy){
                    sortIconClass = this.sortedDirection === 'asc' ? 'vk-sort_asc' : 'vk-sort_desc';
                    col.sortIconStyle = 'visibility:visible;';
                }
                col.sortIconClass = 'vk-sort-icon-div '+sortIconClass;
            }
            tempCols.push(col);
        });
        this.columns = tempCols;
    }

    setupData(){
        let recs = [], i=0;
        this._records.forEach(value => {
            let row = {}, fields = [], j=0;
            this.columns.forEach(col => {
                //set data values
                let field = {};
                field.name = col.fieldName;
                field.value = value[col.fieldName];
                field.type = col.type;
                field.required = col.required;
                field.options = col.options;
                field.linkLabel = col.type === 'link' || col.type === 'lookup' ? value[col.linkLabel] : col.linkLabel;
                field.imageSource = col.type === 'image-action' ? col.src : '#';
                field.target = col.target;
                field.minValue = col.minValue;
                field.maxValue = col.maxValue;
                field.minFractionDigits = col.minFractionDigits;
                field.maxFractionDigits = col.maxFractionDigits;
                field.currencyCode = col.currencyCode;

                field.iconName = col.iconName;
                field.iconSize = 'xx-small';
                field.actionName = col.actionName;
                field.iconVariant = col.iconVariant;
                field.title = col.title;
                
                field.readOnly = !col.editable;
                field.tdClass = col.editable ? 'vk-cell-edit' : '';
                field.index = j++;
                fields.push(field);
            });
            row.id = value.Id;
            row.index = i++;
            row.rowNumber = i;
            row.isSelected = false;
            row.mode = 'view';
            row.fields = fields;
            recs.push(row);
        });
        this.tableData = recs;
        this.tableData2Display = JSON.parse(JSON.stringify(recs));
        this.setupPages();
    }

    setupPagination(){
        if(!this.showPagination) this.pageSize = this.totalRecords;
        else{
            this.showSearchBox = true;
            this.pageSize = this.pageSizeOptions ? this.pageSizeOptions[0] : 5;
            if(this.pageSize >= this.totalRecords){
                this.pageSize = this.totalRecords;
                this.showPagination = false;
                this.showSearchBox = false;
            }
            this.totalPages = Math.ceil(this.totalRecords/this.pageSize);
        }
    }
    
    //START: PAGINATION
    handleRecordsPerPage(event){
        this.pageSize = event.target.value;
        this.setupPages();
    }
    handlePageNumberChange(event){
        if(event.keyCode === 13){
            this.pageNumber = event.target.value;
            this.setupPages();
        }
    }
    previousPage(){
        this.pageNumber = this.pageNumber-1;
        this.setupPages();
    }
    nextPage(){
        this.pageNumber = this.pageNumber+1;
        this.setupPages();
    }
    setupPages(){
        this.totalRecords = this.tableData2Display.length;

        this.setPaginationControls();

        let pageRecs = [];
        for(let i=(this.pageNumber-1)*this.pageSize; i<this.pageNumber*this.pageSize; i++){
            if(i === this.totalRecords) break;
            pageRecs.push(this.tableData2Display[i]);
        }
        this.setupPageData(pageRecs);
    }
    setupPageData(recs){
        this.pageData = [];
        this.selectedPerPage = 0;     
        recs.forEach(rec=>{
            let row = {...rec};
            row.rowClass = row.isSelected ? 'vk-is-selected' : '';
            this.selectedPerPage = Number(this.selectedPerPage) + 1;
            if(row.isSelected){
                this.selRowsMap.set(row.index, this._records[row.index]);                
            }else{
                this.selectedPerPage = Number(this.selectedPerPage) - 1;
                if(this.selRowsMap.has(row.index))
                    this.selRowsMap.delete(row.index);
            }
            this.selectedTotal = this.selRowsMap.size;
            this.pageData.push(row);
        });
        if(!this.initialLoad) this.manageSelectAllStyle();
    }
    setPaginationControls(){
        if(!this.pageSize) this.pageSize = this.totalRecords;
        this.totalPages = Math.ceil(this.totalRecords/this.pageSize);

        //Control Pre/Next buttons visibility by Total pages
        if(this.totalPages === 1){
            this.controlPrevious = HIDEIT;
            this.controlNext = HIDEIT;
        }else if(this.totalPages > 1){
           this.controlPrevious = SHOWIT;
           this.controlNext = SHOWIT;
        }
        //Control Pre/Next buttons visibility by Page number
        if(this.pageNumber <= 1){
            this.pageNumber = 1;
            this.controlPrevious = HIDEIT;
        }else if(this.pageNumber >= this.totalPages){
            this.pageNumber = this.totalPages;
            this.controlNext = HIDEIT;
        }
        //Control Pre/Next buttons visibility by Pagination visibility
        if(this.controlPagination === HIDEIT){
            this.controlPrevious = HIDEIT;
            this.controlNext = HIDEIT;
        }
    }
    //END: PAGINATION

    //START: ROW SELECTION
    handleRowSelection(event){
        let index = Number(event.target.id.split('-')[0]);
        let isSelected = event.target.checked;        

        this.pageData.forEach(rec => {
            if(rec.rowNumber === index+1){
                rec.isSelected = isSelected;
                this.tableData2Display[index].isSelected = isSelected;
            }
        });
        this.setupPageData(this.pageData);
        this.dispatchEvent(new CustomEvent('rowselection', {detail: Array.from(this.selRowsMap.values())}));        
    }
    handlePageRowsSelection(event){
        let isSelected = event.target.checked;

        this.pageData.forEach(rec => {
            rec.isSelected = isSelected;
            this.tableData2Display[rec.index].isSelected = isSelected;
        });
        this.setupPageData(this.pageData);
        this.dispatchEvent(new CustomEvent('rowselection', {detail: Array.from(this.selRowsMap.values())}));
    }
    handleAllRowsSelection(event){
        let isSelected = event.target.checked;

        this.tableData2Display.forEach(rec=>{
            rec.isSelected = isSelected;
            if(isSelected)
                this.selRowsMap.set(rec.index, this._records[rec.index]);
            else if(this.selRowsMap.has(rec.index))
                this.selRowsMap.delete(rec.index);
        });
        this.selectedTotal = this.selRowsMap.size;
        this.setupPages();
        this.dispatchEvent(new CustomEvent('rowselection', {detail: Array.from(this.selRowsMap.values())}));
    }
    manageSelectAllStyle(){
        //Select Rows per Page
        let pageCheckbox = this.template.querySelector('.page-checkbox');
        if(!pageCheckbox) return;        
        if(this.selectedPerPage === 0){
            pageCheckbox.checked = false;
            pageCheckbox.indeterminate = false;
        }else if(this.selectedPerPage === this.pageData.length){
            pageCheckbox.checked = true;
            pageCheckbox.indeterminate = false;
        }else{
            pageCheckbox.checked = false;
            pageCheckbox.indeterminate = true;
        }
        
        //Select All Rows
        let allCheckbox = this.template.querySelector('.select-all-checkbox');
        if(!allCheckbox) return;
        if(this.selectedTotal === 0){
            allCheckbox.checked = false;
            allCheckbox.indeterminate = false;
        }else if(this.selectedTotal === this._records.length){
            allCheckbox.checked = true;
            allCheckbox.indeterminate = false;
        }else{
            allCheckbox.checked = false;
            allCheckbox.indeterminate = true;
        }
    }
    //END: ROW SELECTION

    //START: SORTING
    handleSorting(event){
        this.isLoading = true;
        let childElm = event.target;
        let parentElm = childElm.parentNode;
        while(parentElm.nodeName != 'TH') parentElm = parentElm.parentNode;
        let sortBy = parentElm.id.split('-')[0];
        setTimeout(() => {
            let sortDirection = this.sortedDirection === 'asc' ? 'desc' : 'asc';
            this._records = this.sortData(this._records,sortBy,sortDirection);
            this.setupColumns();
            this.setupData();
            this.isLoading = false;
        }, 0);
    }
    sortData(data, sortBy, sortDirection){
        let clonedData = [...data];
        clonedData.sort(this.sortDataBy(sortBy, sortDirection === 'asc' ? 1 : -1));
        this.sortedDirection = sortDirection;
        this.sortedBy = sortBy;
        return clonedData;
    }
    sortDataBy(field, reverse, primer) {
        const key = primer
            ? function(x) { return primer(x[field]) }
            : function(x) { return x[field] };

        return function (a, b) {
            let A, B;
            if(isNaN(key(a)) === true)
                A = key(a) ? key(a).toLowerCase() : '';
            else A = key(a) ? key(a) : -Infinity;
            
            if(isNaN(key(b)) === true)
                B = key(b) ? key(b).toLowerCase() : '';
            else B = key(b) ? key(b) : -Infinity;

            return reverse * ((A > B) - (B > A));
        };
    }
    //END: SORTING

    //START: SEARCH
    handleSearch(event){
        window.clearTimeout(this.delayTimeout);
        let searchKey = ''+event.target.value;
        this.isLoading = true;
        if(searchKey){
            this.delayTimeout = setTimeout(() => {
                this.searchKey = searchKey.toLowerCase();
                let recs = this.tableData.filter(row=>this.searchRow(row,this.searchKey));
                this.tableData2Display = recs;
                this.setupPages();
                this.isLoading = false;
            }, DELAY);
        }else{
            this.tableData2Display = JSON.parse(JSON.stringify(this.tableData));
            this.setupPages();
            this.isLoading = false;
        }
    }
    searchRow(row,searchKey){
        let fields = row.fields.filter(f => {
            let fieldVal = f.type === 'link' || f.type === 'lookup' ? ''+f.linkLabel : ''+f.value;
            let fieldValue = fieldVal.toLowerCase();
            return fieldValue && fieldValue.includes(searchKey) ? true : false;
        });
        return fields.length > 0;
    }
    //END: SEARCH

    //START: COL RESIZING
    calculateWidth(event){
        this.currentElement = event.target;
        let parentElm = this.currentElement.parentNode;
        while(parentElm.tagName != 'TH') parentElm = parentElm.parentNode;
        this.currentWidth = parentElm.offsetWidth;
        this.mousePosition = event.clientX; //Get current mouse position

        //Stop text selection event so mouse move event works perfectlly.
        if(event.stopPropagation) event.stopPropagation();
        if(event.preventDefault) event.preventDefault();
        event.cancelBubble = true;
        event.returnValue = false;
    }
    setNewWidth(event){
        if(!this.currentElement) return;

        let parentElm = this.currentElement.parentNode;
        while(parentElm.tagName != 'TH') parentElm = parentElm.parentNode;
        let movedWidth = event.clientX - this.mousePosition;
        let newWidth = this.currentWidth + movedWidth;
        parentElm.style.width = newWidth+'px';
    }
    stopColumnResizing(){
        this.currentElement = undefined;
    }
    //END: COL RESIZING

    //START: ROW ACTION
    handleRowAction(event){
        let rowIndex = event.detail.rowIndex;
        let actionName = event.detail.actionName;
        let obj ={row: this._records[rowIndex], action: {name: actionName}};
        this.dispatchEvent(new CustomEvent('rowaction', {detail: obj}));
    }
    //END: ROW ACTION

    //START: CELL EDITING
    handleCellEdit(event){
        this.isEdited = true;
        let resp = event.detail;
        this.tableData2Display[resp.rowIndex].mode = 'edit';
        this.setupPages();
    }
    handleCellChange(event){
        let resp = event.detail;
        let rec = {...this._records[resp.rowIndex]};
        
        if(resp.value !== this._records[resp.rowIndex][resp.name]){
            this.tableData2Display[resp.rowIndex].fields[resp.colIndex].tdClass = 'vk-cell-edit vk-cell-edited';
            this.tableData2Display[resp.rowIndex].fields[resp.colIndex].value = resp.value;
            rec[resp.name] = resp.value;
        }else{
            this.tableData2Display[resp.rowIndex].fields[resp.colIndex].tdClass = 'vk-cell-edit';
            this.tableData2Display[resp.rowIndex].fields[resp.colIndex].value = resp.value;
        }
        let changedFields = this.tableData2Display[resp.rowIndex].fields.filter(field=>field.tdClass.includes('vk-cell-edited'));
        if(changedFields.length > 0){
            this.tableData2Display[resp.rowIndex].isSelected = true;
            this.recsEdited.set(resp.rowIndex,rec);
        }else{
            this.tableData2Display[resp.rowIndex].isSelected = false;
            if(this.recsEdited.has(resp.rowIndex))
                this.recsEdited.delete(resp.rowIndex);
        }
        this.setupPages();
    }
    cancelChanges(){
        this.isEdited = false;
        this.tableData2Display = JSON.parse(JSON.stringify(this.tableData));
        this.setupPages();
    }
    handleSave(){
        let recs2Save = [];
        for(let [key,value] of this.recsEdited){
            if(this.selRowsMap.has(key))
                recs2Save.push(value);
        }
        this.dispatchEvent(new CustomEvent('save', {detail: recs2Save}));
    }
    //END: CELL EDITING
}

vkDatatable.css

/* © vkambham.blogspot.com */
table thead th{
    background-color: #16325c;
    color: #ffff;
    border-right: 1px solid #e4e9f2;
    padding: .25rem .3rem;

}
table tbody td{
    border-bottom: 1px solid #dddbda;
    padding: .2rem .3rem;
}
table tbody tr:hover>td:not(.slds-has-focus){
    box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset;
}
table tbody tr:hover>td{
    background-color: #f3f2f2;
}
table tbody tr.vk-is-selected>td{
    background-color: #dff0fe;
}
table thead th.vk-is-sortable:hover, table thead th.vk-is-sortable:focus{
    background-color: #f3f2f2;
    color: #16325c;
}
table thead th.vk-is-sortable:hover .vk-sort-icon-div, table thead th.vk-is-sortable:focus .vk-sort-icon-div {
    visibility:visible !important;
    color: #16325c;
}
.vk-resizable__handle {
    width: .25rem;
    height: 27px;
    position: absolute;
    margin-top: -.25rem;
    margin-left: .1rem;
    cursor: col-resize;
}
.vk-resizable__divider {
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100vh;
    display: block;
    cursor: col-resize;
    opacity: 0;
}
.vk-is-resizable:hover .vk-resizable__handle, .vk-is-resizable:focus .vk-resizable__handle {
    background: #c9c7c5;
}
table th .vk-resizable__handle:hover, table th .vk-resizable__handle:focus{
    background: #0070d2;
    cursor: col-resize;
}
.vk-resizable__handle:hover .vk-resizable__divider, .vk-resizable__handle:focus .vk-resizable__divider{
    opacity: 1;
    z-index: 100;
    background: #0070d2;
    cursor: col-resize;
}
table .vk-cell-edit:hover {
    background-color: #ffff !important;
    cursor: text;
}
table .vk-cell-edited, table .vk-cell-edited:hover {
    background-color: #faffbd !important;
}
.customSelect select{
    padding-right: 1.25rem;
    min-height: inherit;
    line-height: normal;
    height: 1.5rem;
}
.customSelect label{
    margin-top: .1rem;
}
.customSelect .slds-select_container::before{
    border-bottom: 0;
}
.vk-sort_asc{
    line-height: 1;
}
.vk-sort_desc{
    transform: rotate(180deg);
    line-height: .5;
}
.vk-dt-required{    
    vertical-align: top;
    margin-right:.125rem;
}
.slds-checkbox_faux{
    bottom: .1rem;
}

We have got all the required components, now let's see an example about how to use the vk-datatable.

vkDatatableUsage (LWC)

Create an LWC component called 'vkDatatableUsage' and update it's elements with the below code.

vkDatatableUsage.html

<!-- © vkambham.blogspot.com -->
<template>
    <c-spinner if:true={isLoading} variant="brand" message={loadMessage}></c-spinner>
    <lightning-card title="Custom Datatable">
        <div if:true={error} class="slds-var-p-around_small slds-text-color_error">{error}</div>
        <c-vk-datatable if:true={showTable}
            columns={columns} 
            records={opps}
            show-row-number
            show-checkbox
            show-pagination
            place-holder="Search..." 
            page-size-options={pageSizeOptions} 
            onrowselection={handleRowSelection} 
            onsave={saveRecords}>
        </c-vk-datatable>
    </lightning-card>
</template>

vkDatatableUsage.js

/* © vkambham.blogspot.com */
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/VKDatatableUsageController.getAccounts';
import getOpportunities from '@salesforce/apex/VKDatatableUsageController.getOpportunities';
import updateRecords from '@salesforce/apex/VKDatatableUsageController.saveRecords';

const STAGEOPTIONS = [
    {value: 'Prospecting', label: 'Prospecting'},
    {value: 'Qualification', label: 'Qualification'},
    {value: 'Needs Analysis', label: 'Needs Analysis'},
    {value: 'Value Proposition', label: 'Value Proposition'},
    {value: 'Id. Decision Makers', label: 'Id. Decision Makers'},
    {value: 'Perception Analysis', label: 'Perception Analysis'},
    {value: 'Proposal/Price Quote', label: 'Proposal/Price Quote'},
    {value: 'Negotiation/Review', label: 'Negotiation/Review'},
    {value: 'Closed Lost', label: 'Closed Lost'},
    {value: 'Closed Won', label: 'Closed Won'}
];
const TYPEOPTIONS = [
    {value: 'Existing Customer - Upgrade', label: 'Existing Customer - Upgrade'},
    {value: 'Existing Customer - Replacement', label: 'Existing Customer - Replacement'},
    {value: 'Existing Customer - Downgrade', label: 'Existing Customer - Downgrade'},
    {value: 'New Customer', label: 'New Customer'}
];

const columns = [
    {label: 'Opportunity Name', fieldName: 'Id', type: 'link', linkLabel: 'Name', 
     sortable: true, sortBy: 'Name', resizable: true, title:'Click to view Opportunity', target:'_blank', editable: true},
    {label: 'Account', fieldName: 'AccountId', type: 'lookup', linkLabel: 'accName', iconName:'standard:account',
     sortable: true, resizable: true, editable: true, required: true, sortBy: 'accName', title:'Click to view Account',},
    {label: 'Type', fieldName: 'Type', type: 'picklist', options: TYPEOPTIONS, sortable: true, resizable: true, required: true, editable: true},
    {label: 'Stage', fieldName: 'StageName', type: 'picklist', options: STAGEOPTIONS, sortable: true, resizable: true, editable: true},
    {label: 'Amount', fieldName: 'Amount', type: 'currency', sortable: true, resizable: true, editable: true},
    {label: 'Close Date', fieldName: 'CloseDate', type: 'date', sortable: true, resizable: true, editable: true},
    {label: 'Probability', fieldName: 'Probability', type: 'percent', sortable: true, resizable: true, editable: true},
    
];
const PAGESIZEOPTIONS = [10,20,40];

export default class VkDatatableUsage extends LightningElement {
    error;
    columns = columns;
    opps; //All opportunities available for data table    
    showTable = false; //Used to render table after we get the data from apex controller    
    pageSizeOptions = PAGESIZEOPTIONS;
    isLoading = true;
    loadMessage = 'Loading...';

    @wire(getAccounts)
    wAccs({error,data}){
        if(data){
            let accounts = [];
            for(let i=0; i<data.length; i++){
                let obj = {value: data[i].Id, label: data[i].Name};
                accounts.push(obj);
            }
            this.columns[1].options = accounts;
        }else{
            this.error = error;
        }       
    }

    connectedCallback(){
        this.getOpportunities_();
    }

    getOpportunities_(){
        this.showTable = false;
        this.loadMessage = 'Loading...';
        this.isLoading = true;
        this.error = '';
        getOpportunities()
        .then(data=>{
            this.opps = [];
            for(let i=0; i<data.length; i++){
                let obj = {...data[i]};
                obj.accName = data[i].Account.Name;
                this.opps.push(obj);
            }
            this.showTable = true;
            this.isLoading = false;
        })
        .catch(error=>{
            this.error = JSON.stringify(error);
            this.showTable = true;
            this.isLoading = false;
        });       
    }

    handleRowSelection(event){
        console.log('Records selected***'+JSON.stringify(event.detail));
    }

    saveRecords(event){
        this.loadMessage = 'Saving...';
        this.isLoading = true;
        this.error = '';
        updateRecords({recsString: JSON.stringify(event.detail)})
        .then(response=>{
            if(response==='success') this.getOpportunities_();
        })
        .catch(error=>{
            console.log('recs save error***'+error);
            this.error = JSON.stringify(error);
            this.isLoading = false;
        });
    }
}

VKDatatableUsageController.apxc

Create an apex class called 'VKDatatableUsageController' and add below code to it.

/* © vkambham.blogspot.com */
public with sharing class VKDatatableUsageController {    
    
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts() {
        return [SELECT Id, Name FROM Account];
    }

    @AuraEnabled
    public static List<SObject> getOpportunities() {
        return [SELECT Id, Name, Type, StageName, Amount, CloseDate, Probability, AccountId, Account.Name FROM Opportunity];
    }

    @AuraEnabled
    public static String saveRecords(String recsString) {
        List<Opportunity> recs2Save = (List<Opportunity>) JSON.deserialize(recsString, List<Opportunity>.class);
        update recs2Save;
        return 'success';
    }
}

That's it. We have a datatable which will now serve most of the purposes. We don't need to build one each time when we get the scenarios where standard lightning-datatable doesn't support.

PS: Hope this helps! Please share your feedback/suggestions/any exciting posts you come across. Happy Coding!

Coming up: More dynamic way of building datatable in salesforce, which is using 'field sets'.