0

I followed this tutorial on how to create custom datatable columns (Custom Data Types): (LWC) - Lightning Datatable: Custom Data Types

I am trying to set up a custom picklist data type, but I am failing hard. I tried setting up at least something very basic with static values and later I'd try to connect to database.

I have three components (three folders). First for customTypeA (custom data type), second for customLightningDatable and third for myDataTable.

CustomTypeA folder

  • customTypeA.html:

      <template>
      <div class="slds-p-horizontal_medium">
           <lightning-combobox name="types" label="Type" value={value} options={TypeOptions} onchange={handleTypeChange}> </lightning-combobox> 
      </div>
    
  • customTypeA.js:

    import { 
          LightningElement,
          track,
          wire,
          api
    
      } from 'lwc';
    
      export default class customTypeA extends LightningElement {
          value = '';
          @track TypeOptions = [
              { label: 'New', value: 'new' },
              { label: 'In Progress', value: 'inProgress' },
              { label: 'Finished', value: 'finished' },
          ];
    
          handleTypeChange(event){
              this.value = event.target.value; 
              // Do Something.
          }
      }
    

CustomLightningDatatable folder

  • customLightningDatatable.html:

         <template>  
          </template>
    
  • customLightningDatatable.js:

              import LightningDatatable from 'lightning/datatable';
                  import customTypeA from './customTypeA';
                  export default class customLightningDatatable extends LightningDatatable {
                  static customTypes = {
                      customTypeA: {
                          template: customTypeA
                      }
                    }
                  }
    
  • customTypeA.html:

             <template>
                  <c-custom-type-a></c-custom-type-a>
                </template>
    

myDataTable folder

  • myDataTable.html

      <template>
          <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
                  <lightning-messages></lightning-messages>
                  <lightning-input id="inp1" type="number" label="Enter value" onchange={changeHeight}></lightning-input>
                  <lightning-button
                      type="submit"
                      name="submit"
                      label="Submit"
                      onclick={changeHeight}
                  >
                  </lightning-button>
          </div>
          <div style="height: 300px;">
              <c-custom-lightning-datatable
                      key-field="id"
                      data={data}
                      columns={columns}>
              </c-custom-lightning-datatable>
          </div>    
      </template>
    
  • mydatatable.js

      import { LightningElement, track } from 'lwc';
    
      export default class myDataTable extends LightningElement {
          @track  height = 1;
          data = [];
          columns = [];
      }
    

Folders Folders

I'm getting an error:

Couldn't find the compiled component. If this component has a dependency on a component in the org or a component in a package in the org, test this component directly in the org.

The error seems to be related to this code in customLightningDatatable.js, because it disappears if I remove it (but the component won't render):

import customTypeA from './customTypeA';

What is causing the error?

4
  • Did you created myDataTable inside customTypeA? As it appears in the snapshot, it is not invalid. You need to put it under /lwc or any subfolder which holds your components. Feb 6, 2022 at 13:43
  • The myDataTable is in it's own component. Or I am not seeing what you are seeing? Thanks
    – DevelBase2
    Feb 6, 2022 at 13:50
  • Oh you posted two snapshots. I was on mobile & they were stacked & it it looked like you created myDataTable inside customTypeA. Can you see if changing the customType import from import customTypeA from './customTypeA'; to import customTypeA from './customTypeA.html'; Feb 6, 2022 at 14:04
  • Thanks. You were right! I wonder why all the other tutorials had the import without the .html suffix.
    – DevelBase2
    Feb 6, 2022 at 14:38

1 Answer 1

1

Fix:

   import customTypeA from './customTypeA.html';

Thanks to Sachin Hooda.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .