Morioh
Login
Ethan Whitehead

Ethan Whitehead

3 years ago

A Webview-based Plugin to Render Tables in React Native Render Html

@native-html/table-plugin

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

Try it on Expo!

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;
  • Customize table style with ease.

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:

  1. Provide import for WebView component. Instructions will differ depending on your setup;
  2. Inject alterNode and ignoredTags props to HTML component;
  3. 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

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:

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 easily style the table?

Use TableConfig.tableStyleSpecs. The options will get merged with defaults, so you are not required to pass every field. See documentation.

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

const renderers = {
  table: makeTableRenderer({
    tableStyleSpecs: {
      // my style specs
    }
  })
};

How to disable autoheight?

Pass computeContainerHeight option with a function returning null:

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

const renderers = {
  table: makeTableRenderer({
    computeContainerHeight() {
      return null;
    }
  })
};

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
  })
};

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
  })
};

Download Details:

Author: native-html

Source Code: https://github.com/native-html/table-plugin

#react-native #react #mobile-apps

A Webview-based Plugin to Render Tables in React Native Render Html
17.30 GEEK