Table not updating when formatter is setted

[Genarito]

My column setting are these:

columns = {
    dataField: 'inexistentField',
    text: "Obj state",
    formatter: (cell, obj) => {
        console.log('Obj -> ', obj); // Only executed when on table change function is executed by table
    }
}

Table does not update when I call my tableChange function (one that is passed down to onTableChange) externally (not using one of the page buttons).

When I click on any sortable column, content generated by formatter function changes normally. If data changes a lot (for instance, with different number of elements) table works fine. I've debugged with React Dev Tools and my state and table props are correct.

Version bootstrap-table: 1.3.0

[AllenFang]

@Genarito I think I need more information, if ok, please made a simple and minimal example on https://codesandbox.io . I will help you to check.

But please make sure that you dont use and state data or external data in column.formatter:
https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnformatter-function

[Genarito]

I was using It with state data, I didn't read the warning about formatExtraData. Thank you so much and sorry about the inconvenients

[Genarito]

How could I define dinamyc data on one column? For instance, given a value in one of my obj's field, show a specific icon? Because if formatter can't manage dinamyc data and formatExtraData doesn't receive the current row, I have no idea how we could solve a problem like that one.

Thanks in advance

[martinstarman]

I have the same problem. How to deal with this formatter, where cell is type_id

formatCustomerType(cell, row, rowIndex, formatExtraData) {
  return this.state.types[cell] // e.g. cell = 'key1'
}

and types are fetched from API

API.get("/types")
   .then((res) => {
     this.setState({
       types: res // {key1: "val1", key2: "val2"}
     })
   })

[jkrawczyk]

Hi @AllenFang , here's an example of what I was trying to do - highlight alerted row using rowClasses and add alert icon using formatter: https://codesandbox.io/s/0xvw06wxpv. Unfortunately just like @Genarito I'm not able to dynamically change column formatting using row's data. I have a workaround using css but I'm not happy with that.

Does the usage of row's data counts as violation of

Don't use any state data or any external data in formatter function

or this is some kind of a bug?

Thank you :)

[AllenFang]

@jkrawczyk currently, performance is biggest concerns for me. So in current design, please don't use any external data or state. if you have, please pass them via formatExtraData

[AllenFang]

@jkrawczyk btw, current there's a bug probably about this. I will check this out and get back to you here. thanks

[waynebrantley]

@jkrawczyk What is not documented yet is that the grid needs you to treat the data as immutable, much like redux requires. This way it knows what to redraw, etc. I have modified your example not to directly mutate state and it works as expected. #656 (comment)

https://codesandbox.io/s/v8pz48rl30

[jkrawczyk]

@waynebrantley I believe that in my example the data was immutable thanks to spread operator. Actually in your example it's not working as expected because there is still no [ALERT-ICON] which should appear along with the row highlight - rowClasses works fine but column formatter does not.

@AllenFang Can you look at examples above? I believe that both follow Immutable Update Pattern and were believed to work (according to #656 (comment)) but apparently something is still not working.

Thank you! :)

[waynebrantley]

@jkrawczyk the spread operator does not duplicate arrays. Your data is mutated. Use splice to duplicate the array and retry - I believe you will find it works properly.

[jkrawczyk]

@waynebrantley As I said your example doesn't work correctly either because [ALERT-ICON] string does not show up :) Spread operator in my example creates a copy of an array what is explained here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Copy_an_array

[waynebrantley]

@jkrawczyk the spread operator does copy the array...if the array is simple value. However, If the item being spread into the target is an object, only a reference to that object will be copied. So your data is mutated! (It copied the array...but did not copy the objects...only a reference to the objects)

However, I am still unable to get your example to work. I tired using formatExtraData and a dummy field, it did not work - seemed to be related to the property called 'alert'. Changed the property to another name showAlert in my codesandbox and that causes an error in formatExtraData for some reason.