Unfortunately, you cannot use quill-better-table with ngx-quill wrapper. ngx-quill is still based on quilljs v1. quill-better-table requires quilljs v2.0.0-dev.3. You can read about that in the Requirements section: here

I can share with you how I implemented simple paste and read table in my case. Its inspired by this article and created with custom block. And its not a correct way to add elements to quill. But we are using editor internally so we are sure that it is in safe hands.

1. Create a new 'Block Embed' like this:

import Quill from 'quill';
const BlockEmbed = Quill.import('blots/block/embed');

    export class TableBlockEmbed extends BlockEmbed {

      static blotName = 'TableBlockEmbed';
      static tagName = 'table';

      static create(value) {
        const node = super.create();
        let valueToReturn = value;
        if (!value.includes('assignedTableId')) {
          const tableId = `assignedTableId-${Date.now()}`;
          valueToReturn = value
            .replace('#tableId', `#${tableId}`)
            .replace('table-layout: fixed;', '');
          node.setAttribute('id', tableId);
        } else {
          const existedId = valueToReturn.match(/#assignedTableId-(\d+)/i)[1];
          node.setAttribute('id', `assignedTableId-${existedId}`);
        }
        node.innerHTML = this.transformValue(valueToReturn);
        return node;
      }

      static transformValue(value) {
        let handleArr = value.split('\n');
        handleArr = handleArr.map(e => e.replace(/^[\s]+/, '')
          .replace(/[\s]+$/, ''));
        return handleArr.join('');
      }

      static value(node) {
        return node.innerHTML;
      }
    }

2. Run registration of new embed block in the constructor of your component which uses ngx-quill:

constructor() {
    Quill.register(TableBlockEmbed, true);
  }

3. add on editor Created this code below. (you can of course add/remove styles here you need. I added for example margin: 0 auto !important; because I want to force table to be always centered):

onEditorCreated(quill: Quill): void {
    quill.clipboard.addMatcher('TABLE', (node, delta) => {
      const Delta = Quill.import('delta');
      const tableTagStyles = node.getAttribute('style');
      return new Delta([
        {
          insert: {
            TableBlockEmbed:
              `<style>#tableId {${tableTagStyles} margin: 0 auto !important; }</style>` + delta.ops[0].insert.TableBlockEmbed
          }
        }
      ]);
    });
  }

4. I added also some styles:

quill-view,
quill-editor{
  ::ng-deep {
    table {
      width: 100%; // if table has no width - then give it by default 100%
      max-width: 100% !important;
      box-sizing: border-box;
    }
  }
}

I know this solution is just workaround but until waiting for ngx-quill based on quill 2, I was able at least to give the feature of pasting tables inside the editor which looks quite nice.

Example:

table in office word:

table in ngx-quill:

table in excel:

table in ngx-quill:

I am assuming you already have angular project configured. If not, you can use this command to create a new angular project npx @angular/cli@next new editor

1. Use yarn/npm to add quill.js packages to angular project.

> npm install quill@dev quill-better-table ngx-quill

After installation, your project's package.json should have following dependencies

  "dependencies": {
    "ngx-quill": "^7.3.9",
    "quill": "^2.0.0-dev.3 ",
    "quill-better-table": "^1.2.4",
   }

2. Import quill.js snow theme(or any other theme). In file src/styles.scss, add this snippet

@import "~quill/dist/quill.snow.css";

3. Import and configure Quill Module (File: src/app/app.module.ts)

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { QuillConfig, QuillModule } from "ngx-quill";
import * as Quill from "quill";
import QuillBetterTable from "quill-better-table";
import { AppComponent } from "./app.component";

Quill.register(
  {
    "modules/better-table": QuillBetterTable
  },
  true
);

const quillConfig: QuillConfig = {
  modules: {
    table: false, // disable table module
    "better-table": {
      operationMenu: {
        items: {
          unmergeCells: {
            text: "Another unmerge cells name"
          }
        },
        color: {
          colors: ["#fff", "red", "rgb(0, 0, 0)"], // colors in operationMenu
          text: "Background Colors" // subtitle
        }
      }
    },
    keyboard: {
      bindings: QuillBetterTable.keyboardBindings
    }
  }
};
@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, QuillModule.forRoot(quillConfig)],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

4. Add HTML tag. (File: src/app/app.component.html)

<quill-editor (onEditorCreated)="editorCreated($event)"></quill-editor>

5. Insert table in editor (File: src/app/app.component.ts)

import { ChangeDetectionStrategy, Component } from "@angular/core";

interface Quill {
  getModule(moduleName: string);
}

interface BetterTableModule {
  insertTable(rows: number, columns: number): void;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  public quill: Quill;

  private get tableModule(): BetterTableModule {
    return this.quill.getModule("better-table");
  }

  public editorCreated(event: Quill): void {
    this.quill = event;
    // Example on how to add new table to editor
    this.addNewtable();
  }

  private addNewtable(): void {
    this.tableModule.insertTable(3, 3);
  }
}

This is how the output looks like at the end:

I managed to do this after some time thanks to this fiddle and a bit of playing around.See here.

component.html:

<quill-editor [(ngModel)]="editorContent"
              [options]="editorOptions" 
              (ready)="onEditorCreated($event)"
              (change)="onContentChanged($event)"></quill-editor>

component.ts:

public editor;
  public editorContent = '<h3>Type Something...</h3>';
  public editorOptions = {
     theme: 'snow',
    modules: {
        toolbar: {
        container:
        [
            [{ 'placeholder': ['[GuestName]', '[HotelName]'] }], // my custom dropdown
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean']                                    // remove formatting button

        ],
        handlers: {
            "placeholder": function (value) { 
                if (value) {
                    const cursorPosition = this.quill.getSelection().index;
                    this.quill.insertText(cursorPosition, value);
                    this.quill.setSelection(cursorPosition + value.length);
                }
            }
        }
      }
    }
  };

  constructor(private elem: ElementRef) {

  }

  onEditorCreated(quill) {
    this.editor = quill;
    console.log('quill is ready! this is current quill instance object', quill);
  }

  onContentChanged({ quill, html, text }) {
    console.log('quill content is changed!', quill, html, text);
  }
  ngAfterViewInit() {
    // Update your dropdown with labels
    let placeholderPickerItems = this.elem.nativeElement.querySelectorAll('.ql-placeholder .ql-picker-item');
    placeholderPickerItems.forEach(item => item.textContent = item.dataset.value);
    this.elem.nativeElement.querySelector('.ql-placeholder .ql-picker-label').innerHTML
      = 'Insert Data Field &nbsp; &nbsp; &nbsp;' + this.elem.nativeElement.querySelector('.ql-placeholder .ql-picker-label').innerHTML;
  }

Output:

Screenshot of Output

Hope this helps!