React-native-render-html-table-bridge NPM

Table support for react-native-render-html

npm

npm add --save react-native-render-html-table-bridge

yarn add react-native-render-html-table-bridge

Features:

Render HTML tables with a WebView component you provide
Supports <HTML>onLinkPress prop to handle clicks
Automatic height

Known Limitations:

don't forget you're rendering cells inside a webview, so you won't be able to apply your custom renderers there
limited support of Expo <33 version ; full support ≥33 versions (see bellow limitation)
autoheight and onLinkPress config options only work with WebView ≥ v5.0.0 community edition

Minimal working example

Full example

You need 3 conditions to get to a working example:

If you're not using Expo, install (npm add --save react-native-webview) and link (react-native link react-native-webview) react-native-webview
inject alterNode and ignoredTags props to HTML component
makeTableRenderer and inject renderers prop to HTML component

import React, {PureComponent} from 'react';
import {ScrollView} from 'react-native';
import HTML from 'react-native-render-html';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import WebView from 'react-native-webview';

const html = `
<table>
  <tr>
    <th>Entry Header 1</th>
    <th>Entry Header 2</th>
  </tr>
  <tr>
    <td>Entry First Line 1</td>
    <td>Entry First Line 2</td>
  </tr>
</table>
`;

const config = {
    WebViewComponent: WebView
};

const renderers = {
  table: makeTableRenderer(config)
};

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

export default class Example extends PureComponent<Props> {
  render() {
    return (
      <ScrollView>
        <HTML html={html} {...htmlConfig}/>
      </ScrollView>
    )
  }
}

`makeTableRenderer` config

This config object will be passed to the HTMLTable component as props. Read through typescript definitions to discover available config options.

`WebViewComponent`

Required

Your WebView component.

Warning: Features such as autoheight and onLinkPress don't work with the legacy core version or Expo <33 version.

Please use latest community edition instead

`autoheight`

Optional

Fit height to HTML content.

default: true

Supported WebView: WebView community edition ≥5.0.0 and Expo SDK ≥33.

Warning: This prop causes a tiny flicker, because we have to wait the WebView DOM tree to be rendered before receiving the exact height. We use LayoutAnimation when the height changes to soften the transition, but you must enable the feature on android.