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

Question

在我的 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;

Answer 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" },

];