refactor: make percent cell declarative

app/src/components/model/ModelSchemaTable.tsx

@@ -5,7 +5,7 @@ import { Column } from "react-table";
 import {
   FloatCell,
   IntCell,
-  NumericCellFactory,
+  PercentCell,
   Table,
 } from "@phoenix/components/table";
 
@@ -100,7 +100,7 @@ export function ModelSchemaTable(props: ModelSchemaTableProps) {
       {
         Header: "% empty",
         accessor: "percentEmpty",
-        Cell: NumericCellFactory({ suffix: "%" }),
+        Cell: PercentCell,
       },
       {
         Header: "min",

app/src/components/table/PercentCell.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { format } from "d3-format";
 
-const formatter = format(".2%");
+const formatter = format(".2f");
 /**
  * A table cell that nicely formats the value of a percent.
  */
 export function PercentCell({ value }: { value: number | null }) {
   return (
     <span title={value != null ? String(value) : ""}>
-      {value != null ? formatter(value) : "--"}
+      {value != null ? `${formatter(value)}%` : "--"}
     </span>
   );
 }

app/src/components/table/index.tsx

@@ -2,4 +2,3 @@ export * from "./Table";
 export * from "./FloatCell";
 export * from "./IntCell";
 export * from "./PercentCell";
-export * from "./NumericCellFactory";