⚠️ This documentation is for react-native-render-html v6 (@native-html/table-plugin@4.x). For v5 and below, go here.
@native-html/table-plugin
npm add --save @native-html/table-pluginyarn add @native-html/table-pluginFeatures:
- Render HTML tables with a
WebViewcomponent you provide; - Supports
HTML.onLinkPressprop 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
onLinkPressconfig options only work withWebView≥v5.0.0community 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
You need 2 steps to get to a working example:
- Import the
WebViewcomponent. Instructions will differ depending on your setup; - Inject
renderers,customHTMLElementModelsandWebViewprops to theHTMLcomponent;
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 = `
<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 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:
Other exports:
Troubleshooting
Errors when importing WebView component
⚠️ Always favorreact-native-community/react-native-webviewover legacyWebViewwhen 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:
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
}
}
};