fix: show overflowing numbers on hover

Author: Amelia Wattenberger

src/components/cell.tsx

@@ -55,7 +55,7 @@ export const Cell = React.memo(function (props: CellProps) {
 
   const { cell: CellComponent } = cellInfo || {}
 
-  const displayValue = formattedValue || value;
+  const displayValue = (formattedValue || value || "").toString();
   const isLongValue = (displayValue || '').length > 23;
   const stringWithLinks = React.useMemo(
     () => displayValue ? (
@@ -197,7 +197,7 @@ const CellInner = React.memo(function CellInner({
         <div
           className="cell__long-value"
           css={[
-            tw` absolute p-4 py-2 bg-white opacity-0 z-30 border border-gray-200 shadow-md pointer-events-none`,
+            tw` absolute p-4 py-2 bg-white opacity-0 z-30 border border-gray-200 shadow-md pointer-events-none break-all text-left`,
             isNearBottomEdge ? tw`bottom-0` : tw`top-0`,
             isNearRightEdge ? tw`right-0` : tw`left-0`,
           ]}

src/components/cells/number.tsx

@@ -7,12 +7,12 @@ interface NumberCellProps {
 
 export function NumberCell(props: NumberCellProps) {
   return (
-    <span tw="text-right font-mono text-sm block w-full" title={props.rawValue}>
+    <div tw="truncate text-right font-mono text-sm block w-full" title={props.rawValue}>
       {
         Number.isFinite(props.value) ? props.value.toLocaleString()
           : !props.rawValue ? ""
             : '—'
       }
-    </span>
+    </div>
   );
 }

src/components/cells/string.tsx

@@ -9,8 +9,8 @@ interface StringCellProps {
 
 export function StringCell(props: StringCellProps) {
   return (
-    <span
-      tw="overflow-ellipsis block whitespace-nowrap overflow-hidden"
+    <div
+      tw="truncate"
       title={props.rawValue}
       dangerouslySetInnerHTML={{
         __html: DOMPurify.sanitize(props.formattedValue),

src/components/grid.tsx

@@ -650,13 +650,15 @@ const CellWrapper = function (props: CellProps) {
   }
 
   // @ts-ignore
-  const type = cellTypes[name];
+  const type = cellTypes[name]
   const cellData = filteredData[rowIndex] || { [name]: "" }
 
   // if (!cellData) return null;
 
   const value = cellData[name];
   const rawValue = cellData['__rawData__']?.[name];
+  // @ts-ignore
+  const formattedValue = cellTypeMap[type || ""]?.format?.(value, rawValue) || value;
 
   let possibleValues = type === 'category' ? categoryValues[name] : [];
   const possibleValue = possibleValues?.find(d => d.value === value);
@@ -698,6 +700,7 @@ const CellWrapper = function (props: CellProps) {
       type={type}
       value={value}
       rawValue={rawValue}
+      formattedValue={formattedValue}
       categoryColor={categoryColor}
       background={backgroundColor}
       style={style}
@@ -720,6 +723,7 @@ interface CellComputedProps {
   type: string;
   value: any;
   rawValue: any;
+  formattedValue: any;
   style: StyleObject;
   background?: string;
   categoryColor?: string | TwStyle;

src/store.ts

@@ -771,7 +771,7 @@ export const cellTypeMap = {
   number: {
     cell: NumberCell,
     filter: RangeFilter,
-    format: (d: number) => d + '',
+    format: (d: number) => d?.toLocaleString() + '',
     shortFormat: (d: number) =>
       d < 1000 && isAlmostInteger(d)
         ? d3Format(',.0f')(d)