How to render table to process later?

[ivanjaros]

I would like to render the table on my own, but I want all cells to already have content rendered. I just want to handle the structure of the table itself. Should I use walkTokens and call renderer in there for each header and row cell or different approach would be more suitable?

[UziTech]

If you just need to add/change attributes in the html you could use the approach marked-bidi uses to create a renderer that calls the initial renderer then edits the output html.

Or you could just copy the table renderer and change it however you want.

[ivanjaros]

How do i access the md.Renderer.tablecell functions?

  const tableTransformer = {
    walkTokens: (token) => {
      if (token.type !== "table") {
        return
      }

      let table = {
        align: token.align,
        header: [],
        rows: []
      }

      for (let h of token.header) {
        table.header.push(md.Renderer.tablecell(h, {header: true, align: null}))
      }

      for (let r of token.rows) {
        let row = []
        for (let c of r) {
          row.push(md.Renderer.tablecell(c, {header: false, align: null}))
        }
        table.rows.push(row)
      }

      token.type = "html"
      token.text = '<script rel="embed" type="application/json">' + JSON.stringify(table) + '</script>'
    }
  }

  md.use(tableTransformer)

[ivanjaros]

ok, this is the way to go. although for some reason i have two rows but i am getting only the first row -the header, not the second row. that gets lost somewhere for some reason. i can print it in the row renderer but it is not present in the table renderer.

  const tableTransformer = {
    table: (token) => {
      let out = `<script rel="table" type="application/json">{"table":${token}}</script>`
      console.log(out)
      return out
    },
    tablerow: (token) => {
      return '['+token.slice(0, -1)+']'
    },
    tablecell: (token) => {
      return JSON.stringify([token]) + ","
    }
  }

  md.use({ renderer: tableTransformer})

[ivanjaros]

OK, I figured it out:

  const tableTransformer = {
    table(...rows) {
      let header = rows.shift()
      return `<script rel="table" type="application/json">{"header":${header.slice(0, -1)},"rows":[${rows.join(",").slice(0, -1)}]}</script>`
    },
    tablerow(token) {
      return '['+token.slice(0, -1)+'],'
    },
    tablecell(token, flags) {
      // there is also flags.header boolean, but we always assume first row is header
      // and we are not rendering the <td>/<th> tags in here, so we can ignore it.
      return JSON.stringify({cell: token, align: flags.align}) + ","
    }
  }

  md.use({ renderer: tableTransformer})