quill_table_flex.js

import Quill from 'quill'

const Parchment = Quill.import('parchment')
const Block = Quill.import('blots/block')
const Container = Quill.import('blots/container')

class TableCell extends Block {

  static formats (domNode) {
    return domNode.tagName === this.tagName ? undefined : super.formats(domNode)
  }

  format (name, value) {
    if (name === TableRow.blotName && !value) {
      this.replaceWith(Parchment.create(this.statics.scope))
    } else {
      super.format(name, value)
    }
  }

  remove () {
    if (this.prev == null && this.next == null) {
      this.parent.remove()
    } else {
      super.remove()
    }
  }

  replaceWith (name, value) {
    this.parent.isolate(this.offset(this.parent), this.length())
    if (name === this.parent.statics.blotName) {
      this.parent.replaceWith(name, value)
      return this
    } else {
      this.parent.unwrap()
      return super.replaceWith(name, value)
    }
  }
}
TableCell.blotName = 'table-cell'
TableCell.tagName = 'QTD'

class TableRow extends Container {
  static create (value) {
    let node = super.create(this.tagName)
    node.setAttribute('data-table-row-id', value)
    return node
  }

  static formats (domNode) {
    return domNode.getAttribute('data-table-row-id')
  }

  // constructor (domNode) {
  //   super(domNode)
  // }

  format (name, value) {
    if (this.children.length > 0) {
      this.children.tail.format(name, value)
    }
  }

  formats () {
    // We don't inherit from FormatBlot
    return { [this.statics.blotName]: this.statics.formats(this.domNode) }
  }

  insertBefore (blot, ref) {
    if (blot instanceof TableCell) {
      super.insertBefore(blot, ref)
    } else {
      let index = ref == null ? this.length() : ref.offset(this)
      let after = this.split(index)
      after.parent.insertBefore(blot, after)
    }
  }

  optimize () {
    super.optimize()
    let next = this.next
    if (next != null && next.prev === this &&
        next.statics.blotName === this.statics.blotName &&
        next.domNode.tagName === this.domNode.tagName &&
        next.domNode.getAttribute('data-table-row-id') === this.domNode.getAttribute('data-table-row-id')) {
      next.moveChildren(this)
      next.remove()
    }
  }

  replace (target) {
    if (target.statics.blotName !== this.statics.blotName) {
      let item = Parchment.create(this.statics.defaultChild)
      target.moveChildren(item)
      this.appendChild(item)
    }
    super.replace(target)
  }
}
TableRow.blotName = 'table-row'
TableRow.scope = Parchment.Scope.BLOCK_BLOT
TableRow.tagName = 'QTR'
TableRow.defaultChild = 'table-cell'
TableRow.allowedChildren = [TableCell]

export { TableCell, TableRow as default }

styles.styl

qtr 
  display flex
qtd
  flex 1

usage.js

// When specifiying the toolbar options for Quill, add the following to be able to add rows 1-5:
new Quill(div, {
  modules: {
    toolbar: [
      [
        'bold', 'italic',
        { 'table-row': ['row1', 'row2', 'row3', 'row4', 'row5'] }
      ]
    ]
  }
})