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.

@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 [ ];

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