时间戳

首页 > 解决方案 > React Table 中列值的字符串格式

reactjs - React Table 中列值的字符串格式

问题描述

我正在使用反应表 V6。我有在表中显示为大写字符串的数据。我想做形成并显示成大写格式。这是反应表：

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

在销售状态数据显示为DESIGN_CONFIRMATION我想显示为Design Confirmation。请给我建议

标签： reactjs

解决方案

您需要编写一个实用函数来将字符串转换为您想要的格式。并在Cell列定义的属性中使用它：

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

推荐阅读