Hello, Does it support <table></code

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Was able to override IGNORED_TAGS <a href="https://gi

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Support <table> tag about react-native-render-html HOT 61 CLOSED

meliorence commented on August 16, 2024 20

Support tag

from react-native-render-html.

Comments (61)

jsamr commented on August 16, 2024 28

🎉 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

from react-native-render-html.

webdevbyjoss commented on August 16, 2024 25

@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
#43 (comment)

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.

from react-native-render-html.

kartavyaparekh96 commented on August 16, 2024 10

Remove all tables tags from IGNORED_TAGS in HTMLUtils.js and
add this generateDefaultBlockStyles in HTMLDefaultStyles.js

table:{
          flex:1,
          flexDirection:'row',
          borderLeftWidth:1,
          borderTopWidth:1,
          alignItems:'center',
          justifyContent:'center',
          borderColor:'#ccc',
          borderRightWidth:0.5,
        },
        tbody:{
        },
        tr:{
          flex:1,
          borderBottomWidth:1,
          flexDirection:'row',
          borderBottomColor:'#ccc'
        },
        td:{
          justifyContent:'flex-start',
          width:'50%',
          paddingHorizontal:12,
          paddingVertical:5,
          borderRightWidth:0.5,
          borderRightColor:'#ccc',
          alignItems:'flex-start'
        },

only for 2 colums tables.

from react-native-render-html.

charpeni commented on August 16, 2024 8

I've managed to get something working quickly. Unfortunately, it's not a custom renderer, and it's not optimal. I'd prefer a version with nodes alteration, but if you want a quick solution here it is.

I've used a regex that matches all <table>, then replaces the <table> with an <iframe srcdoc> before they're parsed by react-native-render-html.

render() {
  const { html, ...props } = this.props;

  let content = html;
  const tables = html.match(/(<table(?:.|\n)*?<\/table>)/g);
  
  tables.map((table) => {
    content = content.replace(table, `<iframe srcdoc="${tableStyle + table}"></iframe>`);
  });

  return (
    <HTML
      html={content}
      {...props}
    />
  );
}

from react-native-render-html.

jsamr commented on August 16, 2024 8

Hi all.
I managed to create a bridge with react-native-webview It's not optimal, since inner nodes are not natives. An other limitation is that its styles are pure CSS, there is no easy bridge with RN styling.
But at least it's fully compliant with HTML table layout algorithm. Video extract.

EDIT: released to npm react-native-render-html-table-bridge

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024 4

For others to use, this produces a reasonably good quality table, with rows/columns aligned, and that you don't have to give a fixed height to get it to display.

Obviously you may need to adjust to taste, and it's very limited. Thanks to @webdevbyjoss for the base to work off!

            renderers={{
              table: (htmlAttribs, children, style, passProps) => {
                //return makeWebView(++x, item, content);

                return (
                  <ScrollView key={`table${++x}`} horizontal={true}>
                    {children}
                  </ScrollView>
                );
              },
              tr: (html, children, style, passProps) => {
                return (
                  <View
                    key={`tr${++x}`}
                    style={{
                      flex: 1,
                      flexDirection: "row",
                      borderBottomWidth: 1,
                      borderColor: colors.grey6
                    }}
                  >
                    {children}
                  </View>
                );
              },
              th: (attribs, children, style, passProps) => {
                let rowspan = 1;
                if (attribs.colspan) {
                  rowspan = parseInt(attribs.colspan, 10);
                }
                return (
                  <View
                    key={`th${++x}`}
                    style={{
                      width: 200 * rowspan,
                      backgroundColor: productColor(item.product).darker,
                      borderLeftColor: colors.white,
                      borderLeftWidth: passProps.nodeIndex === 0 ? 0 : 1,
                      padding: 6
                    }}
                  >
                    <Text style={{ color: colors.white, fontWeight: "bold" }}>
                      {children}
                    </Text>
                  </View>
                );
              },
              td: (attribs, children, style, passProps) => {
                let rowspan = 1;
                if (attribs.rowspan) {
                  rowspan = parseInt(attribs.rowspan, 10);
                }
                return (
                  <View
                    key={`td${++x}`}
                    style={{
                      width: 200 * rowspan,
                      borderColor: colors.grey6,
                      borderRightWidth: 1,
                      borderLeftWidth: passProps.nodeIndex === 0 ? 1 : 0,
                      padding: 6
                    }}
                  >
                    <Text>{children}</Text>
                  </View>
                );
              }
            }}

from react-native-render-html.

webdevbyjoss commented on August 16, 2024 3

Was able to override IGNORED_TAGS https://github.com/archriss/react-native-render-html/blob/master/src/HTMLUtils.js#L44 and made it to the <table> renderer.

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 renderers = {
    table: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    caption: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    col: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    colgroup: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    tbody: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    td: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    tfoot: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    th: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    thead: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
    tr: (htmlAttribs, children, convertedCSSStyles, passProps) => { ... },
}

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

Now looking for some alternatives to WebView approach, like maybe try and build custom table rendered using react-native-table-component. Anyone aware of existing solutions like this?

from react-native-render-html.

jsamr commented on August 16, 2024 3

@nvonbenken I'll work on an example repo next week and share it here.

from react-native-render-html.

wayferer commented on August 16, 2024 2

No worries. I'm jumping around a bit so it might take a while :(

from react-native-render-html.

webdevbyjoss commented on August 16, 2024 2

yeah, rowspan is unlikely to be doable universally using flexbox styling.
All we can do so far is to upvote this feature request
https://react-native.canny.io/feature-requests/p/css-grid-layout-supporting

from react-native-render-html.

webdevbyjoss commented on August 16, 2024 2

@kartavyaparekh96 the example listed few messages earlier is more general, and works in all cases, including the 2 columns. With flexbox style rule flex: 1 you don't need to set width:'50%', all cells will be evenly distributed, and it will automatically set 50% width for tables with 2 columns.

from react-native-render-html.

fvsch commented on August 16, 2024 1

I don’t want to discourage anyone, but the table layout algorithm in HTML and CSS is extremely complex. And since Yoga only uses the Flexbox layout algorithm which lays out content in one direction (vs tables which auto-layout in 2 directions), mimicking a tiny subset of it will be quite hard.

Basically you would need to make all cells equal-width so that you can mimick columns.

// equal-width cells, yay!
const defaultCellStyle = {
  flexBasis: 0,
  flexGrow: 1
}

Optionally you could look for a width attribute with a percentage value (old-school, I know) on the top cells and use that as the width for all cells in the corresponding column. That might be doable.

But be careful if your use case is showing tables made for displaying on the Web (especially on larger screens) and edited with a JS WYSIWYG editor: your chances of porting that to React Native elements are roughly zero. ;)

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024 1

Has anyone got a solution for #187, which would avoid the need for the [forbidden art] of parsing html with regular expressions?

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024 1

Thanks, at least I've updated my snippet above to support colspan and have single px borders

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024 1

This is a way to use onParsed help with handling row spans. Basically, it detects rowspans and injects additional cells that match the spanning row.

function rowspanParser(dom, elements) {
  const tables = elements.filter(n => n.tagName === "table");
  if (!tables.length) return elements;
  tables.forEach(table => {
    const tbody = table.children.find(n => n.tagName === "tbody");
    if (!tbody) return;

    const rowspanColumns = {};
    for (let i = 0; i < tbody.children.length; ++i) {
      const tr = tbody.children[i];

      const rowspanners = tr.children.filter(n =>
        Object.keys(n.attribs).includes("rowspan")
      );

      const rowspanKeys = Object.keys(rowspanColumns);

      for (let k = 0; k < rowspanKeys.length; ++k) {
        const key = rowspanKeys[k];
        rowspanColumns[key].count = rowspanColumns[key].count - 1;
        if (rowspanColumns[key].count > 0) {
          const column = rowspanColumns[key].column;
          const index = rowspanColumns[key].index;
          tr.children.splice(index, 0, { ...column });
        } else {
          delete rowspanColumns[key];
        }
      }

      if (rowspanners.length > 0) {
        rowspanners.forEach(n => {
          rowspanColumns["val" + n.nodeIndex] = {
            column: n,
            index: n.nodeIndex,
            count: parseInt(n.attribs.rowspan, 10)
          };
        });
      }
    }
  });

  return elements;
}

from react-native-render-html.

zehgreven commented on August 16, 2024 1

@zehgreven would be happy if you could test

Tested and looks like it works.

I´ll try some more weird test cases as soon as I can.

Here is my code working just fine using your bridge.

/* eslint-disable no-undef */
import React, { PureComponent } from 'react';
import { Linking, Dimensions, View } from 'react-native';
import HTML from 'react-native-render-html';
import WebView from 'react-native-webview';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import MJax from './MJax';
import { Fonts, Colors } from '../../Themes';

export default class HtmlView extends PureComponent {
  render() {
    const { html, baseFontStyle = {}, containerStyle = {} } = this.props;

    const config = {
      WebViewComponent: WebView,
      tableStyleSpecs: {
        trOddBackground: '#FFFFFF',
        trEvenBackground: '#FFFFFF',
      },
    };

    const renderers = {
      table: makeTableRenderer(config),
      mathjax: (attribs, _children, _css, { key }) => (<MJax key={key} rawHtml={attribs.rawHtml} />),
    };

    const htmlConfig = {
      alterNode,
      renderers,
      ignoredTags: IGNORED_TAGS,
    };

    return (
      <View style={{ flex: 1, opacity: 0.99 }}>
        <HTML
          html={html}
          allowFontScaling
          baseFontStyle={{
            ...Fonts.style.small,
            ...Fonts.helpers.textLeft,
            ...Colors.from(Colors.black),
            ...baseFontStyle,
          }}
          containerStyle={[
            containerStyle,
          ]}
          imagesMaxWidth={Dimensions.get('window').width}
          onLinkPress={(event, href) => {
            Linking.openURL(href);
          }}
          {...htmlConfig}
        />
      </View>
    );
  }
}

from react-native-render-html.

Exilz commented on August 16, 2024

Hi, not at the moment.
This is a good subject of pull request. We would have to add a table render to HTMLRenderers.js.

I think it shouldn't be too hard to have something working, even if it's not perfect.

from react-native-render-html.

wayferer commented on August 16, 2024

I can have an initial go at this @Exilz if you'd be happy to review and tidy up my code? We need it for our app so it only makes sense to contribute back.

from react-native-render-html.

Exilz commented on August 16, 2024

@wayferer Yes, I'd be happy to review and improve it. However, I don't have much time right now, but I'll definitely look into it once I can.

from react-native-render-html.

inv2004 commented on August 16, 2024

just found that renderers cannot find table in simple example:

123<p/><table><tr><td>111</td></tr></table><p/>345

added debug output to renderRNElements <- cannot find table also

D/ReactNativeJS( 5058): TEST: rawtext [123
D/ReactNativeJS( 5058): TEST: p [no_data
D/ReactNativeJS( 5058): TEST: p [no_data
D/ReactNativeJS( 5058): TEST: rawtext [345
D/ReactNativeJS( 5058): TEST: p [no_data

from react-native-render-html.

Exilz commented on August 16, 2024

@inv2004 remove table from the ignored tags array in here

from react-native-render-html.

GopiKrishna10 commented on August 16, 2024

@Exilz I removed the table related tags in ignored tags array.Now it's displaying like text not like the table, for Example, see below code.

output

Firstname
Lastname
age
Jill
smith50

What should i do for rendering the table

from react-native-render-html.

Exilz commented on August 16, 2024

@GopiKrishna10 that's the point of the issue, it has no default renderer that handles <table>.
I told inv2004 to remove it from the ignored array so he can start working on making a renderer.

from react-native-render-html.

GopiKrishna10 commented on August 16, 2024

Ok Thanks @Exilz for your response

from react-native-render-html.

Reier360 commented on August 16, 2024

@Exilz @wayferer Does anyone know if any progress has been made regarding the table tag?

from react-native-render-html.

Exilz commented on August 16, 2024

Not on my end, however, I'm still open to review a PR regarding this feature.

from react-native-render-html.

Reier360 commented on August 16, 2024

@Exilz PR?

from react-native-render-html.

Exilz commented on August 16, 2024

@Reier360 Pull request 😄

from react-native-render-html.

Reier360 commented on August 16, 2024

Oh wow, my bad. Sorry I have never contributed to GitHub so I am not really sure how these things work. I will go read up on the process and see if I can maybe have a swing at it. Thanks.

from react-native-render-html.

jm90m commented on August 16, 2024

Just want to say thanks so much for this library....

I currently use this in my app on production, "bSteem" - see here for more details (https://busy.org/@janicehung/bsteem-for-ios-and-android-newest-mobile-steemit-app)

Would be really helpful to have tables support, I understand its complex to parse out tables so I might try to fork this and submit when I have time

from react-native-render-html.

Reier360 commented on August 16, 2024

@jm90m Hi, I also needed the table functionality, I never tried to get tables worked and It would be fantastic if someone can get it working but in my case I just used react natives webview. It has fantastic html render functionalities, and it was pretty decent when it came to rendering.

from react-native-render-html.

Exilz commented on August 16, 2024

There are basically two ways to add this feature.

The "proper" one would be to code a renderer that actually uses the content parsed from the HTML and renderers rows and columns with react-native's layout. As fvsch pointed out earlier, this is quite a complex task. You don't realize how much work is put into rendering HTML inside your browser until you try to wrap your mind around the algorithms that are at work just to render a simple page.

A basic implementation should be doable, but I have neither the time nor the use for it right now.

The second solution would be to render a WebView, just like we're rendering <iframe> tags. The performance and user experience would be far worse than a proper native implementation, but this should be fairly easy to do. I guess you could use the staticContentMaxWidth prop to render your iframe, and use horizontal scrolling to display all of your table if it's too big.

This isn't on top of my priority list for this plugin, but if someone were to submit a pull request for this feature, I'd gladly review it.

from react-native-render-html.

ciriac commented on August 16, 2024

@charpeni Thanks for this. I'm working on a similar workaround. What does your 'tableStyle' variable look like?

from react-native-render-html.

jm90m commented on August 16, 2024

@charpeni awesome, workaround, I'll have to try this!

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024

Also require this, thanks for the workaround.

from react-native-render-html.

ohasy commented on August 16, 2024

@charpeni this regex is not working for me. :(
/(<table(?:.|\n)*?<\/table>)/g

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024

I'll give this a go, thanks. Problem is our table has about 8 columns, most of which are wide, so the non-alignment is an issue.
So I was thinking of just passing the table HTML. Not a problem, I'll just need to find a good solution for pulling out the table elements, before rendering, so I can pass them into a separate WebView or other component.

from react-native-render-html.

webdevbyjoss commented on August 16, 2024

The problem with tables that has a lot of columns is that those are not responsive and look ugly on mobile in portrait orientation. In that case maybe it worth to just show the cells as a stack of blocks.

For example, render each <td> and <tr> as a regular unstyled <View> element, which should make the content responsive. In that case, there will be no table but just a flat list of paragraphs with text.

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024

@webdevbyjoss Can't see that being accepted by the client. It'll be impossible to actually comprehend the content.
Throwing the table into a webview makes the most sense for their needs.

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024

Looking into borders, is there a good way to tell if my <th> or <td> is the last element in its parent <tr> node? I want to apply borders selectively to prevent double borders between cells.

from react-native-render-html.

webdevbyjoss commented on August 16, 2024

@tclarke-scottlogic the way I managed to prevent double borders is to add top and left borders for <th> & <td> elements and then bottom and right borders to <tr> elements.

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024

@webdevbyjoss Surely the top of the <td> will still double up with the bottom of the <tr> above it?

I ended up using "passProps.nodeIndex === 0" to support, but your way might be cleaner code...

from react-native-render-html.

tclarke-scottlogic commented on August 16, 2024

@webdevbyjoss Any suggestion for how to resolve a "rowspan" tag? Crossing the DOM boundary seems very unlikely to be stable.

from react-native-render-html.

nvonbenken commented on August 16, 2024

@jsamr Can you provide an example of that solution being used? I'm trying to implement it myself and having issues with implementing it in my <HTML /> .

from react-native-render-html.

nvonbenken commented on August 16, 2024

@jsamr

Any update on this? I'd really like to see how you accomplished this in an example.

from react-native-render-html.

zehgreven commented on August 16, 2024

I was able to use @jsamr stuff:

!!!! Download his files (link above) !!!!

Imports:

import HTML from 'react-native-render-html';
import { renderers } from './renderers';
import { alterNode } from './alter-node';
import { IGNORED_TAGS } from 'react-native-render-html/src/HTMLUtils';

Constants

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

render()

<HTML
  html={htmlText}
  ignoredTags={tags}
  alterNode={alterNode}
  renderers={renderers}
/>

I don´t know why but everything I put AFTER (BELLOW) the HTML tag just don´t render... Any ideas?

from react-native-render-html.

jsamr commented on August 16, 2024

@zehgreven I embedded the table in a modal so I didn't see this bug comming. I guess you're experiencing react-native-webview/react-native-webview#101!

@nvonbenken OK I'll work on something before the end of the week!

from react-native-render-html.

zehgreven commented on August 16, 2024

@zehgreven I embedded the table in a modal so I didn't see this bug comming. I guess you're experiencing react-native-community/react-native-webview#101!

I actly found that my <ScrollView> is not growing as much as it should :X

If i find a work arround I let you guys know.

from react-native-render-html.

zehgreven commented on August 16, 2024

@zehgreven I embedded the table in a modal so I didn't see this bug comming. I guess you're experiencing react-native-community/react-native-webview#101!

Yep! You´re totally correct... That´s what happened... But once I fixed it this "glitch" the table just don´t show anymore, I think that I still need to find a way to grow up the screen height so it´ll have extra space to show up the table...

I let you know if I fix it.

from react-native-render-html.

nvonbenken commented on August 16, 2024

@jsamr @zehgreven

Is this working with Expo for you? In setting it up as above I'm getting this:

Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager

from react-native-render-html.

zehgreven commented on August 16, 2024

I actly wasn´t able to make it work properly, still deciding if i´ll try another soluction...

from react-native-render-html.

jsamr commented on August 16, 2024

@zehgreven Writing the bridge-library right now ; to circumvent the issue and avoid native dependency, I'll make WebView component an argument to the main function.

from react-native-render-html.

jsamr commented on August 16, 2024

@nvonbenken How is the released library working for you with Expo ?
@zehgreven would be happy if you could test
@Exilz I think you can close the issue

from react-native-render-html.

nvonbenken commented on August 16, 2024

@jsamr Same issue as above, Invariant Violation: requireNativeComponent: "RNCWebView" was not found in the UIManager

from react-native-render-html.

jsamr commented on August 16, 2024

@nvonbenken Did you follow the steps in the readme ? If you are using Expo SDK ≤ 32, you must provide WebView component from react-native.

import { WebView } from 'react-native'

EDIT Feel free to write me a personal message (email address in profile) and I'll be happy to help.

from react-native-render-html.

nvonbenken commented on August 16, 2024

@jsamr Ahh good call, missed that piece. Had referenced WebView from react-native-webview by mistake. Looks good now!

Thanks a lot for making this!

from react-native-render-html.

jsamr commented on August 16, 2024

@nvonbenken I'll try to make the readme more Expo-friendly!

from react-native-render-html.

ashu777 commented on August 16, 2024

Did any one get any way to support

tag

from react-native-render-html.

jsamr commented on August 16, 2024

@ashu777 #43 (comment)

from react-native-render-html.

hirvin-faria commented on August 16, 2024

@kartavyaparekh96
Remove all tables tags from IGNORED_TAGS in HTMLUtils.js and
add this generateDefaultBlockStyles in HTMLDefaultStyles.js

table:{
          flex:1,
          flexDirection:'row',
          borderLeftWidth:1,
          borderTopWidth:1,
          alignItems:'center',
          justifyContent:'center',
          borderColor:'#ccc',
          borderRightWidth:0.5,
        },
        tbody:{
        },
        tr:{
          flex:1,
          borderBottomWidth:1,
          flexDirection:'row',
          borderBottomColor:'#ccc'
        },
        td:{
          justifyContent:'flex-start',
          width:'50%',
          paddingHorizontal:12,
          paddingVertical:5,
          borderRightWidth:0.5,
          borderRightColor:'#ccc',
          alignItems:'flex-start'
        },

only for 2 colums tables.

I used the solution of styles of @kartavyaparekh96, but I didn't modify the dependency files.
I used the properties tagsStyles and ignoredTags, to pass constants defined with the settings for the component properties.

const IGNORED_TAGS = ['head', 'scripts', 'audio', 'video', 'track', 'embed', 'object', 'param', 'source', 'canvas', 'noscript',
    'caption', 'col', 'colgroup', 'button', 'datalist', 'fieldset', 'form', 'input',  'label',  'legend',  'meter', 'optgroup',
    'option', 'output', 'progress', 'select', 'textarea', 'details', 'diaglog', 'menu', 'menuitem', 'summary', 'tfoot', 'th', 'thead', ];

const TAG_STYLE = {
table:{
  flex:1,
  flexDirection:'row',
  borderLeftWidth:1,
  borderTopWidth:1,
  alignItems:'center',
  justifyContent:'center',
  borderColor:'#ccc',
  borderRightWidth:0.5,
},
tbody:{
},
tr:{
  flex:1,
  borderBottomWidth:1,
  flexDirection:'row',
  borderBottomColor:'#ccc'
},
td:{
   justifyContent:'flex-start',
   width:'50%',
   paddingHorizontal:12,
   paddingVertical:5,
   borderRightWidth:0.5,
   borderRightColor:'#ccc',
   alignItems:'flex-start'
},
}```
```html
<HTML                
html={table}
tagsStyles={TAG_STYLE}
ignoredTags={IGNORED_TAGS}
imagesMaxWidth={Dimensions.get('window').width}
/>

Again these solution works for two column tables as mentioned

from react-native-render-html.

WilbertJanney commented on August 16, 2024

@charpeni this regex is not working for me. :(
/(<table(?:.|\n)*?<\/table>)/g

I had to change the \n to \r\n to get it work.

I am trying to figure out the tablestyle part that he added now. Anyone know what goes here?

I ended up just using the amazing code from #43 (comment). Thank you!

from react-native-render-html.

Support <table> tag about react-native-render-html HOT 61 CLOSED

Comments (61)

output

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent