2

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

1 Answer 1

1

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"))

Sign up to request clarification or add additional context in comments.

3 Comments

Where I need to write function() ?
it retuns me [object object]
Still it shows [object object]. Is there any issue if I put in function like Cell: ( value :any) => toTitleCase(value) function toTitleCase(str :any, del = "_") { if (!str) return ""; return str.toString().split(del).map((w :any) => w[0].toUpperCase() + w.substr(1).toLowerCase()).join(" ") }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.