在 React Data Table 组件中用逗号显示数字

Question

我正在尝试以带有逗号分隔符的印度数字格式在 table 中显示财务数据。我正在使用 react-data-table-component 在我的网页中创建 table。

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>
  );
}

我传递给 DataTable 组件的数据参数的 table 数组是这样的 -

"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
            }
        ]

如何以逗号分隔格式显示 table 中的数值？如果您需要更多详细信息，请告诉我。

Answer 1

我找到了解决方案。使用 Localestring 将数字转换为逗号分隔的数字。

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

在 React Data Table 组件中用逗号显示数字

Displaying numbers with commas in React Data Table Component

reactjs

react-table

react-data-table-component