├── .forceignore
├── .gitignore
├── README.md
├── config
    └── project-scratch-def.json
├── force-app
    └── main
    │   └── default
    │       ├── flexipages
    │           └── FlexiPage.flexipage-meta.xml
    │       └── lwc
    │           ├── .eslintrc.json
    │           ├── datatableDeleteRowBtn
    │               ├── datatableDeleteRowBtn.html
    │               ├── datatableDeleteRowBtn.js
    │               └── datatableDeleteRowBtn.js-meta.xml
    │           ├── jsconfig.json
    │           ├── myDatatable
    │               ├── deleteRow.html
    │               ├── myDatatable.html
    │               ├── myDatatable.js
    │               └── myDatatable.js-meta.xml
    │           └── myDatatableDemo
    │               ├── myDatatableDemo.html
    │               ├── myDatatableDemo.js
    │               └── myDatatableDemo.js-meta.xml
└── sfdx-project.json


/.forceignore:
--------------------------------------------------------------------------------
 1 | # List files or directories below to ignore them when running force:source:push, force:source:pull, and force:source:status
 2 | # More information: https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_exclude_source.htm
 3 | #
 4 | 
 5 | package.xml
 6 | 
 7 | # LWC configuration files
 8 | **/jsconfig.json
 9 | **/.eslintrc.json
10 | 
11 | # LWC Jest
12 | **/__tests__/**


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | .sfdx
 5 | mdapi-src
 6 | 
 7 | # local env files
 8 | .env.local
 9 | .env.*.local
10 | 
11 | # Log files
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw*
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # lightning-datatable Custom Data Types Example
2 | 
3 | This is an example for custom data types of lightning-datatable.
4 | 
5 | ![image](https://user-images.githubusercontent.com/877015/54336162-a9c33400-466e-11e9-81ac-a0c9adfa6d19.png)
6 | 


--------------------------------------------------------------------------------
/config/project-scratch-def.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "orgName": "atskimura Company",
 3 |   "edition": "Developer",
 4 |   "features": [],
 5 |   "settings": {
 6 |     "orgPreferenceSettings": {
 7 |       "s1DesktopEnabled": true
 8 |     }
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/force-app/main/default/flexipages/FlexiPage.flexipage-meta.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
 3 |     <flexiPageRegions>
 4 |         <componentInstances>
 5 |             <componentName>myDatatableDemo</componentName>
 6 |         </componentInstances>
 7 |         <componentInstances>
 8 |             <componentName>home:heroChart</componentName>
 9 |         </componentInstances>
10 |         <mode>Replace</mode>
11 |         <name>top</name>
12 |         <type>Region</type>
13 |     </flexiPageRegions>
14 |     <flexiPageRegions>
15 |         <componentInstances>
16 |             <componentName>home:eventContainer</componentName>
17 |         </componentInstances>
18 |         <componentInstances>
19 |             <componentName>home:recentRecordContainer</componentName>
20 |         </componentInstances>
21 |         <mode>Replace</mode>
22 |         <name>bottomLeft</name>
23 |         <type>Region</type>
24 |     </flexiPageRegions>
25 |     <flexiPageRegions>
26 |         <componentInstances>
27 |             <componentName>runtime_sales_activities:todayTaskContainer</componentName>
28 |         </componentInstances>
29 |         <componentInstances>
30 |             <componentName>home:topDealsContainer</componentName>
31 |         </componentInstances>
32 |         <mode>Replace</mode>
33 |         <name>bottomRight</name>
34 |         <type>Region</type>
35 |     </flexiPageRegions>
36 |     <flexiPageRegions>
37 |         <componentInstances>
38 |             <componentName>home:assistant</componentName>
39 |         </componentInstances>
40 |         <mode>Replace</mode>
41 |         <name>sidebar</name>
42 |         <type>Region</type>
43 |     </flexiPageRegions>
44 |     <masterLabel>デフォルトのホームページ</masterLabel>
45 |     <parentFlexiPage>home__desktopDefault</parentFlexiPage>
46 |     <template>
47 |         <name>home:desktopTemplate</name>
48 |     </template>
49 |     <type>HomePage</type>
50 | </FlexiPage>
51 | 


--------------------------------------------------------------------------------
/force-app/main/default/lwc/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "@salesforce/eslint-config-lwc/recommended"
3 | }


--------------------------------------------------------------------------------
/force-app/main/default/lwc/datatableDeleteRowBtn/datatableDeleteRowBtn.html:
--------------------------------------------------------------------------------
1 | <template>
2 |     <div style="text-align: center;">
3 |         <lightning-button-icon
4 |             icon-name="utility:delete"
5 |             onclick={fireDeleteRow}>
6 |         </lightning-button-icon>
7 |     </div>
8 | </template>


--------------------------------------------------------------------------------
/force-app/main/default/lwc/datatableDeleteRowBtn/datatableDeleteRowBtn.js:
--------------------------------------------------------------------------------
 1 | /* datatableDeleteRowBtn.js */
 2 | import { LightningElement, api } from 'lwc';
 3 | // Accessibility module
 4 | import { baseNavigation } from 'lightning/datatableKeyboardMixins';
 5 | // For the render() method
 6 | import template from './datatableDeleteRowBtn.html';
 7 | 
 8 | // export default class DatatableDeleteRowBtn extends baseNavigation(LightningElement) {
 9 | export default class DatatableDeleteRowBtn extends LightningElement {
10 |     @api rowId;
11 |     @api attrA;
12 |     @api attrB;
13 | 
14 |     // Required for mixins
15 |     render() {
16 |         return template;
17 |     }
18 | 
19 |     fireDeleteRow() {
20 |       window.console.log(baseNavigation);
21 |         const event = CustomEvent('deleterow', {
22 |             composed: true,
23 |             bubbles: true,
24 |             cancelable: true,
25 |             detail: {
26 |                 rowId: this.rowId,
27 |             },
28 |         });
29 |         this.dispatchEvent(event);
30 |     }
31 | }


--------------------------------------------------------------------------------
/force-app/main/default/lwc/datatableDeleteRowBtn/datatableDeleteRowBtn.js-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="datatableDeleteRowBtn">
3 |     <apiVersion>45.0</apiVersion>
4 |     <isExposed>false</isExposed>
5 | </LightningComponentBundle>


--------------------------------------------------------------------------------
/force-app/main/default/lwc/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "experimentalDecorators": true,
 4 |         "baseUrl": ".",
 5 |         "paths": {
 6 |             "c/datatable-delete-row-btn": [
 7 |                 "datatableDeleteRowBtn/datatableDeleteRowBtn.js"
 8 |             ],
 9 |             "c/my-datatable": [
10 |                 "myDatatable/myDatatable.js"
11 |             ],
12 |             "c/my-datatable-demo": [
13 |                 "myDatatableDemo/myDatatableDemo.js"
14 |             ]
15 |         }
16 |     },
17 |     "include": [
18 |         "**/*",
19 |         "../../../../.sfdx/typings/lwc/**/*.d.ts"
20 |     ]
21 | }


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatable/deleteRow.html:
--------------------------------------------------------------------------------
1 | <template>
2 |   <c-datatable-delete-row-btn
3 |       data-navigation="enable"
4 |       row-id={value}
5 |       attr-a={typeAttributes.attrA}
6 |       attr-b={typeAttributes.attrB}>
7 |   </c-datatable-delete-row-btn>
8 | </template>


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatable/myDatatable.html:
--------------------------------------------------------------------------------
1 | <template>
2 | </template>


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatable/myDatatable.js:
--------------------------------------------------------------------------------
 1 | /* myDatatable.js */
 2 | import LightningDatatable from 'lightning/datatable';
 3 | import deleteRow from './deleteRow.html';
 4 | 
 5 | export default class MyDatatable extends LightningDatatable {
 6 |    static customTypes = {
 7 |        deleteRowButton: {
 8 |            template: deleteRow,
 9 |            // Provide template data here if needed
10 |            typeAttributes: ['attrA', 'attrB'],
11 |        }
12 |       //more custom types here
13 |    };
14 | }


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatable/myDatatable.js-meta.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myDatatable">
3 |     <apiVersion>45.0</apiVersion>
4 |     <isExposed>false</isExposed>
5 | </LightningComponentBundle>


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatableDemo/myDatatableDemo.html:
--------------------------------------------------------------------------------
1 | <template>
2 |   <c-my-datatable
3 |       key-field="id"
4 |       data={data}
5 |       columns={columns}
6 |       ondeleterow={deleteRow}
7 |       hide-checkbox-column>
8 |   </c-my-datatable>
9 | </template>


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatableDemo/myDatatableDemo.js:
--------------------------------------------------------------------------------
 1 | import { LightningElement, track } from 'lwc';
 2 | 
 3 | const columns = [
 4 |     {
 5 |       label: 'Name',
 6 |       fieldName: 'name',
 7 |     },
 8 |     {
 9 |         label: 'Delete',
10 |         type: 'deleteRowButton',
11 |         fieldName: 'id',
12 |         fixedWidth: 70,
13 |         typeAttributes: {
14 |           attrA: { fieldName: 'attrA' },
15 |           attrB: { fieldName: 'attrB' },
16 |         },
17 |     },
18 | ];
19 | 
20 | export default class MyDatatableDemo extends LightningElement {
21 |     @track data = [
22 |       {
23 |         id: '1',
24 |         name: 'Name1',
25 |         attrA: 'A1',
26 |         attrB: 'B1',
27 |       },
28 |       {
29 |         id: '2',
30 |         name: 'Name2',
31 |         attrA: 'A2',
32 |         attrB: 'B2',
33 |       }
34 |     ];
35 |     @track columns = columns;
36 | 
37 |     deleteRow(event) {
38 |         const { rowId } = event.detail;
39 |         window.console.log(rowId, event);
40 |         // Remove the row
41 |     }
42 | }


--------------------------------------------------------------------------------
/force-app/main/default/lwc/myDatatableDemo/myDatatableDemo.js-meta.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="myDatatableDemo">
 3 |     <apiVersion>45.0</apiVersion>
 4 |     <isExposed>true</isExposed>
 5 |     <targets>
 6 |         <target>lightning__AppPage</target>
 7 |         <target>lightning__RecordPage</target>
 8 |         <target>lightning__HomePage</target>
 9 |     </targets>
10 | </LightningComponentBundle>


--------------------------------------------------------------------------------
/sfdx-project.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "packageDirectories": [
 3 |     {
 4 |       "path": "force-app",
 5 |       "default": true
 6 |     }
 7 |   ],
 8 |   "namespace": "",
 9 |   "sfdcLoginUrl": "https://login.salesforce.com",
10 |   "sourceApiVersion": "45.0"
11 | }
12 | 


--------------------------------------------------------------------------------