Hướng dẫn native-html/table-plugin

⚠️ This documentation is for react-native-render-html v6 (@native-html/). For v5 and below, go here.
Nội dung chính Show

@native-html/table-plugin
Compat Table
Minimal working example
API Reference
Troubleshooting
Errors when importing WebView component
How to easily style the table?
How to disable autoheight?
How to extend default or custom styles?
How to customize the Table component?
How to load custom fonts?

@native-html/table-plugin

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

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

Compat Table

⚠️ The API is significantly different depending on target react-native-render-html version. Make sure you check the appropriate version documentation before proceeding.

react-native-render-html	@native-html/table-plugin
≥ 4.2.1 < 5.0.0	2.x (documentation)
≥ 5.0.0 < 6.0.0	3.x (documentation)
≥ 6.0.0	4.x (documentation) 5.x (documentation)

Minimal working example

Full example

You need 2 steps to get to a working example:

Import the WebView component. Instructions will differ depending on your setup;
Inject renderers, customHTMLElementModels and WebView props to the HTML component;

import React from 'react';
import { ScrollView } from 'react-native';
import HTML from 'react-native-render-html';
import TableRenderer, { tableModel } from '@native-html/table-plugin';
import WebView from 'react-native-webview';

const html = `
                

Entry Header 1
Entry Header 2


Entry First Line 1
Entry First Line 2


`;
const htmlProps = {
WebView,
renderers: {
table: TableRenderer
},
renderersProps: {
table: {
// Put the table config here
}
},
customHTMLElementModels: {
table: tableModel
}
};
export const Example = () => (
<ScrollView>
<HTML source={{ html }} {...htmlProps} />
</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:

TableRenderer(default)
useHtmlTableProps

Other exports:

HTMLTable
defaultTableStylesSpecs
cssRulesFromSpecs

Troubleshooting

Errors when importing WebView component

⚠️ 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.

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 TableRenderer {
  defaultTableStylesSpecs,
  cssRulesFromSpecs
} from '@native-html/table-plugin';

const htmlProps = {
  renderers: { table: TableRenderer },
  renderersProps: {
    table: {
      tableStyleSpecs: {
        // my style specs
      }
    }
  }
};

How to disable autoheight?

Pass computeContainerHeight option with a function returning null:

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

const htmlProps = {
  renderers: { table: TableRenderer },
  renderersProps: {
    table: {
      computeContainerHeight() {
        return null;
      }
    }
  }
};

How to extend default or custom styles?

A: Use cssRulesFromSpecs function and override cssRules config.

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

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

const tableConfig = {
  cssRules
}

const htmlProps = {
  renderers: { table: TableRenderer },
  renderersProps: {
    table: {
      cssRules
    }
  }
};

How to customize the Table component?

A: See useHtmlTableProps hook. See custom example.

How to load custom fonts?

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

import TableRenderer, {
  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 htmlProps = {
  renderers: { table: TableRenderer },
  renderersProps: {
    table: {
      cssRules
    }
  }
};

Hướng dẫn native-html/table-plugin

@native-html/table-plugin

Compat Table

Minimal working example

API Reference

Troubleshooting

Errors when importing WebView component

FAQ

How to easily style the table?

How to disable autoheight?

How to extend default or custom styles?

How to customize the Table component?

How to load custom fonts?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội