REACT - 如何将逗号分隔符添加到 Mui-Datatables 中的整数值
REACT - How to add comma separator to integer value in Mui-Datatables
在我的 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;
使用自定义BodyRender。参考 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" },
];
在我的 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;
使用自定义BodyRender。参考 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" },
];