Possible to use MaterialUI Table with the renderer prop?

[ahmetskilinc]

For some reason, the thead, tbody, tr, td, and th elements arent rendered properly.

code works fine, table works fine, but for some reason, these don't.

Currently, I have:

const renderers = {
  td: ({ children }) => (<TableCell>{children}</TableCell>),
  tr: ({ children }) => (<TableRow>{children}</TableRow>),
  th: ({ children }) => (<TableCell>{children}</TableCell>),
  thead: ({ children }) => (<TableHead>{children}</TableHead>),
  tbody: ({ children }) => (<TableBody>{children}</TableBody>),
  table: ({ children }) => (
    <TableContainer component={Paper}>
      <Table>{children}</Table>
    </TableContainer>
  ),
};

I end up getting:

<table class="MuiTable-root">
  <thead>
    <tr>
      <th>Hello</th>
      <th>World</th>
    </tr>
  </thead>
</table>

Is there anything I've done wrong in the renderer prop?

[ChristianMurphy]

it is and it is documented how in the readme

renderers (Object.<Component>, default: {})
Object mapping node types to React components

https://github.com/remarkjs/react-markdown#props

the node types that can be mapped are documented here: https://github.com/remarkjs/react-markdown#appendix-b-node-types
and include:

• table — Table (<table>)
• tableHead — Table head (<thead>)
• tableBody — Table body (<tbody>)
• tableRow — Table row (<tr>)
• tableCell — Table cell (<td> or <th>)

match the renderer prop name with the node name you want, and the custom render function will work.

in your example table works because it matches the node type you want to map.
thead should be tableHead to work, tbody should be tableBody, etc.

[ahmetskilinc]

Okay, I was already using remark-gfm, but didn't understand that part until now. After reading that again it made sense. Thank you.