how to set the background color for specific members?

Hello Leon,
Thank you for writing. Currently, you can set custom CSS styles for headers, totals and subtotals. We are releasing the next major version of our component in a month. Among other improvements, we will upgrade customizeCell function so it would allow setting the background color for specific members or hierarchies. Please contact me if you have more questions.
Regards,
Tanya

Hello Sabby,
Thank you for your question. Yes, this feature is available. Please check documentation about customizeCell, especially example number 4. This example demonstrates highlighting cells based on their semantics. Please let me know if you have questions.
Regards,
Tanya

Hello,
 
Thank you for your question.
 
Our team would like to kindly explain that some features provided by Flexmonster are not available in React Native while using our module due to some specifics limitations it imposes on the execution of JavaScript.
It includes using the customizeCell API call.
 
Even so, it is possible to modify the module itself in the way the desired configuration is adjusted.
For example, the possibility to use the customizeCell API call can be achieved using the following approach:
Download the module mentioned earlier and modify the following code snippet in the way the customizeCell is called right after the component is created.
For example:

<script>
  let pivot = new Flexmonster({
    container: "#pivot-container",
    componentFolder: "<https://cdn.flexmonster.com/>",
    toolbar: true,
    licenseKey: '${this.props.licenseKey === undefined ? "" : this.props.licenseKey}',
    report: JSON.parse('${JSON.stringify(this.props.report)}')
  });
  pivot.customizeCell((cell, data) => {
    ...
  });
  ${this.registerEvents()}
</script>

 
Please note that in case such methods are required, the module should be downloaded and connected manually instead of installation through npm.
 
We hope it works for you.
Please contact us in case further questions occur.
 
Kind regards,
Illia

Hello,
 
Thank you for writing to us.
 
Please see the complemented code snippet below:

<script type="text/javascript">
  var pivot = new Flexmonster({
    container: "#pivot-container",
    componentFolder: "<https://cdn.flexmonster.com/>",
    height: ${ this.props.height ? this.props.height : height },
    width: ${ this.props.width ? this.props.width : width },
    licenseKey: '${ this.props.licenseKey === undefined ? "" : this.props.licenseKey }',
    report: JSON.parse('${JSON.stringify(this.props.report)}'),
  });

  pivot.customizeCell((cell, data) => {
    //body of the function
  });

  ...

</script>

 
The following arrow function is passed as an argument of the customizeCell API call:

pivot.customizeCell((cell, data) => {
  //body of the function
});

 
Detailed information about parameters taken by such a function (cell, data) can be found in our documentation.
 
We have prepared an example demonstrating the described approach. It can be downloaded by the link.
It uses the following code snippet, which is responsible for coloring in green all cells which values are above 3000:

<style>
  .highlight {
    background: green !important;
    color: white !important;
  }
</style>

...

flexmonster.customizeCell((cell, data) => {
  if(data.type == "value" && data.value > 3000)
    cell.addClass("highlight");
});

 
The module itself is represented as a react-native-flexmosnter.js file placed in the example.
Please run the following set of commands in order to launch and test the example:

> npm install
> expo start

 
We hope it helps.
If additional questions occur while implementing the desired functionality, we want to ask you to provide us with detailed information about the exact problem you are facing.
 
Kind regards,
Illia

Hello, 
 
Thank you for writing to us. 
 
Currently, the known solution is to modify the source code of the module and define the customizeCell function there.
 
Please let us know if this approach works for you.
Looking forward to your response.
 
Kind regards, 
Vera

Hello, 
 
Thank you for your reply. 
 
 
The cell customization logic should be invoked inside the customizeCell Flexmonster hook. 
This means in the earlier provided example, your cell customization logic could be placed in the react-native-flexmonster.js file in the following place: 

....
<script>

  new Flexmonster({

    container: "#pivot-container",

    componentFolder: "https://cdn.flexmonster.com/",

    toolbar: true,
   
    height: "100%",

    width: "100%",

    licenseKey: '${this.props.licenseKey === undefined ? "" : this.props.licenseKey}',

    report: JSON.parse('${JSON.stringify(this.props.report)}')

  });




  flexmonster.customizeCell((cell, data) => {

       //add your cell customization logic here

  });


  ${this.registerEvents()}

</script>
...

 

In addition, our team has tried to make it possible so that the customizeCell Flexmonster hook could be used on React Native's side outside the module's source code. Although it did work to customize the grid cells from React Native's side, please note that the implementation lacks performance. Nevertheless, we have attached a sample project with the described implementation and you can check it out by the following link. 
The Flexmonster React Native module is included as a file - react-native-flexmosnter.js and is placed in the example's root folder.
Please run the following set of commands in order to launch and test the example:

> npm install
> expo start

As a result, the cells on the grid are colored based on their values and a heat map is created.
 
 
We hope this helps.
 
Kind regards, 
Vera