Editing only the real DOM on ReactJS in order to present a formated number/string maintaining the real number

Question

Hi i'm new to ReactJS and i'm using it with ReactDataGrid, and i can't understand how can i change only the real dom value of a cell. I have the following table:

And i want to change the price, instead of "3000000000" to "300M". I have the JS function to perform this, but i can't apply it to the directly to ReactObject otherwise i will not be able to sort or filter, so i think the only way would be to only edit the RealDOM. Following the documentation on the ReactDataGrid, i can access the ReactNode by using renderRow. But i don't know how to change the real dom in order to display the formated number. Code:

const columns = [
    //{ name: 'shop_vid', header: 'shop_vid', minWidth: 1, defaultFlex: 2 },
    { name: 'name', header: 'Name', minWidth: 10, defaultFlex: 2 },
    { name: 'price', header: 'Price', minWidth: 10, defaultFlex: 2 },
]

const filterValue = [
    { name: 'name', operator: 'contains', type: 'string', value: '' },
    { name: 'price', operator: 'gte', type: 'number', value: 0 },
  ];

const gridStyle = { minHeight: 550 }

const renderRow = ({ data, style }) => {
    const { price } = data
    //formatNumber(price)
  }

class ItemsTable extends Component {
    render() { 
        return (  
            <ReactDataGrid
            idProperty="shop_vid"
            pagination
            defaultFilterValue={filterValue}
            columns={columns}
            dataSource={this.state.items}
            style={gridStyle}
            renderRow={renderRow}
            defaultLimit={10}
            />

        );
    }
}
 
export default ItemsTable;

Thanks in Advance.

score 0 · Answer 1 · answered Feb 11 '21 at 22:52

After diging more i found a solution. ReactDataGrid allows to apply a render function on the columns list. So i just changed the props of the price column.

const columns = [
  { name: 'name', header: 'Name', minWidth: 10, defaultFlex: 2 },
  { 
      name: 'price', 
      header: 'Price', 
      minWidth: 10, 
      type: 'number', 
      defaultFlex: 2,
      render: ({ value }) => {
          return convertValue(value);
      }
  }
]

Where value is the value of the cell and "convertValue" returns the formated number.

Editing only the real DOM on ReactJS in order to present a formated number/string maintaining the real number

1 Answers1