CODEWITHSUNDEEP
reactjs
Damini Suthar
Damini Suthar

Reputation: 1492

String formatting of column value React Table

I am using react table V6. I have data which are shows in table as uppercase string. I want to do formation and display into capitalized format. Here is react table:

 <ReactTable 
 filterable
          data={items}
          columns={[{
              Header: "ID",
              accessor: "id",
            },{
              Header: "Sale Status",
              accessor: "sale_status",
              style :{
                'text-transform':'capitalized'
              }  
            },    
    ]} />

in Sales status data display as DESIGN_CONFIRMATION I want to display as Design Confirmation. Please give me suggesion

Upvotes: 2

Views: 4105

Answers (1)

Ajeet Shah
Ajeet Shah

Reputation: 19813

You need to write a utility function to convert the string in the format you want. And use that in the Cell property of column definition:

{
  Header: "Sale Status",
  accessor: "sale_status",
  Cell: (row) => {
    const sale_status = row.original.sale_status
    if (!sale_status) return "";
    return sale_status.split("_").map(w => w[0].toUpperCase() + w.substr(1).toLowerCase()).join(" ")
  }
}


function toTitleCase(str, del = "_") {
  if (!str) return "";
  return str.split(del).map(w => w[0].toUpperCase() + w.substr(1).toLowerCase()).join(" ")
}

console.log(toTitleCase("ABCD_EFGH"))
console.log(toTitleCase("abcd_efgh"))

Upvotes: 1

Related Questions