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:

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

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

CustomLightningDatatable folder

  • customLightningDatatable.html:

  • customLightningDatatable.js:

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


myDataTable folder

  • myDataTable.html

          <div class="slds-p-bottom_large slds-p-left_large" style="width:500px">
                  <lightning-input id="inp1" type="number" label="Enter value" onchange={changeHeight}></lightning-input>
          <div style="height: 300px;">
  • 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?

  • 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



   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 .