jsamr/Table.jsx

## alter-node.js
import { forEachObjIndexed } from 'ramda'
import strigifyEntities from 'stringify-entities'

function renderOpeningTag(tag: string, attributes: HtmlAttributesDictionary) {
  const strAttributes: string[] = []
  forEachObjIndexed((attrVal: string, attrKey: string) => {
    strAttributes.push(`${attrKey}="${strigifyEntities(attrVal)}"`)
  })(attributes)
  return `<${tag}${strAttributes.length ? ' ' : ''}${strAttributes.join(' ')}>`
}

function domToHTML(root) {
  if (root.type === 'tag') {
    const strChildren = root.children.reduce((prev, curr) => `${prev}${domToHTML(curr)}`, '')
    return `${renderOpeningTag(root.name, root.attribs)}${strChildren}</${root.name}>`
  }
  if (root.type === 'text') {
    return strigifyEntities(root.data)
  }
  return ''
}
// Use this function in HTML props
export function alterNode(node) {
  if (node.type === 'tag' && node.name === 'table') {
    node.attribs.rawHtml = domToHTML(node)
  }
}

## renderers.jsx
import React from 'react'
import { Table } from './Table'

// Use this object in HTML props
export const renderers = {
  // Your renderers
  table: (attribs, children, css, { key }) => {
    return <Table key={key} rawHtml={attribs.rawHtml} />
  }
}

## Table.jsx
import React, { PureComponent } from 'react'
import { WebView } from 'react-native-webview'

const htmlStyle = `
:root {
  color: #333333;
  background-color: transparent;
}
body, html {
  margin: 0;
  background-color: 'black';
}
table {
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  background-color: #FFFFFF;
}
th, td {
  padding: 0.25em;
  text-align: center;
}
table, th, td {
  margin: 0;
},
table {
  margin: 'auto';
}
th {
  border-bottom: 0.25px solid #2a3c4f;
  border-right: 0.25px solid #2a3c4f;
}
td {
  border-bottom: 0.25px solid #b5b5b5;
  border-right: 0.25px solid #b5b5b5;
}
thead {
  background-color: #253546;
}
th {
  background-color: #253546;
  color: #FFFFFF;
}
tr:nth-child(odd) {
  background-color: #e2e2e2;
}
tr:nth-child(even), tr:nth-child(1) {
  background-color: #FFFFFF;
}
`

export class Table extends PureComponent {
  render() {
    const html = `
    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=false">
    </head>
    <body>
      <style>
      ${htmlStyle}
      </style>
      ${this.props.rawHtml}
    </body>
    </html>
    `
    return (
      <WebView scalesPageToFit={false}
               automaticallyAdjustContentInsets={false}
               javaScriptEnabled={false}
               scrollEnabled={true}
               style={this.props.style}
               contentInset={{ top: 0, bottom: 0, left: 0, right: 0 }}
               source={{ html }} />
    )
  }
}
	import { forEachObjIndexed } from 'ramda'
	import strigifyEntities from 'stringify-entities'

	function renderOpeningTag(tag: string, attributes: HtmlAttributesDictionary) {
	const strAttributes: string[] = []
	forEachObjIndexed((attrVal: string, attrKey: string) => {
	strAttributes.push(`${attrKey}="${strigifyEntities(attrVal)}"`)
	})(attributes)
	return `<${tag}${strAttributes.length ? ' ' : ''}${strAttributes.join(' ')}>`
	}

	function domToHTML(root) {
	if (root.type === 'tag') {
	const strChildren = root.children.reduce((prev, curr) => `${prev}${domToHTML(curr)}`, '')
	return `${renderOpeningTag(root.name, root.attribs)}${strChildren}</${root.name}>`
	}
	if (root.type === 'text') {
	return strigifyEntities(root.data)
	}
	return ''
	}
	// Use this function in HTML props
	export function alterNode(node) {
	if (node.type === 'tag' && node.name === 'table') {
	node.attribs.rawHtml = domToHTML(node)
	}
	}
	import React from 'react'
	import { Table } from './Table'

	// Use this object in HTML props
	export const renderers = {
	// Your renderers
	table: (attribs, children, css, { key }) => {
	return <Table key={key} rawHtml={attribs.rawHtml} />
	}
	}
	import React, { PureComponent } from 'react'
	import { WebView } from 'react-native-webview'

	const htmlStyle = `
	:root {
	color: #333333;
	background-color: transparent;
	}
	body, html {
	margin: 0;
	background-color: 'black';
	}
	table {
	min-height: 100vh;
	min-width: 100vw;
	margin: 0;
	padding: 0;
	background-color: #FFFFFF;
	}
	th, td {
	padding: 0.25em;
	text-align: center;
	}
	table, th, td {
	margin: 0;
	},
	table {
	margin: 'auto';
	}
	th {
	border-bottom: 0.25px solid #2a3c4f;
	border-right: 0.25px solid #2a3c4f;
	}
	td {
	border-bottom: 0.25px solid #b5b5b5;
	border-right: 0.25px solid #b5b5b5;
	}
	thead {
	background-color: #253546;
	}
	th {
	background-color: #253546;
	color: #FFFFFF;
	}
	tr:nth-child(odd) {
	background-color: #e2e2e2;
	}
	tr:nth-child(even), tr:nth-child(1) {
	background-color: #FFFFFF;
	}
	`

	export class Table extends PureComponent {
	render() {
	const html = `
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=false">
	</head>
	<body>
	<style>
	${htmlStyle}
	</style>
	${this.props.rawHtml}
	</body>
	</html>
	`
	return (
	<WebView scalesPageToFit={false}
	automaticallyAdjustContentInsets={false}
	javaScriptEnabled={false}
	scrollEnabled={true}
	style={this.props.style}
	contentInset={{ top: 0, bottom: 0, left: 0, right: 0 }}
	source={{ html }} />
	)
	}
	}