String formatting of column value React Table

Question

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

Ajeet Shah · Accepted Answer · 2021-03-10 05:31:00Z

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

edited Mar 10, 2021 at 5:31

answered Mar 10, 2021 at 4:52

Ajeet Shah

19.9k10 gold badges66 silver badges107 bronze badges

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

3 Comments

Damini Suthar Over a year ago

Where I need to write function() ?

Damini Suthar Over a year ago

it retuns me [object object]

Damini Suthar Over a year ago

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

Collectives™ on Stack Overflow

String formatting of column value React Table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related