geekyakshay/app.html

## 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';
    }
}
	<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>
	/*
	* @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
	}
	}
	<template>
	<!--Leave this template blank - Contents will be rendered dynamically-->
	</template>
	/*
	* @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'],
	}
	};
	}
	<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>
	<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>
	/*
	* @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';
	}
	}