Customizing Schema for Table

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.

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.