Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support <table> tag

See original GitHub issue

Hello,

Does it support <table> tag ?

Thank you,

EDIT: solution here

Issue Analytics

State:
Created 6 years ago
Reactions:20
Comments:61 (8 by maintainers)

Top GitHub Comments

28reactions

jsamrcommented, Sep 6, 2020

🎉 Good news everyone ; I’ve been working on this all the day through. @native-html/table-plugin released to npm, with support for onLinkPress and autoheight! 🎉

EDIT: The plugin has been renamed from react-native-render-hmlt-table-bridge to @native-html/table-plugin

25reactions

webdevbyjosscommented, Nov 23, 2018

@tclarke-scottlogic by looking at the source code, it looks like we don’t have a DOM at this point and all children are already pre-rendered React components. Doubtfully anything could be done here with existing renderers implementation.

I had a __ very simple __ tables, and managed to render as on exampe above https://github.com/archriss/react-native-render-html/issues/43#issuecomment-414986278

So in my case each <tr> was a <View> styled as flexbox row ( flexDirection: 'row',) and <td> was rendered as just a regular <View></View>


import _ from 'lodash'
import HTML from 'react-native-render-html'
import { IGNORED_TAGS } from 'react-native-render-html/src/HTMLUtils'

const tags = _.without(IGNORED_TAGS, 
    'table', 'caption', 'col', 'colgroup', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr'
)

const tableDefaultStyle = {
  flex: 1,
  justifyContent: 'flex-start',
}

const tableColumnStyle = {
  ...tableDefaultStyle,
  flexDirection: 'column',
  alignItems: 'stretch'
}

const tableRowStyle = {
  ...tableDefaultStyle,
  flexDirection: 'row',
  alignItems: 'stretch'
}

const tdStyle = {
  ...tableDefaultStyle,
  padding: 2
}

const thStyle = {
  ...tdStyle,
  backgroundColor: '#CCCCCC',
  alignItems: 'center',
}

const renderers = {
    table: (x, c) => <View style={tableColumnStyle}>{c}</View>,
    col: (x, c) => <View style={tableColumnStyle}>{c}</View>,
    colgroup: (x, c) => <View style={tableRowStyle}>{c}</View>,
    tbody: (x, c) => <View style={tableColumnStyle}>{c}</View>,
    tfoot: (x, c) => <View style={tableRowStyle}>{c}</View>,
    th: (x, c) => <View style={thStyle}>{c}</View>,
    thead: (x, c) => <View style={tableRowStyle}>{c}</View>,
    caption: (x, c) => <View style={tableColumnStyle}>{c}</View>,
    tr: (x, c) => <View style={tableRowStyle}>{c}</View>
    td: (x, c) => <View style={tdStyle}>{c}</View>
  }


<HTML ...   ignoredTags={tags} renderers={renderers} />

Note that this approach doesn’t renders the table, its rather a workaround to get the data inside tables visible and MAY work only for rendering of very simple tables:

No cells width / height is supported
No collumn span or row span supported
Cells dimentions are not aligned according to the content amount in them.
Columns are not actually columns, so cells are not alligned with their colegues from other rows
Cells borders are possible, but tricky
Table styling isn’t trivial task

Getting the tables rendered properly is hard, and WEB browsers actually do a quite sofisticated job on rendering the table layouts.

This flexbox workaround doesn’t covers all the tricky cases, primerraly because flexbox does alignment in single dimention (either horisontal or vertical), and for a table you need to do that in two dimentions simutanously (imagine a difference between CSS flexbox vs CSS grids).

React Native supports a quite limited variation of CSS flexbox and it is not possible to do anything like CSS grids here, so not even sure if reliable tables implementation is possible to add in observable future.