<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Thanks <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-u

How can i change the style for table? about plugins HOT 8 CLOSED

native-html commented on July 20, 2024

How can i change the style for table?

from plugins.

Comments (8)

jsamr commented on July 20, 2024

@BogdanRad See https://github.com/native-html/table-plugin#tablestylespecs

from plugins.

BogdanRad commented on July 20, 2024

@jsamr can you give me an example please?
here is my code, but don't working...

from plugins.

jsamr commented on July 20, 2024

@BogdanRad I'm willing to help, but I would need you to create a snack first, so that I can reproduce the issue consistently. I suggest you start from our snack template here: https://snack.expo.io/@jsamr/rnrhtml-template, and you can post the link when you're ready.

from plugins.

BogdanRad commented on July 20, 2024

Thanks @jsamr . I updated the link: https://snack.expo.io/mg4Cs8vSt

from plugins.

jsamr commented on July 20, 2024

@BogdanRad Perhaps it is just an omission. But you are not passing the config to the HTML component, so there is no chances the rendering can work! Have you tried your snack on the expo app for iOS / Android?

replace

<HTML html={html} />

with

<HTML html={html} {...htmlConfig} />

from plugins.

BogdanRad commented on July 20, 2024

I updated the link. I added htmlConfig to but doesn't working.. the style doesn't change.
Is it ok how I add in config?

from plugins.

jsamr commented on July 20, 2024

@BogdanRad You are absolutely right. I'm looking into it and publishing a pre-release soon.

from plugins.

jsamr commented on July 20, 2024

@BogdanRad Actually I am wrong! The library just work as expected. You misunderstood (and I didn't realize) that the tableStyleSpecs is an attribute of the makeTableRenderer config parameter.

So you can now do instead:

import * as React from 'react';
import {ScrollView, StyleSheet} from 'react-native';
import HTML from 'react-native-render-html';
import WebView from 'react-native-webview';
import {
  IGNORED_TAGS,
  alterNode,
  makeTableRenderer,
} from 'react-native-render-html-table-bridge';

const html = `
<table>
  <tr>
    <td><b>Culoare</b></td>
    <td>Negru</td>
  </tr>
  <tr>
    <td><b>Material</b></td>
    <td>Silicon</td>
  </tr>
  <tr>
    <td><b>Tip</b></td>
    <td>Carcasa</td>
  </tr>
  <tr>
    <td><b>Telefon compatibil</b></td>
    <td>Galaxy S20 Plus</td>
  </tr>
</table>
`;

const config = {
  WebViewComponent: WebView,
  tableStyleSpecs: {
    borderWidthPx: 0,
    thOddBackground: 'transparent',
    thEvenBackground: 'transparent',
    trOddBackground: 'transparent',
    trEvenBackground: 'transparent',
    thEvenColor: '#000000',
    trOddColor: '#000000',
    thOddColor: '#000000',
    trEvenColor: '#000000',
  },
};

const renderers = {
  table: makeTableRenderer(config),
};

const htmlConfig = {
  alterNode,
  renderers,
  ignoredTags: IGNORED_TAGS,
};

export default function App() {
  return (
    <ScrollView style={{flex: 1}} contentContainerStyle={styles.container}>
      <HTML style={{flex: 1}} html={html} {...htmlConfig} />
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
    padding: 0,
    backgroundColor: 'red',
  },
});

Next time, take the time to read the documentation.

from plugins.

How can i change the style for table? about plugins HOT 8 CLOSED

Comments (8)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent