Giter VIP home page Giter VIP logo

Comments (5)

jsamr avatar jsamr commented on July 20, 2024

@tienkhoa16 I will be happy to help if you provide a minimal reproducible example of your issue!

from plugins.

tienkhoa16 avatar tienkhoa16 commented on July 20, 2024

@jsamr
For a big screen, the table is too small:
BigScreen

For a smaller screen, the table is too big that user has to scroll left and right to see it:
SmallScreen

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>&deg;</SUP>C</th>
        <th >COVID sx*</th>
        <th >Same home sx*</th>														
        <th >Temp <SUP>&deg;</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.

jsamr avatar jsamr commented on July 20, 2024

@tienkhoa16 I'm working on it. Will keep you updated.

from plugins.

jsamr avatar jsamr commented on July 20, 2024

@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>&deg;</SUP>C</th>
        <th >COVID sx*</th>
        <th >Same home sx*</th>														
        <th >Temp <SUP>&deg;</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.

tienkhoa16 avatar tienkhoa16 commented on July 20, 2024

@jsamr Thanks a lot. It works as expected for me now 👍

from plugins.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.