REACT - 如何在 Mui-Datatables 中将逗号分隔符添加到整数值

Posted 2023-02-22

【中文标题】REACT - 如何在 Mui-Datatables 中将逗号分隔符添加到整数值

【英文标题】：REACT - How to add comma separator to integer value in Mui-Datatables

【发布时间】：2020-11-20 14:09:43

【问题描述】：

在我的 mui-datatables 中，我有一个整数形式的薪水列，我想在其中添加逗号分隔符，例如 100000 --> 100,000，我尝试过，但我的方法没有工作

我的组件看起来像这样

class EmployeeTable extends Component 
const columns = [
       name: "name", label: "Name" ,
       name: "phone_no", label: "Contact" ,
       name: "email", label: "Email" ,
       name: "department", label: "Department" ,
       name: "job_title", label: "Title" ,
       name: "salary", label: "Salary" , <--- My integer Field
       name: "date_employed", label: "Date Employed" ,
  
    ];
 const options = 
      filterType: "checkbox",
      rowsPerPage: 5,
      rowsPerPageOptions: [5, 10, 15, 20],
      downloadOptions:  filename: "InvoiceData.csv", separator: "," ,
      elevation: 6,
    ;
    return (
              <MUIDataTable
                title="Employees Records"
                data=this.state.employeesDetail
                columns=columns
                options=options
              />
            
    );
  


export default EmployeeTable;

【参考方案1】：

使用 customBodyRender。参考this

const columns = [
     name: "name", label: "Name" ,
     name: "phone_no", label: "Contact" ,
     name: "email", label: "Email" ,
     name: "department", label: "Department" ,
     name: "job_title", label: "Title" ,
    
        name: "salary", label: "Salary",
        options: 
            customBodyRender: function (value, tableMeta, updateValue) 
                return new Intl.NumberFormat().format(value)
            
        
    ,
     name: "date_employed", label: "Date Employed" ,

];