1

I'm implementing Datagrid in Mui with reactjs. I have 1M data. So I'm currently showing 100000 in total count.

Is there any way to show total count as 1M+ or 1000+ or any other shorthand ways to display a large number?

Please find the attached image for your reference.

enter image description here

Thanks in advance.

Ashwanth Madhav
  • 1,084
  • 1
  • 9
  • 21

2 Answers2

1

Hope this gives you a clarity. Try passing the value like this for millions

value >= 1000000 && Math.abs(Number(your value here....)) / 1.0e6).toFixed(1) + " M+"
Lokkesh
  • 92
  • 8
  • Where to use this? We are providing rowCount as total value. Can't assign a string to this field. – Ashwanth Madhav Jul 24 '23 at 17:35
  • Set the row count in a variable or state and pass it in the above code then render it with custom row count – Lokkesh Jul 26 '23 at 09:11
  • Is there any valueFormatter? Can you please provide the line of code for formatting? I need to do it without creating custom Footer. – Ashwanth Madhav Jul 26 '23 at 15:15
  • Without creating a custom footer you can't format 1000000 to 1M as the rowCount prop only allows you to pass numbers and I have already provided you the code for formatting. If you found any solution without creating a custom footer please do share – Lokkesh Jul 27 '23 at 04:25
  • Got it. Sure, will share. – Ashwanth Madhav Jul 27 '23 at 09:39
0

You can do something like this by displaying 1k or 1m accordingly if value it out of range.

const formatTotalCount = (params) => {
  const totalCount = params.value;
  if (totalCount >= 1000000) {
    return `${(totalCount / 1000000).toFixed(1)}M+`;
  } else if (totalCount >= 1000) {
    return `${(totalCount / 1000).toFixed(1)}K+`;
  } else {
    return totalCount.toString();
  }
};

const columns = [
  { field: 'totalCount', headerName: 'Total Count', width: 150, renderCell: formatTotalCount },
];

const rows = [
  // Your data rows here
];

const MyDataGrid = () => {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} pageSize={5} />
    </div>
  );
};

export default MyDataGrid;
DSDmark
  • 1,045
  • 5
  • 11
  • 25