diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index c22f2c1dea..9815aa9452 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -4,6 +4,7 @@
   import { booleanRenderer } from "./customRenderer"
 
   const setters = new Map([["number", number]])
+  const renderers = new Map([["boolean", booleanRenderer]])
 
   import fetchData from "../fetchData.js"
   import { isEmpty } from "lodash/fp"
@@ -36,8 +37,7 @@
             hide: shouldHideField(key),
             sortable: true,
             editable: schema[key].type !== "boolean",
-            cellRenderer:
-              schema[key].type === "boolean" ? booleanRenderer : null,
+            cellRenderer: renderers.get(schema[key].type),
           }
         })
       }
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index bd56137c0b..e6ea207c0b 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -1,3 +1,6 @@
+// Custom renderers to handle special types
+// https://www.ag-grid.com/javascript-grid-cell-rendering-components/
+
 export const booleanRenderer = (params) => {
     const toggle = (e) => {
         params.value = !params.value