diff --git a/front_end/component_docs/data_grid_controller/BUILD.gn b/front_end/component_docs/data_grid_controller/BUILD.gn
index 7ed346d764..313f26d30b 100644
--- a/front_end/component_docs/data_grid_controller/BUILD.gn
+++ b/front_end/component_docs/data_grid_controller/BUILD.gn
@@ -3,6 +3,22 @@
 # found in the LICENSE file.
 
 import("../../../scripts/build/ninja/copy.gni")
+import("../../../third_party/typescript/typescript.gni")
+
+ts_library("ts") {
+  sources = [
+    "basic.ts",
+    "custom-context-menu-items.ts",
+    "filter.ts",
+  ]
+
+  deps = [
+    "../../../test/unittests/front_end/helpers",
+    "../../component_helpers:bundle",
+    "../../text_utils:bundle",
+    "../../ui/components:bundle",
+  ]
+}
 
 copy_to_gen("data_grid_controller") {
   sources = [
@@ -11,9 +27,5 @@ copy_to_gen("data_grid_controller") {
     "filter.html",
   ]
 
-  deps = [
-    "../../component_helpers:bundle",
-    "../../text_utils:bundle",
-    "../../ui/components:bundle",
-  ]
+  deps = [ ":ts" ]
 }
diff --git a/front_end/component_docs/data_grid_controller/basic.html b/front_end/component_docs/data_grid_controller/basic.html
index 48c5549e3c..01f5a010db 100644
--- a/front_end/component_docs/data_grid_controller/basic.html
+++ b/front_end/component_docs/data_grid_controller/basic.html
@@ -23,34 +23,6 @@
     <div id="container">
     </div>
 
-    <script type="module">
-      import * as EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-      import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
-      import * as Components from '../../ui/components/components.js';
-
-      EnvironmentHelpers.initializeGlobalVars().then(() => {
-        return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
-      })
-
-      const renderComponent = () => {
-        const component = new Components.DataGridController.DataGridController();
-
-        component.data = {
-          columns: [
-            { id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
-            { id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: true, sortable: true },
-          ],
-          rows: [
-            // Each key is the ID of a column, and the value is the value for that column
-            {cells: [{ columnId: 'key', value: 'Bravo', title: 'Bravo'}, { columnId: 'value', value: 'Letter B'}] },
-            {cells: [{ columnId: 'key', value: 'Alpha', title: 'Alpha'}, { columnId: 'value', value: 'Letter A'}] },
-            {cells: [{ columnId: 'key', value: 'Charlie', title: 'Charlie'}, { columnId: 'value', value: 'Letter C'}] },
-          ],
-        }
-
-        document.getElementById('container').appendChild(component)
-      }
-
-    </script>
+    <script type="module" src="./basic.js"></script>
   </body>
 </html>
diff --git a/front_end/component_docs/data_grid_controller/basic.ts b/front_end/component_docs/data_grid_controller/basic.ts
new file mode 100644
index 0000000000..9b517e3869
--- /dev/null
+++ b/front_end/component_docs/data_grid_controller/basic.ts
@@ -0,0 +1,30 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
+import * as Components from '../../ui/components/components.js';
+
+EnvironmentHelpers.initializeGlobalVars().then(() => {
+  return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent());
+});
+
+const renderComponent = (): void => {
+  const component = new Components.DataGridController.DataGridController();
+
+  component.data = {
+    columns: [
+      {id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
+      {id: 'value', title: 'Value', sortable: true, widthWeighting: 1, visible: true, hideable: true},
+    ],
+    rows: [
+      // Each key is the ID of a column, and the value is the value for that column
+      {cells: [{columnId: 'key', value: 'Bravo', title: 'Bravo'}, {columnId: 'value', value: 'Letter B'}]},
+      {cells: [{columnId: 'key', value: 'Alpha', title: 'Alpha'}, {columnId: 'value', value: 'Letter A'}]},
+      {cells: [{columnId: 'key', value: 'Charlie', title: 'Charlie'}, {columnId: 'value', value: 'Letter C'}]},
+    ],
+  };
+
+  document.getElementById('container')?.appendChild(component);
+};
diff --git a/front_end/component_docs/data_grid_controller/custom-context-menu-items.html b/front_end/component_docs/data_grid_controller/custom-context-menu-items.html
index 8efe37f944..5c96c0e5f8 100644
--- a/front_end/component_docs/data_grid_controller/custom-context-menu-items.html
+++ b/front_end/component_docs/data_grid_controller/custom-context-menu-items.html
@@ -23,41 +23,6 @@
     <div id="container">
     </div>
 
-    <script type="module">
-      import * as EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
-      import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
-      import * as Components from '../../ui/components/components.js';
-
-      EnvironmentHelpers.initializeGlobalVars().then(() => {
-        return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
-      })
-
-      const renderComponent = () => {
-        const component = new Components.DataGridController.DataGridController();
-
-        component.data = {
-          columns: [
-            { id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
-            { id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: true, sortable: true },
-          ],
-          rows: [
-            // Each key is the ID of a column, and the value is the value for that column
-            {cells: [{ columnId: 'key', value: 'Bravo', title: 'Bravo'}, { columnId: 'value', value: 'Letter B'}] },
-            {cells: [{ columnId: 'key', value: 'Alpha', title: 'Alpha'}, { columnId: 'value', value: 'Letter A'}] },
-            {cells: [{ columnId: 'key', value: 'Charlie', title: 'Charlie'}, { columnId: 'value', value: 'Letter C'}] },
-          ],
-          contextMenus: {
-            bodyRow: (menu, columns, selectedRow) => {
-              menu.defaultSection().appendItem('Hello World', () => {
-                alert('You clicked!')
-              })
-            }
-          }
-        }
-
-        document.getElementById('container').appendChild(component)
-      }
-
-    </script>
+    <script type="module" src="./custom-context-menu-items.js"></script>
   </body>
 </html>
diff --git a/front_end/component_docs/data_grid_controller/custom-context-menu-items.ts b/front_end/component_docs/data_grid_controller/custom-context-menu-items.ts
new file mode 100644
index 0000000000..c5baf17f04
--- /dev/null
+++ b/front_end/component_docs/data_grid_controller/custom-context-menu-items.ts
@@ -0,0 +1,37 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as EnvironmentHelpers from '../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
+import * as Components from '../../ui/components/components.js';
+
+EnvironmentHelpers.initializeGlobalVars().then(() => {
+  return ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent());
+});
+
+const renderComponent = (): void => {
+  const component = new Components.DataGridController.DataGridController();
+
+  component.data = {
+    columns: [
+      {id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
+      {id: 'value', title: 'Value', sortable: true, widthWeighting: 1, visible: true, hideable: true},
+    ],
+    rows: [
+      // Each key is the ID of a column, and the value is the value for that column
+      {cells: [{columnId: 'key', value: 'Bravo', title: 'Bravo'}, {columnId: 'value', value: 'Letter B'}]},
+      {cells: [{columnId: 'key', value: 'Alpha', title: 'Alpha'}, {columnId: 'value', value: 'Letter A'}]},
+      {cells: [{columnId: 'key', value: 'Charlie', title: 'Charlie'}, {columnId: 'value', value: 'Letter C'}]},
+    ],
+    contextMenus: {
+      bodyRow: (menu): void => {
+        menu.defaultSection().appendItem('Hello World', () => {
+          alert('You clicked!');
+        });
+      },
+    },
+  };
+
+  document.getElementById('container')?.appendChild(component);
+};
diff --git a/front_end/component_docs/data_grid_controller/filter.html b/front_end/component_docs/data_grid_controller/filter.html
index 2e101efa85..b724705744 100644
--- a/front_end/component_docs/data_grid_controller/filter.html
+++ b/front_end/component_docs/data_grid_controller/filter.html
@@ -30,44 +30,6 @@
       <input type="text" placeholder="filter text" />
     </div>
 
-    <script type="module">
-      import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
-      import * as Components from '../../ui/components/components.js';
-      import * as TextUtils from '../../text_utils/text_utils.js';
-
-      ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent())
-
-      const renderComponent = () => {
-        const component = new Components.DataGridController.DataGridController();
-
-        const filterParser = new TextUtils.TextUtils.FilterParser(['key', 'value'])
-
-        component.data = {
-          columns: [
-            { id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false },
-            { id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: false },
-          ],
-          rows: [
-            // Each key is the ID of a column, and the value is the value for that column
-            {cells: [{ columnId: 'key', value: 'Bravo', title: 'Bravo'}, { columnId: 'value', value: 'foobar', title: 'foobar'}]},
-            {cells: [{ columnId: 'key', value: 'Alpha', title: 'Alpha'}, { columnId: 'value', value: 'bazbar', title: 'bazbar'}]},
-            {cells: [{ columnId: 'key', value: 'Charlie', title: 'Charlie'}, { columnId: 'value', value: 'bazbar', title: 'bazbar'}]},
-          ]
-        }
-
-        document.getElementById('container').appendChild(component)
-
-        const filterTextInput = document.querySelector('input');
-        filterTextInput.addEventListener('input', event => {
-          const newText = event.target.value;
-          const filters = filterParser.parse(newText);
-          component.data = {
-            ...component.data,
-            filters: filters
-          }
-        })
-      }
-
-    </script>
+    <script type="module" src="./filter.js"></script>
   </body>
 </html>
diff --git a/front_end/component_docs/data_grid_controller/filter.ts b/front_end/component_docs/data_grid_controller/filter.ts
new file mode 100644
index 0000000000..fffd19d5e8
--- /dev/null
+++ b/front_end/component_docs/data_grid_controller/filter.ts
@@ -0,0 +1,51 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as ComponentHelpers from '../../component_helpers/component_helpers.js';
+import * as TextUtils from '../../text_utils/text_utils.js';
+import * as Components from '../../ui/components/components.js';
+
+ComponentHelpers.ComponentServerSetup.setup().then(() => renderComponent());
+
+const renderComponent = (): void => {
+  const component = new Components.DataGridController.DataGridController();
+
+  const filterParser = new TextUtils.TextUtils.FilterParser(['key', 'value']);
+
+  component.data = {
+    columns: [
+      {id: 'key', title: 'Key', sortable: true, widthWeighting: 1, visible: true, hideable: false},
+      {id: 'value', title: 'Value', sortable: false, widthWeighting: 1, visible: true, hideable: false},
+    ],
+    rows: [
+      // Each key is the ID of a column, and the value is the value for that column
+      {
+        cells:
+            [{columnId: 'key', value: 'Bravo', title: 'Bravo'}, {columnId: 'value', value: 'foobar', title: 'foobar'}],
+      },
+      {
+        cells:
+            [{columnId: 'key', value: 'Alpha', title: 'Alpha'}, {columnId: 'value', value: 'bazbar', title: 'bazbar'}],
+      },
+      {
+        cells: [
+          {columnId: 'key', value: 'Charlie', title: 'Charlie'},
+          {columnId: 'value', value: 'bazbar', title: 'bazbar'},
+        ],
+      },
+    ],
+  };
+
+  document.getElementById('container')?.appendChild(component);
+
+  const filterTextInput = document.querySelector('input');
+  filterTextInput?.addEventListener('input', event => {
+    const newText = (event.target as HTMLInputElement).value;
+    const filters = filterParser.parse(newText);
+    component.data = {
+      ...component.data,
+      filters: filters,
+    };
+  });
+};