如何在React Data Table Component中以印度数字格式显示带逗号分隔的数值

要在react-data-table-component中实现印度格式的逗号分隔数字显示，你可以利用组件的自定义单元格渲染能力，结合JavaScript的Intl.NumberFormat API来快速实现。下面是具体步骤和代码示例：

1. 编写印度数字格式化函数 #

使用Intl.NumberFormat并指定en-IN locale，就能自动按照印度的数字分组规则（比如1,00,000表示1 lakh，1,00,00,000表示1 crore）来格式化数值。同时处理整数和小数的显示逻辑：

const formatIndianNumber = (num) => {
  // 处理空值情况，避免显示错误
  if (num === null || num === undefined) return '-';
  // 整数不显示小数位，小数保留两位
  return new Intl.NumberFormat('en-IN', {
    minimumFractionDigits: num % 1 === 0 ? 0 : 2,
    maximumFractionDigits: 2
  }).format(num);
};

2. 修改Columns配置，添加自定义单元格渲染 #

在需要格式化的列中，通过cell属性定义自定义渲染逻辑，该属性接收当前行数据，返回格式化后的内容。注意要匹配数据中的实际键名（比如你数据里增长率的键是Growth rate in per cent__1，需要修正columns里的selector确保排序功能正常）：

const columns = [
  { name: "Year", selector: "Year", sortable: true },
  { 
    name: "India's GDP in crore", 
    selector: "India's GDP* in crore", 
    sortable: true, 
    right: true,
    cell: (row) => formatIndianNumber(row["India's GDP* in crore"])
  },
  { 
    name: "Growth rate in per cent", 
    selector: "Growth rate in per cent", 
    sortable: true, 
    right: true,
    cell: (row) => formatIndianNumber(row["Growth rate in per cent"])
  },
  { 
    name: "State's GSDP in crore", 
    selector: "State's GSDP* in crore", 
    sortable: true, 
    right: true,
    cell: (row) => formatIndianNumber(row["State's GSDP* in crore"])
  },
  { 
    name: "Growth rate in percent(1)", 
    selector: "Growth rate in per cent__1", // 修正为数据中的实际键名
    sortable: true, 
    right: true,
    cell: (row) => formatIndianNumber(row["Growth rate in per cent__1"])
  },
];

3. 完整的Table组件代码 #

把格式化函数和修改后的columns整合到你的组件中，同时修正原代码里defaultSortField的错误（原代码写的title不存在，应该改为Year）：

import { useContext } from 'react';
import { DataTable } from 'react-data-table-component';
import Card from '@mui/material/Card';
import SortIcon from '@mui/icons-material/Sort';
import MyContext from './MyContext'; // 导入你的上下文

const formatIndianNumber = (num) => {
  if (num === null || num === undefined) return '-';
  return new Intl.NumberFormat('en-IN', {
    minimumFractionDigits: num % 1 === 0 ? 0 : 2,
    maximumFractionDigits: 2
  }).format(num);
};

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

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

export default Table;

补充说明 #

• Intl.NumberFormat('en-IN')会自动处理印度数字的分组规则，比如13771875会被格式化为13,77,1875，完全符合印度财务数据的显示习惯。
• 格式化函数中处理了空值场景，避免表格出现异常显示。
• 修正了columns中selector与数据键名不匹配的问题，确保排序功能正常工作。

内容的提问来源于stack exchange，提问作者Anil Dharni