Customizing Schema for Table

1

I am trying to implement Table Editing in the editor using the prosemirror-tables package. The tableNodes method generates a schema for the node types required for the table, however I want to change how the table node is rendered. For example: I want the table element to have a class of table

I tried doing:

let tNodes = tableNodes({
    tableGroup: "block",
    cellContent: "block+",
    cellAttributes: {
        background: {
            default: null,
            getFromDOM(dom) { return dom.style.backgroundColor || null },
            setDOMAttr(value, attrs) { if (value) attrs.style = (attrs.style || "") + `background-color: ${value};` }
        }
    }
})

tNodes.table.parseDOM = [{ tag: 'table.table' }]
tNodes.table.toDOM = () => {
    return ['table', { class: 'table' }, ['tbody', 0]];
}

But this doesn’t seem to work. Any help is appreciated.

2

I guess you’re still including the columnResizing addon? That will define a node view for tables which will override your toDOM method.

The tables module builds on a bunch of assumptions about the kind of tables it is representing, and I wouldn’t be surprised if some of its features, like column widths, stop working when you change its DOM representation, but in principle if you disable those features you should be able to do what you want here.

1 Like
3

I fixed this by creating a class that extends the TableView, seems a little bit hacky but it works.

import {TableView} from "../../node_modules/prosemirror-tables/src/tableview"

export class Table extends TableView {
  constructor(node, cellMinWidth) {
  	super(node, cellMinWidth);
  	this.table.className = "table table-condensed table-striped table-bordered table-fixed"
  }
}

and then pass the new class as the View to the the ColumnResizing plugin

columnResizing({View: Table})

Edit: Sorry, this was just so I could add the classes to the creation of the table, might not be the same problem or what you’re looking for.

1 Like
4

@garetheddies Hey, thanks. That was actually what I was looking for.

Another problem, I have run into, the column width information is stored in colgroup and col elements but they don’t appear in the getHTML() result. I need the column width information in the raw HTML so that the table can be rendered elsewhere like in a PDF.

5

Hi guys,

I’ve encountered the same issue - cannot add a default class to the table element. My configuration is identical with the one that @netchampfaris showed in this thread. I am not using the columnResizing, nor the tableEditing plug-ins.

If I don’t use them, am I supposed to create a custom TableView and where should I pass it?