How can I initialize table in quill js 2.0.?

Viewed 20851

How can I initialize table in quill js 2.0.?

I've tried by using table keyword in toolbar it shows table icon but I could not create the table.

enter image description here

3 Answers

Try to provide table module when creating your editor like this:

var editor = new Quill( '#editor', {
    theme: 'snow',
    modules: {
        table: true
    }
} );

And then just reference table module:

const table = editor.getModule('table');

Using table variable you can trigger different methods for tables:

table.insertTable(2, 2);

Full example can be found here: https://codepen.io/quill/pen/QxypzX

I really like the extensibility of Quill a lot. I implement a module quill-better-table to add support for tables. Hope that quill-better-table could help someone who need to edit/render table in quilljs. Requirements: quill.js v2.0.0-dev.3

There is a peace of code that seems to work very well to add tables to QuillJs:

https://codepen.io/quill/pen/QxypzX

var bubble = new Quill('#bubble-container', {
  theme: 'bubble',
  modules: {
    table: true,
  }
});
var snow = new Quill('#snow-container', {
  theme: 'snow',
  modules: {
    table: true,
  }
});
var output = new Quill('#output-container', {
  theme: 'bubble',
  modules: { table: true },
  readOnly: true,
})
bubble.on('text-change', function(delta, old, source) {
  if (source === 'user') {
    snow.updateContents(delta, 'api');
    updateOutput();
  }
});
const table = snow.getModule('table');
snow.on('text-change', function(delta, old, source) {
  if (source === 'user') {
    bubble.updateContents(delta, 'api');
    updateOutput();
  }
});

function updateOutput() {
  const bubbleContent = bubble.getContents();
  const snowContent = snow.getContents();
  // TODO compare
  output.setContents(bubbleContent);
  const outputContent = output.getContents();
  // TODO compare outputContent
}


document.querySelector('#insert-table').addEventListener('click', function() {
  table.insertTable(3, 3);
});
document.querySelector('#insert-row-above').addEventListener('click', function() {
  table.insertRowAbove();
});
document.querySelector('#insert-row-below').addEventListener('click', function() {
  table.insertRowBelow();
});
document.querySelector('#insert-column-left').addEventListener('click', function() {
  table.insertColumnLeft();
});
document.querySelector('#insert-column-right').addEventListener('click', function() {
  table.insertColumnRight();
});
document.querySelector('#delete-row').addEventListener('click', function() {
  table.deleteRow();
});
document.querySelector('#delete-column').addEventListener('click', function() {
  table.deleteColumn();
});
document.querySelector('#delete-table').addEventListener('click', function() {
  table.deleteTable();
});
Related