Resolving Large Number Precision Issues in Ant Design Table Selection Popup

In a routine stand‑up, a developer reported spending an entire day investigating a bug in a data‑selection popup that uses an Ant Design Table component; the selected rows were not displayed as expected.

The table’s rowKey was set to record.obj_id , and the backend returned an obj_id such as "898186844400803840", an 18‑digit value.

Because JavaScript numbers are IEEE‑754 double‑precision floats, integers larger than 2^53‑1 lose precision; converting the string to a Number (e.g., via Number("898186844400803840") ) truncates the lower digits, causing the selection state to break.

The data flow was examined and it was found that during the transfer to the parent component, each value was processed with JSON.parse . When a string representing a large integer matches the regular expression /^\d{16,}$/ , the code mistakenly parsed it into a Number, losing precision.

To prevent this, the conversion logic was updated to keep such strings unchanged:

newItem[key] = typeof item[key] === 'string' && /^\d{16,}$/.test(item[key])
    ? item[key]
    : JSON.parse(item[key]);

After applying the fix, the selection popup correctly shows the previously selected rows.

The incident highlights the importance of understanding JavaScript’s handling of large numbers, the difference between numeric and string representations, and the pitfalls of implicit or explicit conversions such as Number() , parseInt() , JSON.parse() , and arithmetic operators.

When large numeric IDs cannot be altered at the source, libraries like lossless-json or json-bigint should be used to preserve precision.