REACT - How to add comma separator to integer value in Mui-Datatables

Question

In my mui-datatables i have a column for salaries which is in integer form, I want to add comma separator to it e.g 100000 --> 100,000, i have tried but my way does not work

My component looks like this

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

Use customBodyRender. Refer 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" },

];