@native-html/table-plugin NPM

@native-html/table-plugin

:capital_abcd: A WebView-based plugin to render tables in react-native-render-html.

DL/month

npm add --save @native-html/table-plugin

yarn add @native-html/table-plugin

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 behavior 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:

Provide import for WebView component. Instructions will differ depending on your setup;
Inject alterNode and ignoredTags props to HTML component;
makeTableRenderer and inject renderers prop to HTML component.

import React from 'react';
import { ScrollView } from 'react-native';
import HTML from 'react-native-render-html';
import {
  IGNORED_TAGS,
  alterNode,
  makeTableRenderer
} from '@native-html/table-plugin';
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 renderers = {
  table: makeTableRenderer({ WebView })
};

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

export const Example = () => (
  <ScrollView>
    <HTML html={html} {...htmlConfig} />
  </ScrollView>
);

API Reference

The complete API reference is available here: docs/table-plugin.md. Most notably, check TableConfig to see how you can customize the table behavior.

Landmark exports:

Other exports:

Troubleshooting

Errors when importing `WebView` component

:warning: Always favor react-native-community/react-native-webview over legacy WebView when possible.

Setting up WebView component largely vary on your react-native or expo version. Please refer to the official documentation and make sure you have selected your RN / Expo SDK version:

Expo;
React Native.

Typescript errors

If you encounter typescript errors, chances are you are not following peerDependencies rules. Make sure you follow these rules:

react-native-render-html	@native-html/table-plugin
≤ 4.2.0	≤ 0.5.3
≥ 4.2.1	≥ 0.6.0

FAQ

How to extend default or custom styles?

A: Use cssRulesFromSpecs function and override cssRules config.

import {
  defaultTableStylesSpecs,
  cssRulesFromSpecs
} from '@native-html/table-plugin';

const cssRules =
  cssRulesFromSpecs(defaultTableStylesSpecs) +
  `
a {
  text-transform: uppercase;
}
`;

const renderers = {
  table: makeTableRenderer({
    cssRules,
    // Other config options
   })
};

How to customize the Table component?

A: Use makeCustomTableRenderer function. See custom example.

How to load custom fonts?

A: Extend styles and add @font-face rules.

import {
  defaultTableStylesSpecs,
  cssRulesFromSpecs
} from '@native-html/table-plugin';
import { Platform } from 'react-native';

function getFontAssetURL(fontFileName: string) {
  return Platform.select({
    ios: `url(${fontFileName})`,
    android: `url(file://android_asset/fonts/${fontFileName})`
  });
}

const openSansUnicodeRanges =
  'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD';

const openSansRegular = getFontAssetURL('OpenSans-Regular.ttf');

const cssRules =
  cssRulesFromSpecs({
    ...defaultTableStylesSpecs,
    fontFamily: '"Open Sans"' // beware to quote font family name!
  }) +
  `
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: ${openSansRegular}, format('ttf');
  unicode-range: ${openSansUnicodeRanges};
}
`;

const renderers = {
  table: makeTableRenderer({
    cssRules,
    // Other config options
   })
};