Implement custom columns in lightning-datatable LWC

app.html

<template>
      <!-- Embed custom datatable component in your parent component -->
      <c-custom-datatable
          key-field="Id"
          data={toggleExampleData}
          hide-checkbox-column
          columns={toggleExampleColumns}
          onselectedrec={handleSelectedRec}>
      </c-custom-datatable> 
</template>

app.js

/*
 * @File Name          : app.js
 * @Description        : Parent most component where custom-datatable will be embedded. 
 * @Author             : Akshay Poddar
 * @Last Modified On   : 29/6/2020, 8:02:44 pm
**/
import { LightningElement } from 'lwc';

export default class App extends LightningElement {
    //Sample hard-coded data to demonstrate how to structure (generate) data for custom columns
    toggleExampleData = [
        {Id: 1, isSelected: true, name: 'Google', website: 'https://google.com'},
        {Id: 2, isSelected: false, name: 'Facebook', website: 'https://facebook.com'},
        {Id: 3, isSelected: true, name: 'DevLife', website: 'https://devlife.tech'},
        {Id: 4, isSelected: false, name: 'Gmail', website: 'https://gmail.com', isDisabled: true}
    ];
    //Sample hard-coded column data to demonstrate how to structure (generate) column data for custom columns
    toggleExampleColumns = [
        { label: 'Custom Buttons', fieldName: 'isSelected', type: 'toggleButton',
            typeAttributes: { 
                buttonDisabled: { fieldName: 'isDisabled' }, 
                rowId: { fieldName: 'Id' }, 
            }
        },
        { label: 'Service', fieldName: 'name', iconName: 'custom:custom18' },
        { label: 'Website', fieldName: 'website', type: 'url', iconName: 'custom:custom20' },
    ];

    //Handler for custom column interations - like handle what to do when toggle button is pressed
    handleSelectedRec(event){
        console.log(event.detail.value);
        //Write your logic to handle button interations
    }
}

customDatatable.html

<template>
    <!--Leave this template blank - Contents will be rendered dynamically-->
</template>

customDatatable.js

/*
 * @File Name          : customDatatable.js
 * @Description        : Common JS for all custom data type HTML templates, Contains 
 *                       logic to define custom data type and link with html template.
 * @Author             : Akshay Poddar
 * @Last Modified On   : 29/6/2020, 8:02:44 pm
**/
import LightningDatatable from 'lightning/datatable';
import toggleButtonColumnTemplate from './toggleButtonColumnTemplate.html';
import richTextColumnTemplate from './richTextColumnTemplate.html';
import iconColumnTemplate from './iconColumnTemplate.html';

export default class CustomDatatable extends LightningDatatable {
    static customTypes = {
        toggleButton: {
            template: toggleButtonColumnTemplate,
            standardCellLayout: true,
            typeAttributes: ['buttonDisabled', 'rowId'],
        }
    };
}

toggleButtonColumnTemplate.html

<template>
    <!--HTML template which connect custom column component with custom datatable component-->
    <c-toggle-button-output 
        checked={value} 
        button-disabled={typeAttributes.buttonDisabled} 
        row-id={typeAttributes.rowId}>
    </c-toggle-button-output>
</template>

toggleButtonOutput.html

<template>
    <!--Custom component which will be rendered as each cell in custom column in datatable-->
    <lightning-input 
        type="toggle" 
        label="Basic option"
        variant="label-hidden" 
        message-toggle-active="Selected"
        message-toggle-inactive={getInactiveMsg}
        checked={checked}
        disabled={buttonDisabled}
        onchange={handleToggle}>
    </lightning-input>
</template>

toggleButtonOutput.js

/*
 * @File Name          : toggleButtonOutput.js
 * @Description        : JS file which contains attribute declaration for custom data type 
 *                       which can be used to customize columns even further. It also contains 
 *                       code to call custom event whenever button gets clicked (interation with 
 *                       column is to be defined).
 * @Author             : Akshay Poddar
 * @Last Modified On   : 29/6/2020, 8:02:44 pm
**/
import { LightningElement, api } from 'lwc';

export default class ToggleButtonOutput extends LightningElement {
    @api checked = false;
    @api buttonDisabled = false;
    @api rowId;

    handleToggle(event) {
        const event = CustomEvent('selectedrec', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                value: { rowId: this.rowId, state: event.target.checked }
            },
        });
        this.dispatchEvent(event);
    }

    get getInactiveMsg(){
        return this.buttonDisabled?'Disabled':'Not Selected';
    }
}

Hi @geekyakshay,

I found out the issue of why it is not console logging values inside the parent's handleSelectedRec method.

handleSelectedRec(event){ console.log('Customdatatableapp handleSelectedRec event.detail.value ='+event.detail.value.rowId); console.log('Customdatatableapp handleSelectedRec event.detail.value ='+event.detail.value.state); }

The dispatch event values has to be capture as below. Then it is working fine.
event.detail.value.rowId
event.detail.value.state

Thank you for your help and knowledge sharing @geekyakshay. This sharing helps me a lot to build my requirement quickly and easily.