diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte
index 4ab465bfbc..ce5c58aa93 100644
--- a/packages/standard-components/src/DataGrid/Component.svelte
+++ b/packages/standard-components/src/DataGrid/Component.svelte
@@ -1,14 +1,10 @@
 <script>
   // Import valueSetters and custom renderers
   import { number } from "./valueSetters"
-  import { booleanRenderer, attachmentRenderer } from "./customRenderer"
+  import renderers from "./customRenderer"
 
   // These maps need to be set up to handle whatever types that are used in the models.
   const setters = new Map([["number", number]])
-  const renderers = new Map([
-    ["boolean", booleanRenderer],
-    ["attachment", attachmentRenderer],
-  ])
 
   import fetchData from "../fetchData.js"
   import { isEmpty } from "lodash/fp"
diff --git a/packages/standard-components/src/DataGrid/customRenderer.js b/packages/standard-components/src/DataGrid/customRenderer.js
index 3d5966aeb0..3869aa9c29 100644
--- a/packages/standard-components/src/DataGrid/customRenderer.js
+++ b/packages/standard-components/src/DataGrid/customRenderer.js
@@ -2,8 +2,15 @@
 // https://www.ag-grid.com/javascript-grid-cell-rendering-components/
 
 import AttachmentCell from './AttachmentCell/Button.svelte'
+import { DatePicker } from "@budibase/bbui"
 
-export const booleanRenderer = (params) => {
+export default new Map([
+    ["boolean", booleanRenderer],
+    ["attachment", attachmentRenderer],
+    ["datetime", dateRenderer],
+])
+
+function booleanRenderer(params) {
     const toggle = (e) => {
         params.value = !params.value
         params.setValue(e.currentTarget.checked)
@@ -15,15 +22,27 @@ export const booleanRenderer = (params) => {
 
     return input
 }
-export const attachmentRenderer = (params) => {
-    let container = document.createElement("div")
+function attachmentRenderer(params) {
+    const container = document.createElement("div")
 
-    const attachment = new AttachmentCell({
+    const attachmentInstance = new AttachmentCell({
         target: container,
         props: {
             files: params.value || [],
         }
     });
 
+    return container
+}
+function dateRenderer(params) {
+    const container = document.createElement("div")
+
+    const datePickerInstance = new DatePicker({
+        target: container,
+        props: {
+            value: params.value,
+        }
+    });
+
     return container
 }
\ No newline at end of file