Comments (5)
@tienkhoa16 I will be happy to help if you provide a minimal reproducible example of your issue!
from plugins.
@jsamr
For a big screen, the table is too small:
For a smaller screen, the table is too big that user has to scroll left and right to see it:
My code for rendering the screen:
import React, {PureComponent} from 'react';
import {ScrollView} from 'react-native';
import HTML from 'react-native-render-html';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import WebView from 'react-native-webview';
let html = `
<table>
<thead>
<tr>
<th rowspan="2">S.No</th>
<th rowspan="2">Date</th>
<th colspan="3" align="center">AM</th>
<th colspan="3" align="center">PM</th>
</tr>
<tr>
<th>Temp <SUP>°</SUP>C</th>
<th >COVID sx*</th>
<th >Same home sx*</th>
<th >Temp <SUP>°</SUP>C</th>
<th >COVID sx*</th>
<th >Same home sx*</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>08/06 Mon</td>
<td >
36.4
</td>
<td >
No
</td>
<td >
No
</td>
<td >
36.9
</td>
<td >
No
</td>
<td >
No
</td>
</tr>
<tr>
<td >2</td>
<td>07/06 Sun</td>
<td >
36.4
</td>
<td >
No
</td>
<td >
No
</td>
<td >
36.8
</td>
<td >
No
</td>
<td >
No
</td>
</tr>
</tbody>
</table>`
const config = {
WebViewComponent: WebView
};
const renderers = {
table: makeTableRenderer(config)
};
const htmlConfig = {
alterNode,
renderers,
ignoredTags: IGNORED_TAGS
};
export default class Example extends PureComponent<Props> {
render() {
return (
<ScrollView contentContainerStyle={{ paddingHorizontal: 10 }} style={{ marginTop: 50 }}>
<HTML html={html} {...htmlConfig}/>
</ScrollView>
)
}
}
In css-rules.js file in the node_modules folder, I tried changing fitContainer property in defaultTableStylesSpecs from false to true but it makes no difference
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.defaultTableStylesSpecs = {
selectableText: false,
fitContainer: true, // by default it is false, but when I set it to true, it makes no difference
cellPaddingEm: 0.25,
borderWidthPx: 0.25,
linkColor: '#3498DB',
fontFamily: 'sans-serif',
thBorderColor: '#3f5c7a',
tdBorderColor: '#b5b5b5',
thOddBackground: '#253546',
thOddColor: '#FFFFFF',
thEvenBackground: '#253546',
thEvenColor: '#FFFFFF',
trOddBackground: '#e2e2e2',
trOddColor: '#333333',
trEvenBackground: '#FFFFFF',
trEvenColor: '#333333'
};
So how can I shrink the table content to fit my screen by default (like what react-native-webview does)? Thanks!
from plugins.
@tienkhoa16 I'm working on it. Will keep you updated.
from plugins.
@tienkhoa16 I've just released v0.6.1 with features that should help you.
A few comments:
how can I shrink the table content to fit my screen by default (like what react-native-webview does)
I'm not aware that react-native-webview does that. But if you want to play with RNWV props, you can use webViewProps
config attribute. The web engine will try to fit the table into the container width, but if it can't, the table will overflow. The only solution is to have a smaller font and / or cell spacing. You can use fontSizePx
and cellSpacingEm
for that regard (see bellow).
For a big screen, the table is too small
I have fixed the issue by providing fitContainerWidth
attribute to tableStyleSpecs
config, see bellow.
import React, {PureComponent} from 'react';
import {ScrollView} from 'react-native';
import HTML from 'react-native-render-html';
import { IGNORED_TAGS, alterNode, makeTableRenderer } from 'react-native-render-html-table-bridge';
import WebView from 'react-native-webview';
let html = `
<table>
<thead>
<tr>
<th rowspan="2">S.No</th>
<th rowspan="2">Date</th>
<th colspan="3" align="center">AM</th>
<th colspan="3" align="center">PM</th>
</tr>
<tr>
<th>Temp <SUP>°</SUP>C</th>
<th >COVID sx*</th>
<th >Same home sx*</th>
<th >Temp <SUP>°</SUP>C</th>
<th >COVID sx*</th>
<th >Same home sx*</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td>08/06 Mon</td>
<td >
36.4
</td>
<td >
No
</td>
<td >
No
</td>
<td >
36.9
</td>
<td >
No
</td>
<td >
No
</td>
</tr>
<tr>
<td >2</td>
<td>07/06 Sun</td>
<td >
36.4
</td>
<td >
No
</td>
<td >
No
</td>
<td >
36.8
</td>
<td >
No
</td>
<td >
No
</td>
</tr>
</tbody>
</table>`
const config = {
WebViewComponent: WebView,
tableStyleSpecs: {
cellSpacingEm: 0.1,
fitContainerWidth: true,
fontSizePx: 14
}
};
const renderers = {
table: makeTableRenderer(config)
};
const htmlConfig = {
alterNode,
renderers,
ignoredTags: IGNORED_TAGS
};
export default class Example extends PureComponent<Props> {
render() {
return (
<ScrollView contentContainerStyle={{ paddingHorizontal: 10 }} style={{ marginTop: 50 }}>
<HTML html={html} {...htmlConfig}/>
</ScrollView>
)
}
}
Hope that helps
from plugins.
@jsamr Thanks a lot. It works as expected for me now 👍
from plugins.
Related Issues (20)
- img tag is not supported inside table HOT 11
- Works fine for iOS but breaking in PWA HOT 9
- Are the table heights synchronized? If they are, how to disable syncing? HOT 6
- [table-plugin] Set text-align in tableStyleSpecs HOT 3
- undefinded is not a function (near '...(0,_reactNativeRenderHtml.domNodeToHTMLString)...') HOT 3
- i got error on back press please resolve it, thanks HOT 2
- If you get an error, read this first
- [iframe] Video always autoplay. How to disable autoplay? HOT 1
- [iframe] "scalesPageToFit=true" not zooming out HOT 5
- [heuristic-table-plugin]table-row/collum styling HOT 4
- [iframe-plugin] Content doesn't scale to fit if the container has some padding HOT 5
- Table not showing HOT 2
- [heuristic-table-plugin] forceStretch causes crash HOT 4
- [iframe-plugin] Add an option to add headers to the webview HOT 2
- [iframe-plugin] html string with iframe, iframe will not work HOT 8
- [heuristic-table-plugin] Text not showing when using tableRenderers
- [table-plugin] Android app (expo go and production) crashes for certain html content HOT 2
- [iframe-plugin] Crashes on Android when using certain content. HOT 4
- [iframe-plugin] html string with iframe, iframe will not work. Tried the solution in issue #41 but the app crashes
- borderwidth not showing in right side and bottom side in Table. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plugins.