Displaying numbers with commas in React Data Table Component

Question

I am trying to display the financial data within the table in the Indian number format with a comma separator. I am using react-data-table-component to create tables in my webpage.

const columns = [
  {
    name: "Year",
    selector: "Year",
    sortable: true
  },
  {
    name: "India's GDP in crore",
    selector: "India's GDP* in crore",
    sortable: true,
    right:true
  },
  {
    name: "Growth rate in per cent",
    selector: "Growth rate in per cent",
    sortable: true,
    right: true
  },
  {
    name: "State's GSDP in crore",
    selector: "State's GSDP* in crore",
    sortable: true,
    right: true
  },
  {
    name: "Growth rate in percent(1)",
    selector: "Growth rate in percent(1)",
    sortable: true,
    right: true
  },
];


const Table = () => {
  
  const ctx = useContext(MyContext)

  return (
    <div className="App">
      <Card>
        <DataTable
          title="Table1.1"
          columns={columns}
          data={ctx.reportData.Tables2.Table1}
          defaultSortField="title"
          sortIcon={<SortIcon />}
                  />
      </Card>
    </div>
  );
}

The table array I am passing into the data argument of the DataTable component is this -

"Table1":[
            {
                "Year":"2015-16",
                "India's GDP* in crore":13771875,
                "Growth rate in per cent":10.46,
                "State's GSDP* in crore":1045168,
                "Growth rate in per cent__1":14.36
            },
            {
                "Year":"2016-17",
                "India's GDP* in crore":15391665,
                "Growth rate in per cent":11.76,
                "State's GSDP* in crore":1209136,
                "Growth rate in per cent__1":15.69
            },
            {
                "Year":"2017-18",
                "India's GDP* in crore":17098304,
                "Growth rate in per cent":11.09,
                "State's GSDP* in crore":1357579,
                "Growth rate in per cent__1":12.28
            },
            {
                "Year":"2018-19",
                "India's GDP* in crore":18971234,
                "Growth rate in per cent":10.95,
                "State's GSDP* in crore":1544399,
                "Growth rate in per cent__1":13.76
            },
            {
                "Year":"2019-20",
                "India's GDP* in crore":20442233,
                "Growth rate in per cent":7.75,
                "State's GSDP* in crore":1699115,
                "Growth rate in per cent__1":10.02
            }
        ]

How do I display the numeric values in the table in a comma-separated format? Please let me know If you need any more details.

Answer 1

I found the solution. Use Localestring to convert the number to comma separated number.

cell: data => data["India's GDP* in crore"].toLocaleString()