Custom Table In LWC

I'm assuming you've Basic understanding of Lightning Web Component, I'll be explaining you the syntax that will be generic.

HTML:

<template>

<!-- Header Part -->

    <lightning-card title="Custom Data table in Lightning Web Components">

        <div class="slds-grid slds-gutters">

            <div class="slds-col">

                <span></span>

            </div>

            <div class="slds-col">

                <span>

<!--A Button For extra feature-->

                    <lightning-button label="Show Selected Contacts" 

onclick={showContacts} style="margin-left: 40%" variant="brand">

</lightning-button>

                </span>

            </div>

        </div><br/>

<!-- Table start-->

        <table class="slds-table slds-table_cell-buffer slds-table_bordered">

<!--Column Header start-->

            <thead>

                <tr class="slds-line-height_reset">

                    <th class="" scope="col">

                        <div class="slds-truncate">

<!--Column Header For CheckBox-->

                            <lightning-input onchange={allSelected} type="checkbox">

</lightning-input>

                        </div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="Name">Name</div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="First Name">Account Name

</div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="Last Name">Last Name</div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="Phone">Phone</div>

                    </th>

                    <th class="" scope="col">

                        <div class="slds-truncate" title="Email">Email</div>

                    </th>

                </tr>

            </thead>

            <tbody>

<!--data is an array of record which is set in .js file-->

                <template for:each={data} for:item="con">

                    <tr key={con.Id}>

                        <th scope="col">

                            <div>

                             <lightning-input type="checkbox" value={con.Name} 

data-id={con.Id}></lightning-input>

                            </div>

                        </th>

                        <th scope="col">

<!--First Column Value as a link-->

                            <lightning-button label={con.Name} value={con.Name}

  data-id={con.Id} onclick={showDetail} variant="base">

</lightning-button>

                        </th>

                        <th scope="col">

                            <div>{con.FirstName}</div>

                        </th>

                        <th scope="col">

                            <div>{con.LastName}</div>

                        </th>

                        <th scope="col">

                            <div>

                                <lightning-formatted-phone value={con.Phone}>

</lightning-formatted-phone>

                            </div>

                        </th>

                        <th scope="col">

                            <div>

                                <lightning-formatted-email value={con.Email}>

</lightning-formatted-email>

                            </div>

                        </th>

                    </tr>

                </template>

            </tbody>

        </table>

</lightning-card>

  </template>

You can change the Datatype or the style or the format by using HTML tags or styles.

.js Sample:

import { LightningElement, track, wire  } from 'lwc';

import retriveCons from '@salesforce/apex/LWCExampleController.getContacts';

export default class CustomDatatableInLWC extends LightningElement {

@track data = [];

    @track error;

    @track selectedCons;

// Getting Contacts using Wire Service

    @wire(retriveCons)

    contacts(result) {

        if (result.data) {

            this.data = result.data;

            this.error = undefined;

        } else if (result.error) {

            this.error = result.error;

            this.data = undefined;

        }

    }

// Select the all rows

    allSelected(event) {

        let selectedRows = this.template.querySelectorAll('lightning-input');

        

        for(let i = 0; i < selectedRows.length; i++) {

            if(selectedRows[i].type === 'checkbox') {

                selectedRows[i].checked = event.target.checked;

            }

        }

    }

}

In metaData file just replace <isExposed>false</isExposed> with the below lines of code:

<isExposed>true</isExposed>

    <targets>

        <target>lightning__AppPage</target>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

ApexClass:

public inherited sharing class LWCExampleController {    

 @AuraEnabled(Cacheable = true)

    public static List<Contact> getContacts(){

        return [SELECT Id, Name, FirstName,LastName, Phone, Email FROM Contact 

limit 10];

    }

}

Let me know in Comment section in case of any Doubt...