diff --git a/R/vsc.R b/R/vsc.R
index b6a55d3bf..3b3889b73 100644
--- a/R/vsc.R
+++ b/R/vsc.R
@@ -241,26 +241,38 @@ if (use_httpgd && "httpgd" %in% .packages(all.available = TRUE)) {
 
 show_view <- !identical(getOption("vsc.view", "Two"), FALSE)
 if (show_view) {
-  dataview_data_type <- function(x) {
-    if (is.numeric(x)) {
-      if (is.null(attr(x, "class"))) {
-        "num"
-      } else {
-        "num-fmt"
+  get_column_def <- function(name, field, value) {
+    filter <- TRUE
+    if (is.numeric(value)) {
+      type <- "numericColumn"
+      if (is.null(attr(value, "class"))) {
+        filter <- "agNumberColumnFilter"
       }
-    } else if (inherits(x, "Date")) {
-      "date"
+    } else if (inherits(value, "Date")) {
+      type <- "dateColumn"
+      filter <- "agDateColumnFilter"
     } else {
-      "string"
+      type <- "textColumn"
+      filter <- "agTextColumnFilter"
     }
+    list(
+      headerName = name,
+      field = field,
+      type = type,
+      filter = filter
+    )
   }
 
   dataview_table <- function(data) {
+    if (is.matrix(data)) {
+      data <- as.data.frame.matrix(data)
+    }
+
     if (is.data.frame(data)) {
       nrow <- nrow(data)
       colnames <- colnames(data)
       if (is.null(colnames)) {
-        colnames <- sprintf("(X%d)", seq_len(ncol(data)))
+        colnames <- sprintf("V%d", seq_len(ncol(data)))
       } else {
         colnames <- trimws(colnames)
       }
@@ -270,49 +282,23 @@ if (show_view) {
       } else {
         rownames <- seq_len(nrow)
       }
+      colnames <- c("(row)", colnames)
+      fields <- sprintf("x%d", seq_along(colnames))
       data <- c(list(" " = rownames), .subset(data))
-      colnames <- c(" ", colnames)
-      types <- vapply(data, dataview_data_type,
-        character(1L), USE.NAMES = FALSE)
-      data <- vapply(data, function(x) {
-        trimws(format(x))
-      }, character(nrow), USE.NAMES = FALSE)
-      dim(data) <- c(length(rownames), length(colnames))
-    } else if (is.matrix(data)) {
-      if (is.factor(data)) {
-        data <- format(data)
-      }
-      types <- rep(dataview_data_type(data), ncol(data))
-      colnames <- colnames(data)
-      colnames(data) <- NULL
-      if (is.null(colnames)) {
-        colnames <- sprintf("(X%d)", seq_len(ncol(data)))
-      } else {
-        colnames <- trimws(colnames)
-      }
-      rownames <- rownames(data)
-      rownames(data) <- NULL
-      data <- trimws(format(data))
-      if (is.null(rownames)) {
-        types <- c("num", types)
-        rownames <- seq_len(nrow(data))
-      } else {
-        types <- c("string", types)
-        rownames <- trimws(rownames)
-      }
-      dim(data) <- c(length(rownames), length(colnames))
-      colnames <- c(" ", colnames)
-      data <- cbind(rownames, data)
+      names(data) <- fields
+      class(data) <- "data.frame"
+      attr(data, "row.names") <- .set_row_names(nrow)
+      columns <- .mapply(get_column_def,
+        list(colnames, fields, data),
+        NULL
+      )
+      list(
+        columns = columns,
+        data = data
+      )
     } else {
-      stop("data must be data.frame or matrix")
+      stop("data must be a data.frame or a matrix")
     }
-    columns <- .mapply(function(title, type) {
-      class <- if (type == "string") "text-left" else "text-right"
-      list(title = scalar(title),
-        className = scalar(class),
-        type = scalar(type))
-    }, list(colnames, types), NULL)
-    list(columns = columns, data = data)
   }
 
   show_dataview <- function(x, title, uuid = NULL,
@@ -377,7 +363,7 @@ if (show_view) {
     if (is.data.frame(x) || is.matrix(x)) {
       data <- dataview_table(x)
       file <- tempfile(tmpdir = tempdir, fileext = ".json")
-      jsonlite::write_json(data, file, matrix = "rowmajor")
+      jsonlite::write_json(data, file, auto_unbox = TRUE)
       request("dataview", source = "table", type = "json",
         title = title, file = file, viewer = viewer, uuid = uuid)
     } else if (is.list(x)) {
diff --git a/package.json b/package.json
index 4fd2159d2..5a0c63305 100644
--- a/package.json
+++ b/package.json
@@ -1418,12 +1418,10 @@
     "yamljs": "^0.3.0"
   },
   "dependencies": {
+    "ag-grid-community": "^25.3.0",
     "bootstrap": "^5.0.1",
     "cheerio": "1.0.0-rc.10",
     "crypto": "^1.0.1",
-    "datatables.net": "^1.10.25",
-    "datatables.net-bs4": "^1.10.25",
-    "datatables.net-fixedheader-jqui": "^3.1.9",
     "ejs": "^3.1.6",
     "fs-extra": "^10.0.0",
     "highlight.js": "^10.7.2",
diff --git a/src/session.ts b/src/session.ts
index 527abb075..c266e5d9a 100644
--- a/src/session.ts
+++ b/src/session.ts
@@ -347,51 +347,165 @@ export async function showDataView(source: string, type: string, title: string,
 export async function getTableHtml(webview: Webview, file: string): Promise<string> {
     resDir = isGuestSession ? guestResDir : resDir;
     const content = await readContent(file, 'utf8');
-
     return `
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'bootstrap.min.css'))))}" rel="stylesheet">
-  <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'dataTables.bootstrap4.min.css'))))}" rel="stylesheet">
-  <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'fixedHeader.jqueryui.min.css'))))}" rel="stylesheet">
-  <style type="text/css">
+  <style media="only screen">
+    html, body {
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        box-sizing: border-box;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    html {
+        position: absolute;
+        top: 0;
+        left: 0;
+        padding: 0;
+        overflow: auto;
+    }
+
     body {
-        color: black;
-        background-color: white;
+        padding: 0;
+        overflow: auto;
+    }
+
+    /* Styling for wrapper and header */
+
+    [class*="vscode"] div.ag-root-wrapper {
+        background-color: var(--vscode-editor-background);
+    }
+
+    [class*="vscode"] div.ag-header {
+        background-color: var(--vscode-sideBar-background);
+    }
+
+    [class*="vscode"] div.ag-header-cell[aria-sort="ascending"], div.ag-header-cell[aria-sort="descending"] {
+        color: var(--vscode-textLink-activeForeground);
     }
-    table {
-        font-size: 0.75em;
+
+    /* Styling for rows and cells */
+
+    [class*="vscode"] div.ag-row {
+        color: var(--vscode-editor-foreground);
+    }
+
+    [class*="vscode"] .ag-row-hover {
+        background-color: var(--vscode-list-hoverBackground) !important;
+        color: var(--vscode-list-hoverForeground);
+    }
+
+    [class*="vscode"] .ag-row-selected {
+        background-color: var(--vscode-editor-selectionBackground) !important;
+        color: var(--vscode-editor-selectionForeground) !important;
+    }
+
+    [class*="vscode"] div.ag-row-even {
+        border: 0px;
+        background-color: var(--vscode-editor-background);
+    }
+
+    [class*="vscode"] div.ag-row-odd {
+        border: 0px;
+        background-color: var(--vscode-sideBar-background);
+    }
+
+    [class*="vscode"] div.ag-ltr div.ag-has-focus div.ag-cell-focus:not(div.ag-cell-range-selected) {
+        border-color: var(--vscode-editorCursor-foreground);
+    }
+
+    /* Styling for the filter pop-up */
+
+    [class*="vscode"] div.ag-menu {
+        background-color: var(--vscode-notifications-background);
+        color: var(--vscode-notifications-foreground);
+        border-color: var(--vscode-notifications-border);
+    }
+
+    [class*="vscode"] div.ag-filter-apply-panel-button {
+        background-color: var(--vscode-button-background);
+        color: var(--vscode-button-foreground);
+        border: 0;
+        padding: 5px 10px;
+        font-size: 12px;
+    }
+
+    [class*="vscode"] div.ag-picker-field-wrapper {
+        background-color: var(--vscode-editor-background);
+        color: var(--vscode-editor-foreground);
+        border-color: var(--vscode-notificationCenter-border);
+    }
+
+    [class*="vscode"] input[class^=ag-] {
+        border-color: var(--vscode-notificationCenter-border) !important;
     }
   </style>
-</head>
-<body>
-  <div class="container-fluid">
-    <table id="data-table" class="display table table-sm table-striped table-condensed table-hover"></table>
-  </div>
-  <script src="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'jquery.min.js'))))}"></script>
-  <script src="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'jquery.dataTables.min.js'))))}"></script>
-  <script src="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'dataTables.bootstrap4.min.js'))))}"></script>
-  <script src="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'dataTables.fixedHeader.min.js'))))}"></script>
-  <script src="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'fixedHeader.jqueryui.min.js'))))}"></script>
+  <script src="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'ag-grid-community.min.noStyle.js'))))}"></script>
+  <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'ag-grid.min.css'))))}" rel="stylesheet">
+  <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'ag-theme-balham.min.css'))))}" rel="stylesheet">
+  <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'ag-theme-balham-dark.min.css'))))}" rel="stylesheet">
   <script>
-    var data = ${String(content)};
-    $(document).ready(function () {
-      $("#data-table").DataTable({
-        data: data.data,
-        columns: data.columns,
-        paging: false,
-        autoWidth: false,
-        order: [],
-        fixedHeader: true
-      });
-      $("#data-table tbody").on("click", "tr", function() {
-        $(this).toggleClass("table-active");
+    const data = ${String(content)};
+    function updateTheme() {
+        const gridDiv = document.querySelector('#myGrid');
+        if (document.body.classList.contains('vscode-light')) {
+            gridDiv.className = 'ag-theme-balham';
+        } else {
+            gridDiv.className = 'ag-theme-balham-dark';
+        }
+    }
+    function autoSizeAll(skipHeader) {
+      var allColumnIds = [];
+      gridOptions.columnApi.getAllColumns().forEach(function (column) {
+        allColumnIds.push(column.colId);
       });
+      gridOptions.columnApi.autoSizeColumns(allColumnIds, skipHeader);
+    }
+    const gridOptions = {
+      defaultColDef: {
+        sortable: true,
+        resizable: true,
+        filter: true,
+        filterParams: {
+          buttons: ['reset', 'apply']
+        }
+      },
+      columnDefs: data.columns,
+      rowData: data.data,
+      rowSelection: 'multiple',
+      pagination: true,
+      enableCellTextSelection: true,
+      ensureDomOrder: true,
+      onGridReady: function (params) {
+        gridOptions.api.sizeColumnsToFit();
+        autoSizeAll(false);
+      }
+    };
+    document.addEventListener('DOMContentLoaded', () => {
+      const gridDiv = document.querySelector('#myGrid');
+      new agGrid.Grid(gridDiv, gridOptions);
     });
+    function onload() {
+        updateTheme();
+        const observer = new MutationObserver(function (event) {
+            updateTheme();
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+            childList: false,
+            characterData: false
+        });
+    }
   </script>
+</head>
+<body onload='onload()'>
+  <div id="myGrid" style="height: 100%;"></div>
 </body>
 </html>
 `;
@@ -412,11 +526,42 @@ export async function getListHtml(webview: Webview, file: string): Promise<strin
   <link href="${String(webview.asWebviewUri(Uri.file(path.join(resDir, 'jquery.json-viewer.css'))))}" rel="stylesheet">
   <style type="text/css">
     body {
-        color: black;
-        background-color: white;
+        color: var(--vscode-editor-foreground);
+        background-color: var(--vscode-editor-background);
+    }
+
+    .json-document {
+        padding: 0 0;
     }
+
     pre#json-renderer {
-      border: 1px solid #aaa;
+        font-family: var(--vscode-editor-font-family);
+        border: 0;
+    }
+
+    ul.json-dict, ol.json-array {
+        color: var(--vscode-symbolIcon-fieldForeground);
+        border-left: 1px dotted var(--vscode-editorLineNumber-foreground);
+    }
+
+    .json-literal {
+        color: var(--vscode-symbolIcon-variableForeground);
+    }
+
+    .json-string {
+        color: var(--vscode-symbolIcon-stringForeground);
+    }
+
+    a.json-toggle:before {
+        color: var(--vscode-button-secondaryBackground);
+    }
+
+    a.json-toggle:hover:before {
+        color: var(--vscode-button-secondaryHoverBackground);
+    }
+
+    a.json-placeholder {
+        color: var(--vscode-input-placeholderForeground);
     }
   </style>
   <script>
diff --git a/webpack.config.js b/webpack.config.js
index f392fe6be..499fcba4d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -42,14 +42,10 @@ module.exports = {
       patterns: [
       { from: './node_modules/jquery/dist/jquery.min.js', to: 'resources' },
       { from: './node_modules/jquery.json-viewer/json-viewer', to: 'resources' },
-      { from: './node_modules/bootstrap/dist/js/bootstrap.min.js', to: 'resources' },
-      { from: './node_modules/bootstrap/dist/css/bootstrap.min.css', to: 'resources' },
-      { from: './node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js', to: 'resources' },
-      { from: './node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css', to: 'resources' },
-      { from: './node_modules/datatables.net/js/jquery.dataTables.min.js', to: 'resources' },
-      { from: './node_modules/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js', to: 'resources' },
-      { from: './node_modules/datatables.net-fixedheader-jqui/js/fixedHeader.jqueryui.min.js', to: 'resources' },
-      { from: './node_modules/datatables.net-fixedheader-jqui/css/fixedHeader.jqueryui.min.css', to: 'resources' },
+      { from: './node_modules/ag-grid-community/dist/ag-grid-community.min.noStyle.js', to: 'resources' },
+      { from: './node_modules/ag-grid-community/dist/styles/ag-grid.min.css', to: 'resources' },
+      { from: './node_modules/ag-grid-community/dist/styles/ag-theme-balham.min.css', to: 'resources' },
+      { from: './node_modules/ag-grid-community/dist/styles/ag-theme-balham-dark.min.css', to: 'resources' },
     ]
   }),
   ],
diff --git a/yarn.lock b/yarn.lock
index 7df4af411..cc7890726 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -510,6 +510,11 @@ acorn@^8.2.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.4.0.tgz#af53266e698d7cffa416714b503066a82221be60"
   integrity sha512-ULr0LDaEqQrMFGyQ3bhJkLsbtrQ8QibAseGZeaSUiT/6zb9IvIkomWHJIvgvwad+hinRAgsI51JcWk2yvwyL+w==
 
+ag-grid-community@^25.3.0:
+  version "25.3.0"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-25.3.0.tgz#9a0acce6d35f0c23313aa559dbd8acd737d5ef19"
+  integrity sha512-Xe4NZG0PP9kvhila1uHU4BeVfLDCWBmcuBYLBZ+49jvK+jYpuwdAjV3AwIlxpZGRR3WTdBUvUkSz9rmi2DRE3Q==
+
 agent-base@6:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
@@ -934,46 +939,6 @@ css-what@^5.0.0, css-what@^5.0.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
   integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
 
-datatables.net-bs4@^1.10.25:
-  version "1.10.25"
-  resolved "https://registry.yarnpkg.com/datatables.net-bs4/-/datatables.net-bs4-1.10.25.tgz#4474d6738bf55a25d20da79afe18e1e654cfca42"
-  integrity sha512-leoiWJWxoPKHBNC9dkFRE84PRybQcAI2Aw4UiS5zisROcYRx8YG1uQOTtID4jbqakmbwwXap/c2eH+sdVP5t2w==
-  dependencies:
-    datatables.net "1.10.25"
-    jquery ">=1.7"
-
-datatables.net-fixedheader-jqui@^3.1.9:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/datatables.net-fixedheader-jqui/-/datatables.net-fixedheader-jqui-3.1.9.tgz#371276806d37f400d06b35a06cf4e1f5bd8481f9"
-  integrity sha512-gHIZjPlrRAPlgmj/aoH2F17OQN95LJmyui+QMUT6zW7LCC6Kavob5nf34sbcbytCKlErny9Lqr6PoMR5KBooBQ==
-  dependencies:
-    datatables.net-fixedheader "3.1.9"
-    datatables.net-jqui "^1.10.15"
-    jquery ">=1.7"
-
-datatables.net-fixedheader@3.1.9:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/datatables.net-fixedheader/-/datatables.net-fixedheader-3.1.9.tgz#fadadcd1b4f84cdfd68c8c40418585784b412c8d"
-  integrity sha512-pK73vpfuafF6ZVox3/xuaNyk/TgDK4/0DFjHbhvxjzjWMn4s3LT1Q8g22hHGZ86VsSjyIwzI4iBKG1RMdksK4A==
-  dependencies:
-    datatables.net "^1.10.15"
-    jquery ">=1.7"
-
-datatables.net-jqui@^1.10.15:
-  version "1.10.25"
-  resolved "https://registry.yarnpkg.com/datatables.net-jqui/-/datatables.net-jqui-1.10.25.tgz#64f39a177c974261615beffa100d14d603427f43"
-  integrity sha512-ZbvXcERmYV6k9AhZxYgYUMFgnHAaeWWahtweHPc90Ey+tysD+M9ywbfefFTbh0i1Kd6e5tYZ/kai2Nz/WvsfOQ==
-  dependencies:
-    datatables.net "1.10.25"
-    jquery ">=1.7"
-
-datatables.net@1.10.25, datatables.net@^1.10.15, datatables.net@^1.10.25:
-  version "1.10.25"
-  resolved "https://registry.yarnpkg.com/datatables.net/-/datatables.net-1.10.25.tgz#fc03a239e08f91d1d64ba101aa54daf4086d162c"
-  integrity sha512-y0+C7all+MC/h1acwnjErhaJPjYGKpWTvbXrfEUbR8+P+nnhgjNn5nL1udgsTwBObMhlj1KITNBRrM/ZLSoj+Q==
-  dependencies:
-    jquery ">=1.7"
-
 debug@4, debug@4.3.1, debug@^4.0.1, debug@^4.1.1, debug@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -1746,7 +1711,7 @@ jquery.json-viewer@^1.4.0:
   resolved "https://registry.yarnpkg.com/jquery.json-viewer/-/jquery.json-viewer-1.4.0.tgz#6e0ede8ae3239cb20ac359f663b9aae4ec8a9d94"
   integrity sha512-6H1U/w+/8vMwDH5Im0OveuKPZ1fZWy7hgvR3Cn+HeamQIoWrVqBuRaE2TF/xEc6Hmi3vhQVRqZBmYGKTdOo2tw==
 
-jquery@>=1.7, jquery@^3.6.0:
+jquery@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
   integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==