Make column renderer use the same type as its key

code-asher · code-asher · commit d5eb87f4b6bb · 2022-05-11T14:17:05.000-05:00
That way the renderer only takes `string` for example when rendering the
name field instead of `string | number` when the interface has some
fields that are strings and some fields are numbers.

This will be necessary when switching to generated types since some of
the fields are numbers (like the owner count on a template).
diff --git a/site/src/components/Table/Table.tsx b/site/src/components/Table/Table.tsx
@@ -8,20 +8,22 @@ import React from "react"
 import { TableHeaders } from "../TableHeaders/TableHeaders"
 import { TableTitle } from "../TableTitle/TableTitle"
 
-export interface Column<T> {
-  /**
-   * The field of type T that this column is associated with
-   */
-  key: keyof T
-  /**
-   * Friendly name of the field, shown in headers
-   */
-  name: string
-  /**
-   * Custom render for the field inside the table
-   */
-  renderer?: (field: T[keyof T], data: T) => React.ReactElement
-}
+export type Column<T> = {
+  [K in keyof T]: {
+    /**
+     * The field of type T that this column is associated with
+     */
+    key: K
+    /**
+     * Friendly name of the field, shown in headers
+     */
+    name: string
+    /**
+     * Custom render for the field inside the table
+     */
+    renderer?: (field: T[K], data: T) => React.ReactElement
+  }
+}[keyof T]
 
 export interface TableProps<T> {
   /**
