diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e4e672f468..74817086f6 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -1186,14 +1186,13 @@ jobs:
         runs-on: ${{ matrix.os }}
         needs: [initialize]
         env:
-            # NOTA BENE: When upgrading past 0.24.1, remove workaround below for https://github.com/pyodide/pyodide/issues/4216
-            PYODIDE_VERSION: 0.24.1
+            PYODIDE_VERSION: 0.25.0
             # PYTHON_VERSION and EMSCRIPTEN_VERSION are determined by PYODIDE_VERSION.
             # The appropriate versions can be found in the Pyodide repodata.json
             # "info" field, or in Makefile.envs:
-            # https://github.com/pyodide/pyodide/blob/main/Makefile.envs#L2
+            # https://github.com/pyodide/pyodide/blob/0.25.0/Makefile.envs#L2
             PYTHON_VERSION: 3.11.3
-            EMSCRIPTEN_VERSION: 3.1.45
+            EMSCRIPTEN_VERSION: 3.1.46
         steps:
             - name: Checkout perspective
               uses: actions/checkout@8e5e7e5ab8b370d6c329ec480221332ada57f0ab # v3.5.2
@@ -1221,16 +1220,6 @@ jobs:
             - name: Install pyodide-build
               run: pip install pyodide-build==$PYODIDE_VERSION "pydantic<2"
 
-            # NOTA BENE: When removing this step, also remove the vendored pyodide file
-            - name: Provision workaround for bug in Pyodide 0.24.1
-              run: |
-                  PYTHON_HOME="$(python -c 'import sys; print(sys.prefix)')"
-                  TOOLCHAIN_DIR="$PYTHON_HOME/lib/python3.11/site-packages/pyodide_build/tools/cmake/Modules/Platform"
-                  echo "$PYTHON_HOME"
-                  echo "$TOOLCHAIN_DIR"
-                  mkdir -p "$TOOLCHAIN_DIR"
-                  cp vendor/pyodide/Emscripten.cmake "$TOOLCHAIN_DIR"
-
             - name: Build
               # Without --exports=pyinit, pyodide-build tries to export all symbols from every .o,
               # which causes the em++ linker command line invocation to be so long
diff --git a/CHANGELOG.md b/CHANGELOG.md
index eaa6637215..e161aee09f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+# [v2.9.0](https://github.com/finos/perspective/releases/tag/v2.9.0)
+
+_12 March 2024_ ([Full changelog](https://github.com/finos/perspective/compare/v2.8.1...v2.9.0))
+
+**Breaking**
+
+- Formatting for `float` and `integer` columns via `Intl.NumberFormat` [#2563](https://github.com/finos/perspective/pull/2563)
+
+Features
+
+- Localization Support [#2565](https://github.com/finos/perspective/pull/2565)
+
+Fixes
+
+- Fix get_hosted_table_names in Python client [#2551](https://github.com/finos/perspective/pull/2551)
+- Fix Candlestick & OHLC charts [#2562](https://github.com/finos/perspective/pull/2562)
+
+Misc
+
+- Update Pyodide to version 0.25.0 [#2547](https://github.com/finos/perspective/pull/2547)
+
 # [v2.8.1](https://github.com/finos/perspective/releases/tag/v2.8.1)
 
 _26 February 2024_ ([Full changelog](https://github.com/finos/perspective/compare/v2.8.0...v2.8.1))
@@ -8,6 +29,7 @@ Fixes
 
 Misc
 
+- Update to LLVM 17 & fix Python/Windows build [#2546](https://github.com/finos/perspective/pull/2546)
 - Add `clang-format`, `clang-tidy` and `clangd` support for C++ development [#2541](https://github.com/finos/perspective/pull/2541)
 - Add Docs Tests [#2502](https://github.com/finos/perspective/pull/2502)
 - Add workspaceFolder to cargo_target_dir [#2537](https://github.com/finos/perspective/pull/2537)
diff --git a/cpp/perspective/package.json b/cpp/perspective/package.json
index b97b33c36d..a5e1b9cc25 100644
--- a/cpp/perspective/package.json
+++ b/cpp/perspective/package.json
@@ -3,7 +3,7 @@
     "private": true,
     "author": "The Perspective Authors",
     "license": "Apache-2.0",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "main": "./dist/esm/perspective.cpp.js",
     "files": [
         "dist/esm/**/*",
diff --git a/docs/package.json b/docs/package.json
index ed89a996e8..80254bc865 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-docs",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "private": true,
     "scripts": {
         "docusaurus": "docusaurus",
@@ -16,13 +16,13 @@
     "dependencies": {
         "@docusaurus/core": "2.2.0",
         "@docusaurus/preset-classic": "2.2.0",
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "@mdx-js/react": "^1.6.22",
-        "blocks": "^2.8.1",
+        "blocks": "^2.9.0",
         "clsx": "^1.1.1",
         "prism-react-renderer": "^1.3.3",
         "react": "^17.0.2",
diff --git a/examples/blocks/package.json b/examples/blocks/package.json
index daba118f92..5b4ef72493 100644
--- a/examples/blocks/package.json
+++ b/examples/blocks/package.json
@@ -1,7 +1,7 @@
 {
     "name": "blocks",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "A collection of simple client-side Perspective examples for `http://bl.ocks.org`.",
     "scripts": {
         "start": "mkdirp dist && node server.mjs"
@@ -10,12 +10,12 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-viewer-openlayers": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-viewer-openlayers": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0",
         "superstore-arrow": "3.0.0"
     },
     "devDependencies": {
diff --git a/examples/blocks/src/streaming/streaming.js b/examples/blocks/src/streaming/streaming.js
index e259a32d42..65661c5431 100644
--- a/examples/blocks/src/streaming/streaming.js
+++ b/examples/blocks/src/streaming/streaming.js
@@ -75,15 +75,15 @@ window.addEventListener("DOMContentLoaded", async function () {
     elem.restore({
         plugin: "Datagrid",
         plugin_config: {
-            columns: {
-                "(+)chg": { fg_gradient: 7.93, number_fg_mode: "bar" },
-                "(-)chg": { fg_gradient: 8.07, number_fg_mode: "bar" },
-                chg: { bg_gradient: 9.97, number_bg_mode: "gradient" },
-            },
             editable: false,
             scroll_lock: true,
         },
         settings: true,
+        columns_config: {
+            "(+)chg": { fg_gradient: 7.93, number_fg_mode: "bar" },
+            "(-)chg": { fg_gradient: 8.07, number_fg_mode: "bar" },
+            chg: { bg_gradient: 9.97, number_bg_mode: "gradient" },
+        },
         theme: "Pro Light",
         group_by: ["name"],
         split_by: ["client"],
diff --git a/examples/blocks/src/webcam/layouts.json b/examples/blocks/src/webcam/layouts.json
index 4abd2da152..302c07c5c9 100644
--- a/examples/blocks/src/webcam/layouts.json
+++ b/examples/blocks/src/webcam/layouts.json
@@ -1,17 +1,16 @@
 [
     {
         "plugin": "Datagrid",
+        "columns_config": {
+            "color": {
+                "bg_gradient": 251.04,
+                "neg_bg_color": "#ffa38f",
+                "number_bg_mode": "gradient",
+                "number_fg_mode": "disabled",
+                "pos_bg_color": "#346ead"
+            }
+        },
         "plugin_config": {
-            "columns": {
-                "color": {
-                    "fixed": 0,
-                    "bg_gradient": 251.04,
-                    "neg_bg_color": "#ffa38f",
-                    "number_bg_mode": "gradient",
-                    "number_fg_mode": "disabled",
-                    "pos_bg_color": "#346ead"
-                }
-            },
             "editable": false,
             "scroll_lock": false
         },
@@ -77,16 +76,16 @@
     },
     {
         "plugin": "Datagrid",
+        "columns_config": {
+            "color": {
+                "bg_gradient": 2463.68,
+                "neg_bg_color": "#ffa38f",
+                "number_bg_mode": "gradient",
+                "number_fg_mode": "disabled",
+                "pos_bg_color": "#307bb0"
+            }
+        },
         "plugin_config": {
-            "columns": {
-                "color": {
-                    "bg_gradient": 2463.68,
-                    "neg_bg_color": "#ffa38f",
-                    "number_bg_mode": "gradient",
-                    "number_fg_mode": "disabled",
-                    "pos_bg_color": "#307bb0"
-                }
-            },
             "editable": false,
             "scroll_lock": false
         },
@@ -138,7 +137,6 @@
     {
         "plugin": "Datagrid",
         "plugin_config": {
-            "columns": {},
             "editable": false,
             "scroll_lock": false
         },
diff --git a/examples/blocks/src/webcam/webcam.js b/examples/blocks/src/webcam/webcam.js
index 7aaf48743f..cbb7e4f94b 100644
--- a/examples/blocks/src/webcam/webcam.js
+++ b/examples/blocks/src/webcam/webcam.js
@@ -69,11 +69,16 @@ window.addEventListener("DOMContentLoaded", async function () {
     const viewer = document.querySelector("perspective-viewer");
     viewer.load(table);
     await viewer.restore({ settings, ...layouts[0] });
-    const regular_table = document.querySelector("regular-table");
+    const regular_table = document
+        .querySelector("perspective-viewer-datagrid")
+        .shadowRoot.querySelector("regular-table");
+
     regular_table.scrollTop =
         regular_table.scrollHeight / 2 - regular_table.clientHeight / 2;
+
     regular_table.scrollLeft =
         regular_table.scrollWidth / 2 - regular_table.clientWidth / 2;
+
     for (const layout of layouts) {
         const option = document.createElement("option");
         option.value = layout.title;
diff --git a/examples/esbuild-example/package.json b/examples/esbuild-example/package.json
index 0470422276..a28e334c9a 100644
--- a/examples/esbuild-example/package.json
+++ b/examples/esbuild-example/package.json
@@ -1,7 +1,7 @@
 {
     "name": "esbuild-example",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An esbuild example app built using `@finos/perspective-viewer`.",
     "scripts": {
         "build": "node build.js",
@@ -10,15 +10,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-viewer-openlayers": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-viewer-openlayers": "^2.9.0",
         "superstore-arrow": "^3.0.0"
     },
     "devDependencies": {
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
         "esbuild": "^0.14.54",
         "http-server": "^14.1.1"
     }
diff --git a/examples/esbuild-remote/package.json b/examples/esbuild-remote/package.json
index 5f9f74c58f..8705463fa9 100644
--- a/examples/esbuild-remote/package.json
+++ b/examples/esbuild-remote/package.json
@@ -1,7 +1,7 @@
 {
     "name": "esbuild-remote",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of 2 Perspectives, one client and one server, streaming via Apache Arrow.",
     "scripts": {
         "start": "node build.js && node server/index.mjs"
@@ -9,15 +9,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
         "express": "^4.17.1",
         "express-ws": "^5.0.2"
     },
     "devDependencies": {
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
         "esbuild": "^0.14.54"
     }
 }
diff --git a/examples/git-history/package.json b/examples/git-history/package.json
index 8dcce59b89..3e74e561af 100644
--- a/examples/git-history/package.json
+++ b/examples/git-history/package.json
@@ -1,7 +1,7 @@
 {
     "name": "git-history",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of Perspective's own GIT history rendered in Perspective.",
     "scripts": {
         "start": "node server.js"
@@ -9,9 +9,9 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0"
     }
 }
diff --git a/examples/promo/package.json b/examples/promo/package.json
index 1a16ad21a1..5dcc6b9322 100644
--- a/examples/promo/package.json
+++ b/examples/promo/package.json
@@ -1,7 +1,7 @@
 {
     "name": "promo",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An puppeteer-guided demo of Perspective's functionality, as seen on Github.",
     "scripts": {
         "dev": "webpack-dev-server --open",
@@ -13,14 +13,14 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "http-server": "^14.1.1",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
diff --git a/examples/python-aiohttp/package.json b/examples/python-aiohttp/package.json
index bf758fff1c..76e652f79a 100644
--- a/examples/python-aiohttp/package.json
+++ b/examples/python-aiohttp/package.json
@@ -1,7 +1,7 @@
 {
     "name": "python-aiohttp",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of editing a `perspective-python` server from the browser.",
     "scripts": {
         "start": "PYTHONPATH=../../python/perspective python3 server.py"
@@ -9,15 +9,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0",
         "superstore-arrow": "^3.0.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
     }
diff --git a/examples/python-starlette/package.json b/examples/python-starlette/package.json
index af72968762..bfb0b5af0a 100644
--- a/examples/python-starlette/package.json
+++ b/examples/python-starlette/package.json
@@ -1,7 +1,7 @@
 {
     "name": "python-starlette",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of editing a `perspective-python` server from the browser.",
     "scripts": {
         "start": "PYTHONPATH=../../python/perspective python3 server.py"
@@ -9,15 +9,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0",
         "superstore-arrow": "^3.0.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
     }
diff --git a/examples/python-tornado-streaming/package.json b/examples/python-tornado-streaming/package.json
index 39a8471ed5..6c5ccd5343 100644
--- a/examples/python-tornado-streaming/package.json
+++ b/examples/python-tornado-streaming/package.json
@@ -1,7 +1,7 @@
 {
     "name": "python-tornado-streaming",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of streaming a `perspective-python` server to the browser.",
     "scripts": {
         "start": "PYTHONPATH=../../python/perspective python3 server.py"
@@ -9,15 +9,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0",
         "superstore-arrow": "^3.0.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
     }
diff --git a/examples/python-tornado/package.json b/examples/python-tornado/package.json
index af335f443e..1b75f53953 100644
--- a/examples/python-tornado/package.json
+++ b/examples/python-tornado/package.json
@@ -1,7 +1,7 @@
 {
     "name": "python-tornado",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of editing a `perspective-python` server from the browser.",
     "scripts": {
         "start": "PYTHONPATH=../../python/perspective python3 server.py"
@@ -9,15 +9,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0",
         "superstore-arrow": "^3.0.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
     }
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
index 459248e0d0..9729548168 100644
--- a/examples/react-example/package.json
+++ b/examples/react-example/package.json
@@ -1,7 +1,7 @@
 {
     "name": "react-example",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example app built using `@finos/perspective-viewer`.",
     "scripts": {
         "start": "webpack serve --open",
@@ -10,15 +10,15 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
         "react": "^16.14.0",
         "react-dom": "^16.9.17"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "@types/react": "^16.14.0",
         "@types/react-dom": "^16.9.17",
         "source-map-loader": "^0.2.4",
diff --git a/examples/webpack-cross-origin/package.json b/examples/webpack-cross-origin/package.json
index 321d46a47a..36f97660c1 100644
--- a/examples/webpack-cross-origin/package.json
+++ b/examples/webpack-cross-origin/package.json
@@ -1,7 +1,7 @@
 {
     "name": "webpack-cross-origin",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example of using the Perspective Webpack plugin to build a JS file with Webpack.",
     "scripts": {
         "start": "npm-run-all -l -p webpack-watch host:app host:bundles",
@@ -12,13 +12,13 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "css-loader": "^0.28.7",
         "html-webpack-plugin": "^5.1.0",
         "http-server": "^14.1.1",
diff --git a/examples/webpack-example/package.json b/examples/webpack-example/package.json
index 9cc106579e..fb93e53ba9 100644
--- a/examples/webpack-example/package.json
+++ b/examples/webpack-example/package.json
@@ -1,7 +1,7 @@
 {
     "name": "webpack-example",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example app built using `@finos/perspective-viewer`.",
     "scripts": {
         "build": "webpack",
@@ -10,13 +10,13 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "css-loader": "^0.28.7",
         "html-webpack-plugin": "^5.1.0",
         "style-loader": "^0.18.2",
diff --git a/examples/workspace-editing-python/package.json b/examples/workspace-editing-python/package.json
index dc3b8cf5b7..1d47ac0349 100644
--- a/examples/workspace-editing-python/package.json
+++ b/examples/workspace-editing-python/package.json
@@ -1,7 +1,7 @@
 {
     "name": "workspace-editing-python",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example app demonstrating client/server editing, built using `@finos/perspective-workspace` and `perspective-python`.",
     "scripts": {
         "start": "yarn webpack && yarn start:server",
@@ -12,14 +12,14 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "http-server": "^14.1.1",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
diff --git a/examples/workspace/package.json b/examples/workspace/package.json
index 4aefd9dc1f..bdeb11b20a 100644
--- a/examples/workspace/package.json
+++ b/examples/workspace/package.json
@@ -1,7 +1,7 @@
 {
     "name": "workspace",
     "private": true,
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "An example app built using `@finos/perspective-workspace`.",
     "scripts": {
         "start": "webpack serve --open",
@@ -10,14 +10,14 @@
     "keywords": [],
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0"
     },
     "devDependencies": {
-        "@finos/perspective-webpack-plugin": "^2.8.1",
+        "@finos/perspective-webpack-plugin": "^2.9.0",
         "http-server": "^14.1.1",
         "npm-run-all": "^4.1.3",
         "rimraf": "^2.5.2"
diff --git a/package.json b/package.json
index bed8acf89b..6f55237c65 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
         "type": "git",
         "url": "https://github.com/finos/perspective"
     },
-    "version": "2.8.1",
+    "version": "2.9.0",
     "changelog": {
         "labels": {
             "enhancement": "Added",
diff --git a/packages/perspective-cli/package.json b/packages/perspective-cli/package.json
index d502ce07dc..8d60a0531c 100644
--- a/packages/perspective-cli/package.json
+++ b/packages/perspective-cli/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-cli",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Perspective.js CLI",
     "main": "src/js/index.js",
     "publishConfig": {
@@ -24,12 +24,12 @@
         "perspective": "perspective"
     },
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-viewer-openlayers": "^2.8.1",
-        "@finos/perspective-workspace": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-viewer-openlayers": "^2.9.0",
+        "@finos/perspective-workspace": "^2.9.0",
         "commander": "^2.19.0",
         "puppeteer": "^13.1.3"
     }
diff --git a/packages/perspective-esbuild-plugin/package.json b/packages/perspective-esbuild-plugin/package.json
index eb6488776e..4f97283c53 100644
--- a/packages/perspective-esbuild-plugin/package.json
+++ b/packages/perspective-esbuild-plugin/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-esbuild-plugin",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "esbuild plugin for Perspective",
     "author": "",
     "license": "Apache-2.0",
diff --git a/packages/perspective-jupyterlab/package.json b/packages/perspective-jupyterlab/package.json
index dfe6ad7530..85aa19a76e 100644
--- a/packages/perspective-jupyterlab/package.json
+++ b/packages/perspective-jupyterlab/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-jupyterlab",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "A Jupyterlab extension for the Perspective library, designed to be used with perspective-python.",
     "files": [
         "dist/**/*",
@@ -34,19 +34,19 @@
         "version": "yarn build"
     },
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-viewer-openlayers": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-viewer-openlayers": "^2.9.0",
         "@jupyter-widgets/base": "^2 || ^3 || ^4 || ^5 || ^6",
         "@jupyterlab/application": "^3.6.1",
         "@lumino/application": "^1.27.0",
         "@lumino/widgets": "^1.37.0"
     },
     "devDependencies": {
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
-        "@finos/perspective-test": "^2.8.1",
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
+        "@finos/perspective-test": "^2.9.0",
         "@jupyterlab/builder": "^3.4.0",
         "@prospective.co/procss": "^0.1.15",
         "cpy": "^9.0.1"
diff --git a/packages/perspective-jupyterlab/test/jupyter/widget.spec.js b/packages/perspective-jupyterlab/test/jupyter/widget.spec.js
index 245d6b1bad..1764841b94 100644
--- a/packages/perspective-jupyterlab/test/jupyter/widget.spec.js
+++ b/packages/perspective-jupyterlab/test/jupyter/widget.spec.js
@@ -39,24 +39,18 @@ describe_jupyter(
                 "w",
             ],
             async ({ page }) => {
-                const viewer = await default_body(page);
-                const num_columns = await viewer.evaluate(async (viewer) => {
-                    const tbl = viewer
-                        .querySelector("perspective-viewer-datagrid")
-                        .shadowRoot.querySelector("regular-table");
-                    return tbl.querySelector("thead tr").childElementCount;
-                });
+                await default_body(page);
 
-                expect(num_columns).toEqual(3);
+                const num_columns = await page
+                    .locator("regular-table thead tr")
+                    .first()
+                    .evaluate((tr) => tr.childElementCount);
 
-                const num_rows = await viewer.evaluate(async (viewer) => {
-                    const tbl = viewer
-                        .querySelector("perspective-viewer-datagrid")
-                        .shadowRoot.querySelector("regular-table");
-                    return tbl.querySelectorAll("tbody tr").length;
-                });
+                expect(num_columns).toEqual(3);
 
-                expect(num_rows).toEqual(5);
+                await expect(
+                    page.locator("regular-table tbody tr")
+                ).toHaveCount(5);
             }
         );
 
@@ -71,24 +65,17 @@ describe_jupyter(
                 "table.update(arrow_data)",
             ],
             async ({ page }) => {
-                const viewer = await default_body(page);
-                const num_columns = await viewer.evaluate(async (viewer) => {
-                    const tbl = viewer
-                        .querySelector("perspective-viewer-datagrid")
-                        .shadowRoot.querySelector("regular-table");
-                    return tbl.querySelector("thead tr").childElementCount;
-                });
+                await default_body(page);
+                const num_columns = await page
+                    .locator("regular-table thead tr")
+                    .first()
+                    .evaluate((tr) => tr.childElementCount);
 
                 expect(num_columns).toEqual(3);
 
-                const num_rows = await viewer.evaluate(async (viewer) => {
-                    const tbl = viewer
-                        .querySelector("perspective-viewer-datagrid")
-                        .shadowRoot.querySelector("regular-table");
-                    return tbl.querySelectorAll("tbody tr").length;
-                });
-
-                expect(num_rows).toEqual(10);
+                await expect(
+                    page.locator("regular-table tbody tr")
+                ).toHaveCount(10);
             }
         );
         test_jupyter(
@@ -101,25 +88,18 @@ describe_jupyter(
                 "w",
             ],
             async ({ page }) => {
-                const viewer = await default_body(page);
-                const num_columns = await viewer.evaluate(async (viewer) => {
-                    const tbl = viewer
-                        .querySelector("perspective-viewer-datagrid")
-                        .shadowRoot.querySelector("regular-table");
+                await default_body(page);
 
-                    return tbl.querySelector("thead tr").childElementCount;
-                });
+                const num_columns = await page
+                    .locator("regular-table thead tr")
+                    .first()
+                    .evaluate((tr) => tr.childElementCount);
 
                 expect(num_columns).toEqual(3);
 
-                const num_rows = await viewer.evaluate(async (viewer) => {
-                    const tbl = viewer
-                        .querySelector("perspective-viewer-datagrid")
-                        .shadowRoot.querySelector("regular-table");
-                    return tbl.querySelectorAll("tbody tr").length;
-                });
-
-                expect(num_rows).toEqual(5);
+                await expect(
+                    page.locator("regular-table tbody tr")
+                ).toHaveCount(5);
             }
         );
 
@@ -228,6 +208,7 @@ describe_jupyter(
                 // Check default config
                 expect(config).toEqual({
                     version: utils.API_VERSION,
+                    columns_config: {},
                     aggregates: {},
                     columns: [
                         "ui8",
@@ -281,6 +262,7 @@ w.theme = "Pro Dark"`
                 // and check it
                 expect(config).toEqual({
                     version: utils.API_VERSION,
+                    columns_config: {},
                     aggregates: {},
                     columns: ["ui8"],
                     expressions: {},
@@ -315,6 +297,7 @@ w.theme = "Pro Dark"`
                 // Check default config
                 expect(config).toEqual({
                     version: utils.API_VERSION,
+                    columns_config: {},
                     aggregates: {},
                     columns: [
                         "ui8",
diff --git a/packages/perspective-viewer-d3fc/package.json b/packages/perspective-viewer-d3fc/package.json
index 7930648a97..b3d52f4a49 100644
--- a/packages/perspective-viewer-d3fc/package.json
+++ b/packages/perspective-viewer-d3fc/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-viewer-d3fc",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Perspective.js D3FC Plugin",
     "unpkg": "./dist/cdn/perspective-viewer-d3fc.js",
     "jsdelivr": "./dist/cdn/perspective-viewer-d3fc.js",
@@ -46,8 +46,8 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
         "chroma-js": "^1.3.4",
         "d3fc": "^15.2.4",
         "d3-selection": "^3.0.0",
@@ -58,8 +58,8 @@
     },
     "devDependencies": {
         "@types/d3": "^7.0.0",
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
-        "@finos/perspective-test": "^2.8.1",
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
+        "@finos/perspective-test": "^2.9.0",
         "@prospective.co/procss": "^0.1.15"
     }
 }
diff --git a/packages/perspective-viewer-d3fc/src/ts/charts/xy-scatter.ts b/packages/perspective-viewer-d3fc/src/ts/charts/xy-scatter.ts
index 4cbf419467..9e65dda609 100644
--- a/packages/perspective-viewer-d3fc/src/ts/charts/xy-scatter.ts
+++ b/packages/perspective-viewer-d3fc/src/ts/charts/xy-scatter.ts
@@ -26,6 +26,7 @@ import { symbolsObj } from "../series/seriesSymbols";
 import { gridLayoutMultiChart } from "../layout/gridLayoutMultiChart";
 import xyScatterSeries from "../series/xy-scatter/xyScatterSeries";
 import { D3Scale, HTMLSelection, Settings } from "../types";
+import { Type } from "@finos/perspective";
 
 /**
  * Overrides specific symbols based on plugin settings. This modifies in-place _and_ returns the value.
@@ -46,8 +47,8 @@ function overrideSymbols(settings: Settings, symbols): D3Scale {
     for (let [i, _] of domain.entries()) {
         range[i] = range[(i as number) % len];
     }
-    let maybeSymbols: Record<string, string> =
-        settings.columns?.[symbolCol]?.symbols ?? {};
+    let maybeSymbols = (settings.columns_config?.[symbolCol]?.["symbols"] ??
+        {}) as Record<string, string>;
     Object.entries(maybeSymbols).forEach(([key, value]) => {
         // TODO: Define custom symbol types based on the values passed in here.
         // https://d3js.org/d3-shape/symbol#custom-symbols
@@ -182,4 +183,20 @@ xyScatter.plugin = {
     selectMode: "toggle",
 };
 
+xyScatter.can_render_column_styles = (type: Type, group?: string) => {
+    return type === "string" && group === "Symbol";
+};
+xyScatter.column_style_controls = (type: Type, group?: string) => {
+    if (type === "string" && group === "Symbol") {
+        return {
+            symbols: {
+                keys: "row",
+                values: Object.keys(symbolsObj),
+            },
+        };
+    } else {
+        return null;
+    }
+};
+
 export default xyScatter;
diff --git a/packages/perspective-viewer-d3fc/src/ts/data/ohlcData.ts b/packages/perspective-viewer-d3fc/src/ts/data/ohlcData.ts
index 534d17749c..6ec57fc126 100644
--- a/packages/perspective-viewer-d3fc/src/ts/data/ohlcData.ts
+++ b/packages/perspective-viewer-d3fc/src/ts/data/ohlcData.ts
@@ -36,22 +36,6 @@ export function ohlcData(settings: Settings, data: DataRowsWithKey) {
     );
 }
 
-function getOHLCValue(realValue: string, col: DataRow): number | undefined {
-    if (!!realValue) {
-        let value = col[realValue];
-
-        if (typeof value === "string") {
-            return parseFloat(value);
-        }
-
-        if (typeof value !== "number") {
-            return undefined;
-        }
-    }
-
-    return undefined;
-}
-
 function seriesToOHLC(
     settings: Settings,
     data: DataRowsWithKey
@@ -60,8 +44,12 @@ function seriesToOHLC(
     const getNextOpen = (i) =>
         data[i < data.length - 1 ? i + 1 : i][settings.realValues[0]];
     const mappedSeries: any = data.map((col, i) => {
-        const openValue = getOHLCValue(settings.realValues[0], col);
-        const closeValue = getOHLCValue(settings.realValues[1], col);
+        const openValue = !!settings.realValues[0]
+            ? col[settings.realValues[0]]
+            : undefined;
+        const closeValue = !!settings.realValues[1]
+            ? col[settings.realValues[1]]
+            : getNextOpen(i);
 
         return {
             crossValue: labelfn(col, i),
@@ -70,10 +58,10 @@ function seriesToOHLC(
             closeValue: closeValue,
             highValue: !!settings.realValues[2]
                 ? col[settings.realValues[2]]
-                : Math.max(openValue, closeValue),
+                : Math.max(openValue as number, closeValue as number),
             lowValue: !!settings.realValues[3]
                 ? col[settings.realValues[3]]
-                : Math.min(openValue, closeValue),
+                : Math.min(openValue as number, closeValue as number),
             key: data.key,
             row: col,
         };
diff --git a/packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts b/packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts
index 2bf6013d37..252e52c9e4 100644
--- a/packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts
+++ b/packages/perspective-viewer-d3fc/src/ts/plugin/plugin.ts
@@ -14,11 +14,15 @@ import "./polyfills/index";
 import charts from "../charts/charts";
 import { initialiseStyles } from "../series/colorStyles";
 import style from "../../../dist/css/perspective-viewer-d3fc.css";
-import { HTMLPerspectiveViewerElement } from "@finos/perspective-viewer";
+import {
+    PerspectiveColumnConfig,
+    HTMLPerspectiveViewerElement,
+} from "@finos/perspective-viewer";
 
 import * as d3 from "d3";
 import { symbolsObj } from "../series/seriesSymbols";
 import { Chart, Settings } from "../types";
+import { Type } from "@finos/perspective";
 
 const DEFAULT_PLUGIN_SETTINGS = {
     initial: {
@@ -43,6 +47,7 @@ const EXCLUDED_SETTINGS = [
     "agg_paths",
     "treemaps",
     "axisMemo",
+    "columns_config",
 ];
 
 function getD3FCStyles(): string {
@@ -152,30 +157,20 @@ export function register(...plugin_names: string[]) {
                         chart.plugin.max_columns = x;
                     }
 
-                    get plugin_attributes() {
-                        let symbols = Object.entries(symbolsObj).map(
-                            ([name, ty]) => {
-                                let container = document.createElement("div");
-                                d3.select(container)
-                                    .append("svg")
-                                    .attr("viewbox", "0, 0, 15, 15") //eyeballed this, it's probably wrong
-                                    .append("path")
-                                    .attr("transform", "translate(7.5, 7.5)")
-                                    .attr("d", d3.symbol(ty)());
-                                let html = d3.select(container).html();
-                                container.remove();
-
-                                return {
-                                    name,
-                                    html,
-                                };
-                            }
+                    can_render_column_styles(type: Type, group: string) {
+                        return chart.can_render_column_styles?.call(
+                            this,
+                            type,
+                            group
+                        );
+                    }
+
+                    column_style_controls(type: Type, group: string) {
+                        return chart.column_style_controls?.call(
+                            this,
+                            type,
+                            group
                         );
-                        return {
-                            symbol: {
-                                symbols,
-                            },
-                        };
                     }
 
                     async render() {
@@ -579,14 +574,21 @@ export function register(...plugin_names: string[]) {
                         return settings;
                     }
 
-                    restore(settings: Settings) {
-                        const new_settings = {};
+                    restore(
+                        settings: Settings,
+                        columns_config: PerspectiveColumnConfig
+                    ) {
+                        const new_settings: Partial<Settings> = {};
                         for (const name of EXCLUDED_SETTINGS) {
                             if (this._settings?.[name] !== undefined) {
                                 new_settings[name] = this._settings?.[name];
                             }
                         }
-                        this._settings = { ...new_settings, ...settings };
+                        this._settings = {
+                            ...new_settings,
+                            ...settings,
+                            columns_config,
+                        };
                     }
                 }
             );
diff --git a/packages/perspective-viewer-d3fc/src/ts/types.ts b/packages/perspective-viewer-d3fc/src/ts/types.ts
index 425f96f592..d72667a867 100644
--- a/packages/perspective-viewer-d3fc/src/ts/types.ts
+++ b/packages/perspective-viewer-d3fc/src/ts/types.ts
@@ -10,7 +10,10 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { IPerspectiveViewerPlugin } from "@finos/perspective-viewer";
+import {
+    IPerspectiveViewerPlugin,
+    PerspectiveColumnConfig,
+} from "@finos/perspective-viewer";
 import { DataRow, Type } from "@finos/perspective";
 
 export interface Element {
@@ -32,6 +35,9 @@ export interface Chart {
         };
         selectMode?: string;
     };
+    can_render_column_styles?: (type: Type, group?: string) => boolean;
+    // TODO: Generate the type for the column style schema.
+    column_style_controls?: (type: Type, group?: string) => unknown;
 }
 
 export type PadUnit = "percent" | "domain";
@@ -80,13 +86,6 @@ export type TreemapValue = {
     treemapRoute?: any[]; // string[]?
 };
 
-export type ColumnSettingsConfig = {
-    symbols: Record<string, string>;
-};
-export type ColumnSettings<
-    T extends Record<string, any> = ColumnSettingsConfig
-> = Record<string, T>;
-
 export type Settings = {
     hideKeys?: any[];
     agg_paths?: any; // any[]?
@@ -102,7 +101,7 @@ export type Settings = {
     splitValues: any[];
     textStyles: TextStyles;
     sunburstLevel?: any;
-    columns?: ColumnSettings;
+    columns_config?: PerspectiveColumnConfig;
     treemaps?: Record<string, TreemapValue>;
 };
 
@@ -195,15 +194,6 @@ export interface ChartElement extends IPerspectiveViewerPlugin {
     get max_columns(): number;
     set max_columns(value: number);
 
-    get plugin_attributes(): {
-        symbol: {
-            symbols: {
-                name: string;
-                html: string;
-            }[];
-        };
-    };
-
     _draw(): void;
 
     getContainer(): HTMLElement;
diff --git a/packages/perspective-viewer-d3fc/test/js/barWidth.spec.ts b/packages/perspective-viewer-d3fc/test/js/barWidth.spec.ts
index 58c12110ca..31f768f05a 100644
--- a/packages/perspective-viewer-d3fc/test/js/barWidth.spec.ts
+++ b/packages/perspective-viewer-d3fc/test/js/barWidth.spec.ts
@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test, expect } from "@finos/perspective-test";
+import { test, expect, DEFAULT_CONFIG } from "@finos/perspective-test";
 import {
     API_VERSION,
     compareSVGContentsToSnapshot,
@@ -41,19 +41,12 @@ test.describe("Bar Width", () => {
         );
 
         expect(config).toEqual({
-            version: API_VERSION,
+            ...DEFAULT_CONFIG,
             plugin: "Y Bar",
             columns: ["Profit"],
             group_by: ["Order Date"],
             split_by: ["Profit"],
-            aggregates: {},
-            filter: [],
-            sort: [],
-            plugin_config: {},
-            settings: false,
-            expressions: {},
             theme: "Pro Light",
-            title: null,
         });
 
         await compareSVGContentsToSnapshot(
diff --git a/packages/perspective-viewer-d3fc/test/js/scatter.spec.ts b/packages/perspective-viewer-d3fc/test/js/scatter.spec.ts
index 57f9dfe7fc..0bbe2b1f1c 100644
--- a/packages/perspective-viewer-d3fc/test/js/scatter.spec.ts
+++ b/packages/perspective-viewer-d3fc/test/js/scatter.spec.ts
@@ -56,7 +56,7 @@ test.describe("Scatter Tests", () => {
         await compareSVGContentsToSnapshot(
             page,
             "perspective-viewer perspective-viewer-d3fc-xyscatter",
-            ["xyscatter-label"]
+            ["xyscatter-label.txt"]
         );
     });
 
@@ -75,7 +75,7 @@ test.describe("Scatter Tests", () => {
         await compareSVGContentsToSnapshot(
             page,
             "perspective-viewer perspective-viewer-d3fc-xyscatter",
-            ["xyscatter-label-grouped"]
+            ["xyscatter-label-grouped.txt"]
         );
     });
 });
diff --git a/packages/perspective-viewer-datagrid/package.json b/packages/perspective-viewer-datagrid/package.json
index 42f61e8520..9a1ce4309c 100644
--- a/packages/perspective-viewer-datagrid/package.json
+++ b/packages/perspective-viewer-datagrid/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-viewer-datagrid",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Perspective datagrid plugin based on `regular-table`",
     "unpkg": "dist/cdn/perspective-viewer-datagrid.js",
     "jsdelivr": "dist/cdn/perspective-viewer-datagrid.js",
@@ -29,14 +29,14 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
         "chroma-js": "^1.3.4",
         "regular-table": "=0.6.4"
     },
     "devDependencies": {
         "@prospective.co/procss": "^0.1.13",
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
-        "@finos/perspective-test": "^2.8.1"
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
+        "@finos/perspective-test": "^2.9.0"
     }
 }
diff --git a/packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js b/packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js
index d87bab1c54..7da7a38023 100644
--- a/packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js
+++ b/packages/perspective-viewer-datagrid/src/js/custom_elements/datagrid.js
@@ -14,7 +14,7 @@ import { activate } from "../plugin/activate.js";
 import { restore } from "../plugin/restore.js";
 import { save } from "../plugin/save";
 import { draw } from "../plugin/draw";
-import getDefaultConfig from "../default_config.js";
+import column_style_controls from "../plugin/column_style_controls.js";
 import datagridStyles from "../../../dist/css/perspective-viewer-datagrid.css";
 
 /**
@@ -87,11 +87,12 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
         return 1;
     }
 
-    /** opt-in to column styling */
-    get plugin_attributes() {
-        return {
-            style: getDefaultConfig.call(this),
-        };
+    can_render_column_styles(type, _group) {
+        return type !== "boolean";
+    }
+
+    column_style_controls(type, group) {
+        return column_style_controls.call(this, type, group);
     }
 
     async draw(view) {
@@ -122,8 +123,8 @@ export class HTMLPerspectiveViewerDatagridPluginElement extends HTMLElement {
         return save.call(this);
     }
 
-    restore(token) {
-        return restore.call(this, token);
+    restore(token, columns_config) {
+        return restore.call(this, token, columns_config);
     }
 
     async restyle(view) {
diff --git a/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js b/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js
index a9cfbf2778..45c8b78931 100644
--- a/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js
+++ b/packages/perspective-viewer-datagrid/src/js/custom_elements/toolbar.js
@@ -34,9 +34,9 @@ export class HTMLPerspectiveViewerDatagridToolbarElement extends HTMLElement {
             </style>
             <div id="toolbar">
                 <span id="scroll_lock" class="button">
-                    <span>Free Scroll</span>
+                    <span></span>
                 </span>
-                <span id="edit_mode" class="button"><span>Read Only</span></span>
+                <span id="edit_mode" class="button"><span></span></span>
             </div>
         `;
 
diff --git a/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js b/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js
index e4a4b16a53..5855323053 100644
--- a/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js
+++ b/packages/perspective-viewer-datagrid/src/js/data_listener/formatter_cache.js
@@ -32,12 +32,12 @@ export class FormatterCache {
     create_datetime_formatter(type, plugin) {
         const type_config = get_type_config(type);
         if (type === "datetime") {
-            if (plugin.format !== "custom") {
+            if (plugin.date_format?.format !== "custom") {
                 const options = {
                     ...type_config.format,
-                    timeZone: plugin.timeZone,
-                    dateStyle: plugin.dateStyle,
-                    timeStyle: plugin.timeStyle,
+                    timeZone: plugin.date_format?.timeZone,
+                    dateStyle: plugin.date_format?.dateStyle,
+                    timeStyle: plugin.date_format?.timeStyle,
                 };
                 if (options.dateStyle === "disabled") {
                     options.dateStyle = undefined;
@@ -51,20 +51,21 @@ export class FormatterCache {
                     options.timeStyle = type_config.format.timeStyle;
                 }
 
-                return new Intl.DateTimeFormat([], options);
+                return new Intl.DateTimeFormat(navigator.languages, options);
             } else {
                 const options = {
                     // ...type_config.format,
-                    timeZone: plugin.timeZone,
-                    second: plugin.second,
-                    minute: plugin.minute,
-                    hour: plugin.hour,
-                    day: plugin.day,
-                    weekday: plugin.weekday,
-                    month: plugin.month,
-                    year: plugin.year,
-                    hour12: plugin.hour12,
-                    fractionalSecondDigits: plugin.fractionalSecondDigits,
+                    timeZone: plugin.date_format?.timeZone,
+                    second: plugin.date_format?.second,
+                    minute: plugin.date_format?.minute,
+                    hour: plugin.date_format?.hour,
+                    day: plugin.date_format?.day,
+                    weekday: plugin.date_format?.weekday,
+                    month: plugin.date_format?.month,
+                    year: plugin.date_format?.year,
+                    hour12: plugin.date_format?.hour12,
+                    fractionalSecondDigits:
+                        plugin.date_format?.fractionalSecondDigits,
                 };
 
                 if (options.year === "disabled") {
@@ -111,12 +112,12 @@ export class FormatterCache {
                     options.hour12 = true;
                 }
 
-                return new Intl.DateTimeFormat([], options);
+                return new Intl.DateTimeFormat(navigator.languages, options);
             }
         } else {
             const options = {
                 ...type_config.format,
-                dateStyle: plugin.dateStyle,
+                dateStyle: plugin.date_format?.dateStyle,
             };
 
             if (options.dateStyle === "disabled") {
@@ -125,42 +126,32 @@ export class FormatterCache {
                 options.dateStyle = type_config.format.dateStyle;
             }
 
-            return new Intl.DateTimeFormat([], options);
+            return new Intl.DateTimeFormat(navigator.languages, options);
         }
     }
 
     create_number_formatter(type, plugin) {
-        const { format } = get_type_config(type);
-        if (plugin.fixed !== undefined) {
-            format.minimumFractionDigits = plugin.fixed;
-            format.maximumFractionDigits = plugin.fixed;
+        let { format } = get_type_config(type);
+        if (plugin.number_format !== undefined) {
+            format = plugin.number_format;
         }
 
-        return new FORMATTER_CONS[type]([], format);
+        return new FORMATTER_CONS[type](navigator.languages, format);
     }
 
     create_boolean_formatter(type, plugin) {
         const type_config = get_type_config(type);
-        return new FORMATTER_CONS[type]([], type_config.format);
+        return new FORMATTER_CONS[type](
+            navigator.languages,
+            type_config.format
+        );
     }
 
     get(type, plugin) {
         let formatter_key = [
             type,
-            plugin.fixed,
-            plugin.timeZone,
-            plugin.dateStyle,
-            plugin.timeStyle,
-            plugin.fractionalSecondDigits,
-            plugin.format,
-            plugin.year,
-            plugin.month,
-            plugin.day,
-            plugin.weekday,
-            plugin.hour,
-            plugin.minute,
-            plugin.second,
-            plugin.hour12,
+            ...Object.values(plugin.date_format ?? {}),
+            ...Object.values(plugin.number_format ?? {}),
         ].join("-");
 
         if (!this._formatters.has(formatter_key)) {
diff --git a/packages/perspective-viewer-datagrid/src/js/data_listener/index.js b/packages/perspective-viewer-datagrid/src/js/data_listener/index.js
index cb932c4a78..9bbed7b989 100644
--- a/packages/perspective-viewer-datagrid/src/js/data_listener/index.js
+++ b/packages/perspective-viewer-datagrid/src/js/data_listener/index.js
@@ -94,7 +94,7 @@ export function createDataListener(viewer) {
             );
             metadata.push(column);
             if (is_settings_open) {
-                path_parts.push("Edit");
+                path_parts.push("");
             }
 
             column_headers.push(path_parts);
diff --git a/packages/perspective-viewer-datagrid/src/js/model/toolbar.js b/packages/perspective-viewer-datagrid/src/js/model/toolbar.js
index 236a49f483..6d0c88a19e 100644
--- a/packages/perspective-viewer-datagrid/src/js/model/toolbar.js
+++ b/packages/perspective-viewer-datagrid/src/js/model/toolbar.js
@@ -19,11 +19,6 @@ export function toggle_edit_mode(force = undefined) {
     this.classList.toggle("editable", force);
     if (this._edit_mode !== undefined) {
         this._edit_mode.classList.toggle("editable", force);
-        if (force) {
-            this._edit_mode.children[0].textContent = "Editable";
-        } else {
-            this._edit_mode.children[0].textContent = "Read Only";
-        }
     }
 }
 
@@ -36,10 +31,5 @@ export function toggle_scroll_lock(force = undefined) {
     this.classList.toggle("sub-cell-scroll-disabled", force);
     if (this._scroll_lock !== undefined) {
         this._scroll_lock.classList.toggle("lock-scroll", force);
-        if (!force) {
-            this._scroll_lock.children[0].textContent = "Free Scroll";
-        } else {
-            this._scroll_lock.children[0].textContent = "Align Scroll";
-        }
     }
 }
diff --git a/packages/perspective-viewer-datagrid/src/js/default_config.js b/packages/perspective-viewer-datagrid/src/js/plugin/column_style_controls.js
similarity index 75%
rename from packages/perspective-viewer-datagrid/src/js/default_config.js
rename to packages/perspective-viewer-datagrid/src/js/plugin/column_style_controls.js
index 7c733094e3..0acd74ce9a 100644
--- a/packages/perspective-viewer-datagrid/src/js/default_config.js
+++ b/packages/perspective-viewer-datagrid/src/js/plugin/column_style_controls.js
@@ -11,14 +11,14 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 /**
- * Gets the default column configurations used for styling.
- * @returns The default configuration per type.
+ * @param {import("@finos/perspective").Type} type
+ * @param {string} _group
+ * @returns {import("@finos/perspective-viewer").PerspectiveColumnConfigValue}
  */
-export default function getDefaultConfig() {
-    const get_type_default = (column_type) => {
-        let type_default;
-        if (column_type === "integer" || column_type === "float") {
-            type_default = {
+export default function column_style_opts(type, _group) {
+    if (type === "integer" || type === "float")
+        return {
+            datagrid_number_style: {
                 fg_gradient: 0,
                 pos_fg_color: this.model._pos_fg_color[0],
                 neg_fg_color: this.model._neg_fg_color[0],
@@ -27,28 +27,21 @@ export default function getDefaultConfig() {
                 pos_bg_color: this.model._pos_bg_color[0],
                 neg_bg_color: this.model._neg_bg_color[0],
                 number_bg_mode: "disabled",
-                fixed: column_type === "float" ? 2 : 0,
-            };
-        } else {
-            // date, datetime, string, boolean
-            type_default = {
+            },
+            number_string_format: true,
+        };
+    else if (type === "date" || type === "datetime" || type === "string") {
+        let control =
+            type === "date" || type === "datetime"
+                ? "datagrid_datetime_style"
+                : `datagrid_string_style`;
+        return {
+            [control]: {
                 color: this.model._color[0],
                 bg_color: this.model._color[0],
-            };
-        }
-        return type_default;
-    };
-
-    let default_config = {};
-    for (let val of [
-        "string",
-        "float",
-        "integer",
-        "bool",
-        "date",
-        "datetime",
-    ]) {
-        default_config[val] = get_type_default(val);
+            },
+        };
+    } else {
+        return null;
     }
-    return default_config;
 }
diff --git a/packages/perspective-viewer-datagrid/src/js/plugin/restore.js b/packages/perspective-viewer-datagrid/src/js/plugin/restore.js
index 75f4ae0d1c..c80c6549b4 100644
--- a/packages/perspective-viewer-datagrid/src/js/plugin/restore.js
+++ b/packages/perspective-viewer-datagrid/src/js/plugin/restore.js
@@ -19,43 +19,43 @@ import { make_color_record } from "../color_utils.js";
  * Restore this plugin's state from a previously saved `token`.
  *
  * @param {*} token A token returned from `save()`.
+ * @param {import("@finos/perspective-viewer").PerspectiveColumnConfig} columns Viewer column settings
  */
-export function restore(token) {
+export function restore(token, columns) {
     token = JSON.parse(JSON.stringify(token));
+    columns = JSON.parse(JSON.stringify(columns));
     const overrides = {};
-    if (token.columns) {
-        for (const col of Object.keys(token.columns)) {
-            const col_config = token.columns[col];
-            if (col_config.column_size_override !== undefined) {
-                overrides[col] = col_config.column_size_override;
-                delete col_config["column_size_override"];
-            }
-
-            if (col_config?.pos_fg_color) {
-                col_config.pos_fg_color = make_color_record(
-                    col_config.pos_fg_color
-                );
-                col_config.neg_fg_color = make_color_record(
-                    col_config.neg_fg_color
-                );
-            }
-
-            if (col_config?.pos_bg_color) {
-                col_config.pos_bg_color = make_color_record(
-                    col_config.pos_bg_color
-                );
-                col_config.neg_bg_color = make_color_record(
-                    col_config.neg_bg_color
-                );
-            }
 
-            if (col_config?.color) {
-                col_config.color = make_color_record(col_config.color);
+    if (token.columns) {
+        for (const [col, value] of Object.entries(token.columns)) {
+            if (value.column_size_override !== undefined) {
+                overrides[col] = value.column_size_override;
+                delete value["column_size_override"];
             }
+        }
+    }
 
-            if (Object.keys(col_config).length === 0) {
-                delete token.columns[col];
-            }
+    let styles = {};
+    if (columns) {
+        for (const [col_name, controls] of Object.entries(columns)) {
+            styles[col_name] = {
+                ...controls,
+                pos_fg_color: controls.pos_fg_color
+                    ? make_color_record(controls.pos_fg_color)
+                    : undefined,
+                neg_fg_color: controls.neg_fg_color
+                    ? make_color_record(controls.neg_fg_color)
+                    : undefined,
+                pos_bg_color: controls.pos_bg_color
+                    ? make_color_record(controls.pos_bg_color)
+                    : undefined,
+                neg_bg_color: controls.neg_bg_color
+                    ? make_color_record(controls.neg_bg_color)
+                    : undefined,
+                color: controls.color
+                    ? make_color_record(controls.color)
+                    : undefined,
+            };
         }
     }
 
@@ -69,5 +69,5 @@ export function restore(token) {
 
     const datagrid = this.regular_table;
     restore_column_size_overrides.call(this, overrides, true);
-    datagrid[PRIVATE_PLUGIN_SYMBOL] = token.columns;
+    datagrid[PRIVATE_PLUGIN_SYMBOL] = styles;
 }
diff --git a/packages/perspective-viewer-datagrid/src/js/plugin/save.js b/packages/perspective-viewer-datagrid/src/js/plugin/save.js
index 54abbfa217..c5646bd209 100644
--- a/packages/perspective-viewer-datagrid/src/js/plugin/save.js
+++ b/packages/perspective-viewer-datagrid/src/js/plugin/save.js
@@ -20,32 +20,12 @@ import { save_column_size_overrides } from "../model/column_overrides.js";
  */
 export function save() {
     if (this.regular_table) {
-        const datagrid = this.regular_table;
         const token = {
             columns: {},
             scroll_lock: !!this._is_scroll_lock,
             editable: !!this._is_edit_mode,
         };
 
-        for (const col of Object.keys(datagrid[PRIVATE_PLUGIN_SYMBOL] || {})) {
-            const config = Object.assign(
-                {},
-                datagrid[PRIVATE_PLUGIN_SYMBOL][col]
-            );
-            if (config?.pos_fg_color || config?.pos_bg_color) {
-                config.pos_fg_color = config.pos_fg_color?.[0];
-                config.neg_fg_color = config.neg_fg_color?.[0];
-                config.pos_bg_color = config.pos_bg_color?.[0];
-                config.neg_bg_color = config.neg_bg_color?.[0];
-            }
-
-            if (config?.color) {
-                config.color = config.color[0];
-            }
-
-            token.columns[col] = config;
-        }
-
         const column_size_overrides = save_column_size_overrides.call(this);
 
         for (const col of Object.keys(column_size_overrides || {})) {
diff --git a/packages/perspective-viewer-datagrid/src/less/regular_table.less b/packages/perspective-viewer-datagrid/src/less/regular_table.less
index bb731d551a..0a82fdac68 100644
--- a/packages/perspective-viewer-datagrid/src/less/regular_table.less
+++ b/packages/perspective-viewer-datagrid/src/less/regular_table.less
@@ -319,9 +319,18 @@ regular-table table {
         content: none;
     }
 }
+
+regular-table
+    #psp-column-edit-buttons
+    th:not(.rt-group-corner)
+    span:not(.rt-column-resize):before {
+    content: var(--datagrid-column-edit-button--content, "Edit");
+}
+
 perspective-viewer:not([settings]) {
     @include design-slash-architecture-bug;
 }
+
 :host-context(perspective-viewer:not([settings])) {
     @include design-slash-architecture-bug;
 }
diff --git a/packages/perspective-viewer-datagrid/src/less/toolbar.less b/packages/perspective-viewer-datagrid/src/less/toolbar.less
index b2ce63a65f..1df187f8fd 100644
--- a/packages/perspective-viewer-datagrid/src/less/toolbar.less
+++ b/packages/perspective-viewer-datagrid/src/less/toolbar.less
@@ -58,6 +58,22 @@
     -webkit-mask-image: var(--toolbar-edit-mode-active--content);
 }
 
+#edit_mode span:before {
+    content: var(--edit-mode-toggle--content, "Read Only");
+}
+
+#edit_mode.editable span:before {
+    content: var(--edit-mode-alt-toggle--content, "Editable");
+}
+
+#scroll_lock span:before {
+    content: var(--scroll-lock-toggle--content, "Free Scroll");
+}
+
+#scroll_lock.lock-scroll span:before {
+    content: var(--scroll-lock-alt-toggle--content, "Align Scroll");
+}
+
 :host(.aggregated) #toolbar #edit_mode {
     display: none;
 }
@@ -78,15 +94,16 @@
 }
 
 .button {
-    display: inline-flex;
     align-items: center;
-    user-select: none;
-    width: 37px;
-    height: 22px;
+    border-radius: 3px;
+    border: 1px solid transparent;
     box-sizing: border-box;
+    display: inline-flex;
+    font-size: var(--label--font-size, 0.75em);
+    height: 22px;
+    user-select: none;
     white-space: nowrap;
-    border: 1px solid transparent;
-    border-radius: 3px;
+    width: 37px;
 }
 
 .button > span {
@@ -112,6 +129,5 @@
 
 .button:hover > span {
     display: contents;
-    font-size: 9px;
     line-height: 36px;
 }
diff --git a/packages/perspective-viewer-datagrid/test/js/column_style.spec.js b/packages/perspective-viewer-datagrid/test/js/column_style.spec.js
index 880d37d85a..14410d6c75 100644
--- a/packages/perspective-viewer-datagrid/test/js/column_style.spec.js
+++ b/packages/perspective-viewer-datagrid/test/js/column_style.spec.js
@@ -48,7 +48,7 @@ async function test_column(page, selector, selector2) {
 }
 
 test.describe("Column Style Tests", () => {
-    test("perspective-config-update event is fired when column style is changed", async ({
+    test.skip("perspective-config-update event is fired when column style is changed", async ({
         page,
     }) => {
         await page.goto("/tools/perspective-test/src/html/basic-test.html");
@@ -81,10 +81,11 @@ test.describe("Column Style Tests", () => {
             viewer.addEventListener(
                 "perspective-column-style-change",
                 (evt) => {
-                    console.log(evt.type, evt.detail);
+                    // console.log(evt.type, evt.detail);
                     window.__events__.push(evt);
                 }
             );
+
             // Find the column config menu button
             const header_button = viewer
                 .querySelector("perspective-viewer-datagrid")
@@ -112,9 +113,7 @@ test.describe("Column Style Tests", () => {
 
         const { x: xx, y: yy } = await page.evaluate(async (style_menu) => {
             // Find the 'bar' button
-            const bar_button = style_menu.querySelector(
-                '#radio-list-1[name="foreground-list"]'
-            );
+            const bar_button = style_menu.querySelector("select");
 
             // Get its coords
             const rect = bar_button.getBoundingClientRect();
@@ -153,9 +152,9 @@ test.describe("Column Style Tests", () => {
             await viewer.restore({
                 plugin: "Datagrid",
                 columns: ["Row ID", "Sales"],
-                plugin_config: {
-                    columns: {
-                        Sales: { number_bg_mode: "pulse" },
+                columns_config: {
+                    Sales: {
+                        datagrid_number_style: { number_bg_mode: "pulse" },
                     },
                 },
             });
@@ -190,9 +189,9 @@ test.describe("Column Style Tests", () => {
                 plugin: "Datagrid",
                 columns: ["Row ID", "Sales"],
                 settings: true,
-                plugin_config: {
-                    columns: {
-                        Sales: { number_bg_mode: "pulse" },
+                columns_config: {
+                    Sales: {
+                        datagrid_number_style: { number_bg_mode: "pulse" },
                     },
                 },
             });
diff --git a/packages/perspective-viewer-datagrid/test/js/superstore.spec.js b/packages/perspective-viewer-datagrid/test/js/superstore.spec.js
index 65eaa9b887..c2e07abbfe 100644
--- a/packages/perspective-viewer-datagrid/test/js/superstore.spec.js
+++ b/packages/perspective-viewer-datagrid/test/js/superstore.spec.js
@@ -59,7 +59,7 @@ test.describe("Datagrid with superstore data set", () => {
 
         compareContentsToSnapshot(
             await getDatagridContents(page),
-            "row-headers-are-printed-correctly"
+            "row-headers-are-printed-correctly.txt"
         );
     });
 
@@ -85,7 +85,7 @@ test.describe("Datagrid with superstore data set", () => {
 
         compareContentsToSnapshot(
             await getDatagridContents(page),
-            "column-headers-are-printed-correctly-split-by-a-date-column"
+            "column-headers-are-printed-correctly-split-by-a-date-column.txt"
         );
     });
 });
diff --git a/packages/perspective-viewer-openlayers/package.json b/packages/perspective-viewer-openlayers/package.json
index f7e650ef36..5eef8502c1 100644
--- a/packages/perspective-viewer-openlayers/package.json
+++ b/packages/perspective-viewer-openlayers/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-viewer-openlayers",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "unpkg": "dist/cdn/perspective-viewer-openlayers.js",
     "jsdelivr": "dist/cdn/perspective-viewer-openlayers.js",
     "exports": {
@@ -24,8 +24,8 @@
         "clean:screenshots": "rimraf \"test/screenshots/**/*.@(failed|diff).png\""
     },
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
         "d3": "^7.1.1",
         "d3-color": "^3.0.1",
         "gradient-parser": "1.0.2",
@@ -33,6 +33,6 @@
         "ol": "^5.3.2"
     },
     "devDependencies": {
-        "@finos/perspective-esbuild-plugin": "^2.8.1"
+        "@finos/perspective-esbuild-plugin": "^2.9.0"
     }
 }
diff --git a/packages/perspective-viewer-openlayers/src/js/plugin/plugin.js b/packages/perspective-viewer-openlayers/src/js/plugin/plugin.js
index 1bc4c0b753..8ef32cdb74 100644
--- a/packages/perspective-viewer-openlayers/src/js/plugin/plugin.js
+++ b/packages/perspective-viewer-openlayers/src/js/plugin/plugin.js
@@ -49,10 +49,6 @@ views.forEach(async (plugin) => {
                 return "OpenStreetMap";
             }
 
-            get plugin_attributes() {
-                return {};
-            }
-
             async restyle(view) {
                 mapView.restyle(this.shadowRoot.children[1]);
             }
diff --git a/packages/perspective-webpack-plugin/package.json b/packages/perspective-webpack-plugin/package.json
index 8e9ee501dd..62c586bbba 100644
--- a/packages/perspective-webpack-plugin/package.json
+++ b/packages/perspective-webpack-plugin/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-webpack-plugin",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Perspective.js Webpack Plugin",
     "main": "index.js",
     "publishConfig": {
@@ -25,8 +25,8 @@
         "worker-loader": "^3.0.7"
     },
     "peerDependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
         "webpack": "^5.60.0"
     }
 }
diff --git a/packages/perspective-workspace/package.json b/packages/perspective-workspace/package.json
index 64ff6a3d4b..425219543b 100644
--- a/packages/perspective-workspace/package.json
+++ b/packages/perspective-workspace/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-workspace",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Perspective Workspace",
     "files": [
         "dist/**/*",
@@ -31,7 +31,7 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective-viewer": "^2.8.1",
+        "@finos/perspective-viewer": "^2.9.0",
         "@lumino/algorithm": "^1.9.1",
         "@lumino/commands": "^1.20.0",
         "@lumino/domutils": "^1.8.1",
@@ -42,7 +42,7 @@
     },
     "devDependencies": {
         "@prospective.co/procss": "^0.1.15",
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
-        "@finos/perspective-test": "^2.8.1"
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
+        "@finos/perspective-test": "^2.9.0"
     }
 }
diff --git a/packages/perspective-workspace/test/js/migrate_workspace.spec.js b/packages/perspective-workspace/test/js/migrate_workspace.spec.js
index 3a602c131f..6418ac17c4 100644
--- a/packages/perspective-workspace/test/js/migrate_workspace.spec.js
+++ b/packages/perspective-workspace/test/js/migrate_workspace.spec.js
@@ -65,6 +65,7 @@ const TESTS = [
                     table: "superstore",
                     title: "One",
                     plugin: "Y Area",
+                    columns_config: {},
                     plugin_config: {},
                     group_by: ["bucket(\"Order Date\", 'M')"],
                     split_by: ["Ship Mode"],
diff --git a/packages/perspective/package.json b/packages/perspective/package.json
index 9f3813d2ac..ca4dceeeac 100644
--- a/packages/perspective/package.json
+++ b/packages/perspective/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Perspective.js",
     "repository": {
         "type": "git",
@@ -46,8 +46,8 @@
         "ws": "^6.1.2"
     },
     "devDependencies": {
-        "@finos/perspective-cpp": "^2.8.1",
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
+        "@finos/perspective-cpp": "^2.9.0",
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
         "cpy": "^9.0.1",
         "jsverify": "^0.8.4",
         "lodash": "^4.17.4",
diff --git a/packages/perspective/src/js/perspective.node.js b/packages/perspective/src/js/perspective.node.js
index cfaa16ddd4..2f09fd2430 100644
--- a/packages/perspective/src/js/perspective.node.js
+++ b/packages/perspective/src/js/perspective.node.js
@@ -89,9 +89,9 @@ const DEFAULT_ASSETS = [
 ];
 
 const CONTENT_TYPES = {
-    ".js": "text/javascript",
-    ".css": "text/css",
-    ".json": "application/json",
+    ".js": "text/javascript; charset=utf-8",
+    ".css": "text/css; charset=utf-8",
+    ".json": "application/json; charset=utf-8",
     ".arrow": "arraybuffer",
     ".feather": "arraybuffer",
     ".wasm": "application/wasm",
diff --git a/python/perspective/package.json b/python/perspective/package.json
index 3a749d0a3e..bf407c9d16 100644
--- a/python/perspective/package.json
+++ b/python/perspective/package.json
@@ -1,16 +1,16 @@
 {
     "private": true,
     "name": "perspective-python-internal",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "scripts": {
         "bench": "python3 bench/perspective_benchmark.py",
         "docs": "python3 docs/generate.py"
     },
     "devDependencies": {
-        "@finos/perspective": "^2.8.1",
-        "@finos/perspective-viewer": "^2.8.1",
-        "@finos/perspective-viewer-d3fc": "^2.8.1",
-        "@finos/perspective-viewer-datagrid": "^2.8.1",
-        "@finos/perspective-webpack-plugin": "^2.8.1"
+        "@finos/perspective": "^2.9.0",
+        "@finos/perspective-viewer": "^2.9.0",
+        "@finos/perspective-viewer-d3fc": "^2.9.0",
+        "@finos/perspective-viewer-datagrid": "^2.9.0",
+        "@finos/perspective-webpack-plugin": "^2.9.0"
     }
 }
diff --git a/python/perspective/perspective/client/base.py b/python/perspective/perspective/client/base.py
index 94e4fe64ac..4a738a2bef 100644
--- a/python/perspective/perspective/client/base.py
+++ b/python/perspective/perspective/client/base.py
@@ -97,7 +97,9 @@ def send(self, msg):
 
     def get_hosted_table_names(self):
         msg = {"cmd": "get_hosted_table_names"}
-        return self.post(msg)
+        future = asyncio.Future()
+        self.post(msg, future=future)
+        return future
 
     def post(self, msg, future=None, keep_alive=False):
         """Given a message and an associated `Future` object, store the future
diff --git a/python/perspective/perspective/core/_version.py b/python/perspective/perspective/core/_version.py
index c780466961..a05b7f1caf 100644
--- a/python/perspective/perspective/core/_version.py
+++ b/python/perspective/perspective/core/_version.py
@@ -1,2 +1,2 @@
-__version__ = "2.8.1"
-major_minor_version = "2.8"
+__version__ = "2.9.0"
+major_minor_version = "2.9"
diff --git a/python/perspective/perspective/tests/handlers/test_starlette_handler.py b/python/perspective/perspective/tests/handlers/test_starlette_handler.py
index 2a25bb5b1d..05123f54d3 100644
--- a/python/perspective/perspective/tests/handlers/test_starlette_handler.py
+++ b/python/perspective/perspective/tests/handlers/test_starlette_handler.py
@@ -16,6 +16,7 @@
 import pytest
 import random
 
+from contextlib import asynccontextmanager
 from datetime import datetime
 
 from fastapi import FastAPI, WebSocket
@@ -58,11 +59,16 @@ def setup_method(self):
         MANAGER._tables = {}
         MANAGER._views = {}
 
-    async def websocket_client(self):
-        """Connect and initialize a websocket client connection to the
+    @asynccontextmanager
+    async def managed_websocket_client(self):
+        """Connect and manage a websocket client connection to the
         Perspective starlette server.
         """
-        return await websocket(CLIENT, "/websocket")
+        client = await websocket(CLIENT, "/websocket")
+        try:
+            yield client
+        finally:
+            await client.terminate()
 
     @pytest.mark.asyncio
     async def test_starlette_handler_init_terminate(self):
@@ -71,8 +77,9 @@ async def test_starlette_handler_init_terminate(self):
 
         All test methods must import `app`, `http_client`, and `http_port`,
         otherwise a mysterious timeout will occur."""
-        client = await self.websocket_client()
-        await client.terminate()
+        async with self.managed_websocket_client() as client:
+            # terminate() is called by the context manager
+            assert client is not None
 
     @pytest.mark.asyncio
     async def test_starlette_handler_table_method(self):
@@ -80,37 +87,33 @@ async def test_starlette_handler_table_method(self):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
 
-        schema = await table.schema()
-        size = await table.size()
+            schema = await table.schema()
+            size = await table.size()
 
-        assert schema == {
-            "a": "integer",
-            "b": "float",
-            "c": "string",
-            "d": "datetime",
-        }
+            assert schema == {
+                "a": "integer",
+                "b": "float",
+                "c": "string",
+                "d": "datetime",
+            }
 
-        assert size == 10
-
-        await client.terminate()
+            assert size == 10
 
     @pytest.mark.asyncio
     async def test_starlette_handler_make_table(self):
-        client = await self.websocket_client()
-        table = await client.table(data)
-        size = await table.size()
-
-        assert size == 10
+        async with self.managed_websocket_client() as client:
+            table = await client.table(data)
+            size = await table.size()
 
-        table.update(data)
+            assert size == 10
 
-        size2 = await table.size()
-        assert size2 == 20
+            table.update(data)
 
-        await client.terminate()
+            size2 = await table.size()
+            assert size2 == 20
 
     @pytest.mark.asyncio
     async def test_starlette_handler_table_update(self):
@@ -118,18 +121,16 @@ async def test_starlette_handler_table_update(self):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        size = await table.size()
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            size = await table.size()
 
-        assert size == 10
+            assert size == 10
 
-        table.update(data)
+            table.update(data)
 
-        size2 = await table.size()
-        assert size2 == 20
-
-        await client.terminate()
+            size2 = await table.size()
+            assert size2 == 20
 
     @pytest.mark.asyncio
     async def test_starlette_handler_table_update_port(self, sentinel):
@@ -137,34 +138,32 @@ async def test_starlette_handler_table_update_port(self, sentinel):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        view = await table.view()
-
-        size = await table.size()
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            view = await table.view()
 
-        assert size == 10
+            size = await table.size()
 
-        for i in range(5):
-            await table.make_port()
+            assert size == 10
 
-        port = await table.make_port()
+            for i in range(5):
+                await table.make_port()
 
-        s = sentinel(False)
+            port = await table.make_port()
 
-        def updater(port_id):
-            s.set(True)
-            assert port_id == port
+            s = sentinel(False)
 
-        view.on_update(updater)
+            def updater(port_id):
+                s.set(True)
+                assert port_id == port
 
-        table.update(data, port_id=port)
+            view.on_update(updater)
 
-        size2 = await table.size()
-        assert size2 == 20
-        assert s.get() is True
+            table.update(data, port_id=port)
 
-        await client.terminate()
+            size2 = await table.size()
+            assert size2 == 20
+            assert s.get() is True
 
     @pytest.mark.asyncio
     async def test_starlette_handler_table_update_row_delta(self, sentinel):
@@ -172,31 +171,29 @@ async def test_starlette_handler_table_update_row_delta(self, sentinel):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        view = await table.view()
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            view = await table.view()
 
-        size = await table.size()
+            size = await table.size()
 
-        assert size == 10
+            assert size == 10
 
-        s = sentinel(False)
+            s = sentinel(False)
 
-        def updater(port_id, delta):
-            s.set(True)
-            assert port_id == 0
-            t2 = Table(delta)
-            assert t2.view().to_dict() == data
+            def updater(port_id, delta):
+                s.set(True)
+                assert port_id == 0
+                t2 = Table(delta)
+                assert t2.view().to_dict() == data
 
-        view.on_update(updater, mode="row")
+            view.on_update(updater, mode="row")
 
-        table.update(data)
+            table.update(data)
 
-        size2 = await table.size()
-        assert size2 == 20
-        assert s.get() is True
-
-        await client.terminate()
+            size2 = await table.size()
+            assert size2 == 20
+            assert s.get() is True
 
     @pytest.mark.asyncio
     async def test_starlette_handler_table_update_row_delta_port(self, sentinel):
@@ -204,37 +201,35 @@ async def test_starlette_handler_table_update_row_delta_port(self, sentinel):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        view = await table.view()
-
-        size = await table.size()
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            view = await table.view()
 
-        assert size == 10
+            size = await table.size()
 
-        for i in range(5):
-            await table.make_port()
+            assert size == 10
 
-        port = await table.make_port()
+            for i in range(5):
+                await table.make_port()
 
-        s = sentinel(False)
+            port = await table.make_port()
 
-        def updater(port_id, delta):
-            s.set(True)
-            assert port_id == port
+            s = sentinel(False)
 
-            t2 = Table(delta)
-            assert t2.view().to_dict() == data
+            def updater(port_id, delta):
+                s.set(True)
+                assert port_id == port
 
-        view.on_update(updater, mode="row")
+                t2 = Table(delta)
+                assert t2.view().to_dict() == data
 
-        table.update(data, port_id=port)
+            view.on_update(updater, mode="row")
 
-        size2 = await table.size()
-        assert size2 == 20
-        assert s.get() is True
+            table.update(data, port_id=port)
 
-        await client.terminate()
+            size2 = await table.size()
+            assert size2 == 20
+            assert s.get() is True
 
     @pytest.mark.asyncio
     async def test_starlette_handler_table_remove(self):
@@ -242,20 +237,18 @@ async def test_starlette_handler_table_remove(self):
         _table = Table(data, index="a")
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        size = await table.size()
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            size = await table.size()
 
-        assert size == 10
+            assert size == 10
 
-        table.remove([i for i in range(5)])
+            table.remove([i for i in range(5)])
 
-        view = await table.view(columns=["a"])
-        output = await view.to_dict()
+            view = await table.view(columns=["a"])
+            output = await view.to_dict()
 
-        assert output == {"a": [i for i in range(5, 10)]}
-
-        await client.terminate()
+            assert output == {"a": [i for i in range(5, 10)]}
 
     @pytest.mark.asyncio
     async def test_starlette_handler_create_view(self):
@@ -263,16 +256,14 @@ async def test_starlette_handler_create_view(self):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        view = await table.view(columns=["a"])
-        output = await view.to_dict()
-
-        assert output == {
-            "a": [i for i in range(10)],
-        }
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            view = await table.view(columns=["a"])
+            output = await view.to_dict()
 
-        await client.terminate()
+            assert output == {
+                "a": [i for i in range(10)],
+            }
 
     @pytest.mark.asyncio
     async def test_starlette_handler_create_view_errors(self):
@@ -280,15 +271,13 @@ async def test_starlette_handler_create_view_errors(self):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
 
-        with pytest.raises(PerspectiveError) as exc:
-            await table.view(columns=["abcde"])
+            with pytest.raises(PerspectiveError) as exc:
+                await table.view(columns=["abcde"])
 
-        assert str(exc.value) == "Invalid column 'abcde' found in View columns.\n"
-
-        await client.terminate()
+            assert str(exc.value) == "Invalid column 'abcde' found in View columns.\n"
 
     @pytest.mark.asyncio
     async def test_starlette_handler_create_view_to_arrow(self):
@@ -296,15 +285,13 @@ async def test_starlette_handler_create_view_to_arrow(self):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        view = await table.view()
-        output = await view.to_arrow()
-        expected = await table.schema()
-
-        assert Table(output).schema(as_string=True) == expected
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            view = await table.view()
+            output = await view.to_arrow()
+            expected = await table.schema()
 
-        await client.terminate()
+            assert Table(output).schema(as_string=True) == expected
 
     @pytest.mark.asyncio
     async def test_starlette_handler_create_view_to_arrow_update(self):
@@ -312,16 +299,24 @@ async def test_starlette_handler_create_view_to_arrow_update(self):
         _table = Table(data)
         MANAGER.host_table(table_name, _table)
 
-        client = await self.websocket_client()
-        table = client.open_table(table_name)
-        view = await table.view()
+        async with self.managed_websocket_client() as client:
+            table = client.open_table(table_name)
+            view = await table.view()
 
-        output = await view.to_arrow()
+            output = await view.to_arrow()
 
-        for _ in range(10):
-            await table.update(output)
+            for _ in range(10):
+                await table.update(output)
 
-        size2 = await table.size()
-        assert size2 == 110
+            size2 = await table.size()
+            assert size2 == 110
+
+    @pytest.mark.asyncio
+    async def test_starlette_handler_get_hosted_table_names(self):
+        table_name = str(random.random())
+        _table = Table(data)
+        MANAGER.host_table(table_name, _table)
 
-        await client.terminate()
+        async with self.managed_websocket_client() as client:
+            names = await client.get_hosted_table_names()
+            assert names == [table_name]
diff --git a/rust/perspective-viewer/Cargo.lock b/rust/perspective-viewer/Cargo.lock
index 7d44a87956..d2da8f306f 100644
--- a/rust/perspective-viewer/Cargo.lock
+++ b/rust/perspective-viewer/Cargo.lock
@@ -101,12 +101,6 @@ version = "0.13.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d301b3b94cb4b2f23d7917810addbbaff90738e0ca2be692bd027e70d7e0330c"
 
-[[package]]
-name = "arrayvec"
-version = "0.7.4"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "96d30a06541fbafbc7f82ed10c06164cfbd2c401138f6addd8404629c4b16711"
-
 [[package]]
 name = "async-lock"
 version = "2.8.0"
@@ -153,6 +147,12 @@ version = "0.13.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9e1b586273c5702936fe7b7d6896644d8be71e6314cfe09d3167c95f712589e8"
 
+[[package]]
+name = "base64"
+version = "0.21.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9d297deb1925b89f2ccc13d7635fa0714f12c87adce1c75356b39ca9b7178567"
+
 [[package]]
 name = "basic-toml"
 version = "0.1.7"
@@ -233,6 +233,7 @@ dependencies = [
  "iana-time-zone",
  "js-sys",
  "num-traits",
+ "serde",
  "wasm-bindgen",
  "windows-targets",
 ]
@@ -256,7 +257,7 @@ dependencies = [
  "anstream",
  "anstyle",
  "clap_lex",
- "strsim",
+ "strsim 0.11.0",
 ]
 
 [[package]]
@@ -362,6 +363,51 @@ dependencies = [
  "syn 2.0.39",
 ]
 
+[[package]]
+name = "darling"
+version = "0.20.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c376d08ea6aa96aafe61237c7200d1241cb177b7d3a542d791f2d118e9cbb955"
+dependencies = [
+ "darling_core",
+ "darling_macro",
+]
+
+[[package]]
+name = "darling_core"
+version = "0.20.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "33043dcd19068b8192064c704b3f83eb464f91f1ff527b44a4e2b08d9cdb8855"
+dependencies = [
+ "fnv",
+ "ident_case",
+ "proc-macro2 1.0.69",
+ "quote 1.0.33",
+ "strsim 0.10.0",
+ "syn 2.0.39",
+]
+
+[[package]]
+name = "darling_macro"
+version = "0.20.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c5a91391accf613803c2a9bf9abccdbaa07c54b4244a5b64883f9c3c137c86be"
+dependencies = [
+ "darling_core",
+ "quote 1.0.33",
+ "syn 2.0.39",
+]
+
+[[package]]
+name = "deranged"
+version = "0.3.11"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b42b6fa04a440b495c8b04d0e71b707c585f83cb9cb28cf8cd0d976c315e31b4"
+dependencies = [
+ "powerfmt",
+ "serde",
+]
+
 [[package]]
 name = "derivative"
 version = "2.2.0"
@@ -961,6 +1007,12 @@ dependencies = [
  "syn 2.0.39",
 ]
 
+[[package]]
+name = "hashbrown"
+version = "0.12.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a9ee70c43aaf417c914396645a0fa852624801b24ebb7ae78fe8272889ac888"
+
 [[package]]
 name = "hashbrown"
 version = "0.14.2"
@@ -988,6 +1040,12 @@ version = "0.3.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d77f7ec81a6d05a3abb01ab6eb7590f6083d08449fe5a1c8b1e620283546ccb7"
 
+[[package]]
+name = "hex"
+version = "0.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f24254aa9a54b5c858eaee2f5bccdb46aaf0e486a595ed5fd8f86ba55232a70"
+
 [[package]]
 name = "http"
 version = "0.2.10"
@@ -1028,6 +1086,12 @@ version = "2.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "25a2bc672d1148e28034f176e01fffebb08b35768468cc954630da77a1449005"
 
+[[package]]
+name = "ident_case"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
+
 [[package]]
 name = "implicit-clone"
 version = "0.4.7"
@@ -1035,7 +1099,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "16c5448a864f9abf124ef8bf2a3cc37eb9fd99fe2e804a8b3235d7357bca2c25"
 dependencies = [
  "implicit-clone-derive",
- "indexmap",
+ "indexmap 2.1.0",
 ]
 
 [[package]]
@@ -1048,6 +1112,17 @@ dependencies = [
  "syn 2.0.39",
 ]
 
+[[package]]
+name = "indexmap"
+version = "1.9.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd070e393353796e801d209ad339e89596eb4c8d430d18ede6a1cced8fafbd99"
+dependencies = [
+ "autocfg",
+ "hashbrown 0.12.3",
+ "serde",
+]
+
 [[package]]
 name = "indexmap"
 version = "2.1.0"
@@ -1055,7 +1130,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d530e1a18b1cb4c484e6e34556a0d948706958449fca0cab753d649f2bce3d1f"
 dependencies = [
  "equivalent",
- "hashbrown",
+ "hashbrown 0.14.2",
+ "serde",
 ]
 
 [[package]]
@@ -1248,14 +1324,10 @@ dependencies = [
 ]
 
 [[package]]
-name = "num-format"
-version = "0.4.4"
+name = "num-conv"
+version = "0.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a652d9771a63711fd3c3deb670acfbe5c30a4072e664d7a3bf5a9e1056ac72c3"
-dependencies = [
- "arrayvec",
- "itoa",
-]
+checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
 
 [[package]]
 name = "num-traits"
@@ -1317,7 +1389,7 @@ checksum = "9b2a4787296e9989611394c33f193f676704af1686e70b8f8033ab5ba9a35a94"
 
 [[package]]
 name = "perspective"
-version = "2.8.1"
+version = "2.9.0"
 dependencies = [
  "anyhow",
  "async-lock",
@@ -1332,12 +1404,13 @@ dependencies = [
  "js-intern",
  "js-sys",
  "nom",
- "num-format",
  "procss",
  "rmp-serde",
  "serde",
  "serde-wasm-bindgen 0.6.1",
  "serde_json",
+ "serde_with",
+ "strum 0.26.1",
  "tracing",
  "tracing-subscriber",
  "wasm-bindgen",
@@ -1349,7 +1422,7 @@ dependencies = [
 
 [[package]]
 name = "perspective-bootstrap"
-version = "2.8.1"
+version = "2.9.0"
 dependencies = [
  "clap",
  "flate2",
@@ -1358,14 +1431,14 @@ dependencies = [
 
 [[package]]
 name = "perspective-bootstrap-runtime"
-version = "2.8.1"
+version = "2.9.0"
 dependencies = [
  "flate2",
 ]
 
 [[package]]
 name = "perspective-bundle"
-version = "2.8.1"
+version = "2.9.0"
 dependencies = [
  "wasm-bindgen-cli-support",
  "wasm-opt",
@@ -1373,7 +1446,7 @@ dependencies = [
 
 [[package]]
 name = "perspective-lint"
-version = "2.8.1"
+version = "2.9.0"
 dependencies = [
  "glob",
  "yew-fmt",
@@ -1422,6 +1495,12 @@ dependencies = [
  "thiserror",
 ]
 
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
 [[package]]
 name = "predicates"
 version = "2.1.5"
@@ -1762,6 +1841,36 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "serde_with"
+version = "3.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15d167997bd841ec232f5b2b8e0e26606df2e7caa4c31b95ea9ca52b200bd270"
+dependencies = [
+ "base64 0.21.7",
+ "chrono",
+ "hex",
+ "indexmap 1.9.3",
+ "indexmap 2.1.0",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "serde_with_macros",
+ "time",
+]
+
+[[package]]
+name = "serde_with_macros"
+version = "3.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "865f9743393e638991566a8b7a479043c2c8da94a33e0a31f18214c9cae0a64d"
+dependencies = [
+ "darling",
+ "proc-macro2 1.0.69",
+ "quote 1.0.33",
+ "syn 2.0.39",
+]
+
 [[package]]
 name = "sharded-slab"
 version = "0.1.7"
@@ -1786,6 +1895,12 @@ version = "1.11.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "4dccd0940a2dcdf68d092b8cbab7dc0ad8fa938bf95787e1b916b0e3d0e8e970"
 
+[[package]]
+name = "strsim"
+version = "0.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "73473c0e59e6d5812c5dfe2a064a6444949f089e20eec9a2e5506596494e4623"
+
 [[package]]
 name = "strsim"
 version = "0.11.0"
@@ -1798,6 +1913,15 @@ version = "0.24.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "063e6045c0e62079840579a7e47a355ae92f60eb74daaf156fb1e84ba164e63f"
 
+[[package]]
+name = "strum"
+version = "0.26.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "723b93e8addf9aa965ebe2d11da6d7540fa2283fcea14b3371ff055f7ba13f5f"
+dependencies = [
+ "strum_macros 0.26.1",
+]
+
 [[package]]
 name = "strum_macros"
 version = "0.24.3"
@@ -1811,6 +1935,19 @@ dependencies = [
  "syn 1.0.109",
 ]
 
+[[package]]
+name = "strum_macros"
+version = "0.26.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7a3417fc93d76740d974a01654a09777cb500428cc874ca9f45edfe0c4d4cd18"
+dependencies = [
+ "heck 0.4.1",
+ "proc-macro2 1.0.69",
+ "quote 1.0.33",
+ "rustversion",
+ "syn 2.0.39",
+]
+
 [[package]]
 name = "syn"
 version = "0.15.44"
@@ -1902,6 +2039,37 @@ dependencies = [
  "once_cell",
 ]
 
+[[package]]
+name = "time"
+version = "0.3.34"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c8248b6521bb14bc45b4067159b9b6ad792e2d6d754d6c41fb50e29fefe38749"
+dependencies = [
+ "deranged",
+ "itoa",
+ "num-conv",
+ "powerfmt",
+ "serde",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ef927ca75afb808a4d64dd374f00a2adf8d0fcff8e7b184af886c3c87ec4a3f3"
+
+[[package]]
+name = "time-macros"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7ba3a3ef41e6672a2f0f001392bb5dcd3ff0a9992d618ca761a11c3121547774"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
 [[package]]
 name = "tokio"
 version = "1.34.0"
@@ -1935,7 +2103,7 @@ version = "0.19.15"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1b5bb770da30e5cbfde35a2d7b9b8a2c4b8ef89548a7a6aeab5c9a576e3e7421"
 dependencies = [
- "indexmap",
+ "indexmap 2.1.0",
  "toml_datetime",
  "winnow",
 ]
@@ -2246,8 +2414,8 @@ checksum = "fc942673e7684671f0c5708fc18993569d184265fd5223bb51fc8e5b9b6cfd52"
 dependencies = [
  "anyhow",
  "libc",
- "strum",
- "strum_macros",
+ "strum 0.24.1",
+ "strum_macros 0.24.3",
  "tempfile",
  "thiserror",
  "wasm-opt-cxx-sys",
@@ -2419,7 +2587,7 @@ dependencies = [
  "futures",
  "gloo 0.10.0",
  "implicit-clone",
- "indexmap",
+ "indexmap 2.1.0",
  "js-sys",
  "prokio",
  "rustversion",
@@ -2436,9 +2604,9 @@ dependencies = [
 
 [[package]]
 name = "yew-fmt"
-version = "0.3.0"
+version = "0.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "341d52569c5c43344e18de1101a2243c08010d3e37fd282dbec0f21657c7eec3"
+checksum = "5dd6092bf0a95eb3d61a085a9f079c67fa19ba365455df6b6036c544e22b5ce0"
 dependencies = [
  "anyhow",
  "basic-toml",
diff --git a/rust/perspective-viewer/Cargo.toml b/rust/perspective-viewer/Cargo.toml
index fef8198338..da4ac8272e 100644
--- a/rust/perspective-viewer/Cargo.toml
+++ b/rust/perspective-viewer/Cargo.toml
@@ -12,7 +12,7 @@
 
 [package]
 name = "perspective"
-version = "2.8.1"
+version = "2.9.0"
 authors = ["Andrew Stein <steinlink@gmail.com>"]
 edition = "2021"
 description = "A data visualization and analytics component, especially well-suited for large and/or streaming datasets."
@@ -99,9 +99,6 @@ js-sys = "0.3.64"
 # Parse ExprTK for syntax highlighting.
 nom = "7.1.1"
 
-# Comma-sep numeric representation
-num-format = "0.4.4"
-
 # MessagePack serialization
 rmp-serde = "1.1.1"
 
@@ -129,6 +126,8 @@ yew = { version = "0.21.0", features = ["csr"] }
 
 # Browser stdlib bindings
 web-sys.version = "0.3.64"
+
+# Browser stdlib bindings
 web-sys.features = [
     "Blob",
     "Clipboard",
@@ -179,3 +178,6 @@ web-sys.features = [
     "VisibilityState",
     "Window",
 ]
+
+serde_with = "3.6.1"
+strum = { version = "0.26.1", features = ["derive"] }
diff --git a/rust/perspective-viewer/build.js b/rust/perspective-viewer/build.js
index 4ed5b35a70..d9a2ddb80e 100644
--- a/rust/perspective-viewer/build.js
+++ b/rust/perspective-viewer/build.js
@@ -40,6 +40,11 @@ const BUILD = [
         plugins: [PerspectiveEsbuildPlugin({ wasm: { inline: true } })],
         outfile: "dist/esm/perspective-viewer.inline.js",
     },
+    {
+        entryPoints: ["src/ts/migrate.ts"],
+        format: "esm",
+        outfile: "dist/esm/migrate.js",
+    },
     {
         entryPoints: ["src/ts/migrate.ts"],
         format: "cjs",
diff --git a/rust/perspective-viewer/build.rs b/rust/perspective-viewer/build.rs
index 633742f2b4..1684f19b5a 100644
--- a/rust/perspective-viewer/build.rs
+++ b/rust/perspective-viewer/build.rs
@@ -58,6 +58,7 @@ fn main() -> Result<(), anyhow::Error> {
     if !cfg!(feature = "define_custom_elements_async") {
         build.add_file("variables.less");
         build.add_file("icons.less");
+        build.add_file("intl.less");
         build.add_file("pro.less");
         build.add_file("pro-dark.less");
         build.add_file("monokai.less");
@@ -68,6 +69,12 @@ fn main() -> Result<(), anyhow::Error> {
         build.add_file("gruvbox-dark.less");
         build.add_file("dracula.less");
         build.add_file("themes.less");
+        build.add_file("intl/de.less");
+        build.add_file("intl/es.less");
+        build.add_file("intl/fr.less");
+        build.add_file("intl/ja.less");
+        build.add_file("intl/pt.less");
+        build.add_file("intl/zh.less");
         build.compile()?.write("./target/themes")?;
     }
 
diff --git a/rust/perspective-viewer/package.json b/rust/perspective-viewer/package.json
index 2a523909bc..4e44e3b752 100644
--- a/rust/perspective-viewer/package.json
+++ b/rust/perspective-viewer/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-viewer",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "The `<perspective-viewer>` Custom Element, frontend for Perspective.js",
     "repository": {
         "type": "git",
@@ -40,12 +40,12 @@
         "access": "public"
     },
     "dependencies": {
-        "@finos/perspective": "^2.8.1"
+        "@finos/perspective": "^2.9.0"
     },
     "devDependencies": {
         "react": "^16.14.0",
-        "@finos/perspective-esbuild-plugin": "^2.8.1",
-        "@finos/perspective-test": "^2.8.1",
+        "@finos/perspective-esbuild-plugin": "^2.9.0",
+        "@finos/perspective-test": "^2.9.0",
         "cpy": "^9.0.1"
     }
 }
diff --git a/rust/perspective-viewer/rustfmt.toml b/rust/perspective-viewer/rustfmt.toml
index 6ea11f7060..526324e83b 100644
--- a/rust/perspective-viewer/rustfmt.toml
+++ b/rust/perspective-viewer/rustfmt.toml
@@ -38,4 +38,5 @@ group_imports = "StdExternalCrate"
 imports_granularity = "Module"
 newline_style = "Unix"
 condense_wildcard_suffixes = true
-match_block_trailing_comma = true
\ No newline at end of file
+match_block_trailing_comma = true
+yew.use_small_heuristics = "Max"
diff --git a/rust/perspective-viewer/src/less/column-dropdown.less b/rust/perspective-viewer/src/less/column-dropdown.less
index 9261292d95..f49c5eff75 100644
--- a/rust/perspective-viewer/src/less/column-dropdown.less
+++ b/rust/perspective-viewer/src/less/column-dropdown.less
@@ -24,7 +24,7 @@
     position: fixed;
     z-index: 10000;
     outline: none;
-    font-size: 12px;
+    font-size: 0.75em;
     border: inherit;
     // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
     user-select: none;
@@ -56,6 +56,10 @@
         font-size: 8px;
     }
 
+    .no-results:before {
+        content: var(--no-results--content, "Invalid Column");
+    }
+
     #add-expression {
         &:before {
             @include icon;
diff --git a/rust/perspective-viewer/src/less/column-selector.less b/rust/perspective-viewer/src/less/column-selector.less
index 8233913f2b..e2fe08dd7f 100644
--- a/rust/perspective-viewer/src/less/column-selector.less
+++ b/rust/perspective-viewer/src/less/column-selector.less
@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+@import "dom/scrollbar.less";
+
 // TODO this could be a class
 @mixin icon {
     background-repeat: no-repeat;
@@ -21,6 +23,10 @@
 }
 
 :host {
+    #add-expression-button:before {
+        content: var(--add-expression-button--content, "New Column");
+    }
+
     .column-selector-column-title {
         display: flex;
         width: 100%;
@@ -78,7 +84,6 @@
         border: var(--column-add--border, 1px solid transparent);
         min-height: 24px;
         flex-direction: row;
-        font-size: 12px;
         background-color: #8b868045;
         border-radius: 2px;
         display: flex;
@@ -182,7 +187,6 @@
         display: flex;
         flex-direction: row-reverse;
         align-items: center;
-        font-size: 12px;
 
         // Expression column toolbar buttons
         span.expression-edit-button,
@@ -231,7 +235,6 @@
             cursor: move;
             display: flex;
             align-items: start;
-            font-size: 12px;
             flex-grow: 1;
             color: inherit;
             box-sizing: border-box;
@@ -309,30 +312,16 @@
         overflow-x: hidden !important;
         overflow-y: scroll;
         min-height: 20%;
-
-        &::-webkit-scrollbar-thumb {
-            border: 0 solid var(--icon--color);
-            border-left-width: 1px;
-        }
-
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: rgba(0, 0, 0, 0.1);
-        }
-
-        &::-webkit-scrollbar,
-        &::-webkit-scrollbar-corner {
-            background-color: transparent;
-            width: 6px;
-        }
+        @include scrollbar;
     }
 
     #sub-columns:before {
-        font-size: 9px;
+        font-size: var(--label--font-size, 0.75em);
         padding: var(--column_type--padding, 0px 0px 0px 0px);
         position: absolute;
         margin-top: 14px;
         top: 0;
-        content: "All Columns";
+        content: var(--all-columns-label--content, "All Columns");
     }
 
     #sub-columns #add-expression {
@@ -405,6 +394,30 @@
             }
         }
 
+        // .column-selector-column[data-index="0"]:before {
+        //     content: var(--column-selector-column-0--label, attr(data-label));
+        // }
+
+        // .column-selector-column[data-index="1"]:before {
+        //     content: var(--column-selector-column-1--label, attr(data-label));
+        // }
+
+        // .column-selector-column[data-index="2"]:before {
+        //     content: var(--column-selector-column-2--label, attr(data-label));
+        // }
+
+        // .column-selector-column[data-index="3"]:before {
+        //     content: var(--column-selector-column-3--label, attr(data-label));
+        // }
+
+        // .column-selector-column[data-index="4"]:before {
+        //     content: var(--column-selector-column-4--label, attr(data-label));
+        // }
+
+        // .column-selector-column[data-index="5"]:before {
+        //     content: var(--column-selector-column-5--label, attr(data-label));
+        // }
+
         .column-selector-column {
             position: relative;
 
@@ -418,12 +431,12 @@
             }
 
             &:before {
-                font-size: 9px;
+                font-size: var(--label--font-size, 0.75em);
                 left: 0px;
                 padding: var(--column_type--padding, 0px 0px 0px 0px);
                 position: absolute;
                 margin-top: -43px;
-                content: attr(data-label);
+                content: var(--default-column-title, attr(data-label));
             }
 
             &[data-label] {
diff --git a/rust/perspective-viewer/src/less/column-settings-panel.less b/rust/perspective-viewer/src/less/column-settings-panel.less
index aeb435a796..5275b7bf72 100644
--- a/rust/perspective-viewer/src/less/column-settings-panel.less
+++ b/rust/perspective-viewer/src/less/column-settings-panel.less
@@ -25,7 +25,7 @@
 
     .item_title {
         flex: 0 0 auto;
-        font-size: 9px;
+        font-size: var(--label--font-size, 0.75em);
     }
 
     .radio-list-item label {
@@ -41,7 +41,7 @@
             border: none;
             margin-bottom: 0.5em;
             font-family: inherit;
-            font-size: 12px;
+            font-size: 1em;
             &:disabled {
                 background-color: var(--inactive--color);
             }
@@ -94,4 +94,138 @@
             }
         }
     }
+
+    label#color-label:before {
+        content: var(--color-label--content, "Color");
+    }
+
+    label#format-label:before {
+        content: var(--format-label--content, "Format");
+    }
+
+    label#timezone-label:before {
+        content: var(--timezone-label--content, "Timezone");
+    }
+
+    label#date-style-label:before {
+        content: var(--date-style-label--content, "Date Style");
+    }
+
+    label#time-style-label:before {
+        content: var(--time-style-label--content, "Time Style");
+    }
+
+    label#foreground-label:before {
+        content: var(--foreground-label--content, "Foreground");
+    }
+
+    label#background-label:before {
+        content: var(--background-label--content, "Background");
+    }
+
+    label#series-label:before {
+        content: var(--series-label--content, "Series");
+    }
+
+    label#color-range-label:before {
+        content: var(--color-range-label--content, "Color Range");
+    }
+
+    label#style-label:before {
+        content: var(--style-label--content, "Style");
+    }
+
+    label#minimum-integer-digits-label:before {
+        content: var(
+            --minimum-integer-digits-label--content,
+            "Minimum Integer Digits"
+        );
+    }
+
+    label#rounding-increment-label:before {
+        content: var(--rounding-increment-label--content, "Rounding Increment");
+    }
+
+    label#notation-label:before {
+        content: var(--notation-label--content, "Notation");
+    }
+
+    label#use-grouping-label:before {
+        content: var(--use-grouping-label--content, "Use Grouping");
+    }
+
+    label#sign-display-label:before {
+        content: var(--sign-display-label--content, "Sign Display");
+    }
+
+    label#max-value-label:before {
+        content: var(--max-value-label--content, "Max Value");
+    }
+
+    label#rounding-priority-label:before {
+        content: var(--rounding-priority-label--content, "Rounding Priority");
+    }
+
+    label#rounding-mode-label:before {
+        content: var(--rounding-mode-label--content, "Rounding Mode");
+    }
+
+    label#trailing-zero-display-label:before {
+        content: var(
+            --trailing-zero-display-label--content,
+            "Trailing Zero Display"
+        );
+    }
+
+    label#significant-digits-label:before {
+        content: var(--significant-digits-label--content, "Significant Digits");
+    }
+
+    label#fractional-digits-label:before {
+        content: var(--fractional-digits-label--content, "Fractional Digits");
+    }
+
+    label#year-label:before {
+        content: var(--year-label--content, "Year");
+    }
+
+    label#month-label:before {
+        content: var(--month-label--content, "Month");
+    }
+
+    label#day-label:before {
+        content: var(--day-label--content, "Day");
+    }
+
+    label#weekday-label:before {
+        content: var(--weekday-label--content, "Weekday");
+    }
+
+    label#hour-label:before {
+        content: var(--hour-label--content, "Hour");
+    }
+
+    label#minute-label:before {
+        content: var(--minute-label--content, "Minute");
+    }
+
+    label#second-label:before {
+        content: var(--second-label--content, "Second");
+    }
+
+    label#fractional-seconds-label:before {
+        content: var(--fractional-seconds-label--content, "Fractional Seconds");
+    }
+
+    label#hours-label:before {
+        content: var(--hours-label--content, "12/24 Hours");
+    }
+
+    div.tab-title#Style:before {
+        content: var(--style-tab-label--content, "Style");
+    }
+
+    div.tab-title#Attributes:before {
+        content: var(--attributes-tab-label--content, "Attributes");
+    }
 }
diff --git a/rust/perspective-viewer/src/less/column-style.less b/rust/perspective-viewer/src/less/column-style.less
index 432d978496..b801e231b1 100644
--- a/rust/perspective-viewer/src/less/column-style.less
+++ b/rust/perspective-viewer/src/less/column-style.less
@@ -22,8 +22,6 @@
 :host {
     #column-style-container {
         outline: none;
-        font-size: 12px;
-        border: inherit;
         user-select: none;
 
         &.no-style {
@@ -31,20 +29,27 @@
             background-color: #8b868045;
         }
 
+        .is-default-value .dropdown-width-container {
+            background-color: var(--plugin--background);
+        }
+
         .dropdown-width-container {
+            cursor: pointer;
             height: 24px;
             border: 1px solid transparent;
             border-radius: 2px;
             padding: 0 8px;
             border-radius: 2px;
-            border: 1px solid transparent;
+            // border: 1px solid transparent;
+            border-color: var(--inactive--color, #666);
 
             &:hover {
-                border-color: var(--inactive--color, #666);
+                background-color: var(--plugin--background);
             }
         }
 
         select {
+            cursor: pointer;
             font-size: 10px;
             height: 24px;
             // padding-bottom: 2px;
@@ -53,10 +58,39 @@
         }
 
         label {
-            font-size: 9px;
+            display: block;
+            font-size: var(--label--font-size, 0.75em);
+            margin: 4px 0 2px 0;
             width: 100%;
         }
 
+        span.reset-default-style-disabled {
+            margin-left: 4px;
+            width: 14px;
+            height: 14px;
+            border: 1px solid var(--inactive--border-color);
+            border-radius: 2px;
+        }
+
+        span.reset-default-style {
+            cursor: pointer;
+            width: 22px;
+            height: 22px;
+            margin-right: -4px;
+
+            &:before {
+                @include icon;
+                width: 22px;
+                height: 22px;
+                -webkit-mask-image: var(--close-icon--mask-image);
+                mask-image: var(--close-icon--mask-image);
+            }
+        }
+
+        .is-default-value input.parameter {
+            background-color: var(--plugin--background);
+        }
+
         input.parameter {
             background: none;
             color: inherit;
@@ -66,14 +100,29 @@
 
         input.parameter[type="number"] {
             flex: 1 1 auto;
-            text-align: right;
-            border-bottom-width: 1px;
+            text-align: left;
+            font-family: inherit;
+            width: 0;
+            border-radius: 2px;
+            font-size: 10px;
+            height: 24px;
+            padding-left: 8px;
+            border-width: 1px;
             border-color: var(
                 --input--border-color,
                 var(--inactive--color, inherit)
             );
         }
 
+        input.parameter.parameter-min[type="number"] {
+            border-radius: 2px 0 0 2px;
+        }
+
+        input.parameter.parameter-max[type="number"] {
+            border-radius: 0 2px 2px 0;
+            border-left-width: 0px;
+        }
+
         input[type="number"]::-webkit-inner-spin-button,
         input[type="number"]::-webkit-outer-spin-button {
             opacity: 1;
@@ -113,11 +162,18 @@
         }
 
         div.section {
-            margin-right: 6px;
-            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
             flex: 1 1 100%;
         }
 
+        div.bool-field {
+            display: flex;
+            label {
+                padding: 0 8px;
+            }
+        }
+
         div.inner_section {
             margin-top: 4px;
             width: 0px;
@@ -129,54 +185,74 @@
             display: flex;
             align-items: center;
             flex-wrap: wrap;
+            margin-bottom: 10px;
+        }
+
+        fieldset {
+            margin: 0;
+        }
+
+        fieldset.style-control {
+            border: none;
+            padding: 0px 0;
         }
 
         .color-gradient-container {
             display: flex;
+            align-items: center;
             flex-wrap: nowrap;
-            flex: 1 1 auto;
+            flex: 1 1 100%;
             .color-thermometer {
                 flex: 1 1 auto;
                 height: 24px;
             }
         }
 
+        .color-selector {
+            display: grid;
+
+            input {
+                grid-column: 1;
+                grid-row: 1;
+            }
+            .color-label {
+                font-size: 18.5px;
+                grid-column: 1;
+                grid-row: 1;
+                margin: 0;
+                font-family: var(--button--font-family, inherit);
+                color: var(--sign--color, white);
+                width: 36px;
+                height: 24px;
+                text-align: center;
+                z-index: 1;
+            }
+        }
+
         input[type="color"] {
-            width: 36px;
+            width: 100%;
             height: 24px;
             cursor: pointer;
             padding: 0;
             font-family: inherit;
             overflow: hidden;
-            border-radius: 6px;
+            border-radius: 12px;
 
             &:hover {
                 opacity: 0.8;
             }
 
-            &:before {
-                position: absolute;
-                font-family: var(--button--font-family, inherit);
-                margin-top: -1px;
-                margin-left: 12px;
-                font-size: 20px;
-                content: var(--column-style-pos-color--content, "+");
-                color: var(--sign--color, white);
-            }
-
-            &#pos-color-param {
-                border-radius: 6px 0 0 6px;
+            &.pos-color-param {
+                width: 36px;
+                border-radius: 12px 0 0 12px;
                 margin: 0 1px 0 0;
             }
 
-            &#neg-color-param {
-                border-radius: 0 6px 6px 0;
+            &.neg-color-param {
+                width: 36px;
+                border-radius: 0 12px 12px 0;
                 margin: 0 0 0 1px;
             }
-
-            &#neg-color-param:before {
-                content: var(--column-style-neg-color--content, "-");
-            }
         }
 
         ::-webkit-color-swatch-wrapper {
diff --git a/rust/perspective-viewer/src/less/column-symbol-attributes.less b/rust/perspective-viewer/src/less/column-symbol-attributes.less
index 9bd247e2f4..83ac78dee5 100644
--- a/rust/perspective-viewer/src/less/column-symbol-attributes.less
+++ b/rust/perspective-viewer/src/less/column-symbol-attributes.less
@@ -49,7 +49,7 @@
         }
 
         &:before {
-            font-size: 9px;
+            font-size: var(--label--font-size, 0.75em);
             left: 0px;
             padding: var(--column_type--padding, 0px 0px 0px 0px);
             position: absolute;
diff --git a/rust/perspective-viewer/src/less/config-selector.less b/rust/perspective-viewer/src/less/config-selector.less
index ce9a4b2872..aa22a451f2 100644
--- a/rust/perspective-viewer/src/less/config-selector.less
+++ b/rust/perspective-viewer/src/less/config-selector.less
@@ -162,23 +162,19 @@
         }
 
         #group_by label.pivot-selector-label:before {
-            content: var(--group_by--content, "Group By");
+            content: var(--group-by-label--content, "Group By");
         }
 
         #split_by label.pivot-selector-label:before {
-            content: var(--split_by--content, "Split By");
+            content: var(--split-by-label--content, "Split By");
         }
 
         #sort label.pivot-selector-label:before {
-            content: "Order By";
+            content: var(--sort-label--content, "Order By");
         }
 
-        // #filter {
-        //     min-width: 300px;
-        // }
-
         #filter label.pivot-selector-label:before {
-            content: "Where";
+            content: var(--filter-label--content, "Where");
         }
 
         .highlight-drop {
@@ -235,7 +231,6 @@
             display: none;
             margin: 0;
             padding: 0 0 0 0;
-            font-size: 12px;
             min-height: 26px;
             // margin-bottom: -1px;
 
@@ -259,7 +254,7 @@
             // color: var(--inactive--color);
             white-space: nowrap;
             padding: var(--column-drop-container--padding, 0px);
-            font-size: 12px;
+            font-size: var(--label--font-size, 0.75em);
             display: inline-block;
         }
 
@@ -271,7 +266,7 @@
             position: absolute;
             top: 0px;
             margin: var(--column-drop-label--margin, -16px 0px 0px 0px);
-            font-size: 9px; //var(--column-drop-label--font-size, 10px);
+            font-size: var(--label--font-size, 0.75em);
             display: var(--column-drop-label--display, none);
         }
 
@@ -279,7 +274,7 @@
             cursor: pointer;
             flex-grow: 0;
             font-family: inherit;
-            font-size: 9px;
+            font-size: var(--label--font-size, 0.75em);
             user-select: none;
             padding: 0;
             align-self: center;
diff --git a/rust/perspective-viewer/src/less/containers/dropdown-menu.less b/rust/perspective-viewer/src/less/containers/dropdown-menu.less
index 98e1b22308..10b5e22714 100644
--- a/rust/perspective-viewer/src/less/containers/dropdown-menu.less
+++ b/rust/perspective-viewer/src/less/containers/dropdown-menu.less
@@ -14,7 +14,7 @@
     position: fixed;
     z-index: 10000;
     outline: none;
-    font-size: 14px;
+    font-size: 0.75em;
     border: inherit;
     box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
     user-select: none;
@@ -26,9 +26,7 @@
     min-width: 80px;
 
     code {
-        font-size: 12px;
-        font-family: var(--interface-monospace--font-family),
-            monospace;
+        font-family: var(--interface-monospace--font-family), monospace;
     }
 
     input {
@@ -38,9 +36,7 @@
         border: none;
         border-bottom: 1px solid var(--inactive--color, #ccc);
         background: transparent;
-        font-family: var(--interface-monospace--font-family),
-            monospace;
-        font-size: 12px;
+        font-family: var(--interface-monospace--font-family), monospace;
         color: inherit;
         outline: none;
     }
@@ -55,7 +51,7 @@
     }
 
     .dropdown-group-label {
-        font-size: 10px;
+        font-size: var(--label--font-size, 0.75em);
     }
 
     .dropdown-group-container {
@@ -90,4 +86,4 @@
     .dropdown-group-container span:hover {
         background-color: rgba(0, 0, 0, 0.05);
     }
-}
\ No newline at end of file
+}
diff --git a/rust/perspective-viewer/src/less/containers/tabs.less b/rust/perspective-viewer/src/less/containers/tabs.less
index fa36bd1b37..32577c08d1 100644
--- a/rust/perspective-viewer/src/less/containers/tabs.less
+++ b/rust/perspective-viewer/src/less/containers/tabs.less
@@ -10,6 +10,8 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+@import "dom/scrollbar.less";
+
 :host {
     .tab-gutter {
         border-color: var(--inactive--color, #6e6e6e);
@@ -34,7 +36,7 @@
             cursor: pointer;
 
             .tab-title {
-                font-size: 12px;
+                font-size: 10px;
                 padding: 10px;
                 border-bottom: 1px solid var(--inactive--color, #6e6e6e);
             }
@@ -61,12 +63,15 @@
         }
     }
     .tab-content {
+        overflow-y: scroll;
+        max-height: calc(100% - 90px);
+        @include scrollbar;
+
         .tab-section {
-            padding: 8px;
+            padding: 8px 4px 8px 8px;
             // border-bottom: 1px solid var(--inactive--border-color);
         }
         .text {
-            font-size: 14px;
             margin-left: 1em;
         }
     }
diff --git a/rust/perspective-viewer/src/less/dom/scrollbar.less b/rust/perspective-viewer/src/less/dom/scrollbar.less
new file mode 100644
index 0000000000..0d57dd1cba
--- /dev/null
+++ b/rust/perspective-viewer/src/less/dom/scrollbar.less
@@ -0,0 +1,28 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@mixin scrollbar {
+        &::-webkit-scrollbar-thumb {
+            border: 0 solid var(--icon--color);
+            border-left-width: 1px;
+        }
+
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        &::-webkit-scrollbar,
+        &::-webkit-scrollbar-corner {
+            background-color: transparent;
+            width: 6px;
+        }
+}
\ No newline at end of file
diff --git a/rust/perspective-viewer/src/less/empty-column.less b/rust/perspective-viewer/src/less/empty-column.less
index cb7e912031..6aab52ca04 100644
--- a/rust/perspective-viewer/src/less/empty-column.less
+++ b/rust/perspective-viewer/src/less/empty-column.less
@@ -59,7 +59,6 @@
         width: calc(100% - 7px);
         outline: none;
         padding-left: 10px;
-        font-size: 12px;
         font-family: inherit;
     }
 
diff --git a/rust/perspective-viewer/src/less/expression-editor.less b/rust/perspective-viewer/src/less/expression-editor.less
index 5736230f8e..6250d3a407 100644
--- a/rust/perspective-viewer/src/less/expression-editor.less
+++ b/rust/perspective-viewer/src/less/expression-editor.less
@@ -24,7 +24,6 @@
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            font-size: 12px;
             min-height: 1.5em;
             color: var(--error--color);
             top: 0;
@@ -125,7 +124,6 @@
         flex: 1;
         justify-content: center;
         font-family: inherit;
-        font-size: 12px;
         border: 1px solid var(--icon--color);
         height: 18px;
         padding: 2px 12px;
diff --git a/rust/perspective-viewer/src/less/filter-dropdown.less b/rust/perspective-viewer/src/less/filter-dropdown.less
index 2a0d1ed399..3ddbd15023 100644
--- a/rust/perspective-viewer/src/less/filter-dropdown.less
+++ b/rust/perspective-viewer/src/less/filter-dropdown.less
@@ -14,7 +14,7 @@
     position: fixed;
     z-index: 10000;
     outline: none;
-    font-size: 12px;
+    font-size: 0.75em;
     border: inherit;
     box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
     user-select: none;
diff --git a/rust/perspective-viewer/src/less/filter-item.less b/rust/perspective-viewer/src/less/filter-item.less
index 5bbf333efd..f3a74bc845 100644
--- a/rust/perspective-viewer/src/less/filter-item.less
+++ b/rust/perspective-viewer/src/less/filter-item.less
@@ -22,7 +22,6 @@
                 align-items: center;
                 position: relative;
                 margin-top: 1px;
-                font-size: 12px;
                 min-width: 45px;
                 overflow: hidden;
                 height: 16px;
@@ -42,7 +41,6 @@
                     border: none;
                     border-bottom: 1px solid var(--inactive--color, #ccc);
                     background: transparent;
-                    font-size: 12px;
                     color: inherit;
                 }
 
diff --git a/rust/perspective-viewer/src/less/form/code-editor.less b/rust/perspective-viewer/src/less/form/code-editor.less
index 671376d600..d2e0b9b2c2 100644
--- a/rust/perspective-viewer/src/less/form/code-editor.less
+++ b/rust/perspective-viewer/src/less/form/code-editor.less
@@ -21,7 +21,6 @@
             padding: 6px;
             box-sizing: border-box;
             position: absolute;
-            font-size: 12px;
             font-weight: 400;
             font-family: var(--interface-monospace--font-family, monospace);
             top: 0;
@@ -45,7 +44,6 @@
             left: 0;
             right: 0;
             pointer-events: none;
-            font-size: 12px;
             font-weight: 400;
             font-family: var(--interface-monospace--font-family, monospace);
             color: var(--code-editor-error--color, red);
@@ -92,8 +90,8 @@
             position: absolute;
             width: 100%;
             height: 100%;
-            font-size: 12px;
             font-family: var(--interface-monospace--font-family, monospace);
+            font-size: 1em;
             resize: none;
             padding: 6px;
             padding-left: 36px;
@@ -107,4 +105,4 @@
             background-color: transparent;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/rust/perspective-viewer/src/less/function-dropdown.less b/rust/perspective-viewer/src/less/function-dropdown.less
index 6437cdb252..54be01fb8a 100644
--- a/rust/perspective-viewer/src/less/function-dropdown.less
+++ b/rust/perspective-viewer/src/less/function-dropdown.less
@@ -14,7 +14,7 @@
     position: fixed;
     z-index: 10000;
     outline: none;
-    font-size: 12px;
+    font-size: 0.75em;
     border: inherit;
     box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
     user-select: none;
diff --git a/rust/perspective-viewer/src/less/plugin-selector.less b/rust/perspective-viewer/src/less/plugin-selector.less
index f723e49241..070aeee050 100644
--- a/rust/perspective-viewer/src/less/plugin-selector.less
+++ b/rust/perspective-viewer/src/less/plugin-selector.less
@@ -58,6 +58,12 @@
 
             .plugin-select-item-name {
                 padding-left: 10px;
+                font-size: 1.33333em;
+            }
+
+            .plugin-select-item-name:before {
+                // This value is set in a `style` tag from Yew!
+                content: var(--default-column-title);
             }
 
             .plugin-select-item {
diff --git a/rust/perspective-viewer/src/less/render-warning.less b/rust/perspective-viewer/src/less/render-warning.less
index 430e7e02e0..dd0bb6e126 100644
--- a/rust/perspective-viewer/src/less/render-warning.less
+++ b/rust/perspective-viewer/src/less/render-warning.less
@@ -34,7 +34,6 @@
         }
 
         .plugin_information__text {
-            font-size: 12px;
             margin-right: 0.25rem;
             display: flex;
             flex-wrap: wrap;
@@ -58,7 +57,6 @@
         }
 
         .plugin_information__action {
-            font-size: 12px;
             text-decoration: underline;
             cursor: pointer;
             margin-right: 0.25rem;
diff --git a/rust/perspective-viewer/src/less/status-bar.less b/rust/perspective-viewer/src/less/status-bar.less
index ba53022f35..ae6b83b23a 100644
--- a/rust/perspective-viewer/src/less/status-bar.less
+++ b/rust/perspective-viewer/src/less/status-bar.less
@@ -47,6 +47,14 @@
         right: 0;
         height: var(--status-bar--height, 48px);
         border-radius: var(--status-bar--border-radius);
+        #status-bar-placeholder {
+            margin: 0px;
+        }
+
+        input:placeholder-shown + #status-bar-placeholder:before {
+            content: var(--untitled--content, "untitled");
+            color: var(--inactive--color);
+        }
 
         .input-sizer {
             display: inline-block;
@@ -74,7 +82,6 @@
                 padding: 0;
                 border: none;
                 background: transparent;
-                font-size: 12px;
                 color: inherit;
                 height: 100%;
             }
@@ -85,7 +92,6 @@
                 visibility: hidden;
                 white-space: nowrap;
                 padding-right: 12px;
-                font-size: 12px;
             }
 
             &:focus-within {
@@ -111,7 +117,6 @@
             overflow: hidden;
             span {
                 white-space: nowrap;
-                font-size: 12px;
             }
         }
 
@@ -124,7 +129,7 @@
                 height: 22px;
                 select {
                     height: 20px;
-                    font-size: 9px;
+                    font-size: var(--label--font-size, 0.75em);
                 }
             }
         }
@@ -138,7 +143,7 @@
         }
 
         span {
-            font-size: 9px;
+            // font-size: var(--label--font-size, 0.75em);
             margin: 0px 10px;
             user-select: none;
             height: 100%;
@@ -210,6 +215,9 @@
                 -webkit-mask-image: url("../svg/export-icon.svg");
                 mask-image: url("../svg/export-icon.svg");
             }
+            span:before {
+                content: var(--export-button--content, "Export");
+            }
         }
 
         span#lock {
@@ -217,6 +225,9 @@
                 -webkit-mask-image: url("../svg/free-scroll-icon.svg");
                 mask-image: url("../svg/free-scroll-icon.svg");
             }
+            // span:before {
+            //     content: var(--export-button--content, "Export");
+            // }
         }
 
         span#reset {
@@ -224,6 +235,9 @@
                 -webkit-mask-image: url("../svg/revert-icon.svg");
                 mask-image: url("../svg/revert-icon.svg");
             }
+            span:before {
+                content: var(--reset-button--content, "Reset");
+            }
         }
 
         span#copy {
@@ -231,6 +245,9 @@
                 -webkit-mask-image: url("../svg/duplicate-icon.svg");
                 mask-image: url("../svg/duplicate-icon.svg");
             }
+            span:before {
+                content: var(--copy-button--content, "Copy");
+            }
         }
 
         span#theme {
@@ -248,7 +265,7 @@
             color: var(--inactive--color, #ccc);
             border: 1px solid transparent;
             border-radius: 3px;
-            font-size: 9px;
+            font-size: var(--label--font-size, 0.75em);
 
             & > span,
             & > .dropdown-width-container {
@@ -259,7 +276,6 @@
 
             &:before {
                 z-index: 1;
-                font-size: 14px;
             }
 
             &:hover select {
diff --git a/rust/perspective-viewer/src/less/viewer.less b/rust/perspective-viewer/src/less/viewer.less
index 0861d8df9c..79bf5c1695 100644
--- a/rust/perspective-viewer/src/less/viewer.less
+++ b/rust/perspective-viewer/src/less/viewer.less
@@ -57,6 +57,7 @@
     flex-direction: column;
     align-items: stretch;
     font-family: Arial;
+    font-size: 0.75em;
 
     * {
         box-sizing: border-box;
@@ -227,7 +228,7 @@
 
         &:before {
             font-feature-settings: "liga";
-            content: var(--config-button-icon--content, "\1f527");
+            content: var(--config-button-icon--content, "Configure");
         }
     }
 
@@ -293,7 +294,6 @@
     #expr_panel_header_title,
     .sidebar_header_title {
         padding-left: 9px;
-        font-size: 12px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
diff --git a/rust/perspective-viewer/src/rust/components/column_dropdown.rs b/rust/perspective-viewer/src/rust/components/column_dropdown.rs
index 8f2369bb9b..b6df9a4b8f 100644
--- a/rust/perspective-viewer/src/rust/components/column_dropdown.rs
+++ b/rust/perspective-viewer/src/rust/components/column_dropdown.rs
@@ -147,7 +147,7 @@ impl Component for ColumnDropDown {
                                 }
                             }) }
                 } else {
-                    <span class="no-results">{ "Invalid Column" }</span>
+                    <span class="no-results" />
                 }
             }
         };
@@ -157,6 +157,6 @@ impl Component for ColumnDropDown {
             self.width, self.width
         );
 
-        html! { <><style >{ &CSS }</style><style >{ position }</style>{ body }</> }
+        html! { <><style>{ &CSS }</style><style>{ position }</style>{ body }</> }
     }
 }
diff --git a/rust/perspective-viewer/src/rust/components/column_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector.rs
index df4d3f7577..258e7a1b33 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector.rs
@@ -239,10 +239,7 @@ impl Component for ColumnSelector {
         );
 
         let config_selector = html_nested! {
-            <ScrollPanelItem
-                key="config_selector"
-                {size_hint}
-            >
+            <ScrollPanelItem key="config_selector" {size_hint}>
                 <ConfigSelector
                     dragdrop={&ctx.props().dragdrop}
                     session={&ctx.props().session}
@@ -269,15 +266,12 @@ impl Component for ColumnSelector {
                 let column_dropdown = self.column_dropdown.clone();
                 let is_editing = matches!(
                     &ctx.props().selected_column,
-                    Some(ColumnLocator::Plain(x)) | Some(ColumnLocator::Expr(Some(x))) if x == &key
-                );
+                    Some(ColumnLocator::Table(x)) | Some(ColumnLocator::Expression(x))
+                if x == &key );
 
                 let on_open_expr_panel = &ctx.props().on_open_expr_panel;
                 html_nested! {
-                    <ScrollPanelItem
-                        {key}
-                        {size_hint}
-                    >
+                    <ScrollPanelItem {key} {size_hint}>
                         <ActiveColumn
                             {column_dropdown}
                             {idx}
@@ -303,12 +297,10 @@ impl Component for ColumnSelector {
             .chain(columns_iter.inactive())
             .enumerate()
             .map(|(idx, vc)| {
-                let is_editing = matches!(&ctx.props().selected_column, Some(ColumnLocator::Expr(Some(x))) if x.as_str() == vc.name);
+                let selected_column = ctx.props().selected_column.as_ref();
+                let is_editing = matches!(selected_column, Some(ColumnLocator::Expression(x)) if x.as_str() == vc.name);
                 html_nested! {
-                    <ScrollPanelItem
-                        key={vc.name}
-                        size_hint=28.0
-                    >
+                    <ScrollPanelItem key={vc.name} size_hint=28.0>
                         <InactiveColumn
                             {idx}
                             visible={vc.is_visible}
@@ -334,10 +326,7 @@ impl Component for ColumnSelector {
         };
 
         let add_column = html_nested! {
-            <ScrollPanelItem
-                key="__add_expression__"
-                size_hint={size}
-            >
+            <ScrollPanelItem key="__add_expression__" size_hint={size}>
                 <AddExpressionButton
                     on_open_expr_panel={&ctx.props().on_open_expr_panel}
                     selected_column={ctx.props().selected_column.clone()}
@@ -352,9 +341,7 @@ impl Component for ColumnSelector {
         }
 
         let selected_columns = html! {
-            <div
-                id="selected-columns"
-            >
+            <div id="selected-columns">
                 <ScrollPanel
                     id="active-columns"
                     class={active_classes}
@@ -372,9 +359,7 @@ impl Component for ColumnSelector {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("column-selector")}
-                />
+                <LocalStyle href={css!("column-selector")} />
                 <SplitPanel
                     no_wrap=true
                     on_reset={self.on_reset.callback()}
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs
index 91658ceb56..37d48e9069 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/active_column.rs
@@ -79,7 +79,7 @@ impl ActiveColumnProps {
             .and_then(|x| self.session.metadata().get_column_table_type(x))
     }
 
-    fn get_view_type(&self) -> Option<Type> {
+    fn _get_view_type(&self) -> Option<Type> {
         self.get_name()
             .as_ref()
             .and_then(|x| self.session.metadata().get_column_view_type(x))
@@ -286,6 +286,20 @@ impl Component for ActiveColumn {
             }
         });
 
+        let path: String = name
+            .0
+            .clone()
+            .unwrap_or_default()
+            .chars()
+            .map(|x| {
+                if x.is_alphanumeric() {
+                    x.to_ascii_lowercase()
+                } else {
+                    '-'
+                }
+            })
+            .collect();
+
         let col_type = ctx.props().get_table_type();
         match (name, col_type) {
             ((label, ColumnState::Empty), _) => {
@@ -306,6 +320,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
+                        style={format!("--default-column-title:var(--column-selector-column-{}--content)",path)}
                         data-index={ctx.props().idx.to_string()}
                         ondragenter={ondragenter.clone()}
                     >
@@ -319,6 +334,7 @@ impl Component for ActiveColumn {
                     <div
                         class={outer_classes}
                         data-label={label}
+                        style={format!("--default-column-title:var(--column-selector-column-{}--content)",path)}
                         data-index={ctx.props().idx.to_string()}
                         ondragenter={ondragenter.clone()}
                     >
@@ -367,34 +383,23 @@ impl Component for ActiveColumn {
                     class.push("required");
                 };
 
-                // TODO: This doesn't scale well. Need a better attrs API.
-                // Thankfully this will be removed when we unify expression and table columns.
-                let show_edit_btn = match &*ctx.props().renderer.get_active_plugin().unwrap().name()
-                {
-                    "Datagrid" => col_type != Type::Bool,
-                    "X/Y Scatter" => {
-                        ctx.props()
-                            .get_view_type()
-                            .map(|ty| ty == Type::String)
-                            .unwrap_or_default()
-                            && label.as_deref() == Some("Symbol")
-                    },
-                    _ => false,
-                } || is_expression;
+                let can_render_styles = ctx
+                    .props()
+                    .can_render_column_styles(&name)
+                    .unwrap_or_default();
+                let show_edit_btn = is_expression || can_render_styles;
 
                 html! {
                     <div
                         class={outer_classes}
                         data-label={label}
+                        style={format!("--default-column-title:var(--column-selector-column-{}--content)",path)}
                         data-index={ctx.props().idx.to_string()}
                         {onmouseover}
                         {onmouseout}
                         ondragenter={ondragenter.clone()}
                     >
-                        <span
-                            {class}
-                            onmousedown={remove_column}
-                        />
+                        <span {class} onmousedown={remove_column} />
                         <div
                             class={classes}
                             ref={&self.add_expression_ref}
@@ -402,12 +407,8 @@ impl Component for ActiveColumn {
                             {ondragstart}
                             {ondragend}
                         >
-                            <div
-                                class="column-selector-column-border"
-                            >
-                                <TypeIcon
-                                    ty={col_type}
-                                />
+                            <div class="column-selector-column-border">
+                                <TypeIcon ty={col_type} />
                                 if ctx.props().is_aggregated {
                                     <AggregateSelector
                                         column={name.clone()}
@@ -440,9 +441,7 @@ impl Component for ActiveColumn {
                 // `change()` method on this component checks for this).
 
                 html! {
-                    <div
-                        class="column-selector-column"
-                    >
+                    <div class="column-selector-column">
                         <span class="is_column_active inactive" />
                         <div class={classes} />
                     </div>
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/add_expression_button.rs b/rust/perspective-viewer/src/rust/components/column_selector/add_expression_button.rs
index 3f1dcd94b5..99a4a0411b 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/add_expression_button.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/add_expression_button.rs
@@ -41,23 +41,19 @@ pub fn AddExpressionButton(p: &AddExpressionButtonProps) -> Html {
         mo.set(false);
     });
 
-    let onmousedown = p.on_open_expr_panel.reform(|_| ColumnLocator::Expr(None));
-    let class = if *is_mouseover || matches!(p.selected_column, Some(ColumnLocator::Expr(None))) {
+    let onmousedown = p
+        .on_open_expr_panel
+        .reform(|_| ColumnLocator::NewExpression);
+    let class = if *is_mouseover || matches!(p.selected_column, Some(ColumnLocator::NewExpression))
+    {
         classes!("dragdrop-hover")
     } else {
         classes!()
     };
 
     html! {
-        <div
-            id="add-expression"
-            data-index="-1"
-            {class}
-            {onmouseover}
-            {onmouseout}
-            {onmousedown}
-        >
-            <span id="add-expression-title">{ "New Column" }</span>
+        <div id="add-expression" data-index="-1" {class} {onmouseover} {onmouseout} {onmousedown}>
+            <span id="add-expression-button" />
         </div>
     }
 }
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/aggregate_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector/aggregate_selector.rs
index 8c47af08c7..f18be32da5 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/aggregate_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/aggregate_selector.rs
@@ -93,12 +93,8 @@ impl Component for AggregateSelector {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("aggregate-selector")}
-                />
-                <div
-                    class="aggregate-selector-wrapper"
-                >
+                <LocalStyle href={css!("aggregate-selector")} />
+                <div class="aggregate-selector-wrapper">
                     <Select<Aggregate>
                         wrapper_class="aggregate-selector"
                         {values}
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs b/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs
index 7585b9566e..716b32b909 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/config_selector.rs
@@ -471,15 +471,8 @@ impl Component for ConfigSelector {
         });
 
         html! {
-            <div
-                slot="top_panel"
-                id="top_panel"
-                {class}
-                ondragend={dragend}
-            >
-                <LocalStyle
-                    href={css!("config-selector")}
-                />
+            <div slot="top_panel" id="top_panel" {class} ondragend={dragend}>
+                <LocalStyle href={css!("config-selector")} />
                 if !config.group_by.is_empty() && config.split_by.is_empty() {
                     <span
                         id="transpose_button"
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs
index cc2e30e972..1c47f7670e 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/empty_column.rs
@@ -64,12 +64,8 @@ impl Component for EmptyColumn {
             .callback(|event: KeyboardEvent| KeyDown(event.key_code()));
 
         html! {
-            <div
-                class="pivot-column column-empty"
-            >
-                <LocalStyle
-                    href={css!("empty-column")}
-                />
+            <div class="pivot-column column-empty">
+                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/expression_toolbar.rs b/rust/perspective-viewer/src/rust/components/column_selector/expression_toolbar.rs
index d0f3937c12..df8c1d0400 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/expression_toolbar.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/expression_toolbar.rs
@@ -28,9 +28,9 @@ pub struct ExprEditButtonProps {
 pub fn ExprEditButton(p: &ExprEditButtonProps) -> Html {
     let onmousedown = yew::use_callback(p.clone(), |_, p| {
         let name = if p.is_expression {
-            ColumnLocator::Expr(Some(p.name.clone()))
+            ColumnLocator::Expression(p.name.clone())
         } else {
-            ColumnLocator::Plain(p.name.clone())
+            ColumnLocator::Table(p.name.clone())
         };
         p.on_open_expr_panel.emit(name)
     });
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs
index 7a2a4c8481..508b45869d 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/filter_column.rs
@@ -422,7 +422,7 @@ impl Component for FilterColumn {
                     class="string-filter"
                     spellcheck="false"
                     // TODO This is dirty and it may not work in the future.
-                     onInput="this.parentNode.dataset.value=this.value"
+                    onInput="this.parentNode.dataset.value=this.value"
                     ref={noderef.clone()}
                     onkeydown={keydown}
                     onfocus={focus}
@@ -484,24 +484,19 @@ impl Component for FilterColumn {
                 ondragstart={dragstart}
                 ondragend={dragend}
             >
-                <LocalStyle
-                    href={css!("filter-item")}
-                />
-                <div
-                    class="pivot-column-border"
-                >
+                <LocalStyle href={css!("filter-item")} />
+                <div class="pivot-column-border">
                     <TypeIcon ty={Type::String} />
                     <span class="column_name">{ filter.0.to_owned() }</span>
                     <FilterOpSelector
                         class="filterop-selector"
+                        is_autosize=true
                         values={filter_ops}
                         selected={filter.1}
                         on_select={select}
                     />
                     if !matches!(&filter.1, FilterOp::IsNotNull | FilterOp::IsNull) {
-                        if col_type == Some(Type::Bool) {
-                            { input_elem }
-                        } else {
+                        if col_type == Some(Type::Bool) { { input_elem } } else {
                             <label
                                 class={format!("input-sizer {}", type_class)}
                                 data-value={format!("{}", filter.2)}
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs
index 79c065feab..93a1b1b96f 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/inactive_column.rs
@@ -187,16 +187,8 @@ impl Component for InactiveColumn {
         }
 
         html! {
-            <div
-                {class}
-                {onmouseover}
-                {onmouseout}
-                data-index={ctx.props().idx.to_string()}
-            >
-                <span
-                    class={is_active_class}
-                    onmousedown={add_column}
-                />
+            <div {class} {onmouseover} {onmouseout} data-index={ctx.props().idx.to_string()}>
+                <span class={is_active_class} onmousedown={add_column} />
                 <div
                     class="column-selector-draggable column-selector-column-title"
                     draggable="true"
@@ -204,14 +196,10 @@ impl Component for InactiveColumn {
                     {ondragstart}
                     {ondragend}
                 >
-                    <div
-                        class="column-selector-column-border"
-                    >
+                    <div class="column-selector-column-border">
                         <TypeIcon ty={col_type} />
                         <span class="column_name">{ ctx.props().name.clone() }</span>
-                        <span
-                            class="column-selector--spacer"
-                        />
+                        <span class="column-selector--spacer" />
                         if is_expression {
                             <ExprEditButton
                                 name={ctx.props().name.clone()}
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/invalid_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/invalid_column.rs
index 6832e2dd64..dfcfe96ced 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/invalid_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/invalid_column.rs
@@ -28,9 +28,7 @@ impl Component for InvalidColumn {
 
     fn view(&self, _ctx: &Context<Self>) -> Html {
         html! {
-            <div
-                class="pivot-column column-empty column-invalid"
-            >
+            <div class="pivot-column column-empty column-invalid">
                 <LocalStyle href={css!("empty-column")} />
                 <div class="column-invalid-input" />
             </div>
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs
index 26a6473743..d952946e88 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/pivot_column.rs
@@ -68,9 +68,7 @@ impl Component for PivotColumn {
                 ondragstart={dragstart}
                 ondragend={dragend}
             >
-                <div
-                    class="pivot-column-border"
-                >
+                <div class="pivot-column-border">
                     <TypeIcon ty={Type::String} />
                     <span class="column_name">{ ctx.props().column.clone() }</span>
                 </div>
diff --git a/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs b/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs
index da3982e292..5521d1f289 100644
--- a/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs
+++ b/rust/perspective-viewer/src/rust/components/column_selector/sort_column.rs
@@ -108,9 +108,7 @@ impl Component for SortColumn {
                 ondragstart={dragstart}
                 ondragend={dragend}
             >
-                <div
-                    class="pivot-column-border"
-                >
+                <div class="pivot-column-border">
                     <TypeIcon ty={Type::String} />
                     <span class="column_name">{ ctx.props().sort.0.to_owned() }</span>
                     <span
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs
index fe65b5316a..410c5d17b3 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/attributes_tab.rs
@@ -24,13 +24,8 @@ pub struct AttributesTabProps {
 #[function_component]
 pub fn AttributesTab(p: &AttributesTabProps) -> Html {
     html! {
-        <div
-            id="attributes-tab"
-        >
-            <div
-                class="tab-section"
-                id="attributes-expr"
-            >
+        <div id="attributes-tab">
+            <div class="tab-section" id="attributes-expr">
                 <ExpressionEditor ..p.expr_editor.clone() />
             </div>
             <div class="tab-section"><SaveSettings ..p.save_section.clone() /></div>
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/save_settings.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/save_settings.rs
index 627fb02b9e..65b7897b2c 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/save_settings.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/save_settings.rs
@@ -30,13 +30,9 @@ pub fn save_settings(props: &SaveSettingsProps) -> Html {
     let save = props.on_save.reform(|_| ());
     let delete = props.on_delete.reform(|_| ());
     html! {
-        <div
-            id="save-settings-wrapper"
-        >
+        <div id="save-settings-wrapper">
             if props.show_danger_zone {
-                <div
-                    id="danger-zone"
-                >
+                <div id="danger-zone">
                     <button
                         id="psp-expression-editor-button-delete"
                         class="psp-expression-editor__button"
@@ -47,9 +43,7 @@ pub fn save_settings(props: &SaveSettingsProps) -> Html {
                     </button>
                 </div>
             }
-            <div
-                id="save-settings"
-            >
+            <div id="save-settings">
                 if props.is_save {
                     <button
                         id="psp-expression-editor-button-reset"
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar.rs
index db94a34b7f..160e86f6a3 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/sidebar.rs
@@ -136,34 +136,16 @@ impl ColumnSettingsSidebar {
             (*initial_expr_value != column_name).then_some(column_name.clone());
         let maybe_ty = ctx.props().selected_column.view_type(ctx.props().session());
 
-        // NOTE: This is going to be refactored soon.
         let tabs = {
             let mut tabs = vec![];
-            let plugin = ctx.props().renderer.get_active_plugin().unwrap().name();
-            let (config, attrs) = (
-                ctx.props().get_plugin_config(),
-                ctx.props().get_plugin_attrs(),
-            );
-            if config.is_none() || attrs.is_none() {
-                tracing::warn!(
-                    "Could not get full plugin config!\nconfig (plugin.save()): \
-                     {:?}\nplugin_attrs: {:?}",
-                    config,
-                    attrs
-                );
-            }
-            let show_styles = maybe_ty
-                .map(|ty| match &*plugin {
-                    "Datagrid" => ty != Type::Bool,
-                    "X/Y Scatter" => ty == Type::String,
-                    _ => false,
-                })
-                .unwrap_or_default();
+            let is_new_expr = ctx.props().selected_column.is_new_expr();
+            let show_styles = !is_new_expr
+                && ctx
+                    .props()
+                    .can_render_column_styles(&column_name)
+                    .unwrap_or_default();
 
-            if !matches!(ctx.props().selected_column, ColumnLocator::Expr(None))
-                && show_styles
-                && config.is_some()
-            {
+            if !is_new_expr && show_styles {
                 tabs.push(ColumnSettingsTab::Style);
             }
 
@@ -277,13 +259,13 @@ impl Component for ColumnSettingsSidebar {
                     (*(self.expr_value)).clone().into(),
                 );
                 match &ctx.props().selected_column {
-                    ColumnLocator::Plain(_) => {
+                    ColumnLocator::Table(_) => {
                         tracing::error!("Tried to save non-expression column!")
                     },
-                    ColumnLocator::Expr(name) => match name {
-                        Some(old_name) => ctx.props().update_expr(old_name.clone(), new_expr),
-                        None => ctx.props().save_expr(new_expr),
+                    ColumnLocator::Expression(name) => {
+                        ctx.props().update_expr(name.clone(), new_expr)
                     },
+                    ColumnLocator::NewExpression => ctx.props().save_expr(new_expr),
                 }
 
                 self.initial_expr_value = self.expr_value.clone();
@@ -357,6 +339,7 @@ impl Component for ColumnSettingsSidebar {
             custom_events: ctx.props().custom_events.clone(),
             session: ctx.props().session.clone(),
             renderer: ctx.props().renderer.clone(),
+            presentation: ctx.props().presentation.clone(),
             ty: self.maybe_ty,
             column_name: self.column_name.clone(),
         };
@@ -368,9 +351,7 @@ impl Component for ColumnSettingsSidebar {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("column-settings-panel")}
-                />
+                <LocalStyle href={css!("column-settings-panel")} />
                 <Sidebar
                     on_close={ctx.props().on_close.clone()}
                     id_prefix="column_settings"
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs
index a410901540..017371516e 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab.rs
@@ -10,93 +10,165 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-mod column_style;
 pub mod stub;
 mod symbol;
 
+use itertools::Itertools;
 use yew::{function_component, html, Html, Properties};
 
-use crate::components::column_settings_sidebar::style_tab::column_style::ColumnStyle;
 use crate::components::column_settings_sidebar::style_tab::stub::Stub;
 use crate::components::column_settings_sidebar::style_tab::symbol::SymbolStyle;
-use crate::config::Type;
+use crate::components::datetime_column_style::DatetimeColumnStyle;
+use crate::components::number_column_style::NumberColumnStyle;
+use crate::components::string_column_style::StringColumnStyle;
+use crate::components::style_controls::CustomNumberFormat;
+use crate::config::{ColumnConfigValueUpdate, Type};
 use crate::custom_events::CustomEvents;
+use crate::model::PluginColumnStyles;
+use crate::presentation::Presentation;
 use crate::renderer::Renderer;
 use crate::session::Session;
-use crate::utils::JsValueSerdeExt;
+use crate::utils::ApiFuture;
+use crate::{clone, derive_model};
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct StyleTabProps {
     pub custom_events: CustomEvents,
     pub session: Session,
     pub renderer: Renderer,
+    pub presentation: Presentation,
 
     pub ty: Option<Type>,
     pub column_name: String,
 }
+derive_model!(Session, Renderer, Presentation, CustomEvents for StyleTabProps);
+
+impl StyleTabProps {
+    fn send_plugin_config(&self, update: ColumnConfigValueUpdate) {
+        clone!(props = self);
+        ApiFuture::spawn(async move {
+            props
+                .presentation
+                .update_columns_config_value(props.column_name.clone(), update);
+            let columns_configs = props.presentation.all_columns_configs();
+            let plugin_config = props.renderer.get_active_plugin()?.save();
+            props
+                .renderer
+                .get_active_plugin()?
+                .restore(&plugin_config, Some(&columns_configs));
+            props.renderer.update(&props.session).await?;
+            let detail = serde_wasm_bindgen::to_value(&columns_configs).unwrap();
+            props.custom_events.dispatch_column_style_changed(&detail);
+            Ok(())
+        })
+    }
+}
 
 #[function_component]
 pub fn StyleTab(props: &StyleTabProps) -> Html {
-    let plugin = props.renderer.get_active_plugin().unwrap();
-    let plugin_column_names = plugin
-        .config_column_names()
-        .and_then(|arr| arr.into_serde_ext::<Vec<Option<String>>>().ok())
-        .unwrap();
-
-    let view_config = props.session.get_view_config();
-    let (col_idx, _) = view_config
-        .columns
-        .iter()
-        .enumerate()
-        .find(|(_, opt)| {
-            opt.as_ref()
-                .map(|s| s == &props.column_name)
-                .unwrap_or_default()
-        })
-        .unwrap();
-
-    // This mimics the behavior where plugins can take a single value
-    // per column grouping, and any overflow falls into the final heading
-    let col_grp = plugin_column_names
-        .iter()
-        .chain(std::iter::repeat(plugin_column_names.last().unwrap()))
-        .nth(col_idx)
-        .unwrap()
-        .to_owned()
-        .unwrap();
-
-    // TODO: We need a better way to determine which styling components to show.
-    // This will come with future changes to the plugin API.
-    let components = match col_grp.as_str() {
-        "Symbol" => Some(html! {
-            <SymbolStyle
-                column_name={props.column_name.clone()}
-                session={&props.session}
-                renderer={&props.renderer}
-                custom_events={&props.custom_events}
-            />
-        }),
-        "Columns" => Some(html! {
-            <ColumnStyle
-                custom_events={props.custom_events.clone()}
-                session={props.session.clone()}
-                renderer={props.renderer.clone()}
-                column_name={props.column_name.clone()}
-                // This is here so the column styles update on session change.
-                 view_type={props.ty.unwrap()}
-            />
-        }),
-        _ => None,
-    };
-
-    let components = components.unwrap_or(html! {
-        <Stub message="No plugin styles available" error="Could not get plugin styles" />
+    let on_change = yew::use_callback(props.clone(), |config, props| {
+        props.send_plugin_config(config);
     });
+    let config = props.presentation.get_columns_config(&props.column_name);
+    let components = props
+        .get_column_style_control_options(&props.column_name)
+        .map(|opts| {
+            let mut components = vec![];
+
+            if let Some(default_config) = opts.datagrid_number_style {
+                let config = config
+                    .as_ref()
+                    .map(|config| config.datagrid_number_style.clone());
+
+                components.push(("Number Styles", html! {
+                    <NumberColumnStyle
+                        session={props.session.clone()}
+                        column_name={props.column_name.clone()}
+                        {config}
+                        {default_config}
+                        on_change={on_change.clone()}
+                    />
+                }));
+            }
+            if let Some(default_config) = opts.datagrid_string_style {
+                let config = config
+                    .as_ref()
+                    .map(|config| config.datagrid_string_style.clone());
+
+                components.push(("String Styles", html! {
+                    <StringColumnStyle {config} {default_config} on_change={on_change.clone()} />
+                }));
+            }
+
+            if let Some(default_config) = opts.datagrid_datetime_style {
+                let config = config
+                    .as_ref()
+                    .map(|config| config.datagrid_datetime_style.clone());
+
+                let enable_time_config = props.ty.unwrap() == Type::Datetime;
+                components.push(("Datetime Styles", html! {
+                    <DatetimeColumnStyle
+                        {enable_time_config}
+                        {config}
+                        {default_config}
+                        on_change={on_change.clone()}
+                    />
+                }))
+            }
+
+            if let Some(default_config) = opts.symbols {
+                let restored_config = config
+                    .as_ref()
+                    .map(|config| config.symbols.clone())
+                    .unwrap_or_default();
+
+                components.push(("Symbols", html! {
+                    <SymbolStyle
+                        {default_config}
+                        {restored_config}
+                        on_change={on_change.clone()}
+                        column_name={props.column_name.clone()}
+                        session={props.session.clone()}
+                    />
+                }))
+            }
+
+            if opts.number_string_format.unwrap_or_default() {
+                let restored_config = config
+                    .as_ref()
+                    .and_then(|config| config.number_format.clone())
+                    .unwrap_or_default();
+
+                components.push(("Number Formatting", html! {
+                    <CustomNumberFormat
+                        {restored_config}
+                        {on_change}
+                        view_type={props.ty.unwrap()}
+                        column_name={props.column_name.clone()}
+                    />
+                }));
+            }
+
+            components
+                .into_iter()
+                .map(|(_title, component)| {
+                    html! {
+                        <fieldset class="style-control">
+                            // <legend >{ title }</legend>
+                            { component }
+                        </fieldset>
+                    }
+                })
+                .collect_vec()
+        })
+        .unwrap_or_else(|error| {
+            vec![html! {
+                <Stub message="Could not render column styles" error={Some(format!("{error:?}"))} />
+            }]
+        });
 
     html! {
-        <div
-            id="style-tab"
-        >
+        <div id="style-tab">
             <div id="column-style-container" class="tab-section">{ components }</div>
         </div>
     }
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/column_style.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/column_style.rs
index 5b85369f54..e31402a56e 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/column_style.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/column_style.rs
@@ -18,7 +18,6 @@ use crate::components::datetime_column_style::DatetimeColumnStyle;
 use crate::components::number_column_style::NumberColumnStyle;
 use crate::components::string_column_style::StringColumnStyle;
 use crate::components::style::LocalStyle;
-use crate::config::plugin::*;
 use crate::config::*;
 use crate::custom_events::CustomEvents;
 use crate::model::*;
@@ -89,7 +88,7 @@ pub fn ColumnStyle(props: &ColumnStyleProps) -> Html {
             let on_change = Callback::from(move |config| {
                 props.send_plugin_config(
                     props.column_name.clone(),
-                    serde_json::to_value(config).unwrap(),
+                    serde_json::to_value(config).ok(),
                 )
             });
 
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/stub.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/stub.rs
index 5c800d9656..40c8cfc16a 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/stub.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/stub.rs
@@ -25,13 +25,8 @@ pub fn stub(p: &StubProps) -> Html {
     }
 
     html! {
-        <div
-            class="style_contents"
-        >
-            <div
-                id="column-style-container"
-                class="no-style"
-            >
+        <div class="style_contents">
+            <div id="column-style-container" class="no-style">
                 <div class="style-contents">{ p.message.clone() }</div>
             </div>
         </div>
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol.rs
index 41fa31b39e..f07abc848e 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol.rs
@@ -15,46 +15,32 @@ mod symbol_config;
 mod symbol_pairs;
 mod symbol_selector;
 
+use std::collections::HashMap;
 use std::rc::Rc;
 
 use itertools::Itertools;
-use yew::{html, Html, Properties};
+use yew::{html, Callback, Html, Properties};
 
-use self::symbol_config::{SymbolConfig, SymbolKVPair};
+use self::symbol_config::SymbolKVPair;
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_pairs::PairsList;
 use crate::components::style::LocalStyle;
-use crate::config::plugin::{PluginConfig, Symbol};
+use crate::config::{ColumnConfigValueUpdate, KeyValueOpts};
+use crate::css;
 use crate::custom_elements::FilterDropDownElement;
-use crate::custom_events::CustomEvents;
-use crate::model::{GetPluginConfig, UpdatePluginConfig};
-use crate::renderer::Renderer;
 use crate::session::Session;
-use crate::{css, derive_model};
-
-pub fn next_default_symbol(values: &Vec<Symbol>, pairs_len: usize) -> String {
-    values
-        .get(pairs_len % values.len())
-        .map(|s| s.name.clone())
-        .unwrap()
-}
 
 #[derive(Properties, PartialEq, Clone)]
 pub struct SymbolAttrProps {
-    pub column_name: String,
     pub session: Session,
-    pub renderer: Renderer,
-    pub custom_events: CustomEvents,
+    pub column_name: String,
+    pub restored_config: Option<HashMap<String, String>>,
+    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub default_config: KeyValueOpts,
 }
-
-derive_model!(CustomEvents, Session, Renderer for SymbolAttrProps);
-
 impl SymbolAttrProps {
-    pub fn get_config(&self) -> (PluginConfig, Vec<Symbol>) {
-        let (config, attrs) = (self.get_plugin_config(), self.get_plugin_attrs());
-        (
-            config.unwrap(),
-            attrs.and_then(|a| a.symbol.map(|s| s.symbols)).unwrap(),
-        )
+    pub fn next_default_symbol(&self, pairs_len: usize) -> String {
+        let values = &self.default_config.values;
+        values.get(pairs_len % values.len()).cloned().unwrap()
     }
 }
 
@@ -72,24 +58,23 @@ impl yew::Component for SymbolStyle {
     type Properties = SymbolAttrProps;
 
     fn create(ctx: &yew::Context<Self>) -> Self {
-        let (config, symbols) = ctx.props().get_config();
-        let mut pairs = crate::maybe! {
-            let json_val = config.columns.get(&ctx.props().column_name)?;
-            let pairs = serde_json::from_value::<SymbolConfig>(json_val.clone())
-                .ok()?
-                .symbols
-                .into_iter()
-                .map(|s| SymbolKVPair::new(Some(s.0), s.1))
-                .collect_vec();
-
-            Some(pairs)
-        }
-        .unwrap_or_default();
-
-        pairs.push(SymbolKVPair::new(
-            None,
-            next_default_symbol(&symbols, pairs.len()),
-        ));
+        let pairs = ctx
+            .props()
+            .restored_config
+            .as_ref()
+            .map(|restored_config| {
+                let mut pairs = restored_config
+                    .iter()
+                    .map(|(key, value)| SymbolKVPair::new(Some(key.to_owned()), value.to_owned()))
+                    .collect_vec();
+
+                pairs.push(SymbolKVPair::new(
+                    None,
+                    ctx.props().next_default_symbol(pairs.len()),
+                ));
+                pairs
+            })
+            .unwrap_or_default();
         let row_dropdown = Rc::new(FilterDropDownElement::new(ctx.props().session.clone()));
         Self {
             pairs,
@@ -104,19 +89,19 @@ impl yew::Component for SymbolStyle {
                     .clone()
                     .into_iter()
                     .filter_map(|pair| Some((pair.key?, pair.value)))
-                    .collect();
+                    .collect::<HashMap<_, _>>();
+                let update = Some(symbols).filter(|x| !x.is_empty());
+                ctx.props()
+                    .on_change
+                    .emit(ColumnConfigValueUpdate::Symbols(update));
 
-                let column_name = ctx.props().column_name.clone();
-                let config = serde_json::to_value(SymbolConfig { symbols }).unwrap();
-                ctx.props().send_plugin_config(column_name, config);
                 let has_last_key = new_pairs
                     .last()
                     .map(|pair| pair.key.is_some())
                     .unwrap_or_default();
 
                 if has_last_key {
-                    let (_, symbols) = ctx.props().get_config();
-                    let val = next_default_symbol(&symbols, new_pairs.len());
+                    let val = ctx.props().next_default_symbol(new_pairs.len());
                     new_pairs.push(SymbolKVPair::new(None, val))
                 }
 
@@ -128,20 +113,16 @@ impl yew::Component for SymbolStyle {
 
     fn view(&self, ctx: &yew::Context<Self>) -> Html {
         let update_pairs = ctx.link().callback(SymbolAttrMsg::UpdatePairs);
-        let (_, values) = ctx.props().get_config();
-
         html! {
             <>
-                <LocalStyle
-                    href={css!("column-symbol-attributes")}
-                />
+                <LocalStyle href={css!("column-symbol-attributes")} />
                 <PairsList
                     title="Symbols"
                     id="attributes-symbols"
                     pairs={self.pairs.clone()}
                     row_dropdown={self.row_dropdown.clone()}
                     column_name={ctx.props().column_name.clone()}
-                    {values}
+                    values={ctx.props().default_config.values.clone()}
                     {update_pairs}
                 />
             </>
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/row_selector.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/row_selector.rs
index 3f546e5f64..11a6303990 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/row_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/row_selector.rs
@@ -72,9 +72,7 @@ pub fn row_selector(props: &RowSelectorProps) -> Html {
             .collect();
 
         html! {
-            <div
-                class={err_class}
-            >
+            <div class={err_class}>
                 <EmptyRow
                     dropdown={props.dropdown.clone()}
                     {exclude}
@@ -89,16 +87,9 @@ pub fn row_selector(props: &RowSelectorProps) -> Html {
         }
     } else {
         html! {
-            <div
-                class="row-selector column-selector-column"
-            >
-                <div
-                    class="column-selector-column-border"
-                >
-                    <span
-                        class="column_name none"
-                        {ondblclick}
-                    >
+            <div class="row-selector column-selector-column">
+                <div class="column-selector-column-border">
+                    <span class="column_name none" {ondblclick}>
                         { props.selected_row.clone().unwrap() }
                     </span>
                 </div>
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs
index 0615e38c75..2031f3db27 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_pairs.rs
@@ -19,7 +19,6 @@ use super::symbol_config::SymbolKVPair;
 use crate::components::column_settings_sidebar::style_tab::symbol::row_selector::RowSelector;
 use crate::components::column_settings_sidebar::style_tab::symbol::symbol_selector::SymbolSelector;
 use crate::components::style::LocalStyle;
-use crate::config::plugin::Symbol;
 use crate::css;
 use crate::custom_elements::FilterDropDownElement;
 
@@ -30,7 +29,7 @@ pub struct PairsListProps {
     pub update_pairs: Callback<Vec<SymbolKVPair>>,
     pub id: Option<String>,
     pub row_dropdown: Rc<FilterDropDownElement>,
-    pub values: Vec<Symbol>,
+    pub values: Vec<String>,
     pub column_name: String,
 }
 
@@ -85,15 +84,9 @@ impl yew::Component for PairsList {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("containers/pairs-list")}
-                />
-                <div
-                    class="pairs-list"
-                    id={props.id.clone()}
-                    data-label={props.title.clone()}
-                >
-                    <ul >{ for main_pairs }</ul>
+                <LocalStyle href={css!("containers/pairs-list")} />
+                <div class="pairs-list" id={props.id.clone()} data-label={props.title.clone()}>
+                    <ul>{ for main_pairs }</ul>
                 </div>
             </>
         }
@@ -107,7 +100,7 @@ pub struct PairsListItemProps {
     pub pairs: Vec<SymbolKVPair>,
     pub update_pairs: Callback<Vec<SymbolKVPair>>,
     pub row_dropdown: Rc<FilterDropDownElement>,
-    pub values: Vec<Symbol>,
+    pub values: Vec<String>,
     pub focused: bool,
     pub set_focused_index: Callback<Option<usize>>,
     pub column_name: String,
@@ -158,17 +151,13 @@ impl yew::Component for PairsListItem {
         let props = ctx.props();
         let on_remove = ctx.link().callback(|_| PairListItemMsg::Remove);
         let on_key_update = ctx.link().callback(|s| PairListItemMsg::UpdateKey(Some(s)));
-        let on_value_update = ctx
-            .link()
-            .callback(|s: Symbol| PairListItemMsg::UpdateValue(s.name));
+        let on_value_update = ctx.link().callback(PairListItemMsg::UpdateValue);
 
         let remove_style =
             (ctx.props().index == ctx.props().pairs.len() - 1).then_some("visibility: hidden");
 
         html! {
-            <li
-                class="pairs-list-item"
-            >
+            <li class="pairs-list-item">
                 <RowSelector
                     selected_row={props.pair.key.clone()}
                     on_select={on_key_update.clone()}
diff --git a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_selector.rs b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_selector.rs
index e1246b3414..2ec79fa25e 100644
--- a/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/column_settings_sidebar/style_tab/symbol/symbol_selector.rs
@@ -14,14 +14,13 @@ use itertools::Itertools;
 use yew::{function_component, html, Callback, Html, Properties};
 
 use crate::components::containers::select::{Select, SelectItem};
-use crate::config::plugin::Symbol;
 
 #[derive(Properties, PartialEq)]
 pub struct SymbolSelectorProps {
     pub index: usize,
     pub selected_value: Option<String>,
-    pub values: Vec<Symbol>,
-    pub callback: Callback<Symbol>,
+    pub values: Vec<String>,
+    pub callback: Callback<String>,
 }
 
 #[function_component(SymbolSelector)]
@@ -39,14 +38,14 @@ pub fn symbol_selector(p: &SymbolSelectorProps) -> Html {
         .find(|sym| {
             p.selected_value
                 .as_ref()
-                .map(|selected| sym.name == *selected)
+                .map(|selected| *sym == selected)
                 .unwrap_or_default()
         })
         .cloned()
         .unwrap_or_else(|| p.values.get(p.index % values.len()).cloned().unwrap());
 
     html! {
-        <Select<Symbol>
+        <Select<String>
             wrapper_class="symbol-selector-wrapper"
             class="symbol-selector"
             on_select={p.callback.clone()}
diff --git a/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs b/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs
index 378968e586..340781ec54 100644
--- a/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/dragdrop_list.rs
@@ -267,22 +267,14 @@ where
 
                     if let (key, (true, Some(column))) = column {
                         html! {
-                            <div
-                                {key}
-                                class="pivot-column"
-                                ondragenter={dragenter}
-                            >
+                            <div {key} class="pivot-column" ondragenter={dragenter}>
                                 { Html::from(column) }
                                 <span class="row_close" onmousedown={close} />
                             </div>
                         }
                     } else if let (key, (_, Some(column))) = column {
                         html! {
-                            <div
-                                {key}
-                                class="pivot-column"
-                                ondragenter={dragenter}
-                            >
+                            <div {key} class="pivot-column" ondragenter={dragenter}>
                                 { Html::from(column) }
                                 <span class="row_close" style="opacity:0.3" />
                             </div>
@@ -290,11 +282,7 @@ where
                     } else {
                         let (key, _) = column;
                         html! {
-                            <div
-                                {key}
-                                class="pivot-column"
-                                ondragenter={dragenter}
-                            >
+                            <div {key} class="pivot-column" ondragenter={dragenter}>
                                 <div class="config-drop" />
                             </div>
                         }
@@ -307,10 +295,7 @@ where
         let exclude = ctx.props().exclude.clone();
         let on_select = ctx.props().parent.callback(V::create);
         html! {
-            <div
-                ref={&self.elem}
-                class="rrow"
-            >
+            <div ref={&self.elem} class="rrow">
                 <div
                     id={ctx.props().name}
                     ondragover={dragover}
@@ -319,13 +304,8 @@ where
                     ref={drag_container.noderef}
                     ondrop={drop}
                 >
-                    <div
-                        class="psp-text-field"
-                    >
-                        <ul
-                            class="psp-text-field__input"
-                            for={ctx.props().name}
-                        >
+                    <div class="psp-text-field">
+                        <ul class="psp-text-field__input" for={ctx.props().name}>
                             { columns_html }
                             if ctx.props().is_dragover.is_none() | (!invalid_drag && valid_duplicate_drag) {
                                 <EmptyColumn {column_dropdown} {exclude} {on_select} />
diff --git a/rust/perspective-viewer/src/rust/components/containers/dropdown_menu.rs b/rust/perspective-viewer/src/rust/components/containers/dropdown_menu.rs
index a005f38a50..772eed5c47 100644
--- a/rust/perspective-viewer/src/rust/components/containers/dropdown_menu.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/dropdown_menu.rs
@@ -77,9 +77,7 @@ where
                         html! {
                             <>
                                 <span class="dropdown-group-label">{ name }</span>
-                                <div
-                                    class="dropdown-group-container"
-                                >
+                                <div class="dropdown-group-container">
                                     { xs.iter().map(|x| {
                                     let click = ctx.props().callback.reform({
                                         let value = x.clone();
diff --git a/rust/perspective-viewer/src/rust/components/containers/mod.rs b/rust/perspective-viewer/src/rust/components/containers/mod.rs
index af760cc48f..2ad676bacd 100644
--- a/rust/perspective-viewer/src/rust/components/containers/mod.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/mod.rs
@@ -16,8 +16,6 @@
 pub mod dragdrop_list;
 pub mod dropdown_menu;
 pub mod kvpair;
-pub mod radio_list;
-pub mod radio_list_item;
 pub mod scroll_panel;
 pub mod scroll_panel_item;
 pub mod select;
diff --git a/rust/perspective-viewer/src/rust/components/containers/radio_list.rs b/rust/perspective-viewer/src/rust/components/containers/radio_list.rs
deleted file mode 100644
index 29ff0fa1fe..0000000000
--- a/rust/perspective-viewer/src/rust/components/containers/radio_list.rs
+++ /dev/null
@@ -1,217 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-use std::fmt::Display;
-use std::str::FromStr;
-
-use wasm_bindgen::JsCast;
-use yew::prelude::*;
-
-use super::radio_list_item::*;
-use crate::components::style::LocalStyle;
-#[cfg(test)]
-use crate::utils::WeakScope;
-use crate::*;
-
-// The type constraints on this component are boilerplate and will be alias-able
-// in a [future rust version](https://doc.rust-lang.org/nightly/unstable-book/language-features/trait-alias.html)
-// It will look like this:
-//
-// ```
-// #![feature(trait_alias)]
-// trait Selectable = Clone + Display + FromStr + PartialEq + 'static;
-// ```
-//
-// Currently, you can get similar behavior with a new trait, but it will require
-// an empty `impl Selectable for X {}` for all implementing types.
-//
-// ```
-// trait Selectable: Clone + Display + FromStr + PartialEq + 'static {}
-// ```
-
-#[derive(Properties, Default)]
-pub struct RadioListProps<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    /// This component's `Html` children, which will become list items.
-    pub children: ChildrenWithProps<RadioListItem<T>>,
-
-    /// Whether this control is enabled.
-    pub disabled: bool,
-
-    /// A callback which fires the selected `T` on change.
-    pub on_change: Callback<T>,
-
-    /// The initial selection.
-    /// TODO this could easily be made optional.
-    pub selected: T,
-
-    #[prop_or_default]
-    pub class: Option<&'static str>,
-
-    #[prop_or_default]
-    pub name: Option<&'static str>,
-
-    #[cfg(test)]
-    #[prop_or_default]
-    pub weak_link: WeakScope<RadioList<T>>,
-}
-
-impl<T> PartialEq for RadioListProps<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    fn eq(&self, other: &Self) -> bool {
-        self.children == other.children
-            && self.disabled == other.disabled
-            && self.selected == other.selected
-            && self.class == other.class
-    }
-}
-
-pub enum RadioListMsg {
-    Change(String),
-}
-
-/// A `RadioList` is a vertical collection of components with radio buttons,
-/// only one of which can be selected at a time.  The generic parameter `T`
-/// is the selectable type (typically an enum), which must be serializable to
-/// and from `String` (via `Display` and `FromStr`, respectively) so it can be
-/// incorporated into the DOM `value` attribute.
-///
-/// # Examples
-///
-/// ```
-/// html! {
-///     <RadioList<u32>
-///         disabled=false
-///         values={ vec!(1, 2, 3) }
-///         selected={ 2 }
-///         on_change={ callback } >
-///     
-///         <span>{ "One" }</span>
-///         <span>{ "Two" }</span>
-///         <span>{ "Three" }</span>
-///     
-///     </RadioList<u32>>
-/// }
-pub struct RadioList<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    selected: T,
-}
-
-impl<T> Component for RadioList<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    type Message = RadioListMsg;
-    type Properties = RadioListProps<T>;
-
-    fn create(ctx: &Context<Self>) -> Self {
-        enable_weak_link_test!(ctx.props(), ctx.link());
-        Self {
-            selected: ctx.props().selected.clone(),
-        }
-    }
-
-    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
-        match msg {
-            RadioListMsg::Change(value) => {
-                if let Ok(x) = T::from_str(&value) {
-                    self.selected = x.clone();
-                    ctx.props().on_change.emit(x);
-                }
-            },
-        };
-        false
-    }
-
-    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
-        self.selected = ctx.props().selected.clone();
-        true
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        let on_change = ctx.link().callback(move |event: InputEvent| {
-            RadioListMsg::Change(
-                event
-                    .target()
-                    .unwrap()
-                    .unchecked_into::<web_sys::HtmlInputElement>()
-                    .value(),
-            )
-        });
-
-        let class = match ctx.props().class {
-            Some(x) => format!("radio-list-item {}", x),
-            None => "radio-list-item".to_owned(),
-        };
-
-        html! {
-            <>
-                <LocalStyle href={css!("containers/radio-list")} />
-                { ctx.props()
-              .children
-              .iter()
-              .enumerate()
-              .map(|(idx, child)| {
-                  self.render_item(ctx, idx, child, &class, on_change.clone(), &self.selected)
-              })
-              .collect::<Html>() }
-            </>
-        }
-    }
-}
-
-impl<T> RadioList<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    /// Render a single row of the `RadioList`.
-    ///
-    /// # Arguments
-    /// * `idx` - The index of this row.
-    /// * `child` - The `Html` row content.
-    /// * `class` - The `class` attribute string.
-    /// * `on_change` - The callback when this `<input>` changes.
-    fn render_item(
-        &self,
-        ctx: &Context<Self>,
-        idx: usize,
-        child: yew::virtual_dom::VChild<RadioListItem<T>>,
-        class: &str,
-        on_change: Callback<InputEvent>,
-        selected: &T,
-    ) -> Html {
-        let val = child.props.value.clone();
-        html! {
-            <div
-                class={class.to_string()}
-            >
-                <input
-                    id={format!("radio-list-{}", idx)}
-                    name={ctx.props().name.unwrap_or("radio-list")}
-                    type="radio"
-                    value={format!("{}", val)}
-                    class="parameter"
-                    oninput={on_change}
-                    disabled={ctx.props().disabled}
-                    checked={selected == &val}
-                />
-                { child }
-            </div>
-        }
-    }
-}
diff --git a/rust/perspective-viewer/src/rust/components/containers/scroll_panel.rs b/rust/perspective-viewer/src/rust/components/containers/scroll_panel.rs
index 19604f0ed6..8a408f6569 100644
--- a/rust/perspective-viewer/src/rust/components/containers/scroll_panel.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/scroll_panel.rs
@@ -276,10 +276,7 @@ impl Component for ScrollPanel {
                     ondrop={&ctx.props().drop}
                     class={ctx.props().class.clone()}
                 >
-                    <div
-                        class="scroll-panel-container"
-                        style={window_style}
-                    >
+                    <div class="scroll-panel-container" style={window_style}>
                         { for windowed_items.iter().cloned().map(Html::from) }
                         <div
                             key="__scroll-panel-auto-width__"
diff --git a/rust/perspective-viewer/src/rust/components/containers/scroll_panel_item.rs b/rust/perspective-viewer/src/rust/components/containers/scroll_panel_item.rs
index e44e58a054..d15c2f1168 100644
--- a/rust/perspective-viewer/src/rust/components/containers/scroll_panel_item.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/scroll_panel_item.rs
@@ -75,11 +75,7 @@ impl Component for ScrollPanelItem {
     #[cfg(debug_assertions)]
     fn view(&self, ctx: &Context<Self>) -> Html {
         html! {
-            <div
-                class="debug-size-wrapper"
-                style="display:flow-root"
-                ref={self.node.clone()}
-            >
+            <div class="debug-size-wrapper" style="display:flow-root" ref={self.node.clone()}>
                 { for ctx.props().children.iter() }
             </div>
         }
diff --git a/rust/perspective-viewer/src/rust/components/containers/select.rs b/rust/perspective-viewer/src/rust/components/containers/select.rs
index 51cf075ada..f2f526c10c 100644
--- a/rust/perspective-viewer/src/rust/components/containers/select.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/select.rs
@@ -44,6 +44,9 @@ where
     pub selected: T,
     pub on_select: Callback<T>,
 
+    #[prop_or_default]
+    pub is_autosize: bool,
+
     #[prop_or_default]
     pub label: Option<&'static str>,
 
@@ -150,12 +153,7 @@ where
             .any(|x| matches!(x, SelectItem::Option(y) if *y == ctx.props().selected));
 
         let select = html! {
-            <select
-                id={ctx.props().id}
-                {class}
-                ref={&self.select_ref}
-                onchange={callback}
-            >
+            <select id={ctx.props().id} {class} ref={&self.select_ref} onchange={callback}>
                 { for ctx.props().values.iter().map(|value| match value {
                         SelectItem::Option(value) => {
                             let selected = *value == ctx.props().selected;
@@ -206,22 +204,18 @@ where
             None => classes!("dropdown-width-container"),
         };
 
+        let value = if ctx.props().is_autosize {
+            self.selected.to_string()
+        } else {
+            "".to_owned()
+        };
+
         html! {
             if is_group_selected && ctx.props().label.is_some() {
-                <label >{ ctx.props().label.unwrap() }</label>
-                <div
-                    class={wrapper_class}
-                    data-value={format!("{}", self.selected)}
-                >
-                    { select }
-                </div>
+                <label>{ ctx.props().label.unwrap() }</label>
+                <div class={wrapper_class} data-value={value.clone()}>{ select }</div>
             } else {
-                <div
-                    class={wrapper_class}
-                    data-value={format!("{}", self.selected)}
-                >
-                    { select }
-                </div>
+                <div class={wrapper_class} data-value={value}>{ select }</div>
             }
         }
     }
diff --git a/rust/perspective-viewer/src/rust/components/containers/sidebar.rs b/rust/perspective-viewer/src/rust/components/containers/sidebar.rs
index 4f36a01171..8c43cefcfa 100644
--- a/rust/perspective-viewer/src/rust/components/containers/sidebar.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/sidebar.rs
@@ -60,23 +60,11 @@ pub fn Sidebar(p: &SidebarProps) -> Html {
 
     let width_style = format!("min-width: 200px; width: {}px", *auto_width);
     html! {
-        <div
-            class="sidebar_column"
-            id={format!("{id}_sidebar")}
-            ref={noderef}
-        >
+        <div class="sidebar_column" id={format!("{id}_sidebar")} ref={noderef}>
             <SidebarCloseButton id={format!("{id}_close_button")} on_close_sidebar={&p.on_close} />
             <div class="sidebar_header"><EditableHeader ..p.header_props.clone() /></div>
-            <div
-                class="sidebar_border"
-                id={format!("{id}_border")}
-            />
-            <div
-                class="sidebar_content"
-                id={format!("{id}_content")}
-            >
-                { p.children.iter().collect::<Html>() }
-            </div>
+            <div class="sidebar_border" id={format!("{id}_border")} />
+            { p.children.iter().collect::<Html>() }
             <div class="sidebar-auto-width" style={width_style} />
         </div>
     }
diff --git a/rust/perspective-viewer/src/rust/components/containers/split_panel.rs b/rust/perspective-viewer/src/rust/components/containers/split_panel.rs
index 048e1885be..b5b1155148 100644
--- a/rust/perspective-viewer/src/rust/components/containers/split_panel.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/split_panel.rs
@@ -369,9 +369,7 @@ impl Component for SplitPanel {
                             orientation={ctx.props().orientation}
                             link={ctx.link().clone()}
                         />
-                        if i == ctx.props().children.len() - 2 {
-                            { x }
-                        } else {
+                        if i == ctx.props().children.len() - 2 { { x } } else {
                             <SplitPanelChild
                                 style={self.styles[i + 1].clone()}
                                 ref_={self.refs[i + 1].clone()}
@@ -385,15 +383,8 @@ impl Component for SplitPanel {
 
         let contents = html! {
             <>
-                <LocalStyle
-                    key=0
-                    href={css!("containers/split-panel")}
-                />
-                <SplitPanelChild
-                    key=1
-                    style={self.styles[0].clone()}
-                    ref_={self.refs[0].clone()}
-                >
+                <LocalStyle key=0 href={css!("containers/split-panel")} />
+                <SplitPanelChild key=1 style={self.styles[0].clone()} ref_={self.refs[0].clone()}>
                     { head }
                 </SplitPanelChild>
                 { for tail }
@@ -479,11 +470,7 @@ fn split_panel_child(props: &SplitPanelChildProps) -> Html {
         classes!("split-panel-child")
     };
     html! {
-        <div
-            {class}
-            ref={props.ref_.clone()}
-            style={props.style.clone()}
-        >
+        <div {class} ref={props.ref_.clone()} style={props.style.clone()}>
             { props.children.iter().next().unwrap() }
         </div>
     }
diff --git a/rust/perspective-viewer/src/rust/components/containers/tab_list.rs b/rust/perspective-viewer/src/rust/components/containers/tab_list.rs
index d3dd9fd724..c1197d4f7b 100644
--- a/rust/perspective-viewer/src/rust/components/containers/tab_list.rs
+++ b/rust/perspective-viewer/src/rust/components/containers/tab_list.rs
@@ -78,11 +78,8 @@ impl<T: Tab> Component for TabList<T> {
 
             let onclick = ctx.link().callback(move |_| TabListMsg::SetSelected(idx));
             html! {
-                <span
-                    {class}
-                    {onclick}
-                >
-                    <div class="tab-title">{ tab.to_string() }</div>
+                <span {class} {onclick}>
+                    <div class="tab-title" id={tab.to_string()} />
                     <div class="tab-border" />
                 </span>
             }
@@ -90,23 +87,15 @@ impl<T: Tab> Component for TabList<T> {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("containers/tabs")}
-                />
-                <div
-                    class="tab-gutter"
-                >
+                <LocalStyle href={css!("containers/tabs")} />
+                <div class="tab-gutter">
                     { for gutter_tabs }
-                    <span
-                        class="tab tab-padding"
-                    >
+                    <span class="tab tab-padding">
                         <div class="tab-title">{ "\u{00a0}" }</div>
                         <div class="tab-border" />
                     </span>
                 </div>
-                <div
-                    class="tab-content"
-                >
+                <div class="tab-content">
                     { ctx.props().children.iter().nth(self.selected_idx) }
                 </div>
             </>
diff --git a/rust/perspective-viewer/src/rust/components/datetime_column_style.rs b/rust/perspective-viewer/src/rust/components/datetime_column_style.rs
index 930c2371ee..205a51b846 100644
--- a/rust/perspective-viewer/src/rust/components/datetime_column_style.rs
+++ b/rust/perspective-viewer/src/rust/components/datetime_column_style.rs
@@ -13,23 +13,21 @@
 mod custom;
 mod simple;
 
-use std::sync::LazyLock;
+use std::sync::{Arc, LazyLock};
 
 use derivative::Derivative;
 use wasm_bindgen::*;
-use web_sys::*;
 use yew::prelude::*;
 use yew::*;
 
-use super::containers::radio_list::RadioList;
-use super::containers::radio_list_item::RadioListItem;
-use super::containers::select::*;
 use super::form::color_selector::*;
 use super::modal::{ModalLink, SetModalLink};
 use super::style::LocalStyle;
 use crate::components::datetime_column_style::custom::DatetimeStyleCustom;
 use crate::components::datetime_column_style::simple::DatetimeStyleSimple;
+use crate::components::form::select_field::{SelectEnumField, SelectValueField};
 use crate::config::*;
+use crate::utils::global::navigator;
 use crate::utils::WeakScope;
 use crate::*;
 
@@ -39,16 +37,18 @@ extern "C" {
     pub fn supported_values_of(s: &JsValue) -> js_sys::Array;
 }
 
-static ALL_TIMEZONES: LazyLock<Vec<SelectItem<String>>> = LazyLock::new(|| {
-    supported_values_of(&JsValue::from("timeZone"))
-        .iter()
-        .map(|x| SelectItem::Option(x.as_string().unwrap()))
-        .collect()
+static ALL_TIMEZONES: LazyLock<Arc<Vec<String>>> = LazyLock::new(|| {
+    Arc::new(
+        supported_values_of(&JsValue::from("timeZone"))
+            .iter()
+            .map(|x| x.as_string().unwrap())
+            .collect(),
+    )
 });
 
 static USER_TIMEZONE: LazyLock<String> = LazyLock::new(|| {
     js_sys::Reflect::get(
-        &js_sys::Intl::DateTimeFormat::new(&json!([]), &json!({})).resolved_options(),
+        &js_sys::Intl::DateTimeFormat::new(&navigator().languages(), &json!({})).resolved_options(),
         &JsValue::from("timeZone"),
     )
     .unwrap()
@@ -60,10 +60,8 @@ pub enum DatetimeColumnStyleMsg {
     Reset(DatetimeColumnStyleConfig),
     SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig),
     CustomDatetimeStyleConfigChanged(CustomDatetimeStyleConfig),
-    TimezoneEnabled,
-    TimezoneChanged(String),
-    ColorModeEnabled(bool),
-    ColorModeChanged(DatetimeColorMode),
+    TimezoneChanged(Option<String>),
+    ColorModeChanged(Option<DatetimeColorMode>),
     ColorChanged(String),
 }
 
@@ -77,7 +75,7 @@ pub struct DatetimeColumnStyleProps {
     pub default_config: DatetimeColumnStyleDefaultConfig,
 
     #[prop_or_default]
-    pub on_change: Callback<DatetimeColumnStyleConfig>,
+    pub on_change: Callback<ColumnConfigValueUpdate>,
 
     #[prop_or_default]
     #[derivative(Debug = "ignore")]
@@ -108,7 +106,11 @@ pub struct DatetimeColumnStyle {
 impl DatetimeColumnStyle {
     /// When this config has changed, we must signal the wrapper element.
     fn dispatch_config(&self, ctx: &Context<Self>) {
-        ctx.props().on_change.emit(self.config.clone());
+        let update =
+            Some(self.config.clone()).filter(|x| x != &DatetimeColumnStyleConfig::default());
+        ctx.props()
+            .on_change
+            .emit(ColumnConfigValueUpdate::DatagridDatetimeStyle(update));
     }
 
     /// Generate a color selector component for a specific `StringColorMode`
@@ -121,19 +123,16 @@ impl DatetimeColumnStyle {
             .clone()
             .unwrap_or_else(|| self.default_config.color.to_owned());
 
-        let color_props = props!(ColorProps { color, on_color });
-        match &self.config.datetime_color_mode {
-            Some(x) if x == mode => {
-                html! {
-                    <>
-                        <span class="row">{ title }</span>
-                        <div class="row inner_section"><ColorSelector ..color_props /></div>
-                    </>
-                }
-            },
-            _ => {
-                html! { <span class="row">{ title }</span> }
-            },
+        let color_props = props!(ColorProps {
+            title: title.to_owned(),
+            color,
+            on_color
+        });
+
+        if &self.config.datetime_color_mode == mode {
+            html! { <div class="row"><ColorSelector ..color_props /></div> }
+        } else {
+            html! {}
         }
     }
 }
@@ -151,14 +150,17 @@ impl Component for DatetimeColumnStyle {
     }
 
     // Always re-render when config changes.
-    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+    fn changed(&mut self, ctx: &Context<Self>, old: &Self::Properties) -> bool {
+        let mut rerender = false;
         let mut new_config = ctx.props().config.clone().unwrap_or_default();
         if self.config != new_config {
             std::mem::swap(&mut self.config, &mut new_config);
-            true
-        } else {
-            false
+            rerender = true;
+        }
+        if old.enable_time_config != ctx.props().enable_time_config {
+            rerender = true;
         }
+        rerender
     }
 
     // TODO could be more conservative here with re-rendering
@@ -168,34 +170,18 @@ impl Component for DatetimeColumnStyle {
                 self.config = config;
                 true
             },
-            DatetimeColumnStyleMsg::TimezoneEnabled => {
-                self.config.time_zone = None;
-                self.dispatch_config(ctx);
-                true
-            },
             DatetimeColumnStyleMsg::TimezoneChanged(val) => {
-                if *USER_TIMEZONE != val {
-                    self.config.time_zone = Some(val);
+                if Some(&*USER_TIMEZONE) != val.as_ref() {
+                    *self.config.date_format.time_zone_mut() = val;
                 } else {
-                    self.config.time_zone = None;
-                }
-
-                self.dispatch_config(ctx);
-                true
-            },
-            DatetimeColumnStyleMsg::ColorModeEnabled(enabled) => {
-                if enabled {
-                    self.config.datetime_color_mode = Some(DatetimeColorMode::default());
-                } else {
-                    self.config.datetime_color_mode = None;
-                    self.config.color = None;
+                    *self.config.date_format.time_zone_mut() = None;
                 }
 
                 self.dispatch_config(ctx);
                 true
             },
             DatetimeColumnStyleMsg::ColorModeChanged(mode) => {
-                self.config.datetime_color_mode = Some(mode);
+                self.config.datetime_color_mode = mode.unwrap_or_default();
                 self.dispatch_config(ctx);
                 true
             },
@@ -206,12 +192,12 @@ impl Component for DatetimeColumnStyle {
             },
 
             DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(simple) => {
-                self.config._format = DatetimeFormatType::Simple(simple);
+                self.config.date_format = DatetimeFormatType::Simple(simple);
                 self.dispatch_config(ctx);
                 true
             },
             DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged(custom) => {
-                self.config._format = DatetimeFormatType::Custom(custom);
+                self.config.date_format = DatetimeFormatType::Custom(custom);
                 self.dispatch_config(ctx);
                 true
             },
@@ -219,110 +205,66 @@ impl Component for DatetimeColumnStyle {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let color_enabled_oninput = ctx.link().callback(move |event: InputEvent| {
-            let input = event
-                .target()
-                .unwrap()
-                .unchecked_into::<web_sys::HtmlInputElement>();
-            DatetimeColumnStyleMsg::ColorModeEnabled(input.checked())
-        });
-
-        let selected_color_mode = self.config.datetime_color_mode.unwrap_or_default();
+        let selected_color_mode = self.config.datetime_color_mode;
         let color_mode_changed = ctx
             .link()
             .callback(DatetimeColumnStyleMsg::ColorModeChanged);
 
-        let foreground_controls =
-            self.color_select_row(ctx, &DatetimeColorMode::Foreground, "Foreground");
-
-        let background_controls =
-            self.color_select_row(ctx, &DatetimeColorMode::Background, "Background");
-
-        let on_time_zone_reset = ctx
-            .link()
-            .callback(|_| DatetimeColumnStyleMsg::TimezoneEnabled);
+        let color_controls = match selected_color_mode {
+            DatetimeColorMode::None => html! {},
+            DatetimeColorMode::Foreground => {
+                self.color_select_row(ctx, &DatetimeColorMode::Foreground, "foreground-label")
+            },
+            DatetimeColorMode::Background => {
+                self.color_select_row(ctx, &DatetimeColorMode::Background, "background-label")
+            },
+        };
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("column-style")}
-                />
-                <div
-                    id="column-style-container"
-                    class="datetime-column-style-container"
-                >
-                    <div class="column-style-label"><label class="indent">{ "Color" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            oninput={color_enabled_oninput}
-                            checked={self.config.datetime_color_mode.is_some()}
-                        />
-                        <RadioList<DatetimeColorMode>
-                            class="indent"
-                            name="color-radio-list"
-                            disabled={self.config.datetime_color_mode.is_none()}
-                            selected={selected_color_mode}
-                            on_change={color_mode_changed}
-                        >
-                            <RadioListItem<DatetimeColorMode>
-                                value={DatetimeColorMode::Foreground}
-                            >
-                                { foreground_controls }
-                            </RadioListItem<DatetimeColorMode>>
-                            <RadioListItem<DatetimeColorMode>
-                                value={DatetimeColorMode::Background}
-                            >
-                                { background_controls }
-                            </RadioListItem<DatetimeColorMode>>
-                        </RadioList<DatetimeColorMode>>
-                    </div>
+                <LocalStyle href={css!("column-style")} />
+                <div id="column-style-container" class="datetime-column-style-container">
+                    <SelectEnumField<DatetimeColorMode>
+                        label="color"
+                        on_change={color_mode_changed}
+                        current_value={selected_color_mode}
+                    />
+                    { color_controls }
                     if ctx.props().enable_time_config {
-                        <div
-                            class="column-style-label"
-                        >
-                            <label class="indent">{ "Timezone" }</label>
-                        </div>
-                        <div
-                            class="section"
-                        >
-                            <input
-                                type="checkbox"
-                                onchange={on_time_zone_reset}
-                                checked={self.config.time_zone.is_some()}
-                            />
-                            <Select<String>
-                                wrapper_class="indent"
-                                values={ALL_TIMEZONES.iter().cloned().collect::<Vec<_>>()}
-                                selected={self.config.time_zone.as_ref().unwrap_or(&*USER_TIMEZONE).clone()}
-                                on_select={ctx.link().callback(DatetimeColumnStyleMsg::TimezoneChanged)}
-                            />
-                        </div>
+                        <SelectValueField<String>
+                            label="timezone"
+                            values={ALL_TIMEZONES.clone()}
+                            default_value={(*USER_TIMEZONE).clone()}
+                            on_change={ctx.link().callback(DatetimeColumnStyleMsg::TimezoneChanged)}
+                            current_value={self.config.date_format.time_zone().as_ref().unwrap_or(&*USER_TIMEZONE).clone()}
+                        />
                     }
-                    if let DatetimeFormatType::Simple(config) = &self.config._format {
+                    if let DatetimeFormatType::Simple(config) = &self.config.date_format {
                         if ctx.props().enable_time_config {
-                            <button
-                                id="datetime_format"
-                                data-title="Simple"
-                                data-title-hover="Switch to Custom"
-                                onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged(CustomDatetimeStyleConfig::default()))}
-                            />
+                            <div class="row">
+                                <button
+                                    id="datetime_format"
+                                    data-title="Simple"
+                                    data-title-hover="Switch to Custom"
+                                    onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::CustomDatetimeStyleConfigChanged(CustomDatetimeStyleConfig::default()))}
+                                />
+                            </div>
                         }
                         <DatetimeStyleSimple
                             enable_time_config={ctx.props().enable_time_config}
                             on_change={ctx.link().callback(DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged)}
                             config={config.clone()}
                         />
-                    } else if let DatetimeFormatType::Custom(config) = &self.config._format {
+                    } else if let DatetimeFormatType::Custom(config) = &self.config.date_format {
                         if ctx.props().enable_time_config {
-                            <button
-                                id="datetime_format"
-                                data-title="Custom"
-                                data-title-hover="Switch to Simple"
-                                onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig::default()))}
-                            />
+                            <div class="row">
+                                <button
+                                    id="datetime_format"
+                                    data-title="Custom"
+                                    data-title-hover="Switch to Simple"
+                                    onclick={ctx.link().callback(|_| DatetimeColumnStyleMsg::SimpleDatetimeStyleConfigChanged(SimpleDatetimeStyleConfig::default()))}
+                                />
+                            </div>
                         }
                         <DatetimeStyleCustom
                             enable_time_config={ctx.props().enable_time_config}
diff --git a/rust/perspective-viewer/src/rust/components/datetime_column_style/custom.rs b/rust/perspective-viewer/src/rust/components/datetime_column_style/custom.rs
index ed6602d80b..dc0f4326d4 100644
--- a/rust/perspective-viewer/src/rust/components/datetime_column_style/custom.rs
+++ b/rust/perspective-viewer/src/rust/components/datetime_column_style/custom.rs
@@ -10,16 +10,18 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+use std::sync::Arc;
+
 use yew::prelude::*;
 
-use crate::components::containers::select::{Select, SelectItem};
+use crate::components::form::number_field::NumberField;
+use crate::components::form::select_field::SelectValueField;
 use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
 use crate::utils::WeakScope;
-use crate::*;
 
 pub enum DatetimeStyleCustomMsg {
-    FractionalSeconds(String),
+    FractionalSeconds(Option<f64>),
     Year(CustomDatetimeFormat),
     Month(CustomDatetimeFormat),
     Day(CustomDatetimeFormat),
@@ -128,13 +130,7 @@ impl Component for DatetimeStyleCustom {
                 true
             },
             DatetimeStyleCustomMsg::FractionalSeconds(fractional) => {
-                let fractional = match fractional.parse::<u32>() {
-                    Ok(x) => x,
-                    Err(_) if fractional.is_empty() => 0,
-                    Err(_) => 0,
-                };
-
-                self.config.fractional_seconds = fractional;
+                self.config.fractional_seconds = fractional.unwrap_or_default().floor() as u32;
                 self.dispatch_config(ctx);
                 true
             },
@@ -147,195 +143,78 @@ impl Component for DatetimeStyleCustom {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let fractional_oninput = |f: fn(String) -> DatetimeStyleCustomMsg| {
-            ctx.link().callback(move |event: InputEvent| {
-                f(event
-                    .target()
-                    .unwrap()
-                    .unchecked_into::<web_sys::HtmlInputElement>()
-                    .value())
-            })
-        };
-
-        let all_values = CustomDatetimeFormat::values()
-            .iter()
-            .map(|x| SelectItem::Option(*x))
-            .collect::<Vec<_>>();
-
-        let number_values = CustomDatetimeFormat::values_1()
-            .iter()
-            .map(|x| SelectItem::Option(*x))
-            .collect::<Vec<_>>();
-
-        let text_values = CustomDatetimeFormat::values_2()
-            .iter()
-            .map(|x| SelectItem::Option(*x))
-            .collect::<Vec<_>>();
-
-        let hour12_ = {
-            let hour12 = self.config.hour12;
-            ctx.link()
-                .callback(move |_: Event| DatetimeStyleCustomMsg::Hour12(!hour12))
-        };
-
+        let all_values = Arc::new(Vec::from(CustomDatetimeFormat::values()));
+        let number_values = Arc::new(Vec::from(CustomDatetimeFormat::values_1()));
+        let text_values = Arc::new(Vec::from(CustomDatetimeFormat::values_2()));
+        type SelectStrField = SelectValueField<&'static str>;
         html! {
             <>
                 if ctx.props().enable_time_config {
-                    <div class="column-style-label"><label class="indent">{ "Year" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Year(CustomDatetimeFormat::TwoDigit))}
-                            checked={self.config.year != CustomDatetimeFormat::TwoDigit}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.year}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Year)}
-                            values={number_values.clone()}
-                        />
-                    </div>
-                    <div class="column-style-label"><label class="indent">{ "Month" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Month(CustomDatetimeFormat::Numeric))}
-                            checked={self.config.month != CustomDatetimeFormat::Numeric}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.month}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Month)}
-                            values={all_values.clone()}
-                        />
-                    </div>
-                    <div class="column-style-label"><label class="indent">{ "Day" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Day(CustomDatetimeFormat::Numeric))}
-                            checked={self.config.day != CustomDatetimeFormat::Numeric}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.day}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Day)}
-                            values={number_values.clone()}
-                        />
-                    </div>
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "Weekday" }</label>
-                    </div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Weekday(CustomDatetimeFormat::Disabled))}
-                            checked={self.config.weekday != CustomDatetimeFormat::Disabled}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.weekday}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Weekday)}
-                            values={text_values.clone()}
-                        />
-                    </div>
-                    <div class="column-style-label"><label class="indent">{ "Hour" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Hour(CustomDatetimeFormat::Numeric))}
-                            checked={self.config.hour != CustomDatetimeFormat::Numeric}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.hour}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Hour)}
-                            values={number_values.clone()}
-                        />
-                    </div>
-                    <div class="column-style-label"><label class="indent">{ "Minute" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Minute(CustomDatetimeFormat::Numeric))}
-                            checked={self.config.minute != CustomDatetimeFormat::Numeric}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.minute}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Minute)}
-                            values={number_values.clone()}
-                        />
-                    </div>
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "Seconds" }</label>
-                    </div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::Second(CustomDatetimeFormat::Numeric))}
-                            checked={self.config.second != CustomDatetimeFormat::Numeric}
-                        />
-                        <Select<CustomDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.second}
-                            on_select={ctx.link().callback(DatetimeStyleCustomMsg::Second)}
-                            values={number_values.clone()}
-                        />
-                    </div>
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "Fractional Seconds" }</label>
-                    </div>
-                    <div
-                        class="row section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={ctx.link().callback(|_| DatetimeStyleCustomMsg::FractionalSeconds("0".to_owned()))}
-                            checked={self.config.fractional_seconds != 0}
-                        />
-                        <input
-                            id="fixed-param"
-                            class="parameter"
-                            type="number"
-                            min="0"
-                            step="1"
-                            max="3"
-                            value={self.config.fractional_seconds.to_string()}
-                            oninput={fractional_oninput(DatetimeStyleCustomMsg::FractionalSeconds)}
-                        />
-                    </div>
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "12/24 Hours" }</label>
-                    </div>
-                    <div
-                        class="section"
-                    >
-                        <input type="checkbox" onchange={hour12_} checked={!self.config.hour12} />
-                        <span >{ if self.config.hour12 { "12 Hour" } else { "24 hour" } }</span>
-                    </div>
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="year"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::TwoDigit}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Year(x.unwrap_or(CustomDatetimeFormat::TwoDigit)))}
+                        current_value={self.config.year}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="month"
+                        values={all_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Month(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.month}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="day"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Day(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.day}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="weekday"
+                        values={text_values.clone()}
+                        default_value={CustomDatetimeFormat::Disabled}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Weekday(x.unwrap_or(CustomDatetimeFormat::Disabled)))}
+                        current_value={self.config.weekday}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="hour"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Hour(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.hour}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="minute"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Minute(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.minute}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="second"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Second(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.second}
+                    />
+                    <NumberField
+                        label="fractional-seconds"
+                        min=0.
+                        max=3.
+                        step=1.
+                        default=0.
+                        current_value={self.config.fractional_seconds as f64}
+                        on_change={ctx.link().callback(DatetimeStyleCustomMsg::FractionalSeconds)}
+                    />
+                    <SelectStrField
+                        label="hours"
+                        values={Arc::new(vec!["12 Hour", "24 Hour"])}
+                        default_value="12 Hour"
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Hour12(x != Some("24 Hour") ))}
+                        current_value={if self.config.hour12 { "12 Hour" } else { "24 Hour" }}
+                    />
                 }
             </>
         }
diff --git a/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs b/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs
index 7d7cc70a3b..ba17a8f48e 100644
--- a/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs
+++ b/rust/perspective-viewer/src/rust/components/datetime_column_style/simple.rs
@@ -12,16 +12,14 @@
 
 use yew::prelude::*;
 
-use crate::components::containers::select::*;
+use crate::components::form::select_field::SelectEnumField;
 use crate::components::modal::{ModalLink, SetModalLink};
 use crate::config::*;
 use crate::utils::WeakScope;
 
 pub enum DatetimeStyleSimpleMsg {
-    DateEnabled,
-    TimeEnabled,
-    DateStyleChanged(SimpleDatetimeFormat),
-    TimeStyleChanged(SimpleDatetimeFormat),
+    DateStyleChanged(Option<SimpleDatetimeFormat>),
+    TimeStyleChanged(Option<SimpleDatetimeFormat>),
 }
 
 #[derive(Properties)]
@@ -78,23 +76,13 @@ impl Component for DatetimeStyleSimple {
     // TODO could be more conservative here with re-rendering
     fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
         match msg {
-            DatetimeStyleSimpleMsg::DateEnabled => {
-                self.config.date_style = SimpleDatetimeFormat::Short;
-                self.dispatch_config(ctx);
-                true
-            },
-            DatetimeStyleSimpleMsg::TimeEnabled => {
-                self.config.time_style = SimpleDatetimeFormat::Medium;
-                self.dispatch_config(ctx);
-                true
-            },
             DatetimeStyleSimpleMsg::DateStyleChanged(format) => {
-                self.config.date_style = format;
+                self.config.date_style = format.unwrap_or_default();
                 self.dispatch_config(ctx);
                 true
             },
             DatetimeStyleSimpleMsg::TimeStyleChanged(format) => {
-                self.config.time_style = format;
+                self.config.time_style = format.unwrap_or_default();
                 self.dispatch_config(ctx);
                 true
             },
@@ -113,48 +101,20 @@ impl Component for DatetimeStyleSimple {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let on_date_reset = ctx.link().callback(|_| DatetimeStyleSimpleMsg::DateEnabled);
-        let on_time_reset = ctx.link().callback(|_| DatetimeStyleSimpleMsg::TimeEnabled);
-
         html! {
             <>
-                <div class="column-style-label"><label class="indent">{ "Date Style" }</label></div>
-                <div
-                    class="section"
-                >
-                    <input
-                        type="checkbox"
-                        onchange={on_date_reset}
-                        checked={!self.config.date_style.is_short()}
-                    />
-                    <Select<SimpleDatetimeFormat>
-                        wrapper_class="indent"
-                        selected={self.config.date_style}
-                        on_select={ctx.link().callback(DatetimeStyleSimpleMsg::DateStyleChanged)}
-                        values={SimpleDatetimeFormat::values().iter().map(|x| SelectItem::Option(*x)).collect::<Vec<_>>()}
-                    />
-                </div>
+                <SelectEnumField<SimpleDatetimeFormat>
+                    label="date-style"
+                    on_change={ctx.link().callback(DatetimeStyleSimpleMsg::DateStyleChanged)}
+                    current_value={self.config.date_style}
+                />
                 if ctx.props().enable_time_config {
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "Time Style" }</label>
-                    </div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            onchange={on_time_reset}
-                            checked={!self.config.time_style.is_medium()}
-                        />
-                        <Select<SimpleDatetimeFormat>
-                            wrapper_class="indent"
-                            selected={self.config.time_style}
-                            on_select={ctx.link().callback(DatetimeStyleSimpleMsg::TimeStyleChanged)}
-                            values={SimpleDatetimeFormat::values().iter().map(|x| SelectItem::Option(*x)).collect::<Vec<_>>()}
-                        />
-                    </div>
+                    <SelectEnumField<SimpleDatetimeFormat>
+                        label="time-style"
+                        on_change={ctx.link().callback(DatetimeStyleSimpleMsg::TimeStyleChanged)}
+                        current_value={self.config.time_style}
+                        default_value={SimpleDatetimeFormat::Medium}
+                    />
                 }
             </>
         }
diff --git a/rust/perspective-viewer/src/rust/components/editable_header.rs b/rust/perspective-viewer/src/rust/components/editable_header.rs
index a28da381c7..284f8c9f78 100644
--- a/rust/perspective-viewer/src/rust/components/editable_header.rs
+++ b/rust/perspective-viewer/src/rust/components/editable_header.rs
@@ -128,8 +128,6 @@ impl Component for EditableHeader {
                 self.value = maybe_value.clone();
                 ctx.props().on_change.emit((maybe_value, self.valid));
 
-                tracing::error!("EditableHeader: SetNewValue! {:?}", self);
-
                 true
             },
             EditableHeaderMsg::OnClick(()) => {
@@ -168,13 +166,8 @@ impl Component for EditableHeader {
         });
 
         html! {
-            <div
-                class={classes}
-                onclick={ctx.link().callback(|_| EditableHeaderMsg::OnClick(()))}
-            >
-                if let Some(icon) = ctx.props().icon_type {
-                    <TypeIcon ty={icon} />
-                }
+            <div class={classes} onclick={ctx.link().callback(|_| EditableHeaderMsg::OnClick(()))}>
+                if let Some(icon) = ctx.props().icon_type { <TypeIcon ty={icon} /> }
                 <input
                     ref={self.noderef.clone()}
                     type="search"
diff --git a/rust/perspective-viewer/src/rust/components/empty_row.rs b/rust/perspective-viewer/src/rust/components/empty_row.rs
index 68c7b10660..8c24477cf4 100644
--- a/rust/perspective-viewer/src/rust/components/empty_row.rs
+++ b/rust/perspective-viewer/src/rust/components/empty_row.rs
@@ -85,12 +85,8 @@ impl Component for EmptyRow {
         };
 
         html! {
-            <div
-                class="pivot-column column-empty"
-            >
-                <LocalStyle
-                    href={css!("empty-column")}
-                />
+            <div class="pivot-column column-empty">
+                <LocalStyle href={css!("empty-column")} />
                 <input
                     spellcheck="false"
                     ref={self.input_ref.clone()}
diff --git a/rust/perspective-viewer/src/rust/components/expression_editor.rs b/rust/perspective-viewer/src/rust/components/expression_editor.rs
index 86405d8790..9eb86b5eb6 100644
--- a/rust/perspective-viewer/src/rust/components/expression_editor.rs
+++ b/rust/perspective-viewer/src/rust/components/expression_editor.rs
@@ -115,18 +115,11 @@ impl Component for ExpressionEditor {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("expression-editor")}
-                />
-                <SplitPanel
-                    orientation={Orientation::Vertical}
-                >
+                <LocalStyle href={css!("expression-editor")} />
+                <SplitPanel orientation={Orientation::Vertical}>
                     <>
                         <label class="item_title">{ "Expression" }</label>
-                        <div
-                            id="editor-container"
-                            class={disabled_class}
-                        >
+                        <div id="editor-container" class={disabled_class}>
                             <CodeEditor
                                 expr={&self.expr}
                                 error={self.error.clone().map(|x| x.into())}
@@ -134,12 +127,8 @@ impl Component for ExpressionEditor {
                                 {oninput}
                                 onsave={ctx.props().on_save.clone()}
                             />
-                            <div
-                                id="psp-expression-editor-meta"
-                            >
-                                <div
-                                    class="error"
-                                >
+                            <div id="psp-expression-editor-meta">
+                                <div class="error">
                                     { &self.error.clone().map(|e| e.error_message).unwrap_or_default() }
                                 </div>
                             </div>
diff --git a/rust/perspective-viewer/src/rust/components/filter_dropdown.rs b/rust/perspective-viewer/src/rust/components/filter_dropdown.rs
index a036d25626..380992097d 100644
--- a/rust/perspective-viewer/src/rust/components/filter_dropdown.rs
+++ b/rust/perspective-viewer/src/rust/components/filter_dropdown.rs
@@ -139,6 +139,6 @@ impl Component for FilterDropDown {
             }
         };
 
-        html! { <><style >{ &CSS }</style>{ body }</> }
+        html! { <><style>{ &CSS }</style>{ body }</> }
     }
 }
diff --git a/rust/perspective-viewer/src/rust/components/font_loader.rs b/rust/perspective-viewer/src/rust/components/font_loader.rs
index 5b526b06ae..a4cec41ad7 100644
--- a/rust/perspective-viewer/src/rust/components/font_loader.rs
+++ b/rust/perspective-viewer/src/rust/components/font_loader.rs
@@ -71,7 +71,7 @@ impl Component for FontLoader {
                 .map(font_test_html)
                 .collect::<Html>();
 
-            html! { <><style >{ ":host{opacity:0!important;}" }</style>{ inner }</> }
+            html! { <><style>{ ":host{opacity:0!important;}" }</style>{ inner }</> }
         }
     }
 }
@@ -104,7 +104,7 @@ impl FontLoaderProps {
         };
 
         let state = yew::props!(Self {
-            state: Rc::new(inner),
+            state: Rc::new(inner)
         });
 
         ApiFuture::spawn(state.clone().load_fonts_task_safe());
diff --git a/rust/perspective-viewer/src/rust/components/form/code_editor.rs b/rust/perspective-viewer/src/rust/components/form/code_editor.rs
index 8915b51fb2..19ff2c83d4 100644
--- a/rust/perspective-viewer/src/rust/components/form/code_editor.rs
+++ b/rust/perspective-viewer/src/rust/components/form/code_editor.rs
@@ -182,12 +182,8 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
 
     html! {
         <>
-            <LocalStyle
-                href={css!("form/code-editor")}
-            />
-            <div
-                id="editor"
-            >
+            <LocalStyle href={css!("form/code-editor")} />
+            <div id="editor">
                 <textarea
                     {disabled}
                     id="textarea_editable"
@@ -197,10 +193,7 @@ pub fn code_editor(props: &CodeEditorProps) -> Html {
                     {onscroll}
                     {onkeydown}
                 />
-                <pre
-                    id="content"
-                    ref={content_ref.1}
-                >
+                <pre id="content" ref={content_ref.1}>
                     { terms }
                     { {
                         // A linebreak which pushs a textarea into scroll overflow
diff --git a/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs b/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs
index 60e2d2071b..7c49d94119 100644
--- a/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/form/color_range_selector.rs
@@ -16,6 +16,7 @@ use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]
 pub struct ColorRangeProps {
+    pub id: String,
     pub pos_color: String,
     pub neg_color: String,
     pub is_gradient: bool,
@@ -36,7 +37,13 @@ fn infer_fg(color: &str) -> &'static str {
 
 #[function_component(ColorRangeSelector)]
 pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
-    let gradient = use_state_eq(|| (props.pos_color.to_owned(), props.neg_color.to_owned()));
+    let gradient = use_state_eq(|| {
+        (
+            props.pos_color.to_owned(),
+            props.neg_color.to_owned(),
+            false,
+        )
+    });
     let on_pos_color = use_callback(
         (gradient.clone(), props.on_pos_color.clone()),
         |event: InputEvent, (gradient, on_pos_color)| {
@@ -45,7 +52,7 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
                 .unwrap()
                 .unchecked_into::<HtmlInputElement>()
                 .value();
-            gradient.set((color.clone(), gradient.1.to_owned()));
+            gradient.set((color.clone(), gradient.1.to_owned(), true));
             on_pos_color.emit(color);
         },
     );
@@ -58,14 +65,13 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
                 .unwrap()
                 .unchecked_into::<HtmlInputElement>()
                 .value();
-            gradient.set((gradient.0.to_owned(), color.clone()));
+            gradient.set((gradient.0.to_owned(), color.clone(), true));
             on_neg_color.emit(color);
         },
     );
 
     let fg_pos = infer_fg(&gradient.0);
     let fg_neg = infer_fg(&gradient.1);
-
     let style = if props.is_gradient {
         format!(
             "background:linear-gradient(to right, {} 0%, transparent 50%, {} 100%)",
@@ -79,29 +85,39 @@ pub fn color_chooser_component(props: &ColorRangeProps) -> Html {
     };
 
     html! {
-        <div
-            class="color-gradient-container"
-        >
-            <input
-                id="pos-color-param"
-                style={fg_pos}
-                class="parameter"
-                type="color"
-                value={gradient.0.to_owned()}
-                oninput={on_pos_color}
-            />
-            <div
-                class="color-thermometer"
-                {style}
-            />
-            <input
-                id="neg-color-param"
-                style={fg_neg}
-                class="parameter"
-                type="color"
-                value={gradient.1.to_owned()}
-                oninput={on_neg_color}
-            />
-        </div>
+        <>
+            <label id="color-range-label" />
+            <div class="color-gradient-container">
+                <div style={fg_pos} class="color-selector">
+                    <input
+                        id={format!("{}-pos", props.id)}
+                        class="parameter pos-color-param"
+                        type="color"
+                        value={gradient.0.to_owned()}
+                        oninput={on_pos_color}
+                    />
+                    <label for={format!("{}-pos", props.id)} class="color-label">{ "+" }</label>
+                </div>
+                <div class="color-thermometer" {style} />
+                <div style={fg_neg} class="color-selector">
+                    <input
+                        id={format!("{}-neg", props.id)}
+                        class="parameter neg-color-param"
+                        type="color"
+                        value={gradient.1.to_owned()}
+                        oninput={on_neg_color}
+                    />
+                    <label for={format!("{}-neg", props.id)} class="color-label">{ "-" }</label>
+                </div>
+                if gradient.2 {
+                    <span class="reset-default-style" // onclick={props.on_check.clone()}
+                    // id={format!("{}-checkbox", props.label.replace(' ', "-"))}
+                    />
+                } else {
+                    <span class="reset-default-style-disabled" // id={format!("{}-checkbox", props.label.replace(' ', "-"))}
+                    />
+                }
+            </div>
+        </>
     }
 }
diff --git a/rust/perspective-viewer/src/rust/components/form/color_selector.rs b/rust/perspective-viewer/src/rust/components/form/color_selector.rs
index 0618abaefb..feb07251bc 100644
--- a/rust/perspective-viewer/src/rust/components/form/color_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/form/color_selector.rs
@@ -18,17 +18,41 @@ use yew::prelude::*;
 pub struct ColorProps {
     pub color: String,
     pub on_color: Callback<String>,
+
+    #[prop_or_default]
+    pub title: Option<String>,
 }
 
 #[function_component(ColorSelector)]
 pub fn color_component(props: &ColorProps) -> Html {
-    let oninput = props.on_color.reform(|event: InputEvent| {
-        event
-            .target()
-            .unwrap()
-            .unchecked_into::<HtmlInputElement>()
-            .value()
-    });
+    let changed = use_state(|| props.color.clone());
+    let oninput = use_callback(
+        (changed.clone(), props.on_color.clone()),
+        |event: InputEvent, deps| {
+            let color = event
+                .target()
+                .unwrap()
+                .unchecked_into::<HtmlInputElement>()
+                .value();
+            deps.0.set(color.clone());
+            deps.1.emit(color);
+        },
+    );
 
-    html! { <input class="parameter" type="color" value={props.color.to_owned()} {oninput} /> }
+    html! {
+        <>
+            <label id={props.title.as_deref().unwrap_or("color-label").to_owned()} />
+            <div class="color-gradient-container">
+                <input class="parameter" type="color" value={props.color.to_owned()} {oninput} />
+                if *changed != props.color {
+                    <span class="reset-default-style" />
+                    // onclick={props.on_check.clone()}
+                    // id={format!("{}-checkbox", props.label.replace(' ', "-"))}
+                } else {
+                    <span class="reset-default-style-disabled" />
+                    // id={format!("{}-checkbox", props.label.replace(' ', "-"))}
+                }
+            </div>
+        </>
+    }
 }
diff --git a/rust/perspective-viewer/src/rust/components/form/mod.rs b/rust/perspective-viewer/src/rust/components/form/mod.rs
index ade907daea..1e5c7bd6c2 100644
--- a/rust/perspective-viewer/src/rust/components/form/mod.rs
+++ b/rust/perspective-viewer/src/rust/components/form/mod.rs
@@ -19,4 +19,9 @@ pub mod code_editor;
 pub mod color_range_selector;
 pub mod color_selector;
 mod highlight;
+pub mod number_field;
 pub mod number_input;
+pub mod number_range_field;
+pub mod optional_field;
+
+pub mod select_field;
diff --git a/rust/perspective-viewer/src/rust/components/containers/tests/radio_list.rs b/rust/perspective-viewer/src/rust/components/form/number_field.rs
similarity index 53%
rename from rust/perspective-viewer/src/rust/components/containers/tests/radio_list.rs
rename to rust/perspective-viewer/src/rust/components/form/number_field.rs
index 770f137f14..6fe446225c 100644
--- a/rust/perspective-viewer/src/rust/components/containers/tests/radio_list.rs
+++ b/rust/perspective-viewer/src/rust/components/form/number_field.rs
@@ -10,55 +10,63 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use super::super::radio_list::{RadioList, RadioListMsg};
-use super::super::radio_list_item::RadioListItem;
-use crate::utils::{await_animation_frame, WeakScope};
-use crate::*;
+use web_sys::{HtmlInputElement, InputEvent};
+use yew::{function_component, html, Callback, Properties, TargetCast};
 
-use std::cell::RefCell;
-use std::rc::Rc;
-use wasm_bindgen_test::*;
-use yew::prelude::*;
+use crate::components::form::optional_field::OptionalField;
 
-wasm_bindgen_test::wasm_bindgen_test_configure!(run_in_browser);
+#[derive(Properties, Debug, PartialEq, Clone)]
+pub struct NumberFieldProps {
+    pub label: String,
+    pub current_value: Option<f64>,
+    pub default: f64,
+    pub on_change: Callback<Option<f64>>,
 
-#[wasm_bindgen_test]
-pub async fn test_change_u32() {
-    let link: WeakScope<RadioList<String>> = WeakScope::default();
-    let result: Rc<RefCell<String>> = Rc::new(RefCell::new("false".to_owned()));
-    let on_change = {
-        clone!(result);
-        Callback::from(move |val| {
-            *result.borrow_mut() = val;
-        })
-    };
-
-    test_html! {
-        <RadioList<String>
-            disabled=false
-            selected="2"
-            on_change={ on_change }
-            weak_link={ link.clone() }>
+    #[prop_or_default]
+    pub disabled: bool,
 
-            <RadioListItem<String> value="1"><span>{ "One" }</span></RadioListItem<String>>
-            <RadioListItem<String> value="2"><span>{ "Two" }</span></RadioListItem<String>>
-            <RadioListItem<String> value="3"><span>{ "Three" }</span></RadioListItem<String>>
+    #[prop_or_default]
+    pub min: Option<f64>,
 
-        </RadioList<String>>
-    };
+    #[prop_or_default]
+    pub max: Option<f64>,
 
-    await_animation_frame().await.unwrap();
-    let radio_list = link.borrow().clone().unwrap();
-    radio_list.send_message(RadioListMsg::Change("2".to_owned()));
-    await_animation_frame().await.unwrap();
+    #[prop_or_default]
+    pub step: Option<f64>,
+}
 
-    assert_eq!(*result.borrow(), "2");
-    radio_list.send_message(RadioListMsg::Change("3".to_owned()));
-    await_animation_frame().await.unwrap();
+#[function_component(NumberField)]
+pub fn number_field(props: &NumberFieldProps) -> yew::Html {
+    let parse_number_input = |event: InputEvent| {
+        Some(
+            event
+                .target_unchecked_into::<HtmlInputElement>()
+                .value_as_number(),
+        )
+    };
 
-    assert_eq!(*result.borrow(), "3");
-    radio_list.send_message(RadioListMsg::Change("1".to_owned()));
-    await_animation_frame().await.unwrap();
+    let number_input = html! {
+        <input
+            type="number"
+            class="parameter"
+            min={props.min.map(|val| val.to_string())}
+            max={props.max.map(|val| val.to_string())}
+            step={props.step.map(|val| val.to_string())}
+            value={props.current_value.unwrap_or(props.default).to_string()}
+            oninput={props.on_change.reform(parse_number_input)}
+        />
+    };
 
-    assert_eq!(*result.borrow(), "1");
+    html! {
+        <div class="row">
+            <OptionalField
+                label={props.label.clone()}
+                on_check={props.on_change.reform(|_| None)}
+                checked={props.current_value.map(|val| val != props.default).unwrap_or_default()}
+                disabled={props.disabled}
+            >
+                { number_input }
+            </OptionalField>
+        </div>
+    }
 }
diff --git a/rust/perspective-viewer/src/rust/components/form/number_input.rs b/rust/perspective-viewer/src/rust/components/form/number_input.rs
index b79772d051..dfb73881c6 100644
--- a/rust/perspective-viewer/src/rust/components/form/number_input.rs
+++ b/rust/perspective-viewer/src/rust/components/form/number_input.rs
@@ -32,7 +32,7 @@ pub fn number_input(props: &NumberInputProps) -> Html {
 
     html! {
         <>
-            <label >{ "Max" }</label>
+            <label>{ "Max" }</label>
             <input
                 value={format!("{}", props.max_value)}
                 class="parameter"
diff --git a/rust/perspective-viewer/src/rust/components/form/number_range_field.rs b/rust/perspective-viewer/src/rust/components/form/number_range_field.rs
new file mode 100644
index 0000000000..4dcc90107e
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/form/number_range_field.rs
@@ -0,0 +1,77 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use web_sys::HtmlInputElement;
+use yew::{function_component, html, use_callback, use_node_ref, Callback, Properties};
+
+use crate::components::form::optional_field::OptionalField;
+
+#[derive(Properties, Debug, PartialEq, Clone)]
+pub struct NumberRangeFieldProps {
+    pub label: String,
+    pub current_value: Option<(f64, f64)>,
+    pub default: (f64, f64),
+    pub on_change: Callback<Option<(f64, f64)>>,
+
+    #[prop_or_default]
+    pub min: Option<f64>,
+
+    #[prop_or_default]
+    pub max: Option<f64>,
+
+    #[prop_or_default]
+    pub step: Option<f64>,
+}
+
+#[function_component(NumberRangeField)]
+pub fn number_range_field(props: &NumberRangeFieldProps) -> yew::Html {
+    let ref1 = use_node_ref();
+    let ref2 = use_node_ref();
+    let parse_number_input = use_callback(
+        (ref1.clone(), ref2.clone(), props.on_change.clone()),
+        |_, deps| {
+            deps.2.emit(Some((
+                deps.0.cast::<HtmlInputElement>().unwrap().value_as_number(),
+                deps.1.cast::<HtmlInputElement>().unwrap().value_as_number(),
+            )));
+        },
+    );
+
+    html! {
+        <OptionalField
+            label={props.label.clone()}
+            on_check={props.on_change.reform(|_| None)}
+            checked={props.current_value.map(|val| val != props.default).unwrap_or_default()}
+        >
+            <input
+                type="number"
+                class="parameter parameter-min"
+                ref={ref1}
+                min={props.min.map(|val| val.to_string())}
+                max={props.max.map(|val| val.to_string())}
+                step={props.step.map(|val| val.to_string())}
+                value={props.current_value.unwrap_or(props.default).0.to_string()}
+                oninput={parse_number_input.clone()}
+            />
+            <input
+                type="number"
+                class="parameter parameter-max"
+                ref={ref2}
+                min={props.min.map(|val| val.to_string())}
+                max={props.max.map(|val| val.to_string())}
+                step={props.step.map(|val| val.to_string())}
+                value={props.current_value.unwrap_or(props.default).1.to_string()}
+                oninput={parse_number_input}
+            />
+        </OptionalField>
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/config/plugin.rs b/rust/perspective-viewer/src/rust/components/form/optional_field.rs
similarity index 52%
rename from rust/perspective-viewer/src/rust/config/plugin.rs
rename to rust/perspective-viewer/src/rust/components/form/optional_field.rs
index fef1880154..01fb512582 100644
--- a/rust/perspective-viewer/src/rust/config/plugin.rs
+++ b/rust/perspective-viewer/src/rust/components/form/optional_field.rs
@@ -10,58 +10,44 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::collections::HashMap;
-use std::fmt::Debug;
+use yew::{classes, function_component, html, Callback, Children, Html, MouseEvent, Properties};
 
-use serde::{Deserialize, Serialize};
+#[derive(Properties, PartialEq)]
+pub struct OptionalFieldProps {
+    pub label: String,
+    pub on_check: Callback<MouseEvent>,
+    pub checked: bool,
+    pub children: Children,
 
-#[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
-pub struct Symbol {
-    /// the name of the symbol
-    pub name: String,
-    /// unescaped HTML string
-    pub html: String,
-}
-impl std::fmt::Display for Symbol {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        f.write_str(&self.name)
-    }
-}
-
-#[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
-pub struct SymbolAttributes {
-    /// a vec of SVGs to render
-    pub symbols: Vec<Symbol>,
-}
-
-/// The default style configurations per type, as retrived by
-/// plugin.plugin_attributes
-#[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
-pub struct DefaultStyleAttributes {
-    pub string: serde_json::Value,
-    pub datetime: serde_json::Value,
-    pub date: serde_json::Value,
-    pub integer: serde_json::Value,
-    pub float: serde_json::Value,
-    pub bool: serde_json::Value,
-}
+    #[prop_or(String::from("section"))]
+    pub class: String,
 
-/// The data needed to populate a column's settings. These are typically default
-/// values, a listing of possible values, or other basic configuration settings
-/// for the plugin. This is the result of calling plugin.plugin_attributes
-#[derive(Serialize, Deserialize, Debug, Clone, PartialEq)]
-pub struct PluginAttributes {
-    pub symbol: Option<SymbolAttributes>,
-    pub style: Option<DefaultStyleAttributes>,
-    // color: ColorAttributes,
-    // axis: AxisAttributes,
-    //...
+    #[prop_or_default]
+    pub disabled: bool,
 }
 
-/// The configuration which is created as the result of calling plugin.save
-#[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
-pub struct PluginConfig {
-    /// Refers to the currently active columns. Maps name to configuration.
-    #[serde(default)]
-    pub columns: HashMap<String, serde_json::Value>,
+#[function_component(OptionalField)]
+pub fn optional_field(props: &OptionalFieldProps) -> Html {
+    html! {
+        <>
+            <label id={format!("{}-label", props.label)} />
+            <div
+                class={classes!(props.class.clone(), props.checked.then_some("is-default-value"))}
+            >
+                { props.children.clone() }
+                if props.checked {
+                    <span
+                        class="reset-default-style"
+                        onclick={props.on_check.clone()}
+                        id={format!("{}-checkbox", props.label)}
+                    />
+                } else {
+                    <span
+                        class="reset-default-style-disabled"
+                        id={format!("{}-checkbox", props.label)}
+                    />
+                }
+            </div>
+        </>
+    }
 }
diff --git a/rust/perspective-viewer/src/rust/components/form/select_field.rs b/rust/perspective-viewer/src/rust/components/form/select_field.rs
new file mode 100644
index 0000000000..00d4dcdf36
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/form/select_field.rs
@@ -0,0 +1,107 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::fmt::{Debug, Display};
+use std::sync::Arc;
+
+use itertools::Itertools;
+use strum::IntoEnumIterator;
+use yew::{function_component, html, Callback, Properties};
+
+use crate::components::containers::select::{Select, SelectItem};
+use crate::components::form::optional_field::OptionalField;
+
+#[derive(Properties, Debug, PartialEq, Clone)]
+pub struct SelectEnumFieldProps<T>
+where
+    T: IntoEnumIterator + Display + Default + PartialEq + Clone + 'static,
+{
+    pub label: String,
+    pub current_value: Option<T>,
+    pub on_change: Callback<Option<T>>,
+
+    #[prop_or_default]
+    pub default_value: Option<T>,
+
+    #[prop_or_default]
+    pub disabled: bool,
+}
+
+#[function_component(SelectEnumField)]
+pub fn select_enum_field<T>(props: &SelectEnumFieldProps<T>) -> yew::Html
+where
+    T: IntoEnumIterator + Debug + Display + Default + PartialEq + Clone + 'static,
+{
+    let values = T::iter().map(SelectItem::Option).collect_vec();
+    let selected = props.current_value.clone().unwrap_or_default();
+    let checked = selected != props.default_value.clone().unwrap_or_default();
+    let reset_value = props.default_value.clone();
+    html! {
+        <div class="row">
+            <OptionalField
+                label={props.label.clone()}
+                on_check={props.on_change.reform(move |_| reset_value.clone())}
+                {checked}
+                disabled={props.disabled}
+            >
+                <Select<T> {values} {selected} on_select={props.on_change.reform(Option::Some)} />
+            </OptionalField>
+        </div>
+    }
+}
+
+#[derive(Properties, Debug, PartialEq, Clone)]
+pub struct SelectValueFieldProps<T>
+where
+    T: Display + PartialEq + Clone + 'static,
+{
+    pub label: String,
+    pub current_value: Option<T>,
+    pub default_value: T,
+    pub values: Arc<Vec<T>>,
+    pub on_change: Callback<Option<T>>,
+
+    #[prop_or_default]
+    pub disabled: bool,
+}
+
+#[function_component(SelectValueField)]
+pub fn select_value_field<T>(props: &SelectValueFieldProps<T>) -> yew::Html
+where
+    T: Display + PartialEq + Clone + 'static,
+{
+    let values = props
+        .values
+        .iter()
+        .cloned()
+        .map(SelectItem::Option)
+        .collect_vec();
+
+    let selected = props
+        .current_value
+        .clone()
+        .unwrap_or_else(|| props.default_value.clone());
+
+    let checked = selected != props.default_value;
+    html! {
+        <div class="row">
+            <OptionalField
+                label={props.label.clone()}
+                on_check={props.on_change.reform(|_| None)}
+                {checked}
+                disabled={props.disabled}
+            >
+                <Select<T> {values} {selected} on_select={props.on_change.reform(Option::Some)} />
+            </OptionalField>
+        </div>
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/components/function_dropdown.rs b/rust/perspective-viewer/src/rust/components/function_dropdown.rs
index f8cd3d7190..426e74224b 100644
--- a/rust/perspective-viewer/src/rust/components/function_dropdown.rs
+++ b/rust/perspective-viewer/src/rust/components/function_dropdown.rs
@@ -146,6 +146,6 @@ impl Component for FunctionDropDown {
             }
         };
 
-        html! { <><style >{ &CSS }</style>{ body }</> }
+        html! { <><style>{ &CSS }</style>{ body }</> }
     }
 }
diff --git a/rust/perspective-viewer/src/rust/components/mod.rs b/rust/perspective-viewer/src/rust/components/mod.rs
index 58b55f7e88..577c23f427 100644
--- a/rust/perspective-viewer/src/rust/components/mod.rs
+++ b/rust/perspective-viewer/src/rust/components/mod.rs
@@ -37,6 +37,7 @@ pub mod type_icon;
 pub mod viewer;
 
 pub mod column_settings_sidebar;
+pub mod style_controls;
 // pub mod empty_row;
 pub mod editable_header;
 pub mod empty_row;
diff --git a/rust/perspective-viewer/src/rust/components/modal.rs b/rust/perspective-viewer/src/rust/components/modal.rs
index bd8dc14e11..19fb01f728 100644
--- a/rust/perspective-viewer/src/rust/components/modal.rs
+++ b/rust/perspective-viewer/src/rust/components/modal.rs
@@ -135,11 +135,9 @@ where
 
         html! {
             <>
-                <style >{ self.css.to_owned() }</style>
-                <ContextProvider<ModalOrientation>
-                    context={&self.rev_vert}
-                >
-                    <NoRender >{ child }</NoRender>
+                <style>{ self.css.to_owned() }</style>
+                <ContextProvider<ModalOrientation> context={&self.rev_vert}>
+                    <NoRender>{ child }</NoRender>
                 </ContextProvider<ModalOrientation>>
             </>
         }
diff --git a/rust/perspective-viewer/src/rust/components/number_column_style.rs b/rust/perspective-viewer/src/rust/components/number_column_style.rs
index a462945857..c0869c0c8e 100644
--- a/rust/perspective-viewer/src/rust/components/number_column_style.rs
+++ b/rust/perspective-viewer/src/rust/components/number_column_style.rs
@@ -10,23 +10,21 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use wasm_bindgen::*;
-use web_sys::*;
 use yew::prelude::*;
 use yew::*;
 
-use super::containers::radio_list::RadioList;
-use super::containers::radio_list_item::RadioListItem;
 use super::form::color_range_selector::*;
-use super::form::number_input::*;
+use super::form::number_field::NumberFieldProps;
 use super::modal::*;
 use super::style::LocalStyle;
+use crate::components::form::number_field::NumberField;
+use crate::components::form::select_field::SelectEnumField;
 use crate::config::*;
 use crate::session::Session;
 use crate::utils::WeakScope;
 use crate::*;
 
-#[derive(PartialEq, Eq, Copy, Clone)]
+#[derive(PartialEq, Eq, Copy, Clone, Debug)]
 pub enum Side {
     Fg,
     Bg,
@@ -34,19 +32,19 @@ pub enum Side {
 
 use Side::*;
 
+#[derive(Debug)]
 pub enum NumberColumnStyleMsg {
     Reset(
         Box<NumberColumnStyleConfig>,
         Box<NumberColumnStyleDefaultConfig>,
     ),
-    FixedChanged(String),
     ForeEnabledChanged(bool),
     BackEnabledChanged(bool),
     PosColorChanged(Side, String),
     NegColorChanged(Side, String),
     NumberForeModeChanged(NumberForegroundMode),
     NumberBackModeChanged(NumberBackgroundMode),
-    GradientChanged(Side, String),
+    GradientChanged(Side, Option<f64>),
     DefaultGradientChanged(f64),
 }
 
@@ -62,7 +60,7 @@ pub struct NumberColumnStyleProps {
     pub default_config: NumberColumnStyleDefaultConfig,
 
     #[prop_or_default]
-    pub on_change: Callback<NumberColumnStyleConfig>,
+    pub on_change: Callback<ColumnConfigValueUpdate>,
 
     #[prop_or_default]
     pub weak_link: WeakScope<NumberColumnStyle>,
@@ -122,9 +120,7 @@ impl Component for NumberColumnStyle {
 
     fn create(ctx: &Context<Self>) -> Self {
         ctx.set_modal_link();
-
         ctx.props().set_default_gradient(ctx);
-
         Self::reset(
             &ctx.props().config.clone().unwrap_or_default(),
             &ctx.props().default_config.clone(),
@@ -148,18 +144,6 @@ impl Component for NumberColumnStyle {
                 std::mem::swap(self, &mut new);
                 true
             },
-            NumberColumnStyleMsg::FixedChanged(fixed) => {
-                let fixed = match fixed.parse::<u32>() {
-                    Ok(x) if x != self.default_config.fixed => Some(x),
-                    Ok(_) => None,
-                    Err(_) if fixed.is_empty() => Some(0),
-                    Err(_) => None,
-                };
-
-                self.config.fixed = fixed.map(|x| std::cmp::min(15, x));
-                self.dispatch_config(ctx);
-                true
-            },
             NumberColumnStyleMsg::ForeEnabledChanged(val) => {
                 if val {
                     let color_mode = match self.fg_mode {
@@ -259,28 +243,20 @@ impl Component for NumberColumnStyle {
                 true
             },
             NumberColumnStyleMsg::GradientChanged(side, gradient) => {
-                match (side, gradient.parse::<f64>()) {
-                    (Fg, Ok(x)) => {
+                match (side, gradient) {
+                    (Fg, Some(x)) => {
                         self.fg_gradient = Some(x);
                         self.config.fg_gradient = Some(x);
                     },
-                    (Fg, Err(_)) if gradient.is_empty() => {
-                        self.fg_gradient = Some(self.default_config.fg_gradient);
-                        self.config.fg_gradient = Some(self.default_config.fg_gradient);
-                    },
-                    (Fg, Err(_)) => {
+                    (Fg, None) => {
                         self.fg_gradient = Some(self.default_config.fg_gradient);
                         self.config.fg_gradient = None;
                     },
-                    (Bg, Ok(x)) => {
+                    (Bg, Some(x)) => {
                         self.bg_gradient = Some(x);
                         self.config.bg_gradient = Some(x);
                     },
-                    (Bg, Err(_)) if gradient.is_empty() => {
-                        self.bg_gradient = Some(self.default_config.bg_gradient);
-                        self.config.bg_gradient = Some(self.default_config.bg_gradient);
-                    },
-                    (Bg, Err(_)) => {
+                    (Bg, None) => {
                         self.bg_gradient = Some(self.default_config.bg_gradient);
                         self.config.bg_gradient = None;
                     },
@@ -300,232 +276,69 @@ impl Component for NumberColumnStyle {
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        // Fixed precision control oninput callback
-        let fixed_oninput = ctx.link().callback(|event: InputEvent| {
-            NumberColumnStyleMsg::FixedChanged(
-                event
-                    .target()
-                    .unwrap()
-                    .unchecked_into::<web_sys::HtmlInputElement>()
-                    .value(),
-            )
-        });
-
-        let fixed_value = self
-            .config
-            .fixed
-            .unwrap_or(self.default_config.fixed)
-            .to_string();
-
-        // Color enabled/disabled oninput callback
-        let fg_enabled_oninput = ctx.link().callback(move |event: InputEvent| {
-            let input = event
-                .target()
-                .unwrap()
-                .unchecked_into::<web_sys::HtmlInputElement>();
-            NumberColumnStyleMsg::ForeEnabledChanged(input.checked())
+        let fg_mode_changed = ctx.link().callback(|x: Option<_>| {
+            NumberColumnStyleMsg::NumberForeModeChanged(x.unwrap_or_default())
         });
 
-        let bg_enabled_oninput = ctx.link().callback(move |event: InputEvent| {
-            let input = event
-                .target()
-                .unwrap()
-                .unchecked_into::<web_sys::HtmlInputElement>();
-            NumberColumnStyleMsg::BackEnabledChanged(input.checked())
+        let bg_mode_changed = ctx.link().callback(|x: Option<_>| {
+            NumberColumnStyleMsg::NumberBackModeChanged(x.unwrap_or_default())
         });
 
-        let selected_fg_mode = match self.fg_mode {
-            NumberForegroundMode::Disabled => NumberForegroundMode::default(),
-            x => x,
-        };
-
-        let selected_bg_mode = match self.bg_mode {
-            NumberBackgroundMode::Disabled => NumberBackgroundMode::Color,
-            x => x,
-        };
-
-        // Color mode radio callback
-        let fg_mode_changed = ctx
-            .link()
-            .callback(NumberColumnStyleMsg::NumberForeModeChanged);
-
-        let bg_mode_changed = ctx
-            .link()
-            .callback(NumberColumnStyleMsg::NumberBackModeChanged);
-
-        let fg_color_controls = html! {
-            <>
-                <span class="row">{ "Color" }</span>
-                if self.config.number_fg_mode == NumberForegroundMode::Color {
-                    <div
-                        class="row inner_section"
-                    >
-                        <ColorRangeSelector ..self.color_props(Fg, false, ctx) />
-                    </div>
-                }
-            </>
-        };
-
-        let fg_bar_controls = html! {
-            <>
-                <span class="row">{ "Bar" }</span>
-                if self.config.number_fg_mode == NumberForegroundMode::Bar {
-                    <div
-                        class="row inner_section"
-                    >
-                        <ColorRangeSelector ..self.color_props(Fg, false, ctx) />
-                        <NumberInput ..self.max_value_props(Fg, ctx) />
-                    </div>
-                }
-            </>
-        };
-
-        let bg_color_controls = html! {
-            <>
-                <span class="row">{ "Color" }</span>
-                if self.config.number_bg_mode == NumberBackgroundMode::Color {
-                    <div
-                        class="row inner_section"
-                    >
-                        <ColorRangeSelector ..self.color_props(Bg,false, ctx) />
-                    </div>
-                }
-            </>
-        };
-
-        let bg_gradient_controls = html! {
-            <>
-                <span class="row">{ "Gradient" }</span>
-                if self.config.number_bg_mode == NumberBackgroundMode::Gradient {
-                    <div
-                        class="row inner_section"
-                    >
-                        <ColorRangeSelector ..self.color_props(Bg, true, ctx) />
-                        <NumberInput ..self.max_value_props(Bg, ctx) />
+        let fg_controls = match self.fg_mode {
+            NumberForegroundMode::Disabled => html! {},
+            NumberForegroundMode::Color => html! {
+                <div class="row">
+                    <ColorRangeSelector ..self.color_props("fg-color", Fg, false, ctx) />
+                </div>
+            },
+            NumberForegroundMode::Bar => html! {
+                <>
+                    <div class="row">
+                        <ColorRangeSelector ..self.color_props("bar-color", Fg, false, ctx) />
                     </div>
-                }
-            </>
+                    <NumberField ..self.max_value_props(Fg, ctx) />
+                </>
+            },
         };
 
-        let bg_pulse_controls = html! {
-            <>
-                <span class="row">{ "Pulse (Δ)" }</span>
-                if self.config.number_bg_mode == NumberBackgroundMode::Pulse {
-                    <div
-                        class="row inner_section"
-                    >
-                        <ColorRangeSelector ..self.color_props(Bg, true, ctx) />
+        let bg_controls = match self.bg_mode {
+            NumberBackgroundMode::Disabled => html! {},
+            NumberBackgroundMode::Color => html! {
+                <div class="row">
+                    <ColorRangeSelector ..self.color_props("bg-color", Bg,false, ctx) />
+                </div>
+            },
+            NumberBackgroundMode::Gradient => html! {
+                <>
+                    <div class="row">
+                        <ColorRangeSelector ..self.color_props("gradient-color", Bg, true, ctx) />
                     </div>
-                }
-            </>
+                    <NumberField ..self.max_value_props(Bg, ctx) />
+                </>
+            },
+            NumberBackgroundMode::Pulse => html! {
+                <div class="row">
+                    <ColorRangeSelector ..self.color_props("pulse-color", Bg, true, ctx) />
+                </div>
+            },
         };
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("column-style")}
-                />
-                <div
-                    id="column-style-container"
-                    class="number-column-style-container"
-                >
-                    <div
-                        class="column-style-label"
-                    >
-                        <label
-                            id="fixed-examples"
-                            class="indent"
-                        >
-                            { self.make_fixed_text(ctx) }
-                        </label>
-                    </div>
-                    <div
-                        class="row section"
-                    >
-                        <input
-                            type="checkbox"
-                            checked=true
-                            disabled=true
-                        />
-                        <input
-                            id="fixed-param"
-                            class="parameter"
-                            type="number"
-                            min="0"
-                            step="1"
-                            value={fixed_value}
-                            oninput={fixed_oninput}
-                        />
-                    </div>
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "Foreground" }</label>
-                    </div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            oninput={fg_enabled_oninput}
-                            checked={self.config.number_fg_mode.is_enabled()}
-                        />
-                        <RadioList<NumberForegroundMode>
-                            class="indent"
-                            name="foreground-list"
-                            disabled={!self.config.number_fg_mode.is_enabled()}
-                            selected={selected_fg_mode}
-                            on_change={fg_mode_changed}
-                        >
-                            <RadioListItem<NumberForegroundMode>
-                                value={NumberForegroundMode::Color}
-                            >
-                                { fg_color_controls }
-                            </RadioListItem<NumberForegroundMode>>
-                            <RadioListItem<NumberForegroundMode>
-                                value={NumberForegroundMode::Bar}
-                            >
-                                { fg_bar_controls }
-                            </RadioListItem<NumberForegroundMode>>
-                        </RadioList<NumberForegroundMode>>
-                    </div>
-                    <div
-                        class="column-style-label"
-                    >
-                        <label class="indent">{ "Background" }</label>
-                    </div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            oninput={bg_enabled_oninput}
-                            checked={!self.config.number_bg_mode.is_disabled()}
-                        />
-                        <RadioList<NumberBackgroundMode>
-                            class="indent"
-                            name="background-list"
-                            disabled={self.config.number_bg_mode.is_disabled()}
-                            selected={selected_bg_mode}
-                            on_change={bg_mode_changed}
-                        >
-                            <RadioListItem<NumberBackgroundMode>
-                                value={NumberBackgroundMode::Color}
-                            >
-                                { bg_color_controls }
-                            </RadioListItem<NumberBackgroundMode>>
-                            <RadioListItem<NumberBackgroundMode>
-                                value={NumberBackgroundMode::Gradient}
-                            >
-                                { bg_gradient_controls }
-                            </RadioListItem<NumberBackgroundMode>>
-                            <RadioListItem<NumberBackgroundMode>
-                                value={NumberBackgroundMode::Pulse}
-                            >
-                                { bg_pulse_controls }
-                            </RadioListItem<NumberBackgroundMode>>
-                        </RadioList<NumberBackgroundMode>>
-                    </div>
+                <LocalStyle href={css!("column-style")} />
+                <div id="column-style-container" class="number-column-style-container">
+                    <SelectEnumField<NumberForegroundMode>
+                        label="foreground"
+                        on_change={fg_mode_changed}
+                        current_value={self.fg_mode}
+                    />
+                    { fg_controls }
+                    <SelectEnumField<NumberBackgroundMode>
+                        label="background"
+                        on_change={bg_mode_changed}
+                        current_value={self.bg_mode}
+                    />
+                    { bg_controls }
                 </div>
             </>
         }
@@ -564,10 +377,20 @@ impl NumberColumnStyle {
             _ => {},
         };
 
-        ctx.props().on_change.emit(config);
+        let update = Some(config).filter(|config| config != &NumberColumnStyleConfig::default());
+
+        ctx.props()
+            .on_change
+            .emit(ColumnConfigValueUpdate::DatagridNumberStyle(update));
     }
 
-    fn color_props(&self, side: Side, is_gradient: bool, ctx: &Context<Self>) -> ColorRangeProps {
+    fn color_props(
+        &self,
+        id: &str,
+        side: Side,
+        is_gradient: bool,
+        ctx: &Context<Self>,
+    ) -> ColorRangeProps {
         let on_pos_color = ctx
             .link()
             .callback(move |x| NumberColumnStyleMsg::PosColorChanged(side, x));
@@ -576,6 +399,7 @@ impl NumberColumnStyle {
             .callback(move |x| NumberColumnStyleMsg::NegColorChanged(side, x));
 
         props!(ColorRangeProps {
+            id: id.to_string(),
             is_gradient,
             pos_color: if side == Fg {
                 &self.pos_fg_color
@@ -594,33 +418,23 @@ impl NumberColumnStyle {
         })
     }
 
-    fn max_value_props(&self, side: Side, ctx: &Context<Self>) -> NumberInputProps {
-        let on_max_value = ctx
+    fn max_value_props(&self, side: Side, ctx: &Context<Self>) -> NumberFieldProps {
+        let on_change = ctx
             .link()
             .callback(move |x| NumberColumnStyleMsg::GradientChanged(side, x));
 
-        props!(NumberInputProps {
-            max_value: if side == Fg {
-                self.fg_gradient.unwrap_or_default()
-            } else {
-                self.bg_gradient.unwrap_or_default()
-            },
-            on_max_value
-        })
-    }
-
-    /// Human readable precision hint, e.g. "Prec 0.001" for `{fixed: 3}`.
-    fn make_fixed_text(&self, _ctx: &Context<Self>) -> String {
-        let fixed = match self.config.fixed {
-            Some(x) if x > 0 => format!("0.{}1", "0".repeat(x as usize - 1)),
-            None if self.default_config.fixed > 0 => {
-                let n = self.default_config.fixed as usize - 1;
-                format!("0.{}1", "0".repeat(n))
-            },
-            Some(_) | None => "1".to_owned(),
+        let value = if side == Fg {
+            self.fg_gradient.unwrap_or_default()
+        } else {
+            self.bg_gradient.unwrap_or_default()
         };
 
-        format!("Prec {}", fixed)
+        props!(NumberFieldProps {
+            default: value,
+            current_value: value,
+            label: "max-value",
+            on_change
+        })
     }
 
     fn reset(
@@ -655,24 +469,12 @@ impl NumberColumnStyle {
             .unwrap_or(&default_config.neg_bg_color)
             .to_owned();
 
-        let fg_mode = match config.number_fg_mode {
-            NumberForegroundMode::Disabled => NumberForegroundMode::default(),
-            x => {
-                config.pos_fg_color = Some(pos_fg_color.to_owned());
-                config.neg_fg_color = Some(neg_fg_color.to_owned());
-                x
-            },
-        };
-
-        let bg_mode = match config.number_bg_mode {
-            NumberBackgroundMode::Disabled => NumberBackgroundMode::default(),
-            x => {
-                config.pos_bg_color = Some(pos_bg_color.to_owned());
-                config.neg_bg_color = Some(neg_bg_color.to_owned());
-                x
-            },
-        };
-
+        config.pos_fg_color = Some(pos_fg_color.to_owned());
+        config.neg_fg_color = Some(neg_fg_color.to_owned());
+        let fg_mode = config.number_fg_mode;
+        config.pos_bg_color = Some(pos_bg_color.to_owned());
+        config.neg_bg_color = Some(neg_bg_color.to_owned());
+        let bg_mode = config.number_bg_mode;
         Self {
             config,
             default_config: default_config.clone(),
diff --git a/rust/perspective-viewer/src/rust/components/plugin_selector.rs b/rust/perspective-viewer/src/rust/components/plugin_selector.rs
index c7421d1859..8545508ec6 100644
--- a/rust/perspective-viewer/src/rust/components/plugin_selector.rs
+++ b/rust/perspective-viewer/src/rust/components/plugin_selector.rs
@@ -125,23 +125,11 @@ impl Component for PluginSelector {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("plugin-selector")}
-                />
-                <div
-                    id="plugin_selector_container"
-                    {class}
-                >
-                    <PluginSelect
-                        name={plugin_name}
-                        on_click={callback}
-                    />
-                    <div
-                        id="plugin_selector_border"
-                    />
-                    if self.is_open {
-                        { items.collect::<Html>() }
-                    }
+                <LocalStyle href={css!("plugin-selector")} />
+                <div id="plugin_selector_container" {class}>
+                    <PluginSelect name={plugin_name} on_click={callback} />
+                    <div id="plugin_selector_border" />
+                    if self.is_open { { items.collect::<Html>() } }
                 </div>
             </>
         }
@@ -170,13 +158,26 @@ struct PluginSelectProps {
 #[function_component]
 fn PluginSelect(props: &PluginSelectProps) -> Html {
     let name = props.name.clone().tee::<2>();
+    let path: String = props
+        .name
+        .chars()
+        .map(|x| {
+            if x.is_alphanumeric() {
+                x.to_ascii_lowercase()
+            } else {
+                '-'
+            }
+        })
+        .collect();
+
     html! {
         <div
             class="plugin-select-item"
             data-plugin={name.0}
+            style={format!("--default-column-title:var(--plugin-name-{}--content, \"{}\")", path, props.name)}
             onclick={props.on_click.reform(move |_| name.1.clone())}
         >
-            <span class="plugin-select-item-name">{ &props.name }</span>
+            <span class="plugin-select-item-name" />
         </div>
     }
 }
diff --git a/rust/perspective-viewer/src/rust/components/render_warning.rs b/rust/perspective-viewer/src/rust/components/render_warning.rs
index 4f2d2febdf..096d09432c 100644
--- a/rust/perspective-viewer/src/rust/components/render_warning.rs
+++ b/rust/perspective-viewer/src/rust/components/render_warning.rs
@@ -99,9 +99,7 @@ impl Component for RenderWarning {
         if self.col_warn.is_some() || self.row_warn.is_some() {
             let warning = match (self.col_warn, self.row_warn) {
                 (Some((x, y)), Some((a, b))) => html! {
-                    <span
-                        style="white-space:nowrap"
-                    >
+                    <span style="white-space:nowrap">
                         { "Rendering" }
                         { render_pair(x, y) }
                         { "of columns and" }
@@ -110,18 +108,14 @@ impl Component for RenderWarning {
                     </span>
                 },
                 (Some((x, y)), None) => html! {
-                    <span
-                        style="white-space:nowrap"
-                    >
+                    <span style="white-space:nowrap">
                         { "Rendering" }
                         { render_pair(x, y) }
                         { "of columns." }
                     </span>
                 },
                 (None, Some((x, y))) => html! {
-                    <span
-                        style="white-space:nowrap"
-                    >
+                    <span style="white-space:nowrap">
                         { "Rendering" }
                         { render_pair(x, y) }
                         { "of points." }
@@ -134,29 +128,17 @@ impl Component for RenderWarning {
 
             html! {
                 <>
-                    <LocalStyle
-                        href={css!("render-warning")}
-                    />
+                    <LocalStyle href={css!("render-warning")} />
                     <div
                         class="plugin_information plugin_information--warning"
                         id="plugin_information--size"
                     >
-                        <span
-                            class="plugin_information__icon"
-                        />
-                        <span
-                            class="plugin_information__text"
-                            id="plugin_information_count"
-                        >
+                        <span class="plugin_information__icon" />
+                        <span class="plugin_information__text" id="plugin_information_count">
                             { warning }
                         </span>
-                        <span
-                            class="plugin_information__actions"
-                        >
-                            <span
-                                class="plugin_information__action"
-                                onmousedown={onclick}
-                            >
+                        <span class="plugin_information__actions">
+                            <span class="plugin_information__action" onmousedown={onclick}>
                                 { "Render all points" }
                             </span>
                         </span>
@@ -187,10 +169,7 @@ fn render_pair(n: usize, d: usize) -> Html {
     let y = pretty_print_int(d);
     let total = ((n as f64 / d as f64) * 100_f64).floor() as usize;
     html! {
-        <span
-            title={format!("${} / ${}", x, y)}
-            class="plugin_information--overflow-hint"
-        >
+        <span title={format!("${} / ${}", x, y)} class="plugin_information--overflow-hint">
             { "\u{00a0}" }
             <span class="plugin_information--overflow-hint-percent">{ format!("{}%", total) }</span>
             { "\u{00a0}" }
diff --git a/rust/perspective-viewer/src/rust/components/status_bar.rs b/rust/perspective-viewer/src/rust/components/status_bar.rs
index acbfdbd36b..0f5172be05 100644
--- a/rust/perspective-viewer/src/rust/components/status_bar.rs
+++ b/rust/perspective-viewer/src/rust/components/status_bar.rs
@@ -205,10 +205,7 @@ impl Component for StatusBar {
 
                 html! {
                     if values.len() > 1 {
-                        <span
-                            id="theme"
-                            class="button"
-                        >
+                        <span id="theme" class="button">
                             <Select<String>
                                 id="theme_selector"
                                 {values}
@@ -241,54 +238,36 @@ impl Component for StatusBar {
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("status-bar")}
-                />
-                <div
-                    id={ctx.props().id.clone()}
-                    class={is_updating_class_name}
-                >
+                <LocalStyle href={css!("status-bar")} />
+                <div id={ctx.props().id.clone()} class={is_updating_class_name}>
                     <div class="section"><span id="status" class={class_name} /></div>
                     <label
                         class="input-sizer"
                         data-value={ctx.props().presentation.get_title().unwrap_or_default()}
                     >
                         <input
+                            placeholder=" "
                             value={ctx.props().presentation.get_title()}
                             size="10"
                             {oninput}
-                            placeholder="untitled"
                         />
+                        <span id="status-bar-placeholder" />
                     </label>
                     <div id="rows" class="section"><StatusBarRowsCounter {stats} /></div>
-                    <div
-                        id="menu-bar"
-                        class="section"
-                    >
+                    <div id="menu-bar" class="section">
                         { theme_button }
                         <div id="plugin-settings"><slot name="plugin-settings" /></div>
-                        <span
-                            id="reset"
-                            class="button"
-                            onmousedown={reset}
-                        >
-                            <span >{ "Reset" }</span>
-                        </span>
+                        <span id="reset" class="button" onmousedown={reset}><span /></span>
                         <span
                             ref={&self.export_ref}
                             id="export"
                             class="button"
                             onmousedown={export}
                         >
-                            <span >{ "Export" }</span>
+                            <span />
                         </span>
-                        <span
-                            ref={&self.copy_ref}
-                            id="copy"
-                            class="button"
-                            onmousedown={copy}
-                        >
-                            <span >{ "Copy" }</span>
+                        <span ref={&self.copy_ref} id="copy" class="button" onmousedown={copy}>
+                            <span />
                         </span>
                     </div>
                 </div>
diff --git a/rust/perspective-viewer/src/rust/components/status_bar_counter.rs b/rust/perspective-viewer/src/rust/components/status_bar_counter.rs
index 990311fbd4..515858aca9 100644
--- a/rust/perspective-viewer/src/rust/components/status_bar_counter.rs
+++ b/rust/perspective-viewer/src/rust/components/status_bar_counter.rs
@@ -10,7 +10,6 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use num_format::{Locale, ToFormattedString};
 use yew::prelude::*;
 
 use crate::session::ViewStats;
@@ -33,6 +32,8 @@ impl PartialEq for StatusBarRowsCounterProps {
     }
 }
 
+use crate::utils::ToFormattedString;
+
 /// A label widget which displays a row count and a "projection" count, the
 /// number of rows in the `View` which includes aggregate rows.
 pub struct StatusBarRowsCounter {}
@@ -66,11 +67,11 @@ impl Component for StatusBarRowsCounter {
                     ..
                 },
             ) if vc != tc => {
-                let vrows = vr.to_formatted_string(&Locale::en);
-                let nrows = tr.to_formatted_string(&Locale::en);
-                let vcols = vc.to_formatted_string(&Locale::en);
-                let ncols = tc.to_formatted_string(&Locale::en);
-                html! { <span >{ format!("{} ({}) x {} ({})", vrows, nrows, vcols, ncols) }</span> }
+                let vrows = vr.to_formatted_string();
+                let nrows = tr.to_formatted_string();
+                let vcols = vc.to_formatted_string();
+                let ncols = tc.to_formatted_string();
+                html! { <span>{ format!("{} ({}) x {} ({})", vrows, nrows, vcols, ncols) }</span> }
             },
 
             Some(
@@ -87,10 +88,10 @@ impl Component for StatusBarRowsCounter {
                     ..
                 },
             ) => {
-                let vrows = vr.to_formatted_string(&Locale::en);
-                let nrows = tr.to_formatted_string(&Locale::en);
-                let vcols = vc.to_formatted_string(&Locale::en);
-                html! { <span >{ format!("{} ({}) x {}", vrows, nrows, vcols) }</span> }
+                let vrows = vr.to_formatted_string();
+                let nrows = tr.to_formatted_string();
+                let vcols = vc.to_formatted_string();
+                html! { <span>{ format!("{} ({}) x {}", vrows, nrows, vcols) }</span> }
             },
 
             Some(ViewStats {
@@ -98,19 +99,19 @@ impl Component for StatusBarRowsCounter {
                 num_view_cells: Some((vr, vc)),
                 ..
             }) if vc != tc => {
-                let vrows = vr.to_formatted_string(&Locale::en);
-                let vcols = vc.to_formatted_string(&Locale::en);
-                let ncols = tc.to_formatted_string(&Locale::en);
-                html! { <span >{ format!("{} x {} ({})", vrows, vcols, ncols) }</span> }
+                let vrows = vr.to_formatted_string();
+                let vcols = vc.to_formatted_string();
+                let ncols = tc.to_formatted_string();
+                html! { <span>{ format!("{} x {} ({})", vrows, vcols, ncols) }</span> }
             },
 
             Some(ViewStats {
                 num_table_cells: Some((tr, tc)),
                 ..
             }) => {
-                let nrows = tr.to_formatted_string(&Locale::en);
-                let ncols = tc.to_formatted_string(&Locale::en);
-                html! { <span >{ format!("{} x {}", nrows, ncols) }</span> }
+                let nrows = tr.to_formatted_string();
+                let ncols = tc.to_formatted_string();
+                html! { <span>{ format!("{} x {}", nrows, ncols) }</span> }
             },
             Some(ViewStats {
                 num_table_cells: None,
diff --git a/rust/perspective-viewer/src/rust/components/string_column_style.rs b/rust/perspective-viewer/src/rust/components/string_column_style.rs
index befc00279e..ee17001760 100644
--- a/rust/perspective-viewer/src/rust/components/string_column_style.rs
+++ b/rust/perspective-viewer/src/rust/components/string_column_style.rs
@@ -10,26 +10,21 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use wasm_bindgen::*;
-use web_sys::*;
 use yew::prelude::*;
 use yew::*;
 
-use super::containers::radio_list::RadioList;
-use super::containers::radio_list_item::RadioListItem;
 use super::form::color_selector::*;
 use super::modal::{ModalLink, SetModalLink};
 use super::style::LocalStyle;
+use crate::components::form::select_field::SelectEnumField;
 use crate::config::*;
 use crate::utils::WeakScope;
 use crate::*;
 
 pub enum StringColumnStyleMsg {
     Reset(StringColumnStyleConfig),
-    FormatEnabled(bool),
-    FormatChanged(FormatMode),
-    ColorModeEnabled(bool),
-    ColorModeChanged(StringColorMode),
+    FormatChanged(Option<FormatMode>),
+    ColorModeChanged(Option<StringColorMode>),
     ColorChanged(String),
 }
 
@@ -39,7 +34,7 @@ pub struct StringColumnStyleProps {
     pub default_config: StringColumnStyleDefaultConfig,
 
     #[prop_or_default]
-    pub on_change: Callback<StringColumnStyleConfig>,
+    pub on_change: Callback<ColumnConfigValueUpdate>,
 
     #[prop_or_default]
     weak_link: WeakScope<StringColumnStyle>,
@@ -68,7 +63,10 @@ pub struct StringColumnStyle {
 impl StringColumnStyle {
     /// When this config has changed, we must signal the wrapper element.
     fn dispatch_config(&self, ctx: &Context<Self>) {
-        ctx.props().on_change.emit(self.config.clone());
+        let update = Some(self.config.clone()).filter(|x| x != &StringColumnStyleConfig::default());
+        ctx.props()
+            .on_change
+            .emit(ColumnConfigValueUpdate::DatagridStringStyle(update));
     }
 
     /// Generate a color selector component for a specific `StringColorMode`
@@ -81,19 +79,16 @@ impl StringColumnStyle {
             .clone()
             .unwrap_or_else(|| self.default_config.color.to_owned());
 
-        let color_props = props!(ColorProps { color, on_color });
-        match &self.config.string_color_mode {
-            Some(x) if x == mode => {
-                html! {
-                    <>
-                        <span class="row">{ title }</span>
-                        <div class="row inner_section"><ColorSelector ..color_props /></div>
-                    </>
-                }
-            },
-            _ => {
-                html! { <span class="row">{ title }</span> }
-            },
+        let color_props = props!(ColorProps {
+            title: title.to_owned(),
+            color,
+            on_color
+        });
+
+        if &self.config.string_color_mode == mode {
+            html! { <div class="row"><ColorSelector ..color_props /></div> }
+        } else {
+            html! {}
         }
     }
 }
@@ -127,147 +122,57 @@ impl Component for StringColumnStyle {
                 self.config = config;
                 true
             },
-            StringColumnStyleMsg::FormatEnabled(val) => {
-                self.config.format = if val {
-                    Some(FormatMode::default())
-                } else {
-                    None
-                };
-
-                self.dispatch_config(ctx);
-                true
-            },
             StringColumnStyleMsg::FormatChanged(val) => {
-                self.config.format = Some(val);
-                self.dispatch_config(ctx);
-                true
-            },
-            StringColumnStyleMsg::ColorModeEnabled(enabled) => {
-                if enabled {
-                    self.config.string_color_mode = Some(StringColorMode::default());
-                } else {
-                    self.config.string_color_mode = None;
-                    self.config.color = None;
-                }
-
+                self.config.format = val.unwrap_or_default();
                 self.dispatch_config(ctx);
                 true
             },
             StringColumnStyleMsg::ColorModeChanged(mode) => {
-                self.config.string_color_mode = Some(mode);
+                self.config.string_color_mode = mode.unwrap_or_default();
                 self.dispatch_config(ctx);
                 true
             },
             StringColumnStyleMsg::ColorChanged(color) => {
                 self.config.color = Some(color);
                 self.dispatch_config(ctx);
-                true
+                false
             },
         }
     }
 
     fn view(&self, ctx: &Context<Self>) -> Html {
-        let format_enabled_oninput = ctx.link().callback(move |event: InputEvent| {
-            let input = event
-                .target()
-                .unwrap()
-                .unchecked_into::<web_sys::HtmlInputElement>();
-            StringColumnStyleMsg::FormatEnabled(input.checked())
-        });
-
-        let format_mode_selected = self.config.format.unwrap_or_default();
+        let format_mode_selected = self.config.format;
         let format_mode_changed = ctx.link().callback(StringColumnStyleMsg::FormatChanged);
-        let color_enabled_oninput = ctx.link().callback(move |event: InputEvent| {
-            let input = event
-                .target()
-                .unwrap()
-                .unchecked_into::<web_sys::HtmlInputElement>();
-            StringColumnStyleMsg::ColorModeEnabled(input.checked())
-        });
-
-        let selected_color_mode = self.config.string_color_mode.unwrap_or_default();
+        let selected_color_mode = self.config.string_color_mode;
         let color_mode_changed = ctx.link().callback(StringColumnStyleMsg::ColorModeChanged);
-        let series_controls = self.color_select_row(ctx, &StringColorMode::Series, "Series");
-        let foreground_controls =
-            self.color_select_row(ctx, &StringColorMode::Foreground, "Foreground");
-
-        let background_controls =
-            self.color_select_row(ctx, &StringColorMode::Background, "Background");
+        let color_controls = match selected_color_mode {
+            StringColorMode::Foreground => {
+                self.color_select_row(ctx, &StringColorMode::Foreground, "foreground-label")
+            },
+            StringColorMode::Background => {
+                self.color_select_row(ctx, &StringColorMode::Background, "background-label")
+            },
+            StringColorMode::Series => {
+                self.color_select_row(ctx, &StringColorMode::Series, "series-label")
+            },
+            StringColorMode::None => html! {},
+        };
 
         html! {
             <>
-                <LocalStyle
-                    href={css!("column-style")}
-                />
-                <div
-                    id="column-style-container"
-                    class="string-column-style-container"
-                >
-                    <div class="column-style-label"><label class="indent">{ "Format" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            oninput={format_enabled_oninput}
-                            checked={self.config.format.is_some()}
-                        />
-                        <RadioList<FormatMode>
-                            class="indent"
-                            disabled={self.config.format.is_none()}
-                            selected={format_mode_selected}
-                            on_change={format_mode_changed}
-                        >
-                            <RadioListItem<FormatMode>
-                                value={FormatMode::Bold}
-                            >
-                                <span >{ "Bold" }</span>
-                            </RadioListItem<FormatMode>>
-                            <RadioListItem<FormatMode>
-                                value={FormatMode::Italics}
-                            >
-                                <span >{ "Italics" }</span>
-                            </RadioListItem<FormatMode>>
-                            <RadioListItem<FormatMode>
-                                value={FormatMode::Link}
-                            >
-                                <span >{ "Link" }</span>
-                            </RadioListItem<FormatMode>>
-                        </RadioList<FormatMode>>
-                    </div>
-                    <div class="column-style-label"><label class="indent">{ "Color" }</label></div>
-                    <div
-                        class="section"
-                    >
-                        <input
-                            type="checkbox"
-                            oninput={color_enabled_oninput}
-                            checked={self.config.string_color_mode.is_some()}
-                        />
-                        <RadioList<StringColorMode>
-                            class="indent"
-                            name="color-radio-list"
-                            disabled={self.config.string_color_mode.is_none()}
-                            selected={selected_color_mode}
-                            on_change={color_mode_changed}
-                        >
-                            <RadioListItem<StringColorMode>
-                                value={StringColorMode::Foreground}
-                            >
-                                { foreground_controls }
-                            </RadioListItem<StringColorMode>>
-                            <RadioListItem<StringColorMode>
-                                value={StringColorMode::Background}
-                            >
-                                { background_controls }
-                            </RadioListItem<StringColorMode>>
-                            <RadioListItem<StringColorMode>
-                                value={StringColorMode::Series}
-                            >
-                                { series_controls }
-                            </RadioListItem<StringColorMode>>
-                        </RadioList<StringColorMode>>
-                    </div>
+                <LocalStyle href={css!("column-style")} />
+                <div id="column-style-container" class="string-column-style-container">
+                    <SelectEnumField<FormatMode>
+                        label="format"
+                        on_change={format_mode_changed}
+                        current_value={format_mode_selected}
+                    />
+                    <SelectEnumField<StringColorMode>
+                        label="color"
+                        on_change={color_mode_changed}
+                        current_value={selected_color_mode}
+                    />
+                    { color_controls }
                 </div>
             </>
         }
diff --git a/rust/perspective-viewer/src/rust/components/style/style_provider.rs b/rust/perspective-viewer/src/rust/components/style/style_provider.rs
index 407ff1b36b..76eabf27f7 100644
--- a/rust/perspective-viewer/src/rust/components/style/style_provider.rs
+++ b/rust/perspective-viewer/src/rust/components/style/style_provider.rs
@@ -50,9 +50,7 @@ impl Component for StyleProvider {
                     <StyleKeyed key={ x.0 } elem={ x.1 } />
                 }
             }) }
-                <ContextProvider<StyleCache>
-                    context={self.cache.clone()}
-                >
+                <ContextProvider<StyleCache> context={self.cache.clone()}>
                     { for ctx.props().children.iter() }
                 </ContextProvider<StyleCache>>
             </>
diff --git a/rust/perspective-viewer/src/rust/components/style_controls.rs b/rust/perspective-viewer/src/rust/components/style_controls.rs
new file mode 100644
index 0000000000..f64d3c3454
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/style_controls.rs
@@ -0,0 +1,15 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+mod number_string_format;
+
+pub use number_string_format::*;
diff --git a/rust/perspective-viewer/src/rust/components/style_controls/number_string_format.rs b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format.rs
new file mode 100644
index 0000000000..a414e8aba9
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format.rs
@@ -0,0 +1,258 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+mod digits_section;
+mod misc_section;
+mod style_section;
+mod types;
+
+pub use types::*;
+use yew::{html, Callback, Component, Properties};
+
+use crate::components::style::LocalStyle;
+use crate::config::*;
+use crate::{css, max, min};
+
+#[derive(Properties, PartialEq, Clone)]
+pub struct CustomNumberFormatProps {
+    pub restored_config: CustomNumberFormatConfig,
+    pub on_change: Callback<ColumnConfigValueUpdate>,
+    pub view_type: Type,
+    // just for rerendering
+    pub column_name: String,
+}
+
+pub enum CustomNumberFormatMsg {
+    StyleChanged(Option<NumberStyle>),
+    NotationChanged(Option<NotationName>),
+    CurrencyCode(Option<CurrencyCode>),
+    CurrencyDisplay(Option<CurrencyDisplay>),
+    CompactDisplay(Option<CompactDisplay>),
+    CurrencySign(Option<CurrencySign>),
+    UseGrouping(Option<UseGrouping>),
+    SignDisplay(Option<SignDisplay>),
+    Unit(Option<Unit>),
+    UnitDisplay(Option<UnitDisplay>),
+    MinimumIntegerDigits(Option<f64>),
+    SigChange(Option<(f64, f64)>),
+    FracChange(Option<(f64, f64)>),
+    RoundingIncrement(RoundingIncrement),
+    TrailingZero(Option<TrailingZeroDisplay>),
+    RoundingMode(Option<RoundingMode>),
+    RoundingPriority(Option<RoundingPriority>),
+}
+
+#[derive(Default)]
+pub struct CustomNumberFormat {
+    config: CustomNumberFormatConfig,
+    style: NumberStyle,
+    notation: Option<NotationName>,
+    // show_frac: bool,
+    // show_sig: bool,
+    // disable_rounding_increment: bool,
+    // disable_rounding_priority: bool,
+}
+
+impl CustomNumberFormat {
+    fn initialize(ctx: &yew::prelude::Context<Self>) -> Self {
+        let config = ctx.props().restored_config.clone();
+        // let show_frac = config
+        //     .minimum_fraction_digits
+        //     .or(config.maximum_fraction_digits)
+        //     .or(config.rounding_increment)
+        //     .is_some();
+        // let show_sig = config
+        //     .minimum_significant_digits
+        //     .or(config.maximum_significant_digits)
+        //     .is_some();
+        // let disable_rounding_increment = show_sig
+        //     || show_frac
+        //     || !matches!(
+        //         config.rounding_priority,
+        //         Some(RoundingPriority::Auto) | None
+        //     );
+        // let disable_rounding_priority = !(show_frac && show_sig);
+        Self {
+            style: config
+                ._style
+                .as_ref()
+                .map(|style| match style {
+                    NumberFormatStyle::Decimal => NumberStyle::Decimal,
+                    NumberFormatStyle::Currency(_) => NumberStyle::Currency,
+                    NumberFormatStyle::Percent => NumberStyle::Percent,
+                    NumberFormatStyle::Unit(_) => NumberStyle::Unit,
+                })
+                .unwrap_or_default(),
+            config,
+            // show_frac,
+            // show_sig,
+            // disable_rounding_increment,
+            // disable_rounding_priority,
+            notation: None,
+        }
+    }
+}
+
+impl Component for CustomNumberFormat {
+    type Message = CustomNumberFormatMsg;
+    type Properties = CustomNumberFormatProps;
+
+    fn create(ctx: &yew::prelude::Context<Self>) -> Self {
+        Self::initialize(ctx)
+    }
+
+    fn changed(
+        &mut self,
+        ctx: &yew::prelude::Context<Self>,
+        _old_props: &Self::Properties,
+    ) -> bool {
+        *self = Self::initialize(ctx);
+        true
+    }
+
+    fn update(&mut self, ctx: &yew::prelude::Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            CustomNumberFormatMsg::StyleChanged(style) => {
+                let style = style.unwrap_or_default();
+                let new_style = match style {
+                    NumberStyle::Decimal => NumberFormatStyle::Decimal,
+                    NumberStyle::Percent => NumberFormatStyle::Percent,
+                    NumberStyle::Currency => {
+                        NumberFormatStyle::Currency(CurrencyNumberFormatStyle::default())
+                    },
+                    NumberStyle::Unit => NumberFormatStyle::Unit(UnitNumberFormatStyle {
+                        unit: Unit::default(),
+                        unit_display: None,
+                    }),
+                };
+                self.config._style = Some(new_style);
+                self.style = style;
+            },
+            CustomNumberFormatMsg::NotationChanged(notation) => {
+                self.notation = notation;
+                let new_notation = notation.map(|notation| match notation {
+                    NotationName::Standard => Notation::Standard,
+                    NotationName::Scientific => Notation::Scientific,
+                    NotationName::Engineering => Notation::Engineering,
+                    NotationName::Compact => Notation::Compact(CompactDisplay::default()),
+                });
+                self.config._notation = new_notation;
+            },
+            CustomNumberFormatMsg::CurrencyCode(val) => {
+                if let Some(NumberFormatStyle::Currency(currency)) = &mut self.config._style {
+                    currency.currency = val.unwrap_or_default();
+                }
+            },
+            CustomNumberFormatMsg::CurrencyDisplay(val) => {
+                if let Some(NumberFormatStyle::Currency(currency)) = &mut self.config._style {
+                    currency.currency_display = val;
+                }
+            },
+            CustomNumberFormatMsg::CurrencySign(val) => {
+                if let Some(NumberFormatStyle::Currency(currency)) = &mut self.config._style {
+                    currency.currency_sign = val;
+                }
+            },
+            CustomNumberFormatMsg::CompactDisplay(val) => {
+                if let Some(Notation::Compact(old)) = &mut self.config._notation {
+                    if let Some(val) = val {
+                        *old = val;
+                    }
+                } else {
+                    tracing::error!("Unreachable change in compact display!");
+                }
+            },
+            CustomNumberFormatMsg::UseGrouping(val) => {
+                self.config.use_grouping = val;
+            },
+            CustomNumberFormatMsg::SignDisplay(val) => {
+                self.config.sign_display = val;
+            },
+            CustomNumberFormatMsg::Unit(val) => {
+                if let Some(NumberFormatStyle::Unit(style)) = &mut self.config._style {
+                    style.unit = val.unwrap_or_default();
+                }
+            },
+            CustomNumberFormatMsg::UnitDisplay(val) => {
+                if let Some(NumberFormatStyle::Unit(style)) = &mut self.config._style {
+                    style.unit_display = val;
+                }
+            },
+            CustomNumberFormatMsg::MinimumIntegerDigits(val) => {
+                self.config.minimum_integer_digits = val;
+            },
+            CustomNumberFormatMsg::FracChange(val) => {
+                self.config.rounding_increment = None;
+                self.config.maximum_fraction_digits = val.map(|(_, val)| {
+                    let min = self.config.minimum_fraction_digits.unwrap_or(2.);
+                    max!(val, min)
+                });
+
+                self.config.minimum_fraction_digits = val.map(|(val, _)| {
+                    let max = self.config.maximum_fraction_digits.unwrap_or(2.);
+                    min!(val, max)
+                });
+            },
+            CustomNumberFormatMsg::SigChange(val) => {
+                self.config.maximum_significant_digits = val.map(|(_, val)| {
+                    let min = self.config.minimum_significant_digits.unwrap_or(1.);
+                    max!(val, min)
+                });
+
+                self.config.minimum_significant_digits = val.map(|(val, _)| {
+                    let max = self.config.maximum_significant_digits.unwrap_or(21.);
+                    min!(val, max)
+                });
+            },
+            CustomNumberFormatMsg::RoundingIncrement(val) => {
+                if let RoundingIncrement::Custom(val) = val {
+                    self.config.rounding_priority = None;
+                    self.config.rounding_increment = Some(val);
+                    self.config.maximum_fraction_digits = Some(0.);
+                    self.config.minimum_fraction_digits = Some(0.);
+                } else {
+                    self.config.rounding_increment = None;
+                }
+            },
+            CustomNumberFormatMsg::TrailingZero(val) => {
+                self.config.trailing_zero_display = val;
+            },
+            CustomNumberFormatMsg::RoundingMode(val) => {
+                self.config.rounding_mode = val;
+            },
+            CustomNumberFormatMsg::RoundingPriority(val) => {
+                self.config.rounding_increment = None;
+                self.config.rounding_priority = val;
+            },
+        };
+
+        let is_float = ctx.props().view_type == Type::Float;
+        let filtered_config = self.config.clone().filter_default(is_float);
+        let value =
+            (filtered_config != CustomNumberFormatConfig::default()).then_some(filtered_config);
+
+        let update = ColumnConfigValueUpdate::CustomNumberStringFormat(value);
+        ctx.props().on_change.emit(update);
+        true
+    }
+
+    fn view(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
+        html! {
+            <>
+                <LocalStyle href={css!("column-style")} />
+                { self.style_section(ctx) }
+                { self.digits_section(ctx) }
+                { self.misc_section(ctx) }
+            </>
+        }
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/digits_section.rs b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/digits_section.rs
new file mode 100644
index 0000000000..e3d4e76d05
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/digits_section.rs
@@ -0,0 +1,135 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use itertools::Itertools;
+use yew::html;
+
+use super::CustomNumberFormat;
+use crate::components::containers::select::{Select, SelectItem};
+use crate::components::form::number_field::NumberField;
+use crate::components::form::number_range_field::NumberRangeField;
+use crate::components::form::optional_field::OptionalField;
+use crate::components::form::select_field::SelectEnumField;
+use crate::components::style_controls::CustomNumberFormatMsg;
+use crate::config::{
+    RoundingIncrement, RoundingMode, RoundingPriority, TrailingZeroDisplay, Type,
+    ROUNDING_INCREMENTS,
+};
+
+impl CustomNumberFormat {
+    pub fn digits_section(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
+        let is_float = matches!(ctx.props().view_type, Type::Float);
+        html! {
+            <>
+                <NumberField
+                    label="minimum-integer-digits"
+                    min=1.
+                    max=21.
+                    step=1.
+                    default=1.
+                    current_value={self.config.minimum_integer_digits}
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::MinimumIntegerDigits)}
+                />
+                if is_float { { self.float_section(ctx) } } else { { self.rounding_increment(ctx) } }
+            </>
+        }
+    }
+
+    fn rounding_increment(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
+        // let disabled = self.disable_rounding_increment;
+        let values = ROUNDING_INCREMENTS
+            .iter()
+            .map(|val| RoundingIncrement::Custom(*val))
+            .map(SelectItem::Option)
+            .collect_vec();
+        let values = [vec![SelectItem::Option(RoundingIncrement::Auto)], values].concat();
+        let on_check = ctx
+            .link()
+            .callback(|_| CustomNumberFormatMsg::RoundingIncrement(RoundingIncrement::default()));
+        let selected = self
+            .config
+            .rounding_increment
+            .map(RoundingIncrement::Custom)
+            .unwrap_or_default();
+        html! {
+            <div class="row">
+                <OptionalField
+                    label="rounding-increment"
+                    {on_check}
+                    // {disabled}
+                    checked={self.config.rounding_increment.is_some()}
+                >
+                    <Select<RoundingIncrement>
+                        {values}
+                        {selected}
+                        on_select={ctx.link().callback(CustomNumberFormatMsg::RoundingIncrement)}
+                    />
+                </OptionalField>
+            </div>
+        }
+    }
+
+    fn float_section(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
+        let fractional_value = Some((
+            self.config.minimum_fraction_digits.unwrap_or(2.),
+            self.config.maximum_fraction_digits.unwrap_or(2.),
+        ));
+
+        let significant_value = Some((
+            self.config.minimum_significant_digits.unwrap_or(1.),
+            self.config.maximum_significant_digits.unwrap_or(21.),
+        ));
+
+        html! {
+            <>
+                <div class="row">
+                    <NumberRangeField
+                        label="fractional-digits"
+                        min=0.
+                        max=20.
+                        step=1.
+                        default={(2., 2.)}
+                        current_value={fractional_value}
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::FracChange)}
+                    />
+                </div>
+                <div class="row">
+                    <NumberRangeField
+                        label="significant-digits"
+                        min=1.
+                        max=21.
+                        step=1.
+                        default={(1., 21.)}
+                        current_value={significant_value}
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::SigChange)}
+                    />
+                </div>
+                { self.rounding_increment(ctx) }
+                <SelectEnumField<RoundingPriority>
+                    label="rounding-priority"
+                    current_value={self.config.rounding_priority}
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::RoundingPriority)}
+                />
+                <SelectEnumField<RoundingMode>
+                    label="rounding-mode"
+                    current_value={self.config.rounding_mode}
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::RoundingMode)}
+                />
+                <SelectEnumField<TrailingZeroDisplay>
+                    label="trailing-zero-display"
+                    current_value={self.config.trailing_zero_display}
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::TrailingZero)}
+                />
+            </>
+        }
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/misc_section.rs b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/misc_section.rs
new file mode 100644
index 0000000000..8839f9d9db
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/misc_section.rs
@@ -0,0 +1,56 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::html;
+
+use super::CustomNumberFormat;
+use crate::components::form::select_field::SelectEnumField;
+use crate::components::style_controls::{CustomNumberFormatMsg, NotationName};
+use crate::config::*;
+
+impl CustomNumberFormat {
+    pub fn misc_section(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
+        let compact_display_checkbox = if let Some(Notation::Compact(val)) = self.config._notation {
+            let cb = ctx.link().callback(CustomNumberFormatMsg::CompactDisplay);
+            Some(html! {
+                <SelectEnumField<CompactDisplay>
+                    label="compact-display"
+                    on_change={cb}
+                    current_value={val}
+                />
+            })
+        } else {
+            None
+        };
+
+        html! {
+            <>
+                <SelectEnumField<NotationName>
+                    label="notation"
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::NotationChanged)}
+                    current_value={self.notation.unwrap_or_default()}
+                />
+                { compact_display_checkbox }
+                <SelectEnumField<UseGrouping>
+                    label="use-grouping"
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::UseGrouping)}
+                    current_value={self.config.use_grouping.unwrap_or_default()}
+                />
+                <SelectEnumField<SignDisplay>
+                    label="sign-display"
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::SignDisplay)}
+                    current_value={self.config.sign_display.unwrap_or_default()}
+                />
+            </>
+        }
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/style_section.rs b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/style_section.rs
new file mode 100644
index 0000000000..34cd9f8b74
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/style_section.rs
@@ -0,0 +1,69 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::html;
+
+use super::CustomNumberFormat;
+use crate::components::form::select_field::SelectEnumField;
+use crate::components::style_controls::{CustomNumberFormatMsg, NumberStyle};
+use crate::config::*;
+
+impl CustomNumberFormat {
+    pub fn style_section(&self, ctx: &yew::prelude::Context<Self>) -> yew::prelude::Html {
+        let section = match self.config._style.as_ref() {
+            Some(NumberFormatStyle::Currency(style)) => Some(html! {
+                <>
+                    <SelectEnumField<CurrencyCode>
+                        label="currency"
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::CurrencyCode)}
+                        current_value={style.currency}
+                    />
+                    <SelectEnumField<CurrencyDisplay>
+                        label="currency-display"
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::CurrencyDisplay)}
+                        current_value={style.currency_display.unwrap_or_default()}
+                    />
+                    <SelectEnumField<CurrencySign>
+                        label="currency-sign"
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::CurrencySign)}
+                        current_value={style.currency_sign.unwrap_or_default()}
+                    />
+                </>
+            }),
+            Some(NumberFormatStyle::Unit(style)) => Some(html!(
+                <>
+                    <SelectEnumField<Unit>
+                        label="unit"
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::Unit)}
+                        current_value={style.unit}
+                    />
+                    <SelectEnumField<UnitDisplay>
+                        label="unit-display"
+                        on_change={ctx.link().callback(CustomNumberFormatMsg::UnitDisplay)}
+                        current_value={style.unit_display.unwrap_or_default()}
+                    />
+                </>
+            )),
+            _ => None,
+        };
+        html! {
+            <>
+                <SelectEnumField<NumberStyle>
+                    label="style"
+                    current_value={self.style}
+                    on_change={ctx.link().callback(CustomNumberFormatMsg::StyleChanged)}
+                />
+                { section }
+            </>
+        }
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/components/containers/radio_list_item.rs b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/types.rs
similarity index 71%
rename from rust/perspective-viewer/src/rust/components/containers/radio_list_item.rs
rename to rust/perspective-viewer/src/rust/components/style_controls/number_string_format/types.rs
index aacb26eeb3..9707b5a024 100644
--- a/rust/perspective-viewer/src/rust/components/containers/radio_list_item.rs
+++ b/rust/perspective-viewer/src/rust/components/style_controls/number_string_format/types.rs
@@ -10,40 +10,22 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::fmt::Display;
-use std::marker::PhantomData;
-use std::str::FromStr;
+use strum::{Display, EnumIter};
 
-use derivative::Derivative;
-use yew::prelude::*;
-
-#[derive(Derivative)]
-#[derivative(Default(bound = ""))]
-pub struct RadioListItem<T> {
-    _typeref: PhantomData<T>,
-}
-
-#[derive(Properties, PartialEq)]
-pub struct RadioListItemProps<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    pub children: Children,
-    pub value: T,
+#[derive(Clone, PartialEq, Debug, Copy, Default, EnumIter, Display)]
+pub enum NumberStyle {
+    #[default]
+    Decimal,
+    Percent,
+    Currency,
+    Unit,
 }
 
-impl<T> Component for RadioListItem<T>
-where
-    T: Clone + Display + FromStr + PartialEq + 'static,
-{
-    type Message = ();
-    type Properties = RadioListItemProps<T>;
-
-    fn create(_ctx: &Context<Self>) -> Self {
-        Self::default()
-    }
-
-    fn view(&self, ctx: &Context<Self>) -> Html {
-        ctx.props().children.iter().collect::<Html>()
-    }
+#[derive(Clone, PartialEq, Debug, Copy, Default, Display, EnumIter)]
+pub enum NotationName {
+    #[default]
+    Standard,
+    Scientific,
+    Engineering,
+    Compact,
 }
diff --git a/rust/perspective-viewer/src/rust/components/tests/mod.rs b/rust/perspective-viewer/src/rust/components/tests/mod.rs
index 3c758cf7f1..c858b27c81 100644
--- a/rust/perspective-viewer/src/rust/components/tests/mod.rs
+++ b/rust/perspective-viewer/src/rust/components/tests/mod.rs
@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-mod column_style;
+// mod column_style;
 mod plugin_selector;
 mod status_bar;
 mod status_bar_counter;
diff --git a/rust/perspective-viewer/src/rust/components/viewer.rs b/rust/perspective-viewer/src/rust/components/viewer.rs
index 18f2c75242..75df9a45a9 100644
--- a/rust/perspective-viewer/src/rust/components/viewer.rs
+++ b/rust/perspective-viewer/src/rust/components/viewer.rs
@@ -13,7 +13,6 @@
 use std::rc::Rc;
 
 use futures::channel::oneshot::*;
-use itertools::Itertools;
 use wasm_bindgen::prelude::*;
 use yew::prelude::*;
 
@@ -36,61 +35,55 @@ use crate::session::*;
 use crate::utils::*;
 use crate::*;
 
-/// A ColumnLocator is a combination of the column's type and its name.
-/// It's used to locate columns for the column_settings_sidebar.
+/// Locates a view column.
+/// Table columns are those defined on the table, but their types will reflect
+/// the view type, not the table type.
 #[derive(Clone, Debug, PartialEq)]
 pub enum ColumnLocator {
-    Plain(String),
-    Expr(Option<String>),
+    Table(String),
+    Expression(String),
+    NewExpression,
 }
 impl ColumnLocator {
+    /// Pulls the column's name from the locator.
+    /// If the column is a new expression which has yet to be saved, the
+    /// function will return None.
     pub fn name(&self) -> Option<&String> {
         match self {
-            ColumnLocator::Plain(s) => Some(s),
-            ColumnLocator::Expr(s) => s.as_ref(),
+            Self::Table(s) | Self::Expression(s) => Some(s),
+            Self::NewExpression => None,
         }
     }
 
     pub fn name_or_default(&self, session: &Session) -> String {
         match self {
-            ColumnLocator::Plain(s) | ColumnLocator::Expr(Some(s)) => s.clone(),
-            ColumnLocator::Expr(None) => session.metadata().make_new_column_name(None),
+            Self::Table(s) | Self::Expression(s) => s.clone(),
+            Self::NewExpression => session.metadata().make_new_column_name(None),
         }
     }
 
     pub fn is_active(&self, session: &Session) -> bool {
-        match self {
-            ColumnLocator::Plain(name) | ColumnLocator::Expr(Some(name)) => {
-                session.is_column_active(name)
-            },
-            ColumnLocator::Expr(None) => false,
-        }
-    }
-
-    /// Determines if the column is one of view's query parameters, i.e.
-    /// GroupBy, SplitBy, OrderBy, or Where
-    pub fn is_in_query(&self, session: &Session) -> bool {
-        if matches!(self, Self::Expr(None)) {
-            return false;
-        }
-        let name = self.name().unwrap();
-        let view_config = session.get_view_config();
-        view_config.group_by.contains(name)
-            || view_config.split_by.contains(name)
-            || view_config.filter.iter().any(|filter| &filter.0 == name)
-            || view_config.sort.iter().any(|sort| &sort.0 == name)
+        self.name()
+            .map(|name| session.is_column_active(name))
+            .unwrap_or_default()
     }
 
     #[inline(always)]
     pub fn is_saved_expr(&self) -> bool {
-        matches!(self, ColumnLocator::Expr(Some(_)))
+        matches!(self, ColumnLocator::Expression(_))
     }
 
-    /// Returns true if the column is an expression.
-    /// Use `is_saved_expr` if you want to exclude new expressions.
     #[inline(always)]
     pub fn is_expr(&self) -> bool {
-        matches!(self, ColumnLocator::Expr(_))
+        matches!(
+            self,
+            ColumnLocator::Expression(_) | ColumnLocator::NewExpression
+        )
+    }
+
+    #[inline(always)]
+    pub fn is_new_expr(&self) -> bool {
+        matches!(self, ColumnLocator::NewExpression)
     }
 
     pub fn view_type(&self, session: &Session) -> Option<Type> {
@@ -112,7 +105,7 @@ pub struct PerspectiveViewerProps {
     pub weak_link: WeakScope<PerspectiveViewer>,
 }
 
-derive_model!(Renderer, Session for PerspectiveViewerProps);
+derive_model!(Renderer, Session, Presentation for PerspectiveViewerProps);
 
 impl PartialEq for PerspectiveViewerProps {
     fn eq(&self, _rhs: &Self) -> bool {
@@ -173,38 +166,25 @@ impl Component for PerspectiveViewer {
             clone!(
                 ctx.props().presentation,
                 ctx.props().session,
-                ctx.props().renderer
+                plugin_query = ctx.props().get_plugin_column_styles_query()
             );
             let callback = ctx.link().batch_callback(move |(update, render_limits)| {
                 if update {
                     vec![PerspectiveViewerMsg::RenderLimits(Some(render_limits))]
                 } else {
-                    let mut locator = presentation.get_open_column_settings().locator;
-                    if let Some(name) = locator.as_ref().and_then(|l| l.name()) {
-                        let view_config = session.get_view_config();
-                        let maybe_pos = view_config.columns.iter().find_position(|col| {
-                            col.as_ref().map(|c| name == c).unwrap_or_default()
-                        });
-                        let is_expr = session.metadata().is_column_expression(name);
-                        if maybe_pos.is_none() && !is_expr {
-                            locator = None;
-                        } else if let Some((idx, _)) = maybe_pos {
-                            // Close the symbol editor if the type doesn't match.
-                            // NOTE: to be replaced with plugin.can_render(ty, col_name)
-                            let plugin = renderer.get_active_plugin().unwrap();
-                            let config_names: Option<Vec<String>> = plugin
-                                .config_column_names()
-                                .and_then(|x| x.into_serde_ext().ok())
-                                .unwrap();
-                            if let Some(group) = config_names.as_ref().and_then(|v| v.get(idx))
-                                && &**group == "Symbol" 
-                                && plugin.name() == "X/Y Scatter"
-                                && session.metadata().get_column_view_type(name) != Some(Type::String)
-                            {
-                                locator = None;
-                            }
-                        }
-                    }
+                    let locator =
+                        presentation
+                            .get_open_column_settings()
+                            .locator
+                            .filter(|locator| match locator {
+                                ColumnLocator::Table(ref name) => {
+                                    locator.is_active(&session)
+                                        && plugin_query
+                                            .can_render_column_styles(name)
+                                            .unwrap_or_default()
+                                },
+                                _ => true,
+                            });
 
                     vec![
                         PerspectiveViewerMsg::RenderLimits(Some(render_limits)),
@@ -252,7 +232,13 @@ impl Component for PerspectiveViewer {
 
                 ApiFuture::spawn(async move {
                     session.reset(all);
-                    renderer.reset().await;
+                    let columns_config = if all {
+                        presentation.reset_columns_configs();
+                        None
+                    } else {
+                        Some(presentation.all_columns_configs())
+                    };
+                    renderer.reset(columns_config.as_ref()).await;
                     presentation.reset_available_themes(None).await;
                     let result = renderer.draw(session.validate().await?.create_view()).await;
                     if let Some(sender) = sender {
@@ -343,10 +329,7 @@ impl Component for PerspectiveViewer {
 
                     locator
                         .clone()
-                        .map(|c| match c {
-                            ColumnLocator::Plain(s) => (true, Some(s)),
-                            ColumnLocator::Expr(maybe_s) => (true, maybe_s),
-                        })
+                        .map(|c| (true, c.name().cloned()))
                         .unwrap_or_default()
                 };
 
@@ -444,9 +427,7 @@ impl Component for PerspectiveViewer {
         html! {
             <>
                 <StyleProvider>
-                    <LocalStyle
-                        href={css!("viewer")}
-                    />
+                    <LocalStyle href={css!("viewer")} />
                     if self.settings_open {
                         <SplitPanel
                             id="app_panel"
@@ -482,9 +463,7 @@ impl Component for PerspectiveViewer {
                                     selected_column={self.selected_column.clone()}
                                 />
                             </div>
-                            <div
-                                id="main_column"
-                            >
+                            <div id="main_column">
                                 <StatusBar
                                     id="status_bar"
                                     session={&ctx.props().session}
@@ -492,15 +471,13 @@ impl Component for PerspectiveViewer {
                                     presentation={&ctx.props().presentation}
                                     {on_reset}
                                 />
-                                <div
-                                    id="main_panel_container"
-                                >
+                                <div id="main_panel_container">
                                     <RenderWarning
                                         dimensions={self.dimensions}
                                         session={&ctx.props().session}
                                         renderer={&ctx.props().renderer}
                                     />
-                                    <slot/>
+                                    <slot />
                                 </div>
                                 if let Some(selected_column) = self.selected_column.clone() {
                                     <SplitPanel
diff --git a/rust/perspective-viewer/src/rust/config/column_type.rs b/rust/perspective-viewer/src/rust/config/column_type.rs
index 8317eea3d3..012735e5c6 100644
--- a/rust/perspective-viewer/src/rust/config/column_type.rs
+++ b/rust/perspective-viewer/src/rust/config/column_type.rs
@@ -12,10 +12,10 @@
 
 use std::fmt::Display;
 
-use serde::Deserialize;
+use serde::{Deserialize, Serialize};
 use yew::{html, ToHtml};
 
-#[derive(Deserialize, Clone, Copy, PartialEq, PartialOrd, Eq, Ord, Debug)]
+#[derive(Serialize, Deserialize, Clone, Copy, PartialEq, PartialOrd, Eq, Ord, Debug, Hash)]
 pub enum Type {
     #[serde(rename = "string")]
     String,
diff --git a/rust/perspective-viewer/src/rust/config/columns_config.rs b/rust/perspective-viewer/src/rust/config/columns_config.rs
new file mode 100644
index 0000000000..05ebe028f5
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/config/columns_config.rs
@@ -0,0 +1,117 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::collections::HashMap;
+
+use serde::{Deserialize, Serialize};
+use serde_with::skip_serializing_none;
+
+use super::{
+    CustomNumberFormatConfig, DatetimeColumnStyleConfig, DatetimeColumnStyleDefaultConfig,
+    NumberColumnStyleConfig, NumberColumnStyleDefaultConfig, StringColumnStyleConfig,
+    StringColumnStyleDefaultConfig,
+};
+
+/// The value de/serialized and stored in the viewer config.
+/// Also passed to the plugin via `plugin.save()`.
+#[skip_serializing_none]
+#[derive(Clone, Debug, Default, Deserialize, PartialEq, Serialize)]
+pub struct ColumnConfigValues {
+    #[serde(default)]
+    #[serde(skip_serializing_if = "HashMap::is_empty")]
+    pub symbols: HashMap<String, String>,
+
+    #[serde(flatten)]
+    pub datagrid_number_style: NumberColumnStyleConfig,
+
+    #[serde(flatten)]
+    pub datagrid_string_style: StringColumnStyleConfig,
+
+    #[serde(flatten)]
+    pub datagrid_datetime_style: DatetimeColumnStyleConfig,
+
+    #[serde(default)]
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub number_format: Option<CustomNumberFormatConfig>,
+}
+
+#[derive(Debug)]
+pub enum ColumnConfigValueUpdate {
+    DatagridNumberStyle(Option<NumberColumnStyleConfig>),
+    DatagridStringStyle(Option<StringColumnStyleConfig>),
+    DatagridDatetimeStyle(Option<DatetimeColumnStyleConfig>),
+    Symbols(Option<HashMap<String, String>>),
+    CustomNumberStringFormat(Option<CustomNumberFormatConfig>),
+}
+
+impl ColumnConfigValues {
+    pub fn update(self, update: ColumnConfigValueUpdate) -> Self {
+        match update {
+            ColumnConfigValueUpdate::DatagridNumberStyle(update) => Self {
+                datagrid_number_style: update.unwrap_or_default(),
+                ..self
+            },
+            ColumnConfigValueUpdate::DatagridStringStyle(update) => Self {
+                datagrid_string_style: update.unwrap_or_default(),
+                ..self
+            },
+            ColumnConfigValueUpdate::DatagridDatetimeStyle(update) => Self {
+                datagrid_datetime_style: update.unwrap_or_default(),
+                ..self
+            },
+            ColumnConfigValueUpdate::Symbols(update) => Self {
+                symbols: update.unwrap_or_default(),
+                ..self
+            },
+            ColumnConfigValueUpdate::CustomNumberStringFormat(update) => Self {
+                number_format: update.filter(|x| x != &CustomNumberFormatConfig::default()),
+                ..self
+            },
+        }
+    }
+
+    pub fn is_empty(&self) -> bool {
+        self == &Self::default()
+    }
+}
+
+/// The controls returned by plugin.column_style_controls.
+/// This is a way to fill out default values for the given controls.
+/// If a control is not given, it will not be rendered. I would like to
+/// eventually show these as inactive values.
+#[derive(Serialize, Deserialize, PartialEq, Debug, Default)]
+pub struct ColumnStyleOpts {
+    pub datagrid_number_style: Option<NumberColumnStyleDefaultConfig>,
+    pub datagrid_string_style: Option<StringColumnStyleDefaultConfig>,
+    pub datagrid_datetime_style: Option<DatetimeColumnStyleDefaultConfig>,
+    pub symbols: Option<KeyValueOpts>,
+    pub number_string_format: Option<bool>,
+}
+
+#[derive(Serialize, Deserialize, Debug, PartialEq, Clone, Copy)]
+#[serde(rename_all = "snake_case")]
+pub enum KvPairKeyValue {
+    Row,
+}
+
+#[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
+#[serde(untagged)]
+pub enum KvPairKeys {
+    String(KvPairKeyValue),
+    Vec(Vec<String>),
+}
+
+#[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
+pub struct KeyValueOpts {
+    pub keys: KvPairKeys,
+    pub values: Vec<String>,
+}
diff --git a/rust/perspective-viewer/src/rust/config/datetime_column_style.rs b/rust/perspective-viewer/src/rust/config/datetime_column_style.rs
index 552e43982d..1bd0fd268c 100644
--- a/rust/perspective-viewer/src/rust/config/datetime_column_style.rs
+++ b/rust/perspective-viewer/src/rust/config/datetime_column_style.rs
@@ -27,25 +27,53 @@ use crate::*;
 
 /// `Simple` case has all default-able keys and must be last!
 #[derive(Clone, Debug, Deserialize, Eq, PartialEq, Serialize)]
+// #[serde(tag = "format", content = "date_format")]
 #[serde(untagged)]
 pub enum DatetimeFormatType {
+    // #[serde(rename = "custom")]
     Custom(CustomDatetimeStyleConfig),
     Simple(SimpleDatetimeStyleConfig),
 }
 
+impl Default for DatetimeFormatType {
+    fn default() -> Self {
+        Self::Simple(SimpleDatetimeStyleConfig::default())
+    }
+}
+
+impl DatetimeFormatType {
+    fn is_simple(&self) -> bool {
+        self == &Self::Simple(SimpleDatetimeStyleConfig::default())
+    }
+
+    pub fn time_zone(&self) -> &Option<String> {
+        match self {
+            DatetimeFormatType::Custom(x) => &x.time_zone,
+            DatetimeFormatType::Simple(x) => &x.time_zone,
+        }
+    }
+
+    pub fn time_zone_mut(&mut self) -> &mut Option<String> {
+        match self {
+            DatetimeFormatType::Custom(x) => &mut x.time_zone,
+            DatetimeFormatType::Simple(x) => &mut x.time_zone,
+        }
+    }
+}
+
 /// A model for the JSON serialized style configuration for a column of type
 /// `datetime`.
 #[derive(Clone, Debug, Deserialize, Eq, PartialEq, Serialize)]
 pub struct DatetimeColumnStyleConfig {
-    #[serde(flatten)]
-    pub _format: DatetimeFormatType,
-
-    #[serde(rename = "timeZone", skip_serializing_if = "Option::is_none")]
-    pub time_zone: Option<String>,
+    #[serde(default)]
+    #[serde(skip_serializing_if = "DatetimeFormatType::is_simple")]
+    pub date_format: DatetimeFormatType,
 
-    #[serde(skip_serializing_if = "Option::is_none")]
-    pub datetime_color_mode: Option<DatetimeColorMode>,
+    #[serde(default)]
+    #[serde(skip_serializing_if = "DatetimeColorMode::is_none")]
+    pub datetime_color_mode: DatetimeColorMode,
 
+    #[serde(default)]
     #[serde(skip_serializing_if = "Option::is_none")]
     pub color: Option<String>,
 }
@@ -53,11 +81,11 @@ pub struct DatetimeColumnStyleConfig {
 impl Default for DatetimeColumnStyleConfig {
     fn default() -> Self {
         Self {
-            _format: DatetimeFormatType::Simple(SimpleDatetimeStyleConfig {
+            date_format: DatetimeFormatType::Simple(SimpleDatetimeStyleConfig {
+                time_zone: Default::default(),
                 date_style: SimpleDatetimeFormat::Short,
                 time_style: SimpleDatetimeFormat::Medium,
             }),
-            time_zone: Default::default(),
             datetime_color_mode: Default::default(),
             color: Default::default(),
         }
diff --git a/rust/perspective-viewer/src/rust/config/datetime_column_style/color_mode.rs b/rust/perspective-viewer/src/rust/config/datetime_column_style/color_mode.rs
index b1eecff9a2..131be84bcd 100644
--- a/rust/perspective-viewer/src/rust/config/datetime_column_style/color_mode.rs
+++ b/rust/perspective-viewer/src/rust/config/datetime_column_style/color_mode.rs
@@ -14,10 +14,14 @@ use std::fmt::Display;
 use std::str::FromStr;
 
 use serde::{Deserialize, Serialize};
+use strum::EnumIter;
 
-#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, EnumIter, Eq, PartialEq, Serialize)]
 pub enum DatetimeColorMode {
     #[default]
+    #[serde(rename = "none")]
+    None,
+
     #[serde(rename = "foreground")]
     Foreground,
 
@@ -28,6 +32,7 @@ pub enum DatetimeColorMode {
 impl Display for DatetimeColorMode {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         let text = match self {
+            Self::None => "none",
             Self::Foreground => "foreground",
             Self::Background => "background",
         };
@@ -41,9 +46,16 @@ impl FromStr for DatetimeColorMode {
 
     fn from_str(s: &str) -> Result<Self, Self::Err> {
         match s {
+            "none" => Ok(Self::None),
             "foreground" => Ok(Self::Foreground),
             "background" => Ok(Self::Background),
             x => Err(format!("Unknown DatetimeColorMode::{}", x)),
         }
     }
 }
+
+impl DatetimeColorMode {
+    pub fn is_none(&self) -> bool {
+        self == &Self::None
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/config/datetime_column_style/custom.rs b/rust/perspective-viewer/src/rust/config/datetime_column_style/custom.rs
index f390fea633..15a984f02e 100644
--- a/rust/perspective-viewer/src/rust/config/datetime_column_style/custom.rs
+++ b/rust/perspective-viewer/src/rust/config/datetime_column_style/custom.rs
@@ -65,6 +65,10 @@ const fn numeric_default() -> u32 {
 pub struct CustomDatetimeStyleConfig {
     format: FormatUnit,
 
+    #[serde(default)]
+    #[serde(rename = "timeZone", skip_serializing_if = "Option::is_none")]
+    pub time_zone: Option<String>,
+
     #[serde(
         skip_serializing_if = "is_zero",
         rename = "fractionalSecondDigits",
@@ -102,6 +106,7 @@ impl Default for CustomDatetimeStyleConfig {
         CustomDatetimeStyleConfig {
             format: FormatUnit::FormatUnit,
             fractional_seconds: 0,
+            time_zone: None,
             second: CustomDatetimeFormat::Numeric,
             minute: CustomDatetimeFormat::Numeric,
             hour: CustomDatetimeFormat::Numeric,
diff --git a/rust/perspective-viewer/src/rust/config/datetime_column_style/simple.rs b/rust/perspective-viewer/src/rust/config/datetime_column_style/simple.rs
index 52f1424882..9fbcd7fee5 100644
--- a/rust/perspective-viewer/src/rust/config/datetime_column_style/simple.rs
+++ b/rust/perspective-viewer/src/rust/config/datetime_column_style/simple.rs
@@ -24,6 +24,10 @@ const fn time_style_default() -> SimpleDatetimeFormat {
 
 #[derive(Clone, Debug, Deserialize, Eq, PartialEq, Serialize)]
 pub struct SimpleDatetimeStyleConfig {
+    #[serde(default)]
+    #[serde(rename = "timeZone", skip_serializing_if = "Option::is_none")]
+    pub time_zone: Option<String>,
+
     #[serde(
         default = "date_style_default",
         rename = "dateStyle",
@@ -42,6 +46,7 @@ pub struct SimpleDatetimeStyleConfig {
 impl Default for SimpleDatetimeStyleConfig {
     fn default() -> Self {
         Self {
+            time_zone: None,
             date_style: SimpleDatetimeFormat::Short,
             time_style: SimpleDatetimeFormat::Medium,
         }
diff --git a/rust/perspective-viewer/src/rust/config/datetime_column_style/simple_format.rs b/rust/perspective-viewer/src/rust/config/datetime_column_style/simple_format.rs
index a07d2eee6b..21e52183ee 100644
--- a/rust/perspective-viewer/src/rust/config/datetime_column_style/simple_format.rs
+++ b/rust/perspective-viewer/src/rust/config/datetime_column_style/simple_format.rs
@@ -14,8 +14,9 @@ use std::fmt::Display;
 use std::str::FromStr;
 
 use serde::{Deserialize, Serialize};
+use strum::EnumIter;
 
-#[derive(Clone, Copy, Debug, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, EnumIter, Eq, PartialEq, Serialize)]
 pub enum SimpleDatetimeFormat {
     #[serde(rename = "full")]
     Full,
@@ -26,6 +27,7 @@ pub enum SimpleDatetimeFormat {
     #[serde(rename = "medium")]
     Medium,
 
+    #[default]
     #[serde(rename = "short")]
     Short,
 
diff --git a/rust/perspective-viewer/src/rust/config/mod.rs b/rust/perspective-viewer/src/rust/config/mod.rs
index b5f773f083..b023493c30 100644
--- a/rust/perspective-viewer/src/rust/config/mod.rs
+++ b/rust/perspective-viewer/src/rust/config/mod.rs
@@ -15,11 +15,12 @@
 
 mod aggregates;
 mod column_type;
+mod columns_config;
 mod datetime_column_style;
 mod expressions;
 mod filters;
 mod number_column_style;
-pub mod plugin;
+mod number_string_format;
 mod sort;
 mod string_column_style;
 mod view_config;
@@ -27,10 +28,12 @@ mod viewer_config;
 
 pub use aggregates::*;
 pub use column_type::*;
+pub use columns_config::*;
 pub use datetime_column_style::*;
 pub use expressions::*;
 pub use filters::*;
 pub use number_column_style::*;
+pub use number_string_format::*;
 pub use sort::*;
 pub use string_column_style::*;
 pub use view_config::*;
diff --git a/rust/perspective-viewer/src/rust/config/number_column_style.rs b/rust/perspective-viewer/src/rust/config/number_column_style.rs
index 4d3974e5e1..f418fdb53c 100644
--- a/rust/perspective-viewer/src/rust/config/number_column_style.rs
+++ b/rust/perspective-viewer/src/rust/config/number_column_style.rs
@@ -10,14 +10,14 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-use std::fmt::Display;
 use std::str::FromStr;
 
 use serde::{Deserialize, Serialize};
+use strum::{Display, EnumIter};
 
 use crate::*;
 
-#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, Display, EnumIter, Eq, PartialEq, Serialize)]
 pub enum NumberForegroundMode {
     #[serde(rename = "disabled")]
     Disabled,
@@ -30,21 +30,6 @@ pub enum NumberForegroundMode {
     Bar,
 }
 
-/// `Display` and `FromStr` are only used for rendering these types as HTML
-/// attributes, where `disabled` will never be rendered as it represents the
-/// options being unavailable.
-impl Display for NumberForegroundMode {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        let text = match self {
-            Self::Color => Ok("color"),
-            Self::Bar => Ok("bar"),
-            _ => Err(std::fmt::Error),
-        }?;
-
-        write!(f, "{}", text)
-    }
-}
-
 impl FromStr for NumberForegroundMode {
     type Err = String;
 
@@ -71,7 +56,7 @@ impl NumberForegroundMode {
     }
 }
 
-#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, Display, EnumIter, Eq, PartialEq, Serialize)]
 pub enum NumberBackgroundMode {
     #[default]
     #[serde(rename = "disabled")]
@@ -87,32 +72,6 @@ pub enum NumberBackgroundMode {
     Pulse,
 }
 
-impl Display for NumberBackgroundMode {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        let text = match self {
-            Self::Color => Ok("color"),
-            Self::Gradient => Ok("gradient"),
-            Self::Pulse => Ok("pulse"),
-            _ => Err(std::fmt::Error),
-        }?;
-
-        write!(f, "{}", text)
-    }
-}
-
-impl FromStr for NumberBackgroundMode {
-    type Err = String;
-
-    fn from_str(s: &str) -> Result<Self, Self::Err> {
-        match s {
-            "color" => Ok(Self::Color),
-            "gradient" => Ok(Self::Gradient),
-            "pulse" => Ok(Self::Pulse),
-            x => Err(format!("Unknown NumberBackgroundMode::{}", x)),
-        }
-    }
-}
-
 impl NumberBackgroundMode {
     pub fn is_disabled(&self) -> bool {
         *self == Self::Disabled
@@ -133,9 +92,6 @@ pub struct NumberColumnStyleConfig {
     #[serde(skip_serializing_if = "NumberBackgroundMode::is_disabled")]
     pub number_bg_mode: NumberBackgroundMode,
 
-    #[serde(skip_serializing_if = "Option::is_none")]
-    pub fixed: Option<u32>,
-
     #[serde(skip_serializing_if = "Option::is_none")]
     pub pos_fg_color: Option<String>,
 
@@ -161,11 +117,10 @@ derive_wasm_abi!(NumberColumnStyleConfig, FromWasmAbi, IntoWasmAbi);
 /// this struct represents the default values we should use in the GUI when they
 /// are `None` in the real config.  It is also used to decide when to omit a
 /// field when serialized a `ColumnStyleConfig` to JSON.
-#[derive(Deserialize, Clone, Default, Debug)]
+#[derive(Serialize, Deserialize, Clone, Default, Debug, PartialEq)]
 pub struct NumberColumnStyleDefaultConfig {
     pub fg_gradient: f64,
     pub bg_gradient: f64,
-    pub fixed: u32,
     pub pos_fg_color: String,
     pub neg_fg_color: String,
     pub pos_bg_color: String,
diff --git a/rust/perspective-viewer/src/rust/config/number_string_format.rs b/rust/perspective-viewer/src/rust/config/number_string_format.rs
new file mode 100644
index 0000000000..02c3127d4f
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/config/number_string_format.rs
@@ -0,0 +1,266 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+mod enums;
+pub use enums::*;
+use serde::{Deserialize, Serialize};
+use serde_with::skip_serializing_none;
+use strum::{Display, EnumIter};
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone)]
+#[serde(rename_all = "camelCase", tag = "style")]
+pub enum NumberFormatStyle {
+    #[default]
+    Decimal,
+    Currency(CurrencyNumberFormatStyle),
+    Percent,
+    Unit(UnitNumberFormatStyle),
+}
+
+#[derive(Default, Serialize, Deserialize, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum CurrencyDisplay {
+    Code,
+    #[default]
+    Symbol,
+    NarrowSymbol,
+    Name,
+}
+
+#[derive(Default, Serialize, Deserialize, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum CurrencySign {
+    #[default]
+    Standard,
+    Accounting,
+}
+
+#[skip_serializing_none]
+#[derive(Default, Serialize, Deserialize, Debug, PartialEq, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct CurrencyNumberFormatStyle {
+    #[serde(default)]
+    pub currency: CurrencyCode,
+    pub currency_display: Option<CurrencyDisplay>,
+    pub currency_sign: Option<CurrencySign>,
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum UnitDisplay {
+    #[default]
+    Short,
+    Narrow,
+    Long,
+}
+
+#[skip_serializing_none]
+#[derive(Serialize, Deserialize, Debug, PartialEq, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct UnitNumberFormatStyle {
+    #[serde(default)]
+    pub unit: Unit,
+    pub unit_display: Option<UnitDisplay>,
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum RoundingPriority {
+    #[default]
+    Auto,
+    MorePrecision,
+    LessPrecision,
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum RoundingMode {
+    Ceil,
+    Floor,
+    Expand,
+    Trunc,
+    HalfCeil,
+    HalfFloor,
+    #[default]
+    HalfExpand,
+    HalfTrunc,
+    HalfEven,
+}
+
+#[derive(Default, Debug, PartialEq, Clone)]
+pub enum RoundingIncrement {
+    #[default]
+    Auto,
+    Custom(f64),
+}
+impl std::fmt::Display for RoundingIncrement {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            RoundingIncrement::Auto => f.write_str("Auto"),
+            RoundingIncrement::Custom(val) => f.write_fmt(format_args!("{val}")),
+        }
+    }
+}
+
+pub const ROUNDING_INCREMENTS: [f64; 15] = [
+    1., 2., 5., 10., 20., 25., 50., 100., 200., 250., 500., 1000., 2000., 2500., 5000.,
+];
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum TrailingZeroDisplay {
+    #[default]
+    Auto,
+    StripIfInteger,
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone)]
+#[serde(rename_all = "camelCase", tag = "notation")]
+pub enum Notation {
+    #[default]
+    Standard,
+    Scientific,
+    Engineering,
+    Compact(CompactDisplay),
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase", tag = "compactDisplay")]
+pub enum CompactDisplay {
+    #[default]
+    Short,
+    Long,
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "snake_case")]
+pub enum UseGrouping {
+    Always,
+
+    #[default]
+    Auto,
+    Min2, // default if notation is compact
+
+    #[serde(untagged)]
+    False(bool),
+}
+
+#[derive(Serialize, Deserialize, Default, Debug, PartialEq, Clone, Copy, EnumIter, Display)]
+#[serde(rename_all = "camelCase")]
+pub enum SignDisplay {
+    #[default]
+    Auto,
+    Always,
+    ExceptZero,
+    Negative,
+    Never,
+}
+
+#[skip_serializing_none]
+#[derive(Serialize, Deserialize, Debug, Default, PartialEq, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct CustomNumberFormatConfig {
+    #[serde(flatten)]
+    pub _style: Option<NumberFormatStyle>,
+
+    // see Digit Options
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#minimumintegerdigits
+    // these min/max props can all be specified but it results in possible conflicts
+    // may consider making them distinct options
+    pub minimum_integer_digits: Option<f64>,
+    pub minimum_fraction_digits: Option<f64>,
+    pub maximum_fraction_digits: Option<f64>,
+    pub minimum_significant_digits: Option<f64>,
+    pub maximum_significant_digits: Option<f64>,
+    pub rounding_priority: Option<RoundingPriority>,
+
+    // specific values https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingincrement
+    // Only available with automatic rounding priority
+    // Cannot be mixed with sigfig rounding. (Does this mean max/min sigfig must be unset?)
+    pub rounding_increment: Option<f64>,
+    pub rounding_mode: Option<RoundingMode>,
+    pub trailing_zero_display: Option<TrailingZeroDisplay>,
+
+    #[serde(flatten)]
+    pub _notation: Option<Notation>,
+    pub use_grouping: Option<UseGrouping>,
+    pub sign_display: Option<SignDisplay>,
+}
+
+impl CustomNumberFormatConfig {
+    pub fn filter_default(self, is_float: bool) -> Self {
+        let (frac_min, frac_max) = if is_float { (2., 2.) } else { (0., 0.) };
+        let rounding_increment = self.rounding_increment;
+        let use_grouping = self
+            .use_grouping
+            .filter(|val| *val != UseGrouping::default());
+
+        let mut minimum_fraction_digits =
+            self.minimum_fraction_digits.filter(|val| *val != frac_min);
+
+        let mut maximum_fraction_digits =
+            self.maximum_fraction_digits.filter(|val| *val != frac_max);
+
+        let mut show_frac = is_float
+            && (minimum_fraction_digits.is_some()
+                || maximum_fraction_digits.is_some()
+                || use_grouping.is_some()
+                || matches!(
+                    self._style,
+                    Some(NumberFormatStyle::Percent | NumberFormatStyle::Unit(_))
+                ))
+            || !is_float && matches!(self._style, Some(NumberFormatStyle::Currency(_)));
+
+        // Rounding increment does not work unless `minimum_fraction_digits`
+        // and `maximum_fraction_digits` are set to 0.
+        if rounding_increment.is_some() {
+            show_frac = true;
+            minimum_fraction_digits = Some(0.);
+            maximum_fraction_digits = Some(0.);
+        }
+
+        let minimum_significant_digits = self.minimum_significant_digits.filter(|val| *val != 1.);
+        let maximum_significant_digits = self.maximum_significant_digits.filter(|val| *val != 21.);
+        let show_sig = minimum_significant_digits.is_some() || maximum_significant_digits.is_some();
+        Self {
+            _style: self
+                ._style
+                .filter(|style| !matches!(style, NumberFormatStyle::Decimal)),
+            minimum_integer_digits: self.minimum_integer_digits.filter(|val| *val != 1.),
+            minimum_fraction_digits: show_frac
+                .then_some(minimum_fraction_digits.unwrap_or(frac_min)),
+            maximum_fraction_digits: show_frac
+                .then_some(maximum_fraction_digits.unwrap_or(frac_max)),
+            minimum_significant_digits: show_sig
+                .then_some(minimum_significant_digits.unwrap_or(1.)),
+            maximum_significant_digits: show_sig
+                .then_some(minimum_significant_digits.unwrap_or(21.)),
+            rounding_priority: self
+                .rounding_priority
+                .filter(|val| *val != RoundingPriority::default()),
+            rounding_increment,
+            rounding_mode: self
+                .rounding_mode
+                .filter(|val| *val != RoundingMode::default()),
+            trailing_zero_display: self
+                .trailing_zero_display
+                .filter(|val| *val != TrailingZeroDisplay::default()),
+            _notation: self
+                ._notation
+                .filter(|notation| !matches!(notation, Notation::Standard)),
+            use_grouping,
+            sign_display: self
+                .sign_display
+                .filter(|val| *val != SignDisplay::default()),
+        }
+    }
+}
diff --git a/rust/perspective-viewer/src/rust/config/number_string_format/enums.rs b/rust/perspective-viewer/src/rust/config/number_string_format/enums.rs
new file mode 100644
index 0000000000..67cdb32074
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/config/number_string_format/enums.rs
@@ -0,0 +1,88 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use serde::{Deserialize, Serialize};
+use strum::{Display, EnumIter};
+
+// NOTE: These should probably be pulled from a server somewhere.
+
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency_2
+#[derive(Clone, Copy, Debug, Default, PartialEq, Display, EnumIter, Serialize, Deserialize)]
+#[rustfmt::skip]
+pub enum CurrencyCode {
+    AED, AFN, ALL, AMD, ANG, AOA, ARS, AUD, AWG, AZN, BAM, BBD, BDT,
+    BGN, BHD, BIF, BMD, BND, BOB, BOV, BRL, BSD, BTN, BWP, BYR, BZD,
+    CAD, CDF, CHE, CHF, CHW, CLF, CLP, CNY, COP, COU, CRC, CUC, CUP,
+    CVE, CZK, DJF, DKK, DOP, DZD, EGP, ERN, ETB, EUR, FJD, FKP, GBP,
+    GEL, GHS, GIP, GMD, GNF, GTQ, GYD, HKD, HNL, HRK, HTG, HUF, IDR,
+    ILS, INR, IQD, IRR, ISK, JMD, JOD, JPY, KES, KGS, KHR, KMF, KPW,
+    KRW, KWD, KYD, KZT, LAK, LBP, LKR, LRD, LSL, LTL, LVL, LYD, MAD,
+    MDL, MGA, MKD, MMK, MNT, MOP, MRO, MUR, MVR, MWK, MXN, MXV, MYR,
+    MZN, NAD, NGN, NIO, NOK, NPR, NZD, OMR, PAB, PEN, PGK, PHP, PKR,
+    PLN, PYG, QAR, RON, RSD, RUB, RWF, SAR, SBD, SCR, SDG, SEK, SGD,
+    SHP, SLL, SOS, SRD, SSP, STD, SYP, SZL, THB, TJS, TMT, TND, TOP,
+    TRY, TTD, TWD, TZS, UAH, UGX, #[default] USD, USN, USS, UYI, UYU, UZS, VEF,
+    VND, VUV, WST, XAF, XAG, XAU, XBA, XBB, XBC, XBD, XCD, XDR, XFU,
+    XOF, XPD, XPF, XPT, XTS, XXX, YER, ZAR, ZMW,
+}
+
+// https://tc39.es/ecma402/#table-sanctioned-single-unit-identifiers
+#[derive(Clone, Copy, Debug, Default, PartialEq, Display, EnumIter, Serialize, Deserialize)]
+#[serde(rename_all = "kebab-case")]
+pub enum Unit {
+    Acre,
+    Bit,
+    Byte,
+    Celsius,
+    Centimeter,
+    Day,
+    Degree,
+    Fahrenheit,
+    FluidOunce,
+    Foot,
+    Gallon,
+    Gigabit,
+    Gigabyte,
+    Gram,
+    Hectare,
+    Hour,
+    Inch,
+    Kilobit,
+    Kilobyte,
+    Kilogram,
+    Kilometer,
+    Liter,
+    Megabit,
+    Megabyte,
+    Meter,
+    Microsecond,
+    Mile,
+    MileScandinavian,
+    Milliliter,
+    Millimeter,
+    Millisecond,
+    Minute,
+    Month,
+    Nanosecond,
+    Ounce,
+    #[default]
+    Percent,
+    Petabyte,
+    Pound,
+    Second,
+    Stone,
+    Terabit,
+    Terabyte,
+    Week,
+    Yard,
+    Year,
+}
diff --git a/rust/perspective-viewer/src/rust/config/string_column_style.rs b/rust/perspective-viewer/src/rust/config/string_column_style.rs
index 9da41c8610..b390e7b86e 100644
--- a/rust/perspective-viewer/src/rust/config/string_column_style.rs
+++ b/rust/perspective-viewer/src/rust/config/string_column_style.rs
@@ -14,13 +14,17 @@ use std::fmt::Display;
 use std::str::FromStr;
 
 use serde::{Deserialize, Serialize};
+use strum::EnumIter;
 
-#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
+#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, EnumIter, PartialEq, Serialize)]
 pub enum StringColorMode {
+    #[default]
+    #[serde(rename = "none")]
+    None,
+
     #[serde(rename = "foreground")]
     Foreground,
 
-    #[default]
     #[serde(rename = "background")]
     Background,
 
@@ -31,6 +35,7 @@ pub enum StringColorMode {
 impl Display for StringColorMode {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         let text = match self {
+            Self::None => "none",
             Self::Foreground => "foreground",
             Self::Background => "background",
             Self::Series => "series",
@@ -45,6 +50,7 @@ impl FromStr for StringColorMode {
 
     fn from_str(s: &str) -> Result<Self, Self::Err> {
         match s {
+            "none" => Ok(Self::None),
             "foreground" => Ok(Self::Foreground),
             "background" => Ok(Self::Background),
             "series" => Ok(Self::Series),
@@ -53,15 +59,23 @@ impl FromStr for StringColorMode {
     }
 }
 
-#[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq, Serialize)]
+impl StringColorMode {
+    pub fn is_none(&self) -> bool {
+        self == &Self::None
+    }
+}
+
+#[derive(Clone, Copy, Debug, Default, Deserialize, EnumIter, Eq, PartialEq, Serialize)]
 pub enum FormatMode {
+    #[default]
+    #[serde(rename = "none")]
+    None,
+
     #[serde(rename = "link")]
     Link,
 
-    #[serde(rename = "image")]
-    Image,
-
-    #[default]
+    // #[serde(rename = "image")]
+    // Image,
     #[serde(rename = "bold")]
     Bold,
 
@@ -72,8 +86,9 @@ pub enum FormatMode {
 impl Display for FormatMode {
     fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
         let text = match self {
+            Self::None => "none",
             Self::Link => "link",
-            Self::Image => "image",
+            // Self::Image => "image",
             Self::Bold => "bold",
             Self::Italics => "italics",
         };
@@ -87,8 +102,9 @@ impl FromStr for FormatMode {
 
     fn from_str(s: &str) -> Result<Self, Self::Err> {
         match s {
+            "none" => Ok(Self::None),
             "link" => Ok(Self::Link),
-            "image" => Ok(Self::Image),
+            // "image" => Ok(Self::Image),
             "bold" => Ok(Self::Bold),
             "italics" => Ok(Self::Italics),
             x => Err(format!("Unknown format mode {}", x)),
@@ -96,15 +112,21 @@ impl FromStr for FormatMode {
     }
 }
 
+impl FormatMode {
+    fn is_none(&self) -> bool {
+        self == &Self::None
+    }
+}
+
 #[derive(Debug, Clone, Default, Deserialize, Eq, PartialEq, Serialize)]
 pub struct StringColumnStyleConfig {
-    #[serde(skip_serializing_if = "Option::is_none")]
+    #[serde(skip_serializing_if = "FormatMode::is_none")]
     #[serde(default)]
-    pub format: Option<FormatMode>,
+    pub format: FormatMode,
 
-    #[serde(skip_serializing_if = "Option::is_none")]
+    #[serde(skip_serializing_if = "StringColorMode::is_none")]
     #[serde(default)]
-    pub string_color_mode: Option<StringColorMode>,
+    pub string_color_mode: StringColorMode,
 
     #[serde(skip_serializing_if = "Option::is_none")]
     #[serde(default)]
diff --git a/rust/perspective-viewer/src/rust/config/viewer_config.rs b/rust/perspective-viewer/src/rust/config/viewer_config.rs
index 362aceb453..c531932b9f 100644
--- a/rust/perspective-viewer/src/rust/config/viewer_config.rs
+++ b/rust/perspective-viewer/src/rust/config/viewer_config.rs
@@ -9,6 +9,8 @@
 // ┃ This file is part of the Perspective library, distributed under the terms ┃
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::collections::HashMap;
 use std::io::{Read, Write};
 use std::str::FromStr;
 use std::sync::LazyLock;
@@ -22,6 +24,8 @@ use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsCast;
 
 use super::view_config::*;
+use super::ColumnConfigValues;
+use crate::presentation::ColumnConfigMap;
 use crate::utils::*;
 
 pub enum ViewerConfigEncoding {
@@ -52,6 +56,7 @@ pub struct ViewerConfig {
     pub version: String,
     pub plugin: String,
     pub plugin_config: Value,
+    pub columns_config: ColumnConfigMap,
     pub settings: bool,
     pub theme: Option<String>,
     pub title: Option<String>,
@@ -64,6 +69,7 @@ pub struct ViewerConfig {
 // struct fields, so make a tuple alternative for serialization in binary.
 type ViewerConfigBinarySerialFormat<'a> = (
     &'a String,
+    &'a ColumnConfigMap,
     &'a String,
     &'a Value,
     bool,
@@ -74,6 +80,7 @@ type ViewerConfigBinarySerialFormat<'a> = (
 
 type ViewerConfigBinaryDeserialFormat = (
     VersionUpdate,
+    ColumnConfigUpdate,
     PluginUpdate,
     Option<Value>,
     SettingsUpdate,
@@ -96,6 +103,7 @@ impl ViewerConfig {
     fn token(&self) -> ViewerConfigBinarySerialFormat<'_> {
         (
             &self.version,
+            &self.columns_config,
             &self.plugin,
             &self.plugin_config,
             self.settings,
@@ -157,16 +165,20 @@ pub struct ViewerConfigUpdate {
     #[serde(default)]
     pub plugin_config: Option<Value>,
 
+    #[serde(default)]
+    pub columns_config: ColumnConfigUpdate,
+
     #[serde(flatten)]
     pub view_config: ViewConfigUpdate,
 }
 
 impl ViewerConfigUpdate {
     fn from_token(
-        (version, plugin, plugin_config, settings, theme, title, view_config): ViewerConfigBinaryDeserialFormat,
+        (version, columns_config, plugin, plugin_config, settings, theme, title, view_config): ViewerConfigBinaryDeserialFormat,
     ) -> ViewerConfigUpdate {
         ViewerConfigUpdate {
             version,
+            columns_config,
             plugin,
             plugin_config,
             settings,
@@ -220,6 +232,7 @@ pub type SettingsUpdate = OptionalUpdate<bool>;
 pub type ThemeUpdate = OptionalUpdate<String>;
 pub type TitleUpdate = OptionalUpdate<String>;
 pub type VersionUpdate = OptionalUpdate<String>;
+pub type ColumnConfigUpdate = OptionalUpdate<HashMap<String, ColumnConfigValues>>;
 
 /// Handles `{}` when included as a field with `#[serde(default)]`.
 impl<T: Clone> Default for OptionalUpdate<T> {
diff --git a/rust/perspective-viewer/src/rust/custom_elements/debug_plugin.rs b/rust/perspective-viewer/src/rust/custom_elements/debug_plugin.rs
index 67ffb9ff7a..905253efd3 100644
--- a/rust/perspective-viewer/src/rust/custom_elements/debug_plugin.rs
+++ b/rust/perspective-viewer/src/rust/custom_elements/debug_plugin.rs
@@ -65,11 +65,6 @@ impl PerspectiveDebugPluginElement {
         JsValue::UNDEFINED
     }
 
-    #[wasm_bindgen(getter)]
-    pub fn plugin_attributes(&self) -> JsValue {
-        js_sys::Object::new().into()
-    }
-
     pub fn update(&self, view: JsPerspectiveView) -> ApiFuture<()> {
         self.draw(view)
     }
diff --git a/rust/perspective-viewer/src/rust/custom_elements/viewer.rs b/rust/perspective-viewer/src/rust/custom_elements/viewer.rs
index 2e34b9a8d4..59178546c3 100644
--- a/rust/perspective-viewer/src/rust/custom_elements/viewer.rs
+++ b/rust/perspective-viewer/src/rust/custom_elements/viewer.rs
@@ -264,6 +264,7 @@ impl PerspectiveViewerElement {
             let ViewerConfigUpdate {
                 plugin,
                 plugin_config,
+                columns_config,
                 settings,
                 theme: theme_name,
                 title,
@@ -322,11 +323,14 @@ impl PerspectiveViewerElement {
 
                 let internal_task = async {
                     let plugin = renderer.get_active_plugin()?;
-                    if let Some(plugin_config) = &plugin_config {
-                        let js_config = JsValue::from_serde_ext(plugin_config)?;
-                        plugin.restore(&js_config);
-                    }
-
+                    let plugin_update = if let Some(x) = plugin_config {
+                        JsValue::from_serde_ext(&x).unwrap()
+                    } else {
+                        plugin.save()
+                    };
+                    presentation.update_columns_configs(columns_config);
+                    let columns_config = presentation.all_columns_configs();
+                    plugin.restore(&plugin_update, Some(&columns_config));
                     session.validate().await?.create_view().await
                 }
                 .await;
@@ -403,7 +407,8 @@ impl PerspectiveViewerElement {
     /// Reset the viewer's `ViewerConfig` to the default.
     ///
     /// # Arguments
-    /// - `all` Whether to clear `expressions` also.
+    /// - `all` If set, will clear expressions and column settings as well.
+    // TODO: We should replace the boolean value here with an options object.
     pub fn reset(&self, reset_expressions: Option<bool>) -> ApiFuture<()> {
         tracing::info!("Resetting config");
         let root = self.root.clone();
diff --git a/rust/perspective-viewer/src/rust/exprtk/tokenize.rs b/rust/perspective-viewer/src/rust/exprtk/tokenize.rs
index 1d53d86027..4605e062c1 100644
--- a/rust/perspective-viewer/src/rust/exprtk/tokenize.rs
+++ b/rust/perspective-viewer/src/rust/exprtk/tokenize.rs
@@ -48,9 +48,7 @@ use Token::*;
 impl<'a> ToHtml for Token<'a> {
     fn to_html(&self) -> Html {
         html! {
-            if matches!(self, Break(_)) {
-                <br />
-            } else {
+            if matches!(self, Break(_)) { <br /> } else {
                 <span class={self.class_name()}>{ self.content() }</span>
             }
         }
diff --git a/rust/perspective-viewer/src/rust/js/plugin.rs b/rust/perspective-viewer/src/rust/js/plugin.rs
index d5af780043..4b64d04bb7 100644
--- a/rust/perspective-viewer/src/rust/js/plugin.rs
+++ b/rust/perspective-viewer/src/rust/js/plugin.rs
@@ -14,6 +14,7 @@ use serde::*;
 use wasm_bindgen::prelude::*;
 
 use super::perspective::JsPerspectiveView;
+use crate::presentation::ColumnConfigMap;
 use crate::utils::*;
 
 /// Perspective FFI
@@ -51,17 +52,21 @@ extern "C" {
     #[wasm_bindgen(method, getter)]
     pub fn config_column_names(this: &JsPerspectiveViewerPlugin) -> Option<js_sys::Array>;
 
-    #[wasm_bindgen(method, getter)]
-    pub fn plugin_attributes(this: &JsPerspectiveViewerPlugin) -> Option<js_sys::Object>;
-
     #[wasm_bindgen(method, getter)]
     pub fn priority(this: &JsPerspectiveViewerPlugin) -> Option<i32>;
 
+    /// Don't call this method directly. Instead, call the corresponding method on the PluginColumnStyles model.
+    #[wasm_bindgen(method, catch)]
+    pub fn can_render_column_styles(this: &JsPerspectiveViewerPlugin, view_type: &str, group: Option<&str>) -> ApiResult<bool>;
+
+    #[wasm_bindgen(method, catch)]
+    pub fn column_style_controls(this: &JsPerspectiveViewerPlugin, view_type: &str, group: Option<&str>) -> ApiResult<JsValue>;
+
     #[wasm_bindgen(method)]
     pub fn save(this: &JsPerspectiveViewerPlugin) -> JsValue;
 
-    #[wasm_bindgen(method)]
-    pub fn restore(this: &JsPerspectiveViewerPlugin, token: &JsValue);
+    #[wasm_bindgen(method, js_name=restore)]
+    pub fn _restore(this: &JsPerspectiveViewerPlugin, token: &JsValue, columns_config: &JsValue);
 
     #[wasm_bindgen(method)]
     pub fn delete(this: &JsPerspectiveViewerPlugin);
@@ -98,6 +103,13 @@ extern "C" {
 
 }
 
+impl JsPerspectiveViewerPlugin {
+    pub fn restore(&self, token: &JsValue, columns_config: Option<&ColumnConfigMap>) {
+        let columns_config = JsValue::from_serde_ext(&columns_config).unwrap();
+        self._restore(token, &columns_config)
+    }
+}
+
 #[derive(Clone, Copy, Debug, Default, Deserialize, Eq, PartialEq)]
 #[serde(rename_all = "camelCase")]
 pub enum ColumnSelectMode {
diff --git a/rust/perspective-viewer/src/rust/model/edit_expression.rs b/rust/perspective-viewer/src/rust/model/edit_expression.rs
index fe56653d1b..e7e538f83b 100644
--- a/rust/perspective-viewer/src/rust/model/edit_expression.rs
+++ b/rust/perspective-viewer/src/rust/model/edit_expression.rs
@@ -48,7 +48,7 @@ pub trait EditExpression: HasPresentation + HasRenderer + HasSession + UpdateAnd
                 .await;
             this.presentation
                 .set_open_column_settings(Some(OpenColumnSettings {
-                    locator: Some(ColumnLocator::Expr(Some(new_expr.name.to_string()))),
+                    locator: Some(ColumnLocator::Expression(new_expr.name.to_string())),
                     tab: Some(ColumnSettingsTab::Attributes),
                 }));
             this.update_and_render(update).await?;
@@ -63,7 +63,7 @@ pub trait EditExpression: HasPresentation + HasRenderer + HasSession + UpdateAnd
             serde_exprs.insert(&expr);
             self.presentation()
                 .set_open_column_settings(Some(OpenColumnSettings {
-                    locator: Some(ColumnLocator::Expr(Some(expr.name.clone().into()))),
+                    locator: Some(ColumnLocator::Expression(expr.name.clone().into())),
                     tab: Some(ColumnSettingsTab::Attributes),
                 }));
             self.update_and_render(ViewConfigUpdate {
diff --git a/rust/perspective-viewer/src/rust/model/export_method.rs b/rust/perspective-viewer/src/rust/model/export_method.rs
index db723d1e81..486851858b 100644
--- a/rust/perspective-viewer/src/rust/model/export_method.rs
+++ b/rust/perspective-viewer/src/rust/model/export_method.rs
@@ -54,7 +54,7 @@ impl ExportMethod {
 
 impl From<ExportMethod> for Html {
     fn from(x: ExportMethod) -> Self {
-        html! { <code >{ x.as_filename() }</code> }
+        html! { <code>{ x.as_filename() }</code> }
     }
 }
 
diff --git a/rust/perspective-viewer/src/rust/model/get_viewer_config.rs b/rust/perspective-viewer/src/rust/model/get_viewer_config.rs
index 7faafc446b..8a892a0d1a 100644
--- a/rust/perspective-viewer/src/rust/model/get_viewer_config.rs
+++ b/rust/perspective-viewer/src/rust/model/get_viewer_config.rs
@@ -52,11 +52,13 @@ pub trait GetViewerConfigModel: HasSession + HasRenderer + HasPresentation {
             let plugin_config: serde_json::Value = js_plugin.save().into_serde_ext()?;
             let theme = presentation.get_selected_theme_name().await;
             let title = presentation.get_title();
+            let columns_config = presentation.all_columns_configs();
             Ok(ViewerConfig {
                 version,
                 plugin,
                 title,
                 plugin_config,
+                columns_config,
                 settings,
                 view_config,
                 theme,
diff --git a/rust/perspective-viewer/src/rust/model/mod.rs b/rust/perspective-viewer/src/rust/model/mod.rs
index 3a740b566e..59b2a3ea30 100644
--- a/rust/perspective-viewer/src/rust/model/mod.rs
+++ b/rust/perspective-viewer/src/rust/model/mod.rs
@@ -73,7 +73,7 @@ mod export_method;
 mod get_viewer_config;
 mod intersection_observer;
 mod is_invalid_drop;
-mod plugin_config;
+mod plugin_column_styles;
 mod resize_observer;
 mod structural;
 mod update_and_render;
@@ -85,7 +85,7 @@ pub use self::export_method::*;
 pub use self::get_viewer_config::*;
 pub use self::intersection_observer::*;
 pub use self::is_invalid_drop::*;
-pub use self::plugin_config::*;
+pub use self::plugin_column_styles::*;
 pub use self::resize_observer::*;
 pub use self::structural::*;
 pub use self::update_and_render::*;
diff --git a/rust/perspective-viewer/src/rust/model/plugin_column_styles.rs b/rust/perspective-viewer/src/rust/model/plugin_column_styles.rs
new file mode 100644
index 0000000000..441cfd247c
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/model/plugin_column_styles.rs
@@ -0,0 +1,105 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use itertools::Itertools;
+
+use super::{HasRenderer, HasSession};
+use crate::config::ColumnStyleOpts;
+use crate::derive_model;
+use crate::renderer::Renderer;
+use crate::session::Session;
+use crate::utils::ApiResult;
+
+/// TODO: This pattern of creating query objects to pass around would be
+/// redundant if we had a grab-bag of models to clone around.
+/// We could easily generate all the needed types for this in a proc_macro
+/// crate. e.g. create structs like `SessionAndRendererModel {session,
+/// renderer}` which are then called through a proc_macro like
+/// `get_model!(Session, Renderer for self)` where the function is defined as
+/// `get_model! => {($($name:ty),+ for $owner:ident)}`
+///
+/// Or, we could just lump
+/// all the state into a single object where all these model functions are
+/// defined. Generally, we could keep the hub-and-spoke architecture "under the
+/// hood", but just not expose it to the yew framework, since it requires a lot
+/// of unecessary prop-drilling and complexity.
+#[derive(Clone)]
+pub struct PluginColumnStylesQuery {
+    session: Session,
+    renderer: Renderer,
+}
+derive_model!(Session, Renderer for PluginColumnStylesQuery);
+
+pub trait PluginColumnStyles: HasSession + HasRenderer {
+    fn get_plugin_column_styles_query(&self) -> PluginColumnStylesQuery {
+        PluginColumnStylesQuery {
+            session: self.session().clone(),
+            renderer: self.renderer().clone(),
+        }
+    }
+
+    /// This function will query the plugin to see if a given column can render
+    /// column styles.
+    fn can_render_column_styles(&self, column_name: &str) -> ApiResult<bool> {
+        let plugin = self.renderer().get_active_plugin()?;
+        let names: Vec<String> = plugin
+            .config_column_names()
+            .and_then(|jsarr| serde_wasm_bindgen::from_value(jsarr.into()).ok())
+            .unwrap_or_default();
+
+        let group = self
+            .session()
+            .get_view_config()
+            .columns
+            .iter()
+            .find_position(|maybe_s| maybe_s.as_deref() == Some(column_name))
+            .and_then(|(idx, _)| names.get(idx))
+            .map(|s| s.as_str());
+
+        let view_type = self
+            .session()
+            .metadata()
+            .get_column_view_type(column_name)
+            .ok_or("Invalid column")?;
+
+        plugin.can_render_column_styles(&view_type.to_string(), group)
+    }
+
+    /// Queries the plugins for the available plugin components.
+    fn get_column_style_control_options(&self, column_name: &str) -> ApiResult<ColumnStyleOpts> {
+        let plugin = self.renderer().get_active_plugin()?;
+        let names: Vec<String> = plugin
+            .config_column_names()
+            .and_then(|jsarr| serde_wasm_bindgen::from_value(jsarr.into()).ok())
+            .unwrap_or_default();
+
+        let group = self
+            .session()
+            .get_view_config()
+            .columns
+            .iter()
+            .find_position(|maybe_s| maybe_s.as_deref() == Some(column_name))
+            .and_then(|(idx, _)| names.get(idx))
+            .map(|s| s.as_str());
+
+        let view_type = self
+            .session()
+            .metadata()
+            .get_column_view_type(column_name)
+            .ok_or("Invalid column")?;
+
+        let controls = plugin.column_style_controls(&view_type.to_string(), group)?;
+        serde_wasm_bindgen::from_value(controls).map_err(|e| e.into())
+    }
+}
+
+impl<T: HasSession + HasRenderer> PluginColumnStyles for T {}
diff --git a/rust/perspective-viewer/src/rust/model/plugin_config.rs b/rust/perspective-viewer/src/rust/model/plugin_config.rs
deleted file mode 100644
index fc3e35cbea..0000000000
--- a/rust/perspective-viewer/src/rust/model/plugin_config.rs
+++ /dev/null
@@ -1,81 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-use serde::de::DeserializeOwned;
-use wasm_bindgen::JsValue;
-
-use super::{HasCustomEvents, HasRenderer, HasSession};
-use crate::clone;
-use crate::config::plugin::{PluginAttributes, PluginConfig};
-use crate::utils::{ApiFuture, JsValueSerdeExt};
-
-pub trait GetPluginConfig: HasRenderer {
-    /// This function will get the results of calling plugin.save()
-    fn get_plugin_config(&self) -> Option<PluginConfig> {
-        let plugin = self.renderer().get_active_plugin().unwrap();
-        let config = plugin.save();
-        jsval_to_type(&config).ok()
-    }
-    /// This function will get the results of calling plugin.plugin_attrs.
-    /// Plugin attrs should not change during the lifetime of the plugin.
-    fn get_plugin_attrs(&self) -> Option<PluginAttributes> {
-        let plugin = self.renderer().get_active_plugin().unwrap();
-        let default_config = JsValue::from(plugin.plugin_attributes());
-        jsval_to_type(&default_config).ok()
-    }
-}
-
-impl<T: HasRenderer> GetPluginConfig for T {}
-
-pub trait UpdatePluginConfig: HasRenderer + HasCustomEvents + HasSession + GetPluginConfig {
-    /// This function sends the config to the plugin using its `restore` method.
-    /// It will also send a config update event in case we need to listen for it
-    /// outside of the viewer
-    fn send_plugin_config(&self, column_name: String, mut column_config: serde_json::Value) {
-        let custom_events = self.custom_events();
-        let renderer = self.renderer();
-        let elem = renderer.get_active_plugin().unwrap();
-        if let Some(mut current_config) = self.get_plugin_config() {
-            if let Some(config) = current_config.columns.get(&column_name) {
-                let obj = config.as_object().unwrap();
-                if let Some(val) = obj.get("column_size_override") {
-                    column_config
-                        .as_object_mut()
-                        .unwrap()
-                        .insert("column_size_override".to_string(), val.clone());
-                }
-            }
-
-            current_config.columns.insert(column_name, column_config);
-            let js_config = JsValue::from_serde_ext(&current_config).unwrap();
-            elem.restore(&js_config);
-            let session = self.session().clone();
-            clone!(renderer);
-            ApiFuture::spawn(async move { renderer.update(&session).await });
-            custom_events.dispatch_column_style_changed(&js_config)
-        } else {
-            tracing::warn!("Could not restore and restyle plugin!");
-        }
-    }
-}
-
-/// This function will convert a JsValue to a rust-native type. It uses
-/// serde_json to do this, so use it with caution!
-fn jsval_to_type<T: DeserializeOwned>(val: &JsValue) -> Result<T, serde_json::Error> {
-    let stringval = js_sys::JSON::stringify(val)
-        .ok()
-        .and_then(|s| s.as_string())
-        .unwrap_or_default();
-    serde_json::from_str(&stringval)
-}
-
-impl<T: HasRenderer + HasCustomEvents + HasSession> UpdatePluginConfig for T {}
diff --git a/rust/perspective-viewer/src/rust/presentation.rs b/rust/perspective-viewer/src/rust/presentation.rs
index 45b95881cd..2cdc652f6d 100644
--- a/rust/perspective-viewer/src/rust/presentation.rs
+++ b/rust/perspective-viewer/src/rust/presentation.rs
@@ -11,6 +11,7 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 use std::cell::RefCell;
+use std::collections::HashMap;
 use std::ops::Deref;
 use std::rc::Rc;
 
@@ -22,6 +23,7 @@ use yew::html::ImplicitClone;
 
 use crate::components::column_settings_sidebar::ColumnSettingsTab;
 use crate::components::viewer::ColumnLocator;
+use crate::config::{ColumnConfigUpdate, ColumnConfigValueUpdate, ColumnConfigValues};
 use crate::utils::*;
 
 /// The available themes as detected in the browser environment or set
@@ -61,6 +63,7 @@ impl OpenColumnSettings {
     }
 }
 
+pub type ColumnConfigMap = HashMap<String, ColumnConfigValues>;
 pub struct PresentationHandle {
     viewer_elem: HtmlElement,
     theme_data: Mutex<ThemeData>,
@@ -68,6 +71,7 @@ pub struct PresentationHandle {
     is_settings_open: RefCell<bool>,
     open_column_settings: RefCell<OpenColumnSettings>,
     is_workspace: RefCell<Option<bool>>,
+    columns_config: RefCell<ColumnConfigMap>,
     pub settings_open_changed: PubSub<bool>,
     pub column_settings_open_changed: PubSub<(bool, Option<String>)>,
     pub column_settings_updated: PubSub<JsValue>,
@@ -89,6 +93,7 @@ impl Presentation {
             settings_open_changed: Default::default(),
             column_settings_open_changed: Default::default(),
             column_settings_updated: Default::default(),
+            columns_config: Default::default(),
             is_settings_open: Default::default(),
             is_workspace: Default::default(),
             open_column_settings: Default::default(),
@@ -229,6 +234,51 @@ impl Presentation {
         self.theme_config_updated.emit((themes, index));
         Ok(())
     }
+
+    /// Returns an owned copy of the curent column configuration map.
+    pub fn all_columns_configs(&self) -> ColumnConfigMap {
+        self.columns_config.borrow().clone()
+    }
+
+    pub fn reset_columns_configs(&self) {
+        *self.columns_config.borrow_mut() = ColumnConfigMap::new();
+    }
+
+    /// Gets a clone of the ColumnConfig for the given column name.
+    pub fn get_columns_config(&self, column_name: &str) -> Option<ColumnConfigValues> {
+        self.columns_config.borrow().get(column_name).cloned()
+    }
+
+    /// Updates the entire column config struct. (like from a restore() call)
+    pub fn update_columns_configs(&self, update: ColumnConfigUpdate) {
+        match update {
+            crate::config::OptionalUpdate::SetDefault => {
+                let mut config = self.columns_config.borrow_mut();
+                *config = HashMap::default()
+            },
+            crate::config::OptionalUpdate::Missing => {},
+            crate::config::OptionalUpdate::Update(update) => {
+                for (col_name, new_config) in update.into_iter() {
+                    self.columns_config
+                        .borrow_mut()
+                        .insert(col_name, new_config);
+                }
+            },
+        }
+    }
+
+    pub fn update_columns_config_value(
+        &self,
+        column_name: String,
+        update: ColumnConfigValueUpdate,
+    ) {
+        let mut config = self.columns_config.borrow_mut();
+        let value = config.remove(&column_name).unwrap_or_default();
+        let update = value.update(update);
+        if !update.is_empty() {
+            config.insert(column_name, update);
+        }
+    }
 }
 
 macro_rules! iter_index {
diff --git a/rust/perspective-viewer/src/rust/renderer.rs b/rust/perspective-viewer/src/rust/renderer.rs
index 36214d5d89..3afe2c8a19 100644
--- a/rust/perspective-viewer/src/rust/renderer.rs
+++ b/rust/perspective-viewer/src/rust/renderer.rs
@@ -44,9 +44,10 @@ use self::render_timer::*;
 use crate::config::*;
 use crate::js::perspective::*;
 use crate::js::plugin::*;
+use crate::json;
+use crate::presentation::ColumnConfigMap;
 use crate::session::*;
 use crate::utils::*;
-use crate::*;
 
 #[derive(Clone)]
 pub struct Renderer(Rc<RendererData>);
@@ -116,10 +117,10 @@ impl Renderer {
         }))
     }
 
-    pub async fn reset(&self) {
+    pub async fn reset(&self, columns_config: Option<&ColumnConfigMap>) {
         self.0.borrow_mut().plugins_idx = None;
         if let Ok(plugin) = self.get_active_plugin() {
-            plugin.restore(&json!({}));
+            plugin.restore(&json!({}), columns_config);
         }
     }
 
diff --git a/rust/perspective-viewer/src/rust/session/metadata.rs b/rust/perspective-viewer/src/rust/session/metadata.rs
index a1d52f64aa..7beed297a7 100644
--- a/rust/perspective-viewer/src/rust/session/metadata.rs
+++ b/rust/perspective-viewer/src/rust/session/metadata.rs
@@ -193,11 +193,11 @@ impl SessionMetadata {
         name.and_then(|name| {
             self.as_ref().and_then(|meta| {
                 if self.is_column_expression(&name) {
-                    Some(ColumnLocator::Expr(Some(name)))
+                    Some(ColumnLocator::Expression(name))
                 } else {
                     meta.column_names
                         .iter()
-                        .find_map(|n| (n == &name).then_some(ColumnLocator::Plain(name.clone())))
+                        .find_map(|n| (n == &name).then_some(ColumnLocator::Table(name.clone())))
                 }
             })
         })
diff --git a/rust/perspective-viewer/src/rust/utils/mod.rs b/rust/perspective-viewer/src/rust/utils/mod.rs
index 283c789ec5..f22d2b7f34 100644
--- a/rust/perspective-viewer/src/rust/utils/mod.rs
+++ b/rust/perspective-viewer/src/rust/utils/mod.rs
@@ -25,6 +25,7 @@ mod debounce;
 mod errors;
 mod futures;
 mod json;
+mod number_format;
 mod pubsub;
 mod scope;
 mod serde;
@@ -42,6 +43,7 @@ pub use custom_element::*;
 pub use datetime::*;
 pub use debounce::*;
 pub use errors::*;
+pub use number_format::*;
 pub use pubsub::*;
 pub use scope::*;
 pub use tee::*;
diff --git a/rust/perspective-viewer/src/rust/utils/number_format.rs b/rust/perspective-viewer/src/rust/utils/number_format.rs
new file mode 100644
index 0000000000..5616d4961c
--- /dev/null
+++ b/rust/perspective-viewer/src/rust/utils/number_format.rs
@@ -0,0 +1,49 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::sync::LazyLock;
+
+use js_sys::Intl;
+use wasm_bindgen::JsValue;
+
+use super::global::navigator;
+use crate::json;
+
+pub trait ToFormattedString {
+    fn to_formatted_string(&self) -> String;
+}
+
+struct UnsafeNumberFormat(Intl::NumberFormat);
+
+unsafe impl Send for UnsafeNumberFormat {}
+unsafe impl Sync for UnsafeNumberFormat {}
+
+static NUMBER_FORMAT: LazyLock<UnsafeNumberFormat> = LazyLock::new(|| {
+    let locale = navigator().languages();
+    let opts = json!({});
+    let number_format = Intl::NumberFormat::new(&locale, &opts);
+    UnsafeNumberFormat(number_format)
+});
+
+impl UnsafeNumberFormat {}
+
+impl ToFormattedString for u32 {
+    fn to_formatted_string(&self) -> String {
+        NUMBER_FORMAT
+            .0
+            .format()
+            .call1(&NUMBER_FORMAT.0, &JsValue::from_f64(*self as f64))
+            .unwrap()
+            .as_string()
+            .unwrap()
+    }
+}
diff --git a/rust/perspective-viewer/src/svg/close-icon.svg b/rust/perspective-viewer/src/svg/close-icon.svg
new file mode 100644
index 0000000000..054d536d27
--- /dev/null
+++ b/rust/perspective-viewer/src/svg/close-icon.svg
@@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line y1="-0.5" x2="13.4536" y2="-0.5" transform="matrix(0.668965 0.743294 -0.668965 0.743294 6 6)"
+        stroke="#042121" />
+    <line y1="-0.5" x2="13.4536" y2="-0.5" transform="matrix(-0.668965 0.743294 0.668965 0.743294 16 6)"
+        stroke="#042121" />
+</svg>
\ No newline at end of file
diff --git a/rust/perspective-viewer/src/themes/icons.less b/rust/perspective-viewer/src/themes/icons.less
index 8d8bb1171c..08fc6ba2cc 100644
--- a/rust/perspective-viewer/src/themes/icons.less
+++ b/rust/perspective-viewer/src/themes/icons.less
@@ -20,7 +20,6 @@ perspective-number-column-style,
 perspective-string-column-style {
     @include perspective-viewer-base--icons;
     @include perspective-viewer-base--colors;
-    @include perspective-viewer-base--intl;
     @include perspective-viewer-base--datagrid;
 }
 
@@ -28,8 +27,8 @@ perspective-string-column-style {
     color: #161616;
     background-color: transparent;
     --icon--color: #161616;
-    --inactive--color: #ABABAB;
-    --inactive--border-color: #DADADA;
+    --inactive--color: #ababab;
+    --inactive--border-color: #dadada;
 
     --root--background: #ffffff;
     --active--color: #2670a9;
@@ -39,10 +38,10 @@ perspective-string-column-style {
     --select--background-color: none;
     --column-drop-container--background: none;
     --warning--background: #042121;
-    --warning--color: #FDFFFD;
+    --warning--color: #fdfffd;
 
     // TODO deprecate me
-    --overflow-hint-icon--color: #FDFFFD;
+    --overflow-hint-icon--color: #fdfffd;
 }
 
 @mixin perspective-viewer-base--icons {
@@ -51,14 +50,14 @@ perspective-string-column-style {
     --column-type-string--mask-image: url("../svg/string-type.svg");
     --column-type-date--mask-image: url("../svg/date-type.svg");
     --column-type-boolean--mask-image: url("../svg/boolean-type.svg");
-    --column-type-datetime--mask-image:  var(--column-type-date--mask-image);
+    --column-type-datetime--mask-image: var(--column-type-date--mask-image);
     --column-drag-handle--mask-image: url("../svg/drag-handle.svg");
     --column-radio-on--mask-image: url("../svg/radio-on.svg");
-    --column-radio-hover--mask-image:  url("../svg/radio-hover.svg");
-    --column-radio-off--mask-image:  url("../svg/radio-off.svg");
+    --column-radio-hover--mask-image: url("../svg/radio-hover.svg");
+    --column-radio-off--mask-image: url("../svg/radio-off.svg");
     --column-checkbox-on--mask-image: url("../svg/checkbox-on.svg");
-    --column-checkbox-hover--mask-image:  url("../svg/checkbox-hover.svg");
-    --column-checkbox-off--mask-image:  url("../svg/checkbox-off.svg");
+    --column-checkbox-hover--mask-image: url("../svg/checkbox-hover.svg");
+    --column-checkbox-off--mask-image: url("../svg/checkbox-off.svg");
     --column-settings-icon--mask-image: url("../svg/column-settings-icon.svg");
     --sort-asc-icon--mask-image: url("../svg/sort-asc-icon.svg");
     --sort-desc-icon--mask-image: url("../svg/sort-desc-icon.svg");
@@ -70,21 +69,12 @@ perspective-string-column-style {
     --sort-abs-col-desc-icon--mask-image: url("../svg/sort-abs-col-desc-icon.svg");
     --sort-none-icon--mask-image: url("../svg/sort-none-icon.svg");
     --add-expression-icon--mask-image: url("../svg/expression.svg");
-}
-
-@mixin perspective-viewer-base--intl {
-    // Query overlay labels
-    --group_by--content: "Group By";
-    --split_by--content: "Split By";
-
-    // Icons
-    --inactive-column-selector--content:  url("../svg/checkbox-unchecked-icon.svg");
-    --active-column-selector--content:  url("../svg/checkbox-checked-icon.svg");
+    --close-icon--mask-image: url("../svg/close-icon.svg");
+    --inactive-column-selector--content: url("../svg/checkbox-unchecked-icon.svg");
+    --active-column-selector--content: url("../svg/checkbox-checked-icon.svg");
     --overflow-hint-icon--content: "!";
     --reset-button-icon--content: "refresh";
     --save-button-icon--content: "save";
-    --transpose-button--content: "Swap";
-    --config-button-icon--content: "configure";
 }
 
 @mixin perspective-viewer-base--datagrid {
@@ -93,9 +83,8 @@ perspective-string-column-style {
     --column-style-close-button--content: ">\00a0 style";
     --tree-label-collapse--content: "-";
     --tree-label-expand--content: "+";
-    --toolbar-scroll-lock--content:  url("../svg/free-scroll-icon.svg");
-    --toolbar-scroll-lock-active--content:  url("../svg/align-scroll-icon.svg");
+    --toolbar-scroll-lock--content: url("../svg/free-scroll-icon.svg");
+    --toolbar-scroll-lock-active--content: url("../svg/align-scroll-icon.svg");
     --toolbar-edit-mode--content: url("../svg/read-only-icon.svg");
-    --toolbar-edit-mode-active--content:  url("../svg/editable-icon.svg");
+    --toolbar-edit-mode-active--content: url("../svg/editable-icon.svg");
 }
-
diff --git a/rust/perspective-viewer/src/themes/intl.less b/rust/perspective-viewer/src/themes/intl.less
new file mode 100644
index 0000000000..8a2d83c8ec
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "Group By";
+    --split-by-label--content: "Split By";
+    --sort-label--content: "Order By";
+    --filter-label--content: "Where";
+    --transpose-button--content: "Swap";
+    --config-button-icon--content: "configure";
+    --all-columns-label--content: "All Columns";
+    --untitled--content: "untitled";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "Datagrid";
+    --plugin-name-treemap--content: "Treemap";
+    --plugin-name-sunburst--content: "Sunburst";
+    --plugin-name-heatmap--content: "Heatmap";
+    --plugin-name-x-bar--content: "X Bar";
+    --plugin-name-y-bar--content: "Y Bar";
+    --plugin-name-y-line--content: "Y Line";
+    --plugin-name-x-y-line--content: "X/Y Line";
+    --plugin-name-x-y-scatter--content: "X/Y Scatter";
+    --plugin-name-y-scatter--content: "Y Scatter";
+    --plugin-name-y-area--content: "Y Area";
+    --plugin-name-ohlc--content: "OHLC";
+    --plugin-name-candlestick--content: "Candlestick";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "Columns";
+    --column-selector-column-x-axis--content: "X Axis";
+    --column-selector-column-y-axis--content: "Y Axis";
+    --column-selector-column-color--content: "Color";
+    --column-selector-column-size--content: "Size";
+    --column-selector-column-symbol--content: "Symbol";
+    --column-selector-column-label--content: "Label";
+    --column-selector-column-tooltip--content: "Tooltip";
+    --add-expression-button--content: "New Column";
+
+    // Toolbar
+    --no-results--content: "Invalid Column";
+    --datagrid-column-edit-button--content: "Edit";
+    --copy-button--content: "Copy";
+    --export-button--content: "Export";
+    --reset-button--content: "Reset";
+    --edit-mode-toggle--content: "Read Only";
+    --edit-mode-alt-toggle--content: "Editbale";
+    --scroll-lock-toggle--content: "Free Scroll";
+    --scroll-lock-alt-toggle--content: "Align Scroll";
+
+    // Column Settings
+    --color-label--content: "Color";
+    --format-label--content: "Format";
+    --timezone-label--content: "Timezone";
+    --date-style-label--content: "Date Style";
+    --time-style-label--content: "Time Style";
+    --foreground-label--content: "Foreground";
+    --background-label--content: "Background";
+    --series-label--content: "Series";
+    --color-range-label--content: "Color Range";
+    --style-label--content: "Style";
+    --minimum-integer-digits-label--content: "Minimum Integer Digits";
+    --rounding-increment-label--content: "Rounding Increment";
+    --notation-label--content: "Notation";
+    --use-grouping-label--content: "Use Grouping";
+    --sign-display-label--content: "Sign Display";
+    --max-value-label--content: "Max Value";
+    --rounding-priority-label--content: "Rounding Priority";
+    --rounding-mode-label--content: "Rounding Mode";
+    --trailing-zero-display-label--content: "Trailing Zero Display";
+    --fractional-digits-label--content: "Fractional Digits";
+    --significant-digits-label--content: "Significant Digits";
+    --year-label--content: "Year";
+    --month-label--content: "Month";
+    --day-label--content: "Day";
+    --weekday-label--content: "Weekday";
+    --hour-label--content: "Hour";
+    --minute-label--content: "Minute";
+    --second-label--content: "Second";
+    --fractional-seconds-label--content: "Fractional Seconds";
+    --hours-label--content: "12/24 Hours";
+
+    // Tabs
+    --style-tab-label--content: "Style";
+    --attributes-tab-label--content: "Attributes";
+}
diff --git a/rust/perspective-viewer/src/themes/intl/de.less b/rust/perspective-viewer/src/themes/intl/de.less
new file mode 100644
index 0000000000..dc55fe0687
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl/de.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "Gruppiere nach";
+    --split-by-label--content: "Geteilt nach";
+    --sort-label--content: "Sortieren nach";
+    --filter-label--content: "Wo";
+    --transpose-button--content: "Tauschen";
+    --config-button-icon--content: "Konfigurieren";
+    --all-columns-label--content: "Alle Spalten";
+    --untitled--content: "Ohne Titel";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "Datengitter";
+    --plugin-name-treemap--content: "Baumkarte";
+    --plugin-name-sunburst--content: "Sonnendurchbruch";
+    --plugin-name-heatmap--content: "Heatmap";
+    --plugin-name-x-bar--content: "X-Bar";
+    --plugin-name-y-bar--content: "Und Bar";
+    --plugin-name-y-line--content: "und Linie";
+    --plugin-name-x-y-line--content: "X/Y-Linie";
+    --plugin-name-x-y-scatter--content: "X/Y-Streuung";
+    --plugin-name-y-scatter--content: "Y-Scatter";
+    --plugin-name-y-area--content: "und Bereich";
+    --plugin-name-ohlc--content: "Autsch";
+    --plugin-name-candlestick--content: "Leuchter";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "Säulen";
+    --column-selector-column-x-axis--content: "X-Achse";
+    --column-selector-column-y-axis--content: "Y-Achse";
+    --column-selector-column-color--content: "Farbe";
+    --column-selector-column-size--content: "Größe";
+    --column-selector-column-symbol--content: "Symbol";
+    --column-selector-column-label--content: "Etikett";
+    --column-selector-column-tooltip--content: "Tooltip";
+    --add-expression-button--content: "Neue Spalte";
+
+    // Toolbar
+    --no-results--content: "Ungültige Spalte";
+    --datagrid-column-edit-button--content: "Bearbeiten";
+    --copy-button--content: "Kopieren";
+    --export-button--content: "Export";
+    --reset-button--content: "Zurücksetzen";
+    --edit-mode-toggle--content: "Schreibgeschützt";
+    --edit-mode-alt-toggle--content: "Editbale";
+    --scroll-lock-toggle--content: "Kostenlose Schriftrolle";
+    --scroll-lock-alt-toggle--content: "Bildlauf ausrichten";
+
+    // Column Settings
+    --color-label--content: "Farbe";
+    --format-label--content: "Format";
+    --timezone-label--content: "Zeitzone";
+    --date-style-label--content: "Datumsstil";
+    --time-style-label--content: "Zeitstil";
+    --foreground-label--content: "Vordergrund";
+    --background-label--content: "Hintergrund";
+    --series-label--content: "Serie";
+    --color-range-label--content: "Farbspektrum";
+    --style-label--content: "Stil";
+    --minimum-integer-digits-label--content: "Mindestanzahl ganzzahliger Ziffern";
+    --rounding-increment-label--content: "Rundungsinkrement";
+    --notation-label--content: "Notation";
+    --use-grouping-label--content: "Verwenden Sie Gruppierung";
+    --sign-display-label--content: "Schilderanzeige";
+    --max-value-label--content: "Maximaler Wert";
+    --rounding-priority-label--content: "Rundungspriorität";
+    --rounding-mode-label--content: "Rundungsmodus";
+    --trailing-zero-display-label--content: "Anzeige der nachgestellten Null";
+    --fractional-digits-label--content: "Bruchstellen";
+    --significant-digits-label--content: "Wichtige Ziffer";
+    --year-label--content: "Jahr";
+    --month-label--content: "Monat";
+    --day-label--content: "Tag";
+    --weekday-label--content: "Wochentag";
+    --hour-label--content: "Stunde";
+    --minute-label--content: "Minute";
+    --second-label--content: "Zweite";
+    --fractional-seconds-label--content: "Sekundenbruchteile";
+    --hours-label--content: "12/24 Stunden";
+
+    // Tabs
+    --style-tab-label--content: "Stil";
+    --attributes-tab-label--content: "Attribute";
+}
diff --git a/rust/perspective-viewer/src/themes/intl/es.less b/rust/perspective-viewer/src/themes/intl/es.less
new file mode 100644
index 0000000000..1c92088ce2
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl/es.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "Agrupar por";
+    --split-by-label--content: "Dividir por";
+    --sort-label--content: "Ordenar por";
+    --filter-label--content: "Dónde";
+    --transpose-button--content: "Intercambio";
+    --config-button-icon--content: "Configurar";
+    --all-columns-label--content: "Todas las columnas";
+    --untitled--content: "Intitulado";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "Cuadrícula de datos";
+    --plugin-name-treemap--content: "Mapa de árbol";
+    --plugin-name-sunburst--content: "resplandor solar";
+    --plugin-name-heatmap--content: "Mapa de calor";
+    --plugin-name-x-bar--content: "Barra X";
+    --plugin-name-y-bar--content: "Y Bar";
+    --plugin-name-y-line--content: "Y Line";
+    --plugin-name-x-y-line--content: "Línea X/Y";
+    --plugin-name-x-y-scatter--content: "Dispersión X/Y";
+    --plugin-name-y-scatter--content: "Dispersión Y";
+    --plugin-name-y-area--content: "Y Area";
+    --plugin-name-ohlc--content: "Ay";
+    --plugin-name-candlestick--content: "Candelero";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "columnas";
+    --column-selector-column-x-axis--content: "Eje X";
+    --column-selector-column-y-axis--content: "Y Axis";
+    --column-selector-column-color--content: "Color";
+    --column-selector-column-size--content: "Tamaño";
+    --column-selector-column-symbol--content: "Símbolo";
+    --column-selector-column-label--content: "Etiqueta";
+    --column-selector-column-tooltip--content: "Información sobre herramientas";
+    --add-expression-button--content: "Nueva columna";
+
+    // Toolbar
+    --no-results--content: "Columna no válida";
+    --datagrid-column-edit-button--content: "Editar";
+    --copy-button--content: "Copiar";
+    --export-button--content: "Exportar";
+    --reset-button--content: "Reiniciar";
+    --edit-mode-toggle--content: "Solo lectura";
+    --edit-mode-alt-toggle--content: "Editable";
+    --scroll-lock-toggle--content: "Desplazamiento libre";
+    --scroll-lock-alt-toggle--content: "Alinear desplazamiento";
+
+    // Column Settings
+    --color-label--content: "Color";
+    --format-label--content: "Formato";
+    --timezone-label--content: "Zona horaria";
+    --date-style-label--content: "Estilo de fecha";
+    --time-style-label--content: "Estilo de hora";
+    --foreground-label--content: "Primer plano";
+    --background-label--content: "Fondo";
+    --series-label--content: "Serie";
+    --color-range-label--content: "Gama de colores";
+    --style-label--content: "Estilo";
+    --minimum-integer-digits-label--content: "Dígitos enteros mínimos";
+    --rounding-increment-label--content: "Incremento de redondeo";
+    --notation-label--content: "Notación";
+    --use-grouping-label--content: "Usar agrupación";
+    --sign-display-label--content: "Visualización de letreros";
+    --max-value-label--content: "Valor máximo";
+    --rounding-priority-label--content: "Prioridad de redondeo";
+    --rounding-mode-label--content: "Modo de redondeo";
+    --trailing-zero-display-label--content: "Visualización del cero final";
+    --fractional-digits-label--content: "Dígitos fraccionarios";
+    --significant-digits-label--content: "Dígitos significantes";
+    --year-label--content: "Año";
+    --month-label--content: "Mes";
+    --day-label--content: "Día";
+    --weekday-label--content: "Día laborable";
+    --hour-label--content: "Hora";
+    --minute-label--content: "Minuto";
+    --second-label--content: "Segundo";
+    --fractional-seconds-label--content: "Segundos fraccionarios";
+    --hours-label--content: "12/24 Horas";
+
+    // Tabs
+    --style-tab-label--content: "Estilo";
+    --attributes-tab-label--content: "Atributos";
+}
diff --git a/rust/perspective-viewer/src/themes/intl/fr.less b/rust/perspective-viewer/src/themes/intl/fr.less
new file mode 100644
index 0000000000..36f5472716
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl/fr.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "Par groupe";
+    --split-by-label--content: "Divisé par";
+    --sort-label--content: "Commandé par";
+    --filter-label--content: "Où";
+    --transpose-button--content: "Échanger";
+    --config-button-icon--content: "Configurer";
+    --all-columns-label--content: "Toutes les colonnes";
+    --untitled--content: "Sans titre";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "Grille de données";
+    --plugin-name-treemap--content: "Treemap";
+    --plugin-name-sunburst--content: "Coup de soleil";
+    --plugin-name-heatmap--content: "Carte de chaleur";
+    --plugin-name-x-bar--content: "Barre X";
+    --plugin-name-y-bar--content: "Et le bar";
+    --plugin-name-y-line--content: "et ligne";
+    --plugin-name-x-y-line--content: "Ligne X/Y";
+    --plugin-name-x-y-scatter--content: "Dispersion X/Y";
+    --plugin-name-y-scatter--content: "Dispersion Y";
+    --plugin-name-y-area--content: "et la superficie";
+    --plugin-name-ohlc--content: "Aie";
+    --plugin-name-candlestick--content: "Chandelier";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "Colonnes";
+    --column-selector-column-x-axis--content: "Axe X";
+    --column-selector-column-y-axis--content: "Axe Y";
+    --column-selector-column-color--content: "Couleur";
+    --column-selector-column-size--content: "Taille";
+    --column-selector-column-symbol--content: "Symbole";
+    --column-selector-column-label--content: "Étiquette";
+    --column-selector-column-tooltip--content: "Info-bulle";
+    --add-expression-button--content: "Nouvelle colonne";
+
+    // Toolbar
+    --no-results--content: "Colonne invalide";
+    --datagrid-column-edit-button--content: "Modifier";
+    --copy-button--content: "Copie";
+    --export-button--content: "Exporter";
+    --reset-button--content: "Réinitialiser";
+    --edit-mode-toggle--content: "Lecture seulement";
+    --edit-mode-alt-toggle--content: "Editbale";
+    --scroll-lock-toggle--content: "Défilement gratuit";
+    --scroll-lock-alt-toggle--content: "Aligner le défilement";
+
+    // Column Settings
+    --color-label--content: "Couleur";
+    --format-label--content: "Format";
+    --timezone-label--content: "Fuseau horaire";
+    --date-style-label--content: "Style de date";
+    --time-style-label--content: "Style temporel";
+    --foreground-label--content: "Premier plan";
+    --background-label--content: "Arrière-plan";
+    --series-label--content: "Série";
+    --color-range-label--content: "Gamme de couleurs";
+    --style-label--content: "Style";
+    --minimum-integer-digits-label--content: "Chiffres entiers minimaux";
+    --rounding-increment-label--content: "Incrément d'arrondi";
+    --notation-label--content: "Notation";
+    --use-grouping-label--content: "Utiliser le regroupement";
+    --sign-display-label--content: "Affichage des panneaux";
+    --max-value-label--content: "Valeur max";
+    --rounding-priority-label--content: "Priorité d'arrondi";
+    --rounding-mode-label--content: "Mode d'arrondi";
+    --trailing-zero-display-label--content: "Affichage du zéro final";
+    --fractional-digits-label--content: "Chiffres fractionnaires";
+    --significant-digits-label--content: "Chiffres significatifs";
+    --year-label--content: "Année";
+    --month-label--content: "Mois";
+    --day-label--content: "Jour";
+    --weekday-label--content: "Jour de la semaine";
+    --hour-label--content: "Heure";
+    --minute-label--content: "Minute";
+    --second-label--content: "Deuxième";
+    --fractional-seconds-label--content: "Fractions de secondes";
+    --hours-label--content: "12/24 heures";
+
+    // Tabs
+    --style-tab-label--content: "Style";
+    --attributes-tab-label--content: "Les attributs";
+}
diff --git a/rust/perspective-viewer/src/themes/intl/ja.less b/rust/perspective-viewer/src/themes/intl/ja.less
new file mode 100644
index 0000000000..51024d8310
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl/ja.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "グループ化";
+    --split-by-label--content: "分割";
+    --sort-label--content: "注文方法";
+    --filter-label--content: "どこ";
+    --transpose-button--content: "スワップ";
+    --config-button-icon--content: "構成、設定";
+    --all-columns-label--content: "すべての列";
+    --untitled--content: "無題";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "データグリッド";
+    --plugin-name-treemap--content: "ツリーマップ";
+    --plugin-name-sunburst--content: "サンバースト";
+    --plugin-name-heatmap--content: "ヒートマップ";
+    --plugin-name-x-bar--content: "Xバー";
+    --plugin-name-y-bar--content: "アンドバー";
+    --plugin-name-y-line--content: "そしてライン";
+    --plugin-name-x-y-line--content: "X/Y ライン";
+    --plugin-name-x-y-scatter--content: "X/Y 散布図";
+    --plugin-name-y-scatter--content: "Y散布図";
+    --plugin-name-y-area--content: "とエリア";
+    --plugin-name-ohlc--content: "痛い";
+    --plugin-name-candlestick--content: "ローソク足";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "コラム";
+    --column-selector-column-x-axis--content: "X軸";
+    --column-selector-column-y-axis--content: "Y軸";
+    --column-selector-column-color--content: "色";
+    --column-selector-column-size--content: "サイズ";
+    --column-selector-column-symbol--content: "シンボル";
+    --column-selector-column-label--content: "ラベル";
+    --column-selector-column-tooltip--content: "ツールチップ";
+    --add-expression-button--content: "新しい列";
+
+    // Toolbar
+    --no-results--content: "無効な列";
+    --datagrid-column-edit-button--content: "編集";
+    --copy-button--content: "コピー";
+    --export-button--content: "輸出";
+    --reset-button--content: "リセット";
+    --edit-mode-toggle--content: "読み取り専用";
+    --edit-mode-alt-toggle--content: "エディベール";
+    --scroll-lock-toggle--content: "フリースクロ​​ール";
+    --scroll-lock-alt-toggle--content: "スクロールを揃える";
+
+    // Column Settings
+    --color-label--content: "色";
+    --format-label--content: "フォーマット";
+    --timezone-label--content: "タイムゾーン";
+    --date-style-label--content: "日付スタイル";
+    --time-style-label--content: "時間スタイル";
+    --foreground-label--content: "前景";
+    --background-label--content: "背景";
+    --series-label--content: "シリーズ";
+    --color-range-label--content: "色の範囲";
+    --style-label--content: "スタイル";
+    --minimum-integer-digits-label--content: "整数の最小桁数";
+    --rounding-increment-label--content: "丸め増分";
+    --notation-label--content: "表記";
+    --use-grouping-label--content: "グループ化を使用する";
+    --sign-display-label--content: "サインディスプレイ";
+    --max-value-label--content: "最大値";
+    --rounding-priority-label--content: "丸めの優先順位";
+    --rounding-mode-label--content: "丸めモード";
+    --trailing-zero-display-label--content: "末尾ゼロの表示";
+    --fractional-digits-label--content: "小数桁";
+    --significant-digits-label--content: "有効数字";
+    --year-label--content: "年";
+    --month-label--content: "月";
+    --day-label--content: "日";
+    --weekday-label--content: "平日";
+    --hour-label--content: "時間";
+    --minute-label--content: "分";
+    --second-label--content: "2番";
+    --fractional-seconds-label--content: "小数秒";
+    --hours-label--content: "12/24時間";
+
+    // Tabs
+    --style-tab-label--content: "スタイル";
+    --attributes-tab-label--content: "属性";
+}
diff --git a/rust/perspective-viewer/src/themes/intl/pt.less b/rust/perspective-viewer/src/themes/intl/pt.less
new file mode 100644
index 0000000000..3f1ee25210
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl/pt.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "Agrupar por";
+    --split-by-label--content: "Dividir por";
+    --sort-label--content: "Ordenar por";
+    --filter-label--content: "Onde";
+    --transpose-button--content: "Trocar";
+    --config-button-icon--content: "Configurar";
+    --all-columns-label--content: "Todas as colunas";
+    --untitled--content: "Sem título";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "Grade de dados";
+    --plugin-name-treemap--content: "Mapa de árvore";
+    --plugin-name-sunburst--content: "reluzente";
+    --plugin-name-heatmap--content: "Mapa de calor";
+    --plugin-name-x-bar--content: "Barra X";
+    --plugin-name-y-bar--content: "E Barra";
+    --plugin-name-y-line--content: "e linha";
+    --plugin-name-x-y-line--content: "Linha X/Y";
+    --plugin-name-x-y-scatter--content: "Dispersão X/Y";
+    --plugin-name-y-scatter--content: "Dispersão Y";
+    --plugin-name-y-area--content: "e área";
+    --plugin-name-ohlc--content: "Ai";
+    --plugin-name-candlestick--content: "Castiçal";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "Colunas";
+    --column-selector-column-x-axis--content: "Eixo X";
+    --column-selector-column-y-axis--content: "Eixo Y";
+    --column-selector-column-color--content: "Cor";
+    --column-selector-column-size--content: "Tamanho";
+    --column-selector-column-symbol--content: "Símbolo";
+    --column-selector-column-label--content: "Rótulo";
+    --column-selector-column-tooltip--content: "Dica";
+    --add-expression-button--content: "Nova Coluna";
+
+    // Toolbar
+    --no-results--content: "Coluna inválida";
+    --datagrid-column-edit-button--content: "Editar";
+    --copy-button--content: "cópia de";
+    --export-button--content: "Exportar";
+    --reset-button--content: "Reiniciar";
+    --edit-mode-toggle--content: "Somente leitura";
+    --edit-mode-alt-toggle--content: "Editar Bale";
+    --scroll-lock-toggle--content: "Rolagem Grátis";
+    --scroll-lock-alt-toggle--content: "Alinhar rolagem";
+
+    // Column Settings
+    --color-label--content: "Cor";
+    --format-label--content: "Formatar";
+    --timezone-label--content: "Fuso horário";
+    --date-style-label--content: "Estilo de data";
+    --time-style-label--content: "Estilo de tempo";
+    --foreground-label--content: "Primeiro plano";
+    --background-label--content: "Fundo";
+    --series-label--content: "Series";
+    --color-range-label--content: "Gama de cores";
+    --style-label--content: "Estilo";
+    --minimum-integer-digits-label--content: "Dígitos inteiros mínimos";
+    --rounding-increment-label--content: "Incremento de arredondamento";
+    --notation-label--content: "Notação";
+    --use-grouping-label--content: "Usar agrupamento";
+    --sign-display-label--content: "Exibição de sinalização";
+    --max-value-label--content: "Valor máximo";
+    --rounding-priority-label--content: "Prioridade de arredondamento";
+    --rounding-mode-label--content: "Modo de arredondamento";
+    --trailing-zero-display-label--content: "Exibição de zero à direita";
+    --fractional-digits-label--content: "Dígitos Fracionários";
+    --significant-digits-label--content: "Dígitos significantes";
+    --year-label--content: "Ano";
+    --month-label--content: "Mês";
+    --day-label--content: "Dia";
+    --weekday-label--content: "Dia da semana";
+    --hour-label--content: "Hora";
+    --minute-label--content: "Minuto";
+    --second-label--content: "Segundo";
+    --fractional-seconds-label--content: "Segundos fracionários";
+    --hours-label--content: "12/24 horas";
+
+    // Tabs
+    --style-tab-label--content: "Estilo";
+    --attributes-tab-label--content: "Atributos";
+}
diff --git a/rust/perspective-viewer/src/themes/intl/zh.less b/rust/perspective-viewer/src/themes/intl/zh.less
new file mode 100644
index 0000000000..2030f17bed
--- /dev/null
+++ b/rust/perspective-viewer/src/themes/intl/zh.less
@@ -0,0 +1,97 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+perspective-viewer,
+perspective-dropdown {
+    // Config
+    --group-by-label--content: "通过...分组";
+    --split-by-label--content: "分割依据";
+    --sort-label--content: "订购依据";
+    --filter-label--content: "在哪里";
+    --transpose-button--content: "交换";
+    --config-button-icon--content: "配置";
+    --all-columns-label--content: "所有栏目";
+    --untitled--content: "无标题";
+
+    // Plugin names
+    --plugin-name-datagrid--content: "数据网格";
+    --plugin-name-treemap--content: "树形图";
+    --plugin-name-sunburst--content: "旭日";
+    --plugin-name-heatmap--content: "热图";
+    --plugin-name-x-bar--content: "X吧";
+    --plugin-name-y-bar--content: "和酒吧";
+    --plugin-name-y-line--content: "和线";
+    --plugin-name-x-y-line--content: "X/Y线";
+    --plugin-name-x-y-scatter--content: "X/Y 散点图";
+    --plugin-name-y-scatter--content: "Y 散点图";
+    --plugin-name-y-area--content: "和面积";
+    --plugin-name-ohlc--content: "哎哟";
+    --plugin-name-candlestick--content: "烛台";
+
+    // Column Selector names
+    --column-selector-column-columns--content: "列";
+    --column-selector-column-x-axis--content: "X轴";
+    --column-selector-column-y-axis--content: "Y轴";
+    --column-selector-column-color--content: "颜色";
+    --column-selector-column-size--content: "尺寸";
+    --column-selector-column-symbol--content: "象征";
+    --column-selector-column-label--content: "标签";
+    --column-selector-column-tooltip--content: "工具提示";
+    --add-expression-button--content: "新专栏";
+
+    // Toolbar
+    --no-results--content: "无效列";
+    --datagrid-column-edit-button--content: "编辑";
+    --copy-button--content: "复制";
+    --export-button--content: "出口";
+    --reset-button--content: "重置";
+    --edit-mode-toggle--content: "只读";
+    --edit-mode-alt-toggle--content: "伊迪特巴莱";
+    --scroll-lock-toggle--content: "自由滚动";
+    --scroll-lock-alt-toggle--content: "对齐滚动";
+
+    // Column Settings
+    --color-label--content: "颜色";
+    --format-label--content: "格式";
+    --timezone-label--content: "时区";
+    --date-style-label--content: "日期样式";
+    --time-style-label--content: "时间风格";
+    --foreground-label--content: "前景";
+    --background-label--content: "背景";
+    --series-label--content: "系列";
+    --color-range-label--content: "颜色范围";
+    --style-label--content: "风格";
+    --minimum-integer-digits-label--content: "最小整数位数";
+    --rounding-increment-label--content: "舍入增量";
+    --notation-label--content: "符号";
+    --use-grouping-label--content: "使用分组";
+    --sign-display-label--content: "标志展示";
+    --max-value-label--content: "最大值";
+    --rounding-priority-label--content: "舍入优先级";
+    --rounding-mode-label--content: "舍入模式";
+    --trailing-zero-display-label--content: "尾随零显示";
+    --fractional-digits-label--content: "小数位";
+    --significant-digits-label--content: "有效数字";
+    --year-label--content: "年";
+    --month-label--content: "月";
+    --day-label--content: "天";
+    --weekday-label--content: "工作日";
+    --hour-label--content: "小时";
+    --minute-label--content: "分钟";
+    --second-label--content: "第二";
+    --fractional-seconds-label--content: "小数秒";
+    --hours-label--content: "12/24 小时";
+
+    // Tabs
+    --style-tab-label--content: "风格";
+    --attributes-tab-label--content: "属性";
+}
diff --git a/rust/perspective-viewer/src/ts/columns_config.ts b/rust/perspective-viewer/src/ts/columns_config.ts
new file mode 100644
index 0000000000..592128b614
--- /dev/null
+++ b/rust/perspective-viewer/src/ts/columns_config.ts
@@ -0,0 +1,71 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+type CustomDatetimeFormat =
+    | "long"
+    | "short"
+    | "narrow"
+    | "numeric"
+    | "2-digit"
+    | "disabled";
+
+type SimpleDatetimeFormat = "full" | "long" | "medium" | "short" | "disabled";
+
+export type PerspectiveColumnConfig = {
+    [column_name: string]: PerspectiveColumnConfigValue;
+};
+
+export type DateFormat = {
+    timeZone?: string;
+} & (
+    | {
+          format: "custom";
+          fractionalSecondDigits?: number;
+          second?: CustomDatetimeFormat;
+          minute?: CustomDatetimeFormat;
+          hour?: CustomDatetimeFormat;
+          day?: CustomDatetimeFormat;
+          weekday?: CustomDatetimeFormat;
+          month?: CustomDatetimeFormat;
+          year?: CustomDatetimeFormat;
+          hour12?: boolean;
+      }
+    | {
+          dateStyle?: SimpleDatetimeFormat;
+          timeStyle?: SimpleDatetimeFormat;
+      }
+);
+
+export type NumberFormat = {
+    maximumFractionDigits?: number;
+    minimumFractionDigits?: number;
+};
+
+export type PerspectiveColumnConfigValue = {
+    number_fg_mode?: "color" | "bar" | "disabled";
+    number_bg_mode?: "color" | "gradient" | "pulse" | "disabled";
+    fixed?: number;
+    pos_fg_color?: string;
+    neg_fg_color?: string;
+    pos_bg_color?: string;
+    neg_bg_color?: string;
+    fg_gradient?: number;
+    bg_gradient?: number;
+    color?: string;
+    datetime_color_mode?: "foreground" | "background";
+    date_format?: DateFormat;
+    string_color_mode?: "foreground" | "background" | "series";
+    format?: "link" | "image" | "bold" | "italics" | "custom";
+    symbols?: Record<string, string>;
+    // TODO: tsify this
+    number_format?: NumberFormat;
+};
diff --git a/rust/perspective-viewer/src/ts/migrate.ts b/rust/perspective-viewer/src/ts/migrate.ts
index bb78d4dd7d..23958a1279 100644
--- a/rust/perspective-viewer/src/ts/migrate.ts
+++ b/rust/perspective-viewer/src/ts/migrate.ts
@@ -13,7 +13,9 @@
 import Semver from "./migrate/semver";
 import migrate_0_0_0 from "./migrate/0-0-0";
 import migrate_2_6_1 from "./migrate/2-6-1";
+import migrate_2_8_0 from "./migrate/2-8-0";
 import packageJSON from "@finos/perspective/package.json" assert { type: "json" };
+import { PerspectiveViewerConfig } from "./viewer";
 
 const PKG_VERSION = packageJSON.version;
 
@@ -60,42 +62,48 @@ const PKG_VERSION = packageJSON.version;
  * script's package.
  */
 export function convert(
-    old: Record<string, unknown> | ArrayBuffer | string,
+    old: InitialConfig | ArrayBuffer | string,
     {
         warn = true,
         verbose = false,
         replace_defaults = false,
     }: PerspectiveConvertOptions = {}
-): Record<string, unknown> | ArrayBuffer | string {
+): PerspectiveViewerConfig | ArrayBuffer | string {
     if (typeof old === "object" && !(old instanceof ArrayBuffer)) {
         const copy = JSON.parse(JSON.stringify(old));
+        let options = {
+            warn: verbose ? true : warn,
+            verbose,
+            replace_defaults,
+        };
         if ("viewers" in copy && "detail" in copy) {
-            return migrate_workspace(copy, { warn, replace_defaults });
+            return migrate_workspace(copy, options);
         } else {
-            return migrate_viewer(copy, false, {
-                warn: verbose ? true : warn,
-                verbose,
-                replace_defaults,
-            });
+            return migrate_viewer(copy, false, options);
         }
     } else {
         return old;
     }
 }
 
-type PerspectiveConvertOptions = {
+type InitialConfig = Record<string, unknown>;
+
+export type PerspectiveConvertOptions = {
     warn?: boolean;
     verbose?: boolean;
     replace_defaults?: boolean;
+    omit_attributes?: boolean;
 };
 
+export type Options = PerspectiveConvertOptions & { version_chain?: string[] };
+
 /**
  * Migrate a layout for `<perspective-workspace>`
- * @param old
+ * @param old - TODO this should get a WorkspaceConfig type
  * @param options
  * @returns
  */
-function migrate_workspace(old, options) {
+function migrate_workspace(old: any, options: Options) {
     for (const key in old.viewers) {
         old.viewers[key] = migrate_viewer(old.viewers[key], true, options);
         if (!("master" in old.viewers[key])) {
@@ -126,7 +134,7 @@ function migrate_workspace(old, options) {
  * @param options
  * @returns
  */
-function migrate_viewer(old, omit_attributes, options) {
+function migrate_viewer(old: any, omit_attributes: boolean, options: Options) {
     old.version = old.version ? new Semver(old.version) : new Semver("0.0.0");
     options.omit_attributes = omit_attributes;
     // This array details the "next version" in line. It begins with 2.6.1
@@ -136,11 +144,22 @@ function migrate_viewer(old, omit_attributes, options) {
     // Note that because we will be working with the latest version on master,
     // and those versions will need to update from themselves to themselves,
     // migration scripts must be idempotent.
-    options.version_chain = ["2.6.1" /*, "2.7.0", etc. */];
+    options.version_chain = ["2.6.1", "2.7.1", "2.8.0"];
     options.version_chain.push(PKG_VERSION);
     let res = chain(
         old,
-        [migrate_0_0_0, migrate_2_6_1, assure_latest, semver_to_string],
+        [
+            migrate_0_0_0,
+            migrate_2_6_1,
+            migrate_2_8_0,
+            assure_latest,
+            (old) => {
+                return {
+                    ...old,
+                    version: old.version.to_string(),
+                };
+            },
+        ],
         options
     );
     if (options.verbose) {
@@ -158,12 +177,6 @@ function assure_latest(old: { version: Semver }) {
     }
 }
 
-function semver_to_string(old) {
-    // intentionally ignores build
-    old.version = `${old.version.major}.${old.version.minor}.${old.version.patch}`;
-    return old;
-}
-
 /**
  * Chains functions of `args` and apply to `old`
  * @param old
@@ -171,7 +184,7 @@ function semver_to_string(old) {
  * @param options
  * @returns
  */
-export function chain(old, args, options) {
+export function chain(old: object, args: Function[], options: Options) {
     for (const arg of args) {
         old = arg(old, options);
     }
diff --git a/rust/perspective-viewer/src/ts/migrate/0-0-0.ts b/rust/perspective-viewer/src/ts/migrate/0-0-0.ts
index 4228dc9dab..51f4457818 100644
--- a/rust/perspective-viewer/src/ts/migrate/0-0-0.ts
+++ b/rust/perspective-viewer/src/ts/migrate/0-0-0.ts
@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { chain } from "../migrate";
+import { Options, chain } from "../migrate";
 import Semver from "./semver";
 
 /**
@@ -20,9 +20,9 @@ import Semver from "./semver";
  * @param options
  * @returns The migrated viewer.
  */
-export default function migrate_0_0_0(old, options) {
+export default function migrate_0_0_0(old: any, options: Options) {
     const next_version = options.version_chain.shift();
-    if (old.version?.ge(next_version)) {
+    if (old.version?.gt(next_version)) {
         return old;
     } else {
         if (options.warn) {
@@ -36,7 +36,7 @@ export default function migrate_0_0_0(old, options) {
             migrate_split_by,
             migrate_filters,
             migrate_expressions,
-            options.replace_defaults ? migrate_nulls : false,
+            options.replace_defaults ? migrate_nulls : (x) => x,
             migrate_plugins,
             migrate_plugin_config,
             migrate_title,
@@ -48,7 +48,7 @@ export default function migrate_0_0_0(old, options) {
                 old.version = new Semver("0.0.0");
                 return old;
             },
-        ].filter((x) => !!x),
+        ],
         options
     );
 
diff --git a/rust/perspective-viewer/src/ts/migrate/2-6-1.ts b/rust/perspective-viewer/src/ts/migrate/2-6-1.ts
index 6cf10be223..10d229c89a 100644
--- a/rust/perspective-viewer/src/ts/migrate/2-6-1.ts
+++ b/rust/perspective-viewer/src/ts/migrate/2-6-1.ts
@@ -10,7 +10,9 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import { ViewConfig } from "@finos/perspective";
 import Semver from "./semver";
+import { Options } from "../migrate";
 
 /**
  * Migrates from 2.6.1
@@ -18,9 +20,9 @@ import Semver from "./semver";
  * @param options
  * @returns
  */
-export default function migrate_2_6_1(old, options) {
+export default function migrate_2_6_1(old: any, options: Options) {
     let next_version = options.version_chain.shift();
-    if (old.version?.ge(next_version)) {
+    if (old.version?.gt(next_version)) {
         return old;
     } else if (options.warn) {
         console.warn(`Migrating 2.6.1 -> ${next_version}`);
@@ -83,3 +85,10 @@ export default function migrate_2_6_1(old, options) {
     }
     return old;
 }
+
+export type Config261 = ViewConfig & {
+    version: Semver;
+    plugin?: string;
+    settings?: boolean;
+    plugin_config?: any;
+};
diff --git a/rust/perspective-viewer/src/ts/migrate/2-8-0.ts b/rust/perspective-viewer/src/ts/migrate/2-8-0.ts
new file mode 100644
index 0000000000..7781d7f7ea
--- /dev/null
+++ b/rust/perspective-viewer/src/ts/migrate/2-8-0.ts
@@ -0,0 +1,145 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import Semver from "./semver";
+import { Options } from "../migrate";
+import { Config261 } from "./2-6-1";
+import {
+    PerspectiveColumnConfig,
+    PerspectiveColumnConfigValue,
+} from "../perspective-viewer";
+
+/**
+ * Migrates from 2.7.1. Focus is on plugin API changes, moving plugin_config.columns to columns_config
+ * @param old
+ * @param options
+ * @returns
+ */
+export default function migrate_2_7_1(old: Config271, options: Options) {
+    let next_version = options.version_chain.shift();
+    if (old.version?.gt(next_version!)) {
+        return old;
+    } else if (options.warn) {
+        console.warn(`Migrating 2.7.1 -> ${next_version}`);
+    }
+    old.version = new Semver(next_version!);
+
+    old.columns_config = old.columns_config ?? {};
+
+    const has_config = !!old.plugin_config?.columns;
+    const has_plugin =
+        old.plugin === "Datagrid" || old.plugin === "X/Y Scatter";
+    if (has_config && has_plugin) {
+        if (options.warn) {
+            console.warn("Migrating plugin_config to columns_config!");
+        }
+
+        old.columns_config = old.columns_config ?? {};
+        let entries = Object.entries(old.plugin_config.columns);
+        for (let [column_name, value_map] of entries) {
+            old.columns_config[column_name] =
+                old.columns_config[column_name] ?? {};
+
+            if (old.plugin === "X/Y Scatter") {
+                old.columns_config[column_name].symbols =
+                    old.plugin_config.columns[column_name]?.symbols ?? {};
+                delete old.plugin_config.columns[column_name];
+            } else {
+                const cwo =
+                    old.plugin_config.columns[column_name]
+                        .column_width_override;
+                delete old.plugin_config.columns[column_name]
+                    .column_width_override;
+                for (const [key, val] of Object.entries(value_map)) {
+                    switch (key) {
+                        case "format":
+                            if (val !== "custom") {
+                                break;
+                            }
+                        case "timeZone":
+                        case "fractionalSecondDigits":
+                        case "second":
+                        case "minute":
+                        case "hour":
+                        case "day":
+                        case "weekday":
+                        case "month":
+                        case "year":
+                        case "hour12":
+                        case "dateStyle":
+                        case "timeStyle": {
+                            old.columns_config[column_name] =
+                                old.columns_config[column_name] ?? {};
+                            old.columns_config[column_name].date_format =
+                                old.columns_config[column_name].date_format ??
+                                {};
+                            old.columns_config[column_name].date_format[key] =
+                                val;
+                            delete old.plugin_config.columns[column_name][key];
+                            continue;
+                        }
+                        case "fixed": {
+                            old.columns_config[column_name] =
+                                old.columns_config[column_name] ?? {};
+
+                            old.columns_config[column_name].number_format =
+                                old.columns_config[column_name].number_format ??
+                                {};
+
+                            old.columns_config[
+                                column_name
+                            ].number_format.minimumFractionDigits = val;
+
+                            old.columns_config[
+                                column_name
+                            ].number_format.maximumFractionDigits = val;
+
+                            delete old.plugin_config.columns[column_name][key];
+                            continue;
+                        }
+                        default: {
+                        }
+                    }
+
+                    old.columns_config[column_name] =
+                        old.columns_config[column_name] ?? {};
+                    old.columns_config[column_name][key] = val;
+                    delete old.plugin_config.columns[column_name][key];
+                }
+
+                if (!!cwo) {
+                    old.plugin_config.columns[column_name] = {
+                        column_width_override: cwo,
+                    };
+                } else {
+                    delete old.plugin_config.columns[column_name];
+                }
+            }
+        }
+
+        if (
+            old.plugin === "X/Y Scatter" &&
+            Object.keys(old.plugin_config?.columns).length === 0
+        ) {
+            delete old.plugin_config?.columns;
+        }
+    }
+
+    if (options.verbose) {
+        console.log(old);
+    }
+    return old;
+}
+
+export type Config271 = Config261 & {
+    columns_config?: PerspectiveColumnConfig;
+};
diff --git a/rust/perspective-viewer/src/ts/migrate/semver.ts b/rust/perspective-viewer/src/ts/migrate/semver.ts
index 8f7116855f..c9688a9c4e 100644
--- a/rust/perspective-viewer/src/ts/migrate/semver.ts
+++ b/rust/perspective-viewer/src/ts/migrate/semver.ts
@@ -52,6 +52,10 @@ export default class Semver {
         return this;
     }
 
+    to_string() {
+        return `${this.major}.${this.minor}.${this.patch}`;
+    }
+
     gt(val: string | Semver) {
         let right = new Semver(val);
         return (
diff --git a/rust/perspective-viewer/src/ts/perspective-viewer.ts b/rust/perspective-viewer/src/ts/perspective-viewer.ts
index ad6a104d62..a4e139aae4 100644
--- a/rust/perspective-viewer/src/ts/perspective-viewer.ts
+++ b/rust/perspective-viewer/src/ts/perspective-viewer.ts
@@ -35,6 +35,10 @@ export { IPerspectiveViewerPlugin } from "./plugin";
 export { HTMLPerspectiveViewerPluginElement } from "./plugin";
 export { IPerspectiveViewerElement } from "./viewer";
 export { PerspectiveViewerConfig } from "./viewer";
+export {
+    PerspectiveColumnConfig,
+    PerspectiveColumnConfigValue,
+} from "./columns_config";
 
 export * from "./extensions";
 export * from "./migrate";
diff --git a/rust/perspective-viewer/src/ts/plugin.ts b/rust/perspective-viewer/src/ts/plugin.ts
index 756b135ae1..1131fcf583 100644
--- a/rust/perspective-viewer/src/ts/plugin.ts
+++ b/rust/perspective-viewer/src/ts/plugin.ts
@@ -93,6 +93,23 @@ export interface IPerspectiveViewerPlugin {
      */
     get priority(): number | undefined;
 
+    /**
+     * Given a column's grouping (determined by indexing it in `plugin.config_column_names`)
+     * and its view type, determines whether or not to render column styles in the settings sidebar.
+     * Implementing this function and `column_style_config` allows the plugin to interface with the viewer's column configuration API.
+     */
+    can_render_column_styles?: (
+        view_type: perspective.Type,
+        group: string
+    ) => boolean;
+
+    /**
+     * Determines which column configuration controls are populated in the viewer.
+     * Corresponds to the data the plugin will recieve on save.
+     * Implementing this function and `can_render_column_styles` allows the plugin to interface with the viewer's column configuration API.
+     */
+    column_style_config?: (view_type: perspective.Type, group: string) => any;
+
     /**
      * Render this plugin using the provided `View`.  While there is no
      * provision to cancel a render in progress per se, calling a method on
@@ -217,8 +234,13 @@ export class HTMLPerspectiveViewerPluginElement
         return 0;
     }
 
-    get plugin_attributes(): any {
-        return {};
+    can_render_column_styles(): boolean {
+        return false;
+    }
+
+    column_style_config(): any {
+        {
+        }
     }
 
     async update(view: perspective.View): Promise<void> {
diff --git a/rust/perspective-viewer/src/ts/viewer.ts b/rust/perspective-viewer/src/ts/viewer.ts
index 295966a4f2..ffca7bbf95 100644
--- a/rust/perspective-viewer/src/ts/viewer.ts
+++ b/rust/perspective-viewer/src/ts/viewer.ts
@@ -11,11 +11,16 @@
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
 import type * as perspective from "@finos/perspective";
+import { PerspectiveColumnConfig } from "./perspective-viewer";
 
 export type PerspectiveViewerConfig = perspective.ViewConfig & {
+    version?: string;
+    theme?: string;
+    title?: string | null;
     plugin?: string;
     settings?: boolean;
     plugin_config?: any;
+    columns_config?: PerspectiveColumnConfig;
 };
 
 export type RenderStats = {
diff --git a/rust/perspective-viewer/tasks/bootstrap-runtime/Cargo.toml b/rust/perspective-viewer/tasks/bootstrap-runtime/Cargo.toml
index 2cd0520620..821c70788f 100644
--- a/rust/perspective-viewer/tasks/bootstrap-runtime/Cargo.toml
+++ b/rust/perspective-viewer/tasks/bootstrap-runtime/Cargo.toml
@@ -13,7 +13,7 @@
 [package]
 name = "perspective-bootstrap-runtime"
 description = "A tiny runtime wrapper to create self-extracting wasm binaries"
-version = "2.8.1"
+version = "2.9.0"
 edition = "2021"
 
 [lib]
diff --git a/rust/perspective-viewer/tasks/bootstrap/Cargo.toml b/rust/perspective-viewer/tasks/bootstrap/Cargo.toml
index 265a1fc0f1..e6fc1505dc 100644
--- a/rust/perspective-viewer/tasks/bootstrap/Cargo.toml
+++ b/rust/perspective-viewer/tasks/bootstrap/Cargo.toml
@@ -13,7 +13,7 @@
 [package]
 name = "perspective-bootstrap"
 description = "A CLI utility to create self-extracting wasm binaries"
-version = "2.8.1"
+version = "2.9.0"
 edition = "2021"
 
 [[bin]]
diff --git a/rust/perspective-viewer/tasks/bundle/Cargo.toml b/rust/perspective-viewer/tasks/bundle/Cargo.toml
index a62fd0a98d..916a52a671 100644
--- a/rust/perspective-viewer/tasks/bundle/Cargo.toml
+++ b/rust/perspective-viewer/tasks/bundle/Cargo.toml
@@ -13,7 +13,7 @@
 [package]
 name = "perspective-bundle"
 description = "A CLI utility to build and link persecptive-viewer"
-version = "2.8.1"
+version = "2.9.0"
 edition = "2021"
 
 [[bin]]
diff --git a/rust/perspective-viewer/tasks/lint/Cargo.toml b/rust/perspective-viewer/tasks/lint/Cargo.toml
index 57715a9c0e..26283fec1c 100644
--- a/rust/perspective-viewer/tasks/lint/Cargo.toml
+++ b/rust/perspective-viewer/tasks/lint/Cargo.toml
@@ -13,7 +13,7 @@
 [package]
 name = "perspective-lint"
 description = "A CLI utility to lint rust code"
-version = "2.8.1"
+version = "2.9.0"
 edition = "2021"
 
 [[bin]]
@@ -22,5 +22,5 @@ path = "main.rs"
 bench = false
 
 [dependencies]
-yew-fmt = { version = "0.3.0", artifact = "bin" }
+yew-fmt = { version = "0.5.1", artifact = "bin" }
 glob = "0.3.1"
diff --git a/rust/perspective-viewer/tasks/lint/main.rs b/rust/perspective-viewer/tasks/lint/main.rs
index 429c45a3b7..49569aeb86 100644
--- a/rust/perspective-viewer/tasks/lint/main.rs
+++ b/rust/perspective-viewer/tasks/lint/main.rs
@@ -34,7 +34,7 @@ pub fn main() {
     let yewfmt_args = edition_args
         .into_iter()
         .map(|x| x.into())
-        .chain(args.into_iter())
+        .chain(args)
         .collect::<Vec<_>>();
 
     let exit_code = std::process::Command::new(env!("CARGO_BIN_FILE_YEW_FMT"))
diff --git a/rust/perspective-viewer/test/js/column_settings.spec.ts b/rust/perspective-viewer/test/js/column_settings.spec.ts
index 69249f66ca..661394acdf 100644
--- a/rust/perspective-viewer/test/js/column_settings.spec.ts
+++ b/rust/perspective-viewer/test/js/column_settings.spec.ts
@@ -35,18 +35,18 @@ export async function checkTab(
     if (active) {
         if (expression) {
             if (hasStyles) {
-                expect(await titles[0].innerText()).toBe("Style");
-                expect(await titles[1].innerText()).toBe("Attributes");
+                expect(await titles[0].getAttribute("id")).toBe("Style");
+                expect(await titles[1].getAttribute("id")).toBe("Attributes");
             } else {
-                expect(await titles[0].innerText()).toBe("Attributes");
+                expect(await titles[0].getAttribute("id")).toBe("Attributes");
             }
         } else {
-            expect(await titles[0].innerText()).toBe("Style");
+            expect(await titles[0].getAttribute("id")).toBe("Style");
         }
     } else {
         if (expression) {
             expect(titles.length).toBe(1);
-            expect(await titles[0].innerText()).toBe("Attributes");
+            expect(await titles[0].getAttribute("id")).toBe("Attributes");
         } else {
             test.fail(
                 true,
@@ -108,7 +108,7 @@ test.describe("Plugin Styles", () => {
 
         await settingsPanel.createNewExpression("expr", "'string'");
         await activeColumns.activateColumn("expr");
-        let col = activeColumns.getColumnByName("expr");
+        let col = await activeColumns.getColumnByName("expr");
         await inactiveColumns.container.waitFor({ state: "hidden" });
         await activeColumns.scrollToBottom();
         await view.assureColumnSettingsOpen(col);
@@ -184,7 +184,9 @@ test.describe("Plugin Styles", () => {
         await view.columnSettingsSidebar.openTab("Attributes");
         await checkTab(view.columnSettingsSidebar, false, true);
         const selectedTab = async () => {
-            return await view.columnSettingsSidebar.selectedTab.innerText();
+            return await view.columnSettingsSidebar.selectedTab
+                .locator(".tab-title")
+                .getAttribute("id");
         };
         expect(await selectedTab()).toBe("Attributes");
         await col.activeBtn.click();
diff --git a/rust/perspective-viewer/test/js/column_settings/attributes_tab.spec.ts b/rust/perspective-viewer/test/js/column_settings/attributes_tab.spec.ts
index 30fba88cfe..f3711af79d 100644
--- a/rust/perspective-viewer/test/js/column_settings/attributes_tab.spec.ts
+++ b/rust/perspective-viewer/test/js/column_settings/attributes_tab.spec.ts
@@ -32,7 +32,9 @@ test.describe("Attributes Tab", () => {
             expressions: { expr: "12345" },
             columns: ["expr"],
         });
-        let expr = view.settingsPanel.activeColumns.getColumnByName("expr");
+        let expr = await view.settingsPanel.activeColumns.getColumnByName(
+            "expr"
+        );
         await expr.editBtn.click();
 
         let input = view.columnSettingsSidebar.nameInput;
@@ -77,7 +79,9 @@ test.describe("Attributes Tab", () => {
             columns: ["expr", "Row ID"],
             settings: true,
         });
-        let expr = view.settingsPanel.activeColumns.getColumnByName("expr");
+        let expr = await view.settingsPanel.activeColumns.getColumnByName(
+            "expr"
+        );
         await expr.editBtn.click();
         await view.columnSettingsSidebar.openTab("Attributes");
         let input = view.columnSettingsSidebar.nameInput;
@@ -97,7 +101,9 @@ test.describe("Attributes Tab", () => {
             columns: ["expr", "Row ID"],
             settings: true,
         });
-        let expr = view.settingsPanel.activeColumns.getColumnByName("expr");
+        let expr = await view.settingsPanel.activeColumns.getColumnByName(
+            "expr"
+        );
         await expr.editBtn.click();
         await view.columnSettingsSidebar.openTab("Attributes");
 
@@ -130,7 +136,9 @@ test.describe("Attributes Tab", () => {
             columns: ["expr", "Row ID"],
             settings: true,
         });
-        let expr = view.settingsPanel.activeColumns.getColumnByName("expr");
+        let expr = await view.settingsPanel.activeColumns.getColumnByName(
+            "expr"
+        );
         await expr.editBtn.click();
         await view.columnSettingsSidebar.openTab("Attributes");
         let attributesTab = view.columnSettingsSidebar.attributesTab;
diff --git a/rust/perspective-viewer/test/js/column_settings/datagrid.spec.ts b/rust/perspective-viewer/test/js/column_settings/datagrid.spec.ts
index ddeea72095..a787f9081f 100644
--- a/rust/perspective-viewer/test/js/column_settings/datagrid.spec.ts
+++ b/rust/perspective-viewer/test/js/column_settings/datagrid.spec.ts
@@ -10,11 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import {
-    PageView as PspViewer,
-    compareNodes,
-    getEventListener,
-} from "@finos/perspective-test";
+import { PageView as PspViewer, compareNodes } from "@finos/perspective-test";
 
 import { expect, test } from "@finos/perspective-test";
 
@@ -28,7 +24,7 @@ test.describe("Regressions", function () {
         });
     });
 
-    test("Interacting with column settings does not override column width", async function ({
+    test.skip("Interacting with column settings does not override column width", async function ({
         page,
     }) {
         const view = new PspViewer(page);
@@ -49,12 +45,20 @@ test.describe("Regressions", function () {
 
         await editBtn.click();
         await view.columnSettingsSidebar.container.waitFor();
-        await view.columnSettingsSidebar.styleTab.precision_input.fill("4");
+        await page
+            .locator('div[data-value="Decimal"] select')
+            .selectOption("Percent");
         const token = await view.save();
+        test.expect(token.columns_config).toEqual({
+            "Row ID": {
+                number_string_format: {
+                    style: "percent",
+                },
+            },
+        });
         test.expect(token.plugin_config.columns).toEqual({
             "Row ID": {
                 column_size_override: 150,
-                fixed: 4,
             },
         });
     });
@@ -147,100 +151,6 @@ let runTests = (title: string, beforeEachAndLocalTests: () => void) => {
                 true
             );
         });
-
-        // These tests only check that a connection is made between the column settings sidebar
-        // and the plugin itself. They do not need to check the exact contents of the plugin.
-        test("Numeric styling", async ({ page }) => {
-            let view = new PspViewer(page);
-            let table = view.dataGrid.regularTable;
-
-            let col = await view.getOrCreateColumnByType("numeric");
-            await col.editBtn.click();
-            let name = await col.name.innerText();
-            expect(name).toBeTruthy();
-            let td = await table.getFirstCellByColumnName(name);
-            await td.waitFor();
-
-            // bg style
-            await view.columnSettingsSidebar.openTab("style");
-            let contents = view.columnSettingsSidebar.styleTab.contents;
-            let checkbox = contents.locator("input[type=checkbox]").last();
-            await checkbox.waitFor();
-
-            let tdStyle = await td.evaluate((node) => node.style.cssText);
-            let listener = await getEventListener(
-                page,
-                "perspective-column-style-change"
-            );
-            await checkbox.click();
-            expect(await listener()).toBe(true);
-            let newStyle = await td.evaluate((node) => node.style.cssText);
-            expect(tdStyle).not.toBe(newStyle);
-        });
-
-        test("Calendar styling", async ({ page }) => {
-            let view = new PspViewer(page);
-            let table = view.dataGrid.regularTable;
-
-            let col = await view.getOrCreateColumnByType("calendar");
-            let name = await col.name.innerText();
-            expect(name).toBeTruthy();
-            let td = await table.getFirstCellByColumnName(name);
-            await td.waitFor();
-
-            // text style
-            view.assureColumnSettingsOpen(col);
-            await view.columnSettingsSidebar.openTab("style");
-            let contents = view.columnSettingsSidebar.styleTab.contents;
-            let checkbox = contents
-                .locator("input[type=checkbox]:not(:disabled)")
-                .first();
-            let tdStyle = await td.evaluate((node) => {
-                return node.style.cssText;
-            });
-            let listener = await getEventListener(
-                page,
-                "perspective-column-style-change"
-            );
-            await checkbox.click();
-            expect(await listener()).toBe(true);
-            let newStyle = await td.evaluate((node) => {
-                return node.style.cssText;
-            });
-            expect(tdStyle).not.toBe(newStyle);
-        });
-
-        test.skip("Boolean styling", async ({ page }) => {
-            // Boolean styling is not implemented.
-        });
-
-        test("String styling", async ({ page }) => {
-            let view = new PspViewer(page);
-            let table = view.dataGrid.regularTable;
-
-            let col = await view.getOrCreateColumnByType("string");
-            let name = await col.name.innerText();
-            expect(name).toBeTruthy();
-            let td = await table.getFirstCellByColumnName(name);
-            await td.waitFor();
-
-            // bg color
-            await view.assureColumnSettingsOpen(col);
-            await view.columnSettingsSidebar.openTab("style");
-            let contents = view.columnSettingsSidebar.styleTab.contents;
-            let checkbox = contents.locator("input[type=checkbox]").last();
-            await checkbox.waitFor();
-
-            let tdStyle = await td.evaluate((node) => node.style.cssText);
-            let listener = await getEventListener(
-                page,
-                "perspective-column-style-change"
-            );
-            await checkbox.check();
-            expect(await listener()).toBe(true);
-            let newStyle = await td.evaluate((node) => node.style.cssText);
-            expect(tdStyle).not.toBe(newStyle);
-        });
     });
 };
 
@@ -254,28 +164,113 @@ runTests("Datagrid Column Styles", () => {
         });
     });
 
-    // Keeping the column sidebar open makes this unncessary.
-    test.skip("Edit highlights go away when view re-draws", async ({
-        page,
-    }) => {
-        let viewer = new PspViewer(page);
-        await viewer.openSettingsPanel();
-        let btn = await viewer.dataGrid.regularTable.getEditBtnByName("Row ID");
-        await btn.click();
-        await viewer.settingsPanel.groupby("Ship Mode");
-        await viewer.columnSettingsSidebar.container.waitFor({
-            state: "detached",
+    // These tests only check that a connection is made between the column settings sidebar
+    // and the plugin itself. They do not need to check the exact contents of the plugin.
+    test.skip("Numeric styling", async ({ page }) => {
+        let view = new PspViewer(page);
+        let table = view.dataGrid.regularTable;
+
+        let col = await view.getOrCreateColumnByType("numeric");
+        await col.editBtn.click();
+        let name = await col.name.innerText();
+        expect(name).toBeTruthy();
+        let td = await table.getFirstCellByColumnName(name);
+        await td.waitFor();
+
+        // bg style
+        await view.columnSettingsSidebar.openTab("Style");
+
+        let oldContents = await td.evaluate((node) => node.innerHTML);
+        let listener = await view.getEventListener(
+            "perspective-column-style-change"
+        );
+        await page
+            .locator('div[data-value="Decimal"] select')
+            .selectOption("Percent");
+        expect(await listener()).toBe(true);
+        let newContents = await td.evaluate((node) => node.innerHTML);
+        expect(oldContents).not.toBe(newContents);
+    });
+
+    test.skip("Calendar styling", async ({ page }) => {
+        let view = new PspViewer(page);
+        let table = view.dataGrid.regularTable;
+        let col = await view.getOrCreateColumnByType("calendar");
+        let name = await col.name.innerText();
+        expect(name).toBeTruthy();
+        let td = await table.getFirstCellByColumnName(name);
+        await td.waitFor();
+
+        // text style
+        view.assureColumnSettingsOpen(col);
+        await view.columnSettingsSidebar.openTab("Style");
+        let checkbox = view.columnSettingsSidebar.container
+            .getByRole("checkbox", { disabled: false })
+            .first();
+
+        let tdStyle = await td.evaluate((node) => {
+            return node.style.cssText;
+        });
+        let listener = await view.getEventListener(
+            "perspective-column-style-change"
+        );
+        await checkbox.click();
+        expect(await listener()).toBe(true);
+        let newStyle = await td.evaluate((node) => {
+            return node.style.cssText;
         });
+        expect(tdStyle).not.toBe(newStyle);
+    });
+
+    test.skip("Boolean styling", async ({ page }) => {
+        // Boolean styling is not implemented.
+    });
 
-        await viewer.dataGrid.regularTable.openColumnEditBtn
-            .first()
-            .waitFor({ state: "detached" });
+    test.skip("String styling", async ({ page }) => {
+        let view = new PspViewer(page);
+        let table = view.dataGrid.regularTable;
+
+        let col = await view.getOrCreateColumnByType("string");
+        let name = await col.name.innerText();
+        expect(name).toBeTruthy();
+        let td = await table.getFirstCellByColumnName(name);
+        await td.waitFor();
+
+        // bg color
+        await view.assureColumnSettingsOpen(col);
+        await view.columnSettingsSidebar.openTab("Style");
+        let container = view.columnSettingsSidebar.container;
+        let checkbox = container.getByRole("checkbox").last();
+        await checkbox.waitFor();
+
+        let tdStyle = await td.evaluate((node) => node.style.cssText);
+        let listener = await view.getEventListener(
+            "perspective-column-style-change"
+        );
+        await checkbox.check();
+        expect(await listener()).toBe(true);
+        let newStyle = await td.evaluate((node) => node.style.cssText);
+        expect(tdStyle).not.toBe(newStyle);
     });
 });
 
-// Data grid table header rows look different when a split-by is present.
+// Keeping the column sidebar open makes this unncessary.
+test.skip("Edit highlights go away when view re-draws", async ({ page }) => {
+    let viewer = new PspViewer(page);
+    await viewer.openSettingsPanel();
+    let btn = await viewer.dataGrid.regularTable.getEditBtnByName("Row ID");
+    await btn.click();
+    await viewer.settingsPanel.groupby("Ship Mode");
+    await viewer.columnSettingsSidebar.container.waitFor({
+        state: "detached",
+    });
 
-// TODO: These tests are failing due to bunk selectors.
+    await viewer.dataGrid.regularTable.openColumnEditBtn
+        .first()
+        .waitFor({ state: "detached" });
+});
+
+// Data grid table header rows look different when a split-by is present.
 runTests("Datagrid Column Styles - Split-by", () => {
     test.beforeEach(async ({ page }) => {
         await page.goto(
diff --git a/rust/perspective-viewer/test/js/column_settings/interactions.spec.ts b/rust/perspective-viewer/test/js/column_settings/interactions.spec.ts
index 42839ccf65..5b8af2e596 100644
--- a/rust/perspective-viewer/test/js/column_settings/interactions.spec.ts
+++ b/rust/perspective-viewer/test/js/column_settings/interactions.spec.ts
@@ -251,7 +251,7 @@ async function open(
     }, viewer_settings);
 
     let selector = active
-        ? view.settingsPanel.activeColumns.getColumnByName(
+        ? await view.settingsPanel.activeColumns.getColumnByName(
               expr ? expr_name : view_columns[0]
           )
         : expr
@@ -286,16 +286,32 @@ async function checkOutput(
         tabs: string[],
         unexpected_tabs: string[]
     ) => {
-        await view.columnSettingsSidebar.container
-            .locator(".tab.selected")
-            .getByText(selectedTab)
-            .waitFor();
+        if (selectedTab === "") {
+            await view.columnSettingsSidebar.container
+                .locator(".tab.selected .tab-title")
+                .first()
+                .waitFor();
+        } else {
+            await view.columnSettingsSidebar.container
+                .locator(`.tab.selected #${selectedTab}`)
+                .waitFor();
+        }
+
         for (let tab of tabs) {
-            await view.columnSettingsSidebar.tabTitle.getByText(tab).waitFor();
+            if (tab === "") {
+                await view.columnSettingsSidebar.container
+                    .locator(`.tab-title`)
+                    .first()
+                    .waitFor();
+            } else {
+                await view.columnSettingsSidebar.container
+                    .locator(`#${tab}`)
+                    .waitFor();
+            }
         }
         for (let tab of unexpected_tabs) {
             await view.columnSettingsSidebar.tabTitle
-                .getByText(tab)
+                .locator(`#${tab}`)
                 .waitFor({ state: "hidden" });
         }
     };
@@ -598,10 +614,40 @@ test.describe("Unique Behaviors", () => {
             plugin: "X/Y Scatter",
             columns: ["Row ID", "Postal Code", null, null, "Category"],
         });
-        let col = view.settingsPanel.activeColumns.getColumnByName("Category");
+        let col = await view.settingsPanel.activeColumns.getColumnByName(
+            "Category"
+        );
         await col.editBtn.click();
         await expect(view.columnSettingsSidebar.container).toBeVisible();
         view.settingsPanel.groupby("City");
         await expect(view.columnSettingsSidebar.container).toBeHidden();
     });
+
+    test("Datagrid - switching between date and datetime should rerender", async ({
+        page,
+    }) => {
+        const view = new PageView(page);
+        await view.restore({
+            settings: true,
+            plugin: "Datagrid",
+            columns: ["date", "datetime"],
+            expressions: { date: "date(0,0,0)", datetime: "now()" },
+        });
+        const date = await view.settingsPanel.activeColumns.getColumnByName(
+            "date",
+            true
+        );
+        await date.editBtn.click();
+        await view.columnSettingsSidebar.openTab("Style");
+        const dateSnapshot =
+            await view.columnSettingsSidebar.styleTab.container.innerHTML();
+        const datetime = await view.settingsPanel.activeColumns.getColumnByName(
+            "datetime",
+            true
+        );
+        await datetime.editBtn.click();
+        const datetimeSnapshot =
+            await view.columnSettingsSidebar.styleTab.container.innerHTML();
+        expect(datetimeSnapshot).not.toEqual(dateSnapshot);
+    });
 });
diff --git a/rust/perspective-viewer/test/js/column_settings/number_string_format.spec.ts b/rust/perspective-viewer/test/js/column_settings/number_string_format.spec.ts
new file mode 100644
index 0000000000..48876233ae
--- /dev/null
+++ b/rust/perspective-viewer/test/js/column_settings/number_string_format.spec.ts
@@ -0,0 +1,208 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { Type } from "@finos/perspective";
+import {
+    DEFAULT_CONFIG,
+    PageView,
+    compareContentsToSnapshot,
+} from "@finos/perspective-test";
+import { ColumnSelector } from "@finos/perspective-test/src/js/models/settings_panel";
+import { test, expect } from "@finos/perspective-test";
+import { DataGridPlugin } from "@finos/perspective-test/src/js/models/plugins";
+import { DataGrid } from "@finos/perspective-test/src/js/models/plugins/datagrid";
+
+test.beforeEach(async ({ page }) => {
+    await page.goto("/tools/perspective-test/src/html/basic-test.html");
+    await page.evaluate(async () => {
+        while (!window["__TEST_PERSPECTIVE_READY__"]) {
+            await new Promise((x) => setTimeout(x, 10));
+        }
+    });
+});
+
+test("Integer/float styles", async ({ page }) => {
+    const view = new PageView(page);
+    await view.restore({
+        settings: true,
+        plugin: "Datagrid",
+        columns: ["Profit", "Row ID"],
+    });
+    const profit = await view.settingsPanel.activeColumns.getColumnByName(
+        "Profit"
+    );
+    await profit.editBtn.click();
+    const styleContainer = view.columnSettingsSidebar.styleTab.container;
+    await styleContainer.locator("#fractional-digits-label").waitFor();
+    const rowId = await view.settingsPanel.activeColumns.getColumnByName(
+        "Row ID"
+    );
+    await rowId.editBtn.click();
+    await styleContainer
+        .getByText("Fractional Digits")
+        .waitFor({ state: "detached" });
+});
+
+for (const name of ["Significant Digits", "Fractional Digits"]) {
+    test.skip(`Rounding Increment doesn't send when ${name} is open`, async ({
+        page,
+    }) => {
+        let view = new PageView(page);
+        await view.restore({
+            settings: true,
+            plugin: "Datagrid",
+            columns: ["Profit"],
+        });
+        const profit = await view.settingsPanel.activeColumns.getColumnByName(
+            "Profit"
+        );
+        await profit.editBtn.click();
+        const styleContainer = view.columnSettingsSidebar.styleTab.container;
+        await styleContainer
+            .locator('div[data-value="Auto"] select')
+            .first()
+            .selectOption("20");
+
+        await styleContainer.getByText(name).click();
+        let config = await view.save();
+        expect(config).toMatchObject({
+            columns_config: {},
+        });
+
+        await styleContainer.getByText(name).click();
+        config = await view.save();
+        expect(config).toMatchObject({
+            columns_config: {
+                Profit: {
+                    number_format: {
+                        maximumFractionDigits: 0,
+                        roundingIncrement: 20,
+                    },
+                },
+            },
+        });
+    });
+}
+
+test.skip("Rounding Priority doesn't send unless Fractional and Significant Digits are open", async ({
+    page,
+}) => {
+    const view = new PageView(page);
+    await view.restore({
+        settings: true,
+        plugin: "Datagrid",
+        columns: ["Profit"],
+    });
+    const col = await view.settingsPanel.activeColumns.getColumnByName(
+        "Profit"
+    );
+    await col.editBtn.click();
+    const styleContainer = view.columnSettingsSidebar.styleTab.container;
+    await expect(
+        styleContainer.locator("#Rounding-Priority-checkbox")
+    ).toBeEnabled();
+
+    const select = styleContainer
+        .locator('div[data-value="Auto"] select')
+        .nth(1);
+    await select.scrollIntoViewIfNeeded();
+    await select.selectOption("MorePrecision");
+    const config = await view.save();
+    expect(config).toMatchObject({
+        columns_config: {
+            Profit: {
+                number_format: {
+                    roundingPriority: "morePrecision",
+                },
+            },
+        },
+    });
+    await styleContainer.getByText("Fractional Digits").click();
+    const config2 = await view.save();
+    expect(config2).toMatchObject({
+        columns_config: {},
+    });
+});
+
+test("Datagrid integration", async ({ page }) => {
+    const view = new PageView(page);
+    const datagrid = new DataGrid(page);
+    await view.restore({
+        plugin: "Datagrid",
+        columns: ["Profit"],
+        columns_config: {
+            Profit: {
+                number_format: {
+                    minimumIntegerDigits: 3,
+                    maximumFractionDigits: 0,
+                    roundingIncrement: 50,
+                    roundingMode: "ceil",
+                    notation: "compact",
+                    compactDisplay: "short",
+                    signDisplay: "always",
+                },
+            },
+        },
+    });
+    const decimal = await datagrid.regularTable.table.innerHTML();
+    await compareContentsToSnapshot(decimal, [
+        "datagrid-integration-decimal.html",
+    ]);
+    await view.restore({
+        plugin: "Datagrid",
+        columns: ["Profit"],
+        columns_config: {
+            Profit: {
+                number_format: {
+                    style: "currency",
+                    currency: "USD",
+                    currencySign: "accounting",
+                },
+            },
+        },
+    });
+    const currency = await datagrid.regularTable.table.innerHTML();
+    await compareContentsToSnapshot(currency, [
+        "datagrid-integration-currency.html",
+    ]);
+
+    await view.restore({
+        plugin: "Datagrid",
+        columns: ["Profit"],
+        columns_config: {
+            Profit: {
+                number_format: {
+                    style: "unit",
+                    unit: "byte",
+                },
+            },
+        },
+    });
+    const unit = await datagrid.regularTable.table.innerHTML();
+    await compareContentsToSnapshot(unit, ["datagrid-integration-unit.html"]);
+
+    await view.restore({
+        plugin: "Datagrid",
+        columns: ["Profit"],
+        columns_config: {
+            Profit: {
+                number_format: {
+                    style: "percent",
+                },
+            },
+        },
+    });
+    const data = await datagrid.regularTable.table.innerHTML();
+    await compareContentsToSnapshot(data, [
+        "datagrid-integration-percent.html",
+    ]);
+});
diff --git a/rust/perspective-viewer/test/js/column_settings/xy.spec.ts b/rust/perspective-viewer/test/js/column_settings/xy.spec.ts
index a1626a2307..564d12e2f6 100644
--- a/rust/perspective-viewer/test/js/column_settings/xy.spec.ts
+++ b/rust/perspective-viewer/test/js/column_settings/xy.spec.ts
@@ -10,11 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import {
-    PageView as PspViewer,
-    compareNodes,
-    getEventListener,
-} from "@finos/perspective-test";
+import { PageView as PspViewer, compareNodes } from "@finos/perspective-test";
 import { SymbolPair } from "@finos/perspective-test/src/js/models/column_settings";
 
 import { expect, test } from "@finos/perspective-test";
diff --git a/rust/perspective-viewer/test/js/events.spec.ts b/rust/perspective-viewer/test/js/events.spec.ts
index f9568a015d..b7a04ad651 100644
--- a/rust/perspective-viewer/test/js/events.spec.ts
+++ b/rust/perspective-viewer/test/js/events.spec.ts
@@ -74,6 +74,7 @@ test.describe("Events", () => {
             aggregates: {},
             split_by: [],
             columns: ["Profit", "Sales"],
+            columns_config: {},
             expressions: {},
             filter: [],
             plugin: "Debug",
diff --git a/rust/perspective-viewer/test/js/expressions.spec.js b/rust/perspective-viewer/test/js/expressions.spec.js
index 8e1a707ea3..fdbb482d36 100644
--- a/rust/perspective-viewer/test/js/expressions.spec.js
+++ b/rust/perspective-viewer/test/js/expressions.spec.js
@@ -354,7 +354,6 @@ test.describe("Expressions", () => {
 
     // Currently does not work in Firefox!
     test("Clicking on New Expression Button marks it.", async ({ page }) => {
-        await page.pause();
         await page.evaluate(openSidebarAndScrollToBottom);
         let addExprButton = await page.waitForSelector("#add-expression");
         let unclicked = await addExprButton.getAttribute("class");
diff --git a/rust/perspective-viewer/test/js/intl.spec.js b/rust/perspective-viewer/test/js/intl.spec.js
new file mode 100644
index 0000000000..996e4b1579
--- /dev/null
+++ b/rust/perspective-viewer/test/js/intl.spec.js
@@ -0,0 +1,64 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import { PageView as PspViewer } from "@finos/perspective-test";
+import { expect, test } from "@finos/perspective-test";
+import fs from "node:fs";
+
+test.describe("Localization", function () {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/tools/perspective-test/src/html/basic-test.html");
+        await page.evaluate(async () => {
+            while (!window["__TEST_PERSPECTIVE_READY__"]) {
+                await new Promise((x) => setTimeout(x, 10));
+            }
+        });
+    });
+
+    test("All label tags are empty", async function ({ page }) {
+        const view = new PspViewer(page);
+        await view.openSettingsPanel();
+        const editBtn = view.dataGrid.regularTable.editBtnRow
+            .locator("th.psp-menu-enabled span")
+            .first();
+
+        await editBtn.click();
+        await view.columnSettingsSidebar.container.waitFor();
+        const contents = await page.evaluate(() => {
+            const viewer = document.querySelector("perspective-viewer");
+            return Array.from(viewer.shadowRoot.querySelectorAll("label"))
+                .map((x) => x.textContent)
+                .filter((x) => x != "");
+        });
+
+        expect(contents).toEqual(["+", "-"]);
+    });
+
+    const intl = fs
+        .readFileSync(`${__dirname}/../../src/themes/intl.less`)
+        .toString();
+
+    const keys = Array.from(intl.matchAll(/--[a-zA-Z0-9\-]+/g)).flat();
+    const langfiles = fs.readdirSync(`${__dirname}/../../src/themes/intl`);
+    for (const file of langfiles) {
+        test(`${file} has all intl keys present`, async function ({ page }) {
+            const langfile = fs
+                .readFileSync(`${__dirname}/../../src/themes/intl/${file}`)
+                .toString();
+            for (const key of keys) {
+                const re = new RegExp(key, "g");
+                const x = langfile.match(re);
+                expect(x).toEqual([key]);
+            }
+        });
+    }
+});
diff --git a/rust/perspective-viewer/test/js/migrate_viewer.spec.js b/rust/perspective-viewer/test/js/migrate_viewer.spec.ts
similarity index 52%
rename from rust/perspective-viewer/test/js/migrate_viewer.spec.js
rename to rust/perspective-viewer/test/js/migrate_viewer.spec.ts
index 62ee11ffcd..b5b0e51fdd 100644
--- a/rust/perspective-viewer/test/js/migrate_viewer.spec.js
+++ b/rust/perspective-viewer/test/js/migrate_viewer.spec.ts
@@ -10,19 +10,25 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test, expect } from "@finos/perspective-test";
+import {
+    test,
+    expect,
+    DEFAULT_CONFIG,
+    compareSVGContentsToSnapshot,
+} from "@finos/perspective-test";
 import {
     compareContentsToSnapshot,
     API_VERSION,
 } from "@finos/perspective-test";
-
-const { convert } = require("../../dist/cjs/migrate.js");
+import { PerspectiveViewerConfig } from "../../dist/esm/viewer";
+import { convert } from "../../dist/esm/migrate";
 
 async function get_contents(page) {
     return await page.evaluate(async () => {
-        const plugin = document.querySelector("perspective-viewer").children[0];
-        if (plugin.tagName === "PERSPECTIVE-VIEWER-DATAGRID") {
-            return plugin?.shadowRoot.innerHTML || "MISSING";
+        const plugin =
+            document.querySelector("perspective-viewer")?.children[0];
+        if (plugin?.tagName === "PERSPECTIVE-VIEWER-DATAGRID") {
+            return plugin?.shadowRoot?.innerHTML || "MISSING";
         } else {
             return (
                 plugin?.shadowRoot?.querySelector("#container")?.innerHTML ||
@@ -32,7 +38,14 @@ async function get_contents(page) {
     });
 }
 
-const TESTS = [
+const MIGRATE_BASE_CONFIG = (() => {
+    const config = DEFAULT_CONFIG;
+    delete config.theme;
+    delete config.settings;
+    return config;
+})();
+
+const TESTS: [string, any, PerspectiveViewerConfig][] = [
     [
         "Bucket by year",
         {
@@ -52,6 +65,7 @@ const TESTS = [
             version: API_VERSION,
             plugin: "Y Area",
             plugin_config: {},
+            columns_config: {},
             group_by: ["bucket(\"Order Date\", 'M')"],
             split_by: ["Ship Mode"],
             columns: ["Sales"],
@@ -82,10 +96,14 @@ const TESTS = [
         {
             version: API_VERSION,
             plugin: "Datagrid",
-            plugin_config: {
-                columns: {
-                    Sales: { number_bg_mode: "gradient", bg_gradient: 10 },
+            columns_config: {
+                Sales: {
+                    number_bg_mode: "gradient",
+                    bg_gradient: 10,
                 },
+            },
+            plugin_config: {
+                columns: {},
                 editable: false,
                 scroll_lock: true,
             },
@@ -121,13 +139,14 @@ const TESTS = [
         {
             version: API_VERSION,
             plugin: "Datagrid",
-            plugin_config: {
-                columns: {
-                    Sales: {
-                        bg_gradient: 10,
-                        number_bg_mode: "gradient",
-                    },
+            columns_config: {
+                Sales: {
+                    bg_gradient: 10,
+                    number_bg_mode: "gradient",
                 },
+            },
+            plugin_config: {
+                columns: {},
                 editable: false,
                 scroll_lock: true,
             },
@@ -166,56 +185,51 @@ const TESTS = [
             aggregates: {},
         },
         {
-            version: API_VERSION,
+            ...MIGRATE_BASE_CONFIG,
             plugin: "Datagrid",
-            plugin_config: {
-                columns: {
-                    Sales: {
-                        fg_gradient: 10,
-                        number_fg_mode: "bar",
-                        neg_fg_color: "#115599",
-                        pos_fg_color: "#115599",
-                    },
+            columns_config: {
+                Sales: {
+                    fg_gradient: 10,
+                    number_fg_mode: "bar",
+                    neg_fg_color: "#115599",
+                    pos_fg_color: "#115599",
                 },
+            },
+            plugin_config: {
+                columns: {},
                 editable: false,
                 scroll_lock: true,
             },
-            group_by: [],
-            split_by: [],
             columns: ["Sales"],
-            filter: [],
-            sort: [],
-            expressions: {},
-            aggregates: {},
-            title: null,
         },
     ],
     [
         "New API, reflexive (new API is unmodified)",
         {
-            version: API_VERSION,
+            ...MIGRATE_BASE_CONFIG,
             plugin: "Datagrid",
-            plugin_config: {
-                columns: {
-                    Discount: {
-                        neg_bg_color: "#780aff",
-                        number_bg_mode: "color",
-                        number_fg_mode: "disabled",
-                        pos_bg_color: "#f5ac0f",
-                    },
-                    Profit: {
-                        neg_bg_color: "#f50fed",
-                        number_bg_mode: "color",
-                        number_fg_mode: "disabled",
-                        pos_bg_color: "#32cd82",
-                    },
-                    Sales: {
-                        neg_bg_color: "#f5ac0f",
-                        number_bg_mode: "color",
-                        number_fg_mode: "disabled",
-                        pos_bg_color: "#780aff",
-                    },
+            columns_config: {
+                Discount: {
+                    neg_bg_color: "#780aff",
+                    number_bg_mode: "color",
+                    number_fg_mode: "disabled",
+                    pos_bg_color: "#f5ac0f",
+                },
+                Profit: {
+                    neg_bg_color: "#f50fed",
+                    number_bg_mode: "color",
+                    number_fg_mode: "disabled",
+                    pos_bg_color: "#32cd82",
                 },
+                Sales: {
+                    neg_bg_color: "#f5ac0f",
+                    number_bg_mode: "color",
+                    number_fg_mode: "disabled",
+                    pos_bg_color: "#780aff",
+                },
+            },
+            plugin_config: {
+                columns: {},
                 editable: false,
                 scroll_lock: true,
             },
@@ -228,37 +242,32 @@ const TESTS = [
                 "Order Date",
             ],
             sort: [["Sub-Category", "desc"]],
-            aggregates: {},
-            filter: [],
-            group_by: [],
-            expressions: {},
-            split_by: [],
-            title: null,
         },
         {
-            version: API_VERSION,
+            ...MIGRATE_BASE_CONFIG,
             plugin: "Datagrid",
-            plugin_config: {
-                columns: {
-                    Discount: {
-                        neg_bg_color: "#780aff",
-                        number_bg_mode: "color",
-                        number_fg_mode: "disabled",
-                        pos_bg_color: "#f5ac0f",
-                    },
-                    Profit: {
-                        neg_bg_color: "#f50fed",
-                        number_bg_mode: "color",
-                        number_fg_mode: "disabled",
-                        pos_bg_color: "#32cd82",
-                    },
-                    Sales: {
-                        neg_bg_color: "#f5ac0f",
-                        number_bg_mode: "color",
-                        number_fg_mode: "disabled",
-                        pos_bg_color: "#780aff",
-                    },
+            columns_config: {
+                Discount: {
+                    neg_bg_color: "#780aff",
+                    number_bg_mode: "color",
+                    number_fg_mode: "disabled",
+                    pos_bg_color: "#f5ac0f",
+                },
+                Profit: {
+                    neg_bg_color: "#f50fed",
+                    number_bg_mode: "color",
+                    number_fg_mode: "disabled",
+                    pos_bg_color: "#32cd82",
+                },
+                Sales: {
+                    neg_bg_color: "#f5ac0f",
+                    number_bg_mode: "color",
+                    number_fg_mode: "disabled",
+                    pos_bg_color: "#780aff",
                 },
+            },
+            plugin_config: {
+                columns: {},
                 editable: false,
                 scroll_lock: true,
             },
@@ -271,12 +280,6 @@ const TESTS = [
                 "Order Date",
             ],
             sort: [["Sub-Category", "desc"]],
-            aggregates: {},
-            filter: [],
-            group_by: [],
-            expressions: {},
-            split_by: [],
-            title: null,
         },
     ],
     [
@@ -291,35 +294,169 @@ const TESTS = [
             title: null,
             group_by: [],
             split_by: [],
-            columns: ["'hello'", "expr"],
+            columns: ["'hello'", "expr", null, null, "Region"],
             filter: [],
             sort: [],
             expressions: ["// expr\n1+1", "'hello'"],
             aggregates: {},
         },
         {
+            ...MIGRATE_BASE_CONFIG,
             version: API_VERSION,
             plugin: "X/Y Scatter",
+            columns_config: {
+                Region: {
+                    symbols: {
+                        Central: "circle",
+                    },
+                },
+            },
+            columns: ["'hello'", "expr", null, null, "Region"],
+            expressions: {
+                expr: "1+1",
+                "'hello'": "'hello'",
+            },
+        },
+    ],
+    [
+        "From 2.7.1 - Datagrid",
+        {
+            version: "2.7.1",
+            plugin: "Datagrid",
+            plugin_config: {
+                columns: {
+                    datetime: {
+                        format: "custom",
+                        fractionalSecondDigits: 3,
+                        second: "2-digit",
+                        minute: "disabled",
+                        hour: "2-digit",
+                        day: "2-digit",
+                        weekday: "short",
+                        month: "narrow",
+                        year: "numeric",
+                        hour12: false,
+                        timeZone: "America/Curacao",
+                        datetime_color_mode: "foreground",
+                    },
+                    "Order ID": {
+                        format: "link",
+                        string_color_mode: "foreground",
+                        color: "#ff0000",
+                    },
+                    "Row ID": {
+                        number_bg_mode: "gradient",
+                        fixed: 1,
+                        pos_fg_color: "#000000",
+                        neg_fg_color: "#000000",
+                        bg_gradient: 9,
+                    },
+                    "Order Date": {
+                        dateStyle: "disabled",
+                        datetime_color_mode: "foreground",
+                        color: "#00ff00",
+                    },
+                },
+                editable: true,
+                scroll_lock: false,
+            },
+            columns: ["Row ID", "Order ID", "Order Date", "datetime"],
+            expressions: { datetime: "datetime(100)" },
+            aggregates: {},
+            filter: [],
+            group_by: [],
+            sort: [],
+            split_by: [],
+            title: null,
+        },
+        {
+            ...MIGRATE_BASE_CONFIG,
+            plugin: "Datagrid",
+            plugin_config: {
+                columns: {},
+                editable: true,
+                scroll_lock: false,
+            },
+            columns_config: {
+                datetime: {
+                    date_format: {
+                        format: "custom",
+                        fractionalSecondDigits: 3,
+                        second: "2-digit",
+                        minute: "disabled",
+                        hour: "2-digit",
+                        day: "2-digit",
+                        weekday: "short",
+                        month: "narrow",
+                        year: "numeric",
+                        timeZone: "America/Curacao",
+                        hour12: false,
+                    },
+                    datetime_color_mode: "foreground",
+                },
+                "Order ID": {
+                    format: "link",
+                    string_color_mode: "foreground",
+                    color: "#ff0000",
+                },
+                "Row ID": {
+                    number_bg_mode: "gradient",
+                    pos_fg_color: "#000000",
+                    neg_fg_color: "#000000",
+                    bg_gradient: 9,
+                    number_format: {
+                        minimumFractionDigits: 1,
+                        maximumFractionDigits: 1,
+                    },
+                },
+                "Order Date": {
+                    date_format: {
+                        dateStyle: "disabled",
+                    },
+                    datetime_color_mode: "foreground",
+                    color: "#00ff00",
+                },
+            },
+            columns: ["Row ID", "Order ID", "Order Date", "datetime"],
+            expressions: {
+                datetime: "datetime(100)",
+            },
+        },
+    ],
+    [
+        "From 2.7.1 - X/Y Scatter",
+        {
+            version: "2.7.1",
+            plugin: "X/Y Scatter",
             plugin_config: {
                 columns: {
-                    Region: {
+                    Category: {
                         symbols: {
-                            Central: "circle",
+                            Furniture: "star",
                         },
                     },
                 },
             },
-            title: null,
-            group_by: [],
-            split_by: [],
-            columns: ["'hello'", "expr"],
+            columns: ["Row ID", "City", null, null, "Category"],
+            aggregates: {},
+            expressions: {},
             filter: [],
+            group_by: [],
             sort: [],
-            expressions: {
-                expr: "1+1",
-                "'hello'": "'hello'",
+            split_by: [],
+            title: null,
+        },
+        {
+            ...MIGRATE_BASE_CONFIG,
+            plugin: "X/Y Scatter",
+            columns_config: {
+                Category: {
+                    symbols: {
+                        Furniture: "star",
+                    },
+                },
             },
-            aggregates: {},
+            columns: ["Row ID", "City", null, null, "Category"],
         },
     ],
 ];
@@ -332,7 +469,7 @@ test.beforeEach(async ({ page }) => {
         }
     });
     await page.evaluate(async () => {
-        await document.querySelector("perspective-viewer").restore({
+        await document?.querySelector("perspective-viewer")?.restore({
             plugin: "Datagrid",
         });
     });
@@ -342,47 +479,49 @@ test.describe("Migrate Viewer", () => {
     test.describe("Viewer config migrations", () => {
         for (const [name, old, current] of TESTS) {
             test(`Migrate '${name}'`, async ({ page }) => {
-                const converted = convert(
-                    JSON.parse(JSON.stringify(old), { warn: true }),
-                    {
-                        replace_defaults: true,
-                    }
-                );
+                const converted = convert(JSON.parse(JSON.stringify(old)), {
+                    replace_defaults: true,
+                    verbose: true,
+                });
                 expect(converted).toEqual(current);
             });
         }
     });
 
     test.describe("migrate", async () => {
-        for (const [name, old, current] of TESTS) {
-            // NOTE: these tests were previously skipped.
+        for (const [name, given, expected] of TESTS) {
             test(`restore '${name}'`, async ({ page }) => {
-                const converted = convert(JSON.parse(JSON.stringify(old)), {
-                    replace_defaults: true,
-                });
-                const config = await page.evaluate(async (old) => {
-                    const viewer = document.querySelector("perspective-viewer");
+                const saved = await page.evaluate(async (converted) => {
+                    const viewer =
+                        document.querySelector("perspective-viewer")!;
                     await viewer.getTable();
-                    old.settings = true;
-                    await viewer.restore(old);
-                    const current = await viewer.save();
-                    current.settings = false;
-                    return current;
-                }, converted);
+                    converted.settings = true;
+                    await viewer.restore(converted);
+                    const saved = await viewer.save();
+                    saved.settings = false;
+                    return saved;
+                }, expected);
 
-                expect(config.theme).toEqual("Pro Light");
-                delete config["theme"];
+                expect(saved.theme).toEqual("Pro Light");
+                delete saved["theme"];
 
-                expect(config.settings).toEqual(false);
-                delete config.settings;
+                expect(saved.settings).toEqual(false);
+                delete saved.settings;
 
-                expect(config).toEqual(current);
-                expect(convert(old, { replace_defaults: true })).toEqual(
-                    current
-                );
+                expect(saved).toEqual(expected);
 
-                const contents = await get_contents(page);
-                await compareContentsToSnapshot(contents, [
+                let selector;
+                if (saved.plugin === "Datagrid") {
+                    selector = "perspective-viewer-datagrid";
+                } else if (saved.plugin === "Map Scatter") {
+                    selector = "perspective-viewer-openlayers-scatter";
+                } else {
+                    const plugin = saved.plugin
+                        ?.replace(/[-\/\s]/gi, "")
+                        .toLowerCase();
+                    selector = `perspective-viewer-d3fc-${plugin}`;
+                }
+                await compareSVGContentsToSnapshot(page, selector, [
                     `migrate-restore-${name}.txt`,
                 ]);
             });
diff --git a/rust/perspective-viewer/test/js/plugins.spec.js b/rust/perspective-viewer/test/js/plugins.spec.js
index d17dd64039..46c408ff6a 100644
--- a/rust/perspective-viewer/test/js/plugins.spec.js
+++ b/rust/perspective-viewer/test/js/plugins.spec.js
@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test, expect } from "@finos/perspective-test";
+import { test, expect, DEFAULT_CONFIG } from "@finos/perspective-test";
 import { API_VERSION } from "@finos/perspective-test";
 
 test.beforeEach(async ({ page }) => {
@@ -35,8 +35,8 @@ test.describe("Plugin Priority Order", () => {
         });
 
         const expected = {
+            ...DEFAULT_CONFIG,
             version: API_VERSION,
-            aggregates: {},
             columns: [
                 "Row ID",
                 "Order ID",
@@ -58,16 +58,7 @@ test.describe("Plugin Priority Order", () => {
                 "Discount",
                 "Profit",
             ],
-            expressions: {},
-            filter: [],
-            group_by: [],
             plugin: "HighPriority",
-            plugin_config: {},
-            settings: false,
-            sort: [],
-            split_by: [],
-            theme: "Pro Light",
-            title: null,
         };
 
         expect(saved).toEqual(expected);
diff --git a/rust/perspective-viewer/test/js/regressions.spec.js b/rust/perspective-viewer/test/js/regressions.spec.js
index 83b93cd348..4cbbd138cc 100644
--- a/rust/perspective-viewer/test/js/regressions.spec.js
+++ b/rust/perspective-viewer/test/js/regressions.spec.js
@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test, expect } from "@finos/perspective-test";
+import { test, expect, DEFAULT_CONFIG } from "@finos/perspective-test";
 import {
     API_VERSION,
     compareContentsToSnapshot,
@@ -114,19 +114,12 @@ test.describe("Regression tests", () => {
         });
 
         expect(config).toEqual({
-            version: API_VERSION,
-            aggregates: {},
+            ...DEFAULT_CONFIG,
             columns: ["Sales"],
-            expressions: {},
             filter: [["State", "in", ["California"]]],
             group_by: ["State"],
             plugin: "Debug",
-            plugin_config: {},
             settings: true,
-            sort: [],
-            split_by: [],
-            theme: "Pro Light",
-            title: null,
         });
 
         const contents = await get_contents(page);
@@ -158,6 +151,7 @@ test.describe("Regression tests", () => {
 
         const value = await page.evaluate(async () => {
             const viewer = document.querySelector("perspective-viewer");
+            await viewer.flush();
             return viewer.shadowRoot.querySelector("input.num-filter").value;
         });
 
diff --git a/rust/perspective-viewer/test/js/save_restore.spec.js b/rust/perspective-viewer/test/js/save_restore.spec.js
index 61868ad41e..c51ceb44dd 100644
--- a/rust/perspective-viewer/test/js/save_restore.spec.js
+++ b/rust/perspective-viewer/test/js/save_restore.spec.js
@@ -10,7 +10,7 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
-import { test, expect } from "@finos/perspective-test";
+import { test, expect, DEFAULT_CONFIG } from "@finos/perspective-test";
 import {
     compareContentsToSnapshot,
     API_VERSION,
@@ -54,23 +54,14 @@ test.describe("Save/Restore", async () => {
         });
 
         expect(config).toEqual({
-            version: API_VERSION,
-            aggregates: {},
-            split_by: [],
+            ...DEFAULT_CONFIG,
             columns: ["Profit", "Sales"],
-            expressions: {},
-            filter: [],
             plugin: "Debug",
-            plugin_config: {},
             group_by: ["State"],
             settings: true,
-            sort: [],
-            theme: "Pro Light",
-            title: null,
         });
 
         const contents = await get_contents(page);
-
         await compareContentsToSnapshot(contents, [
             "save-returns-current-config.txt",
         ]);
@@ -89,19 +80,11 @@ test.describe("Save/Restore", async () => {
         });
 
         expect(config).toEqual({
-            version: API_VERSION,
-            aggregates: {},
-            split_by: [],
+            ...DEFAULT_CONFIG,
             columns: ["Profit", "Sales"],
-            expressions: {},
-            filter: [],
             plugin: "Debug",
-            plugin_config: {},
             group_by: ["State"],
             settings: true,
-            sort: [],
-            theme: "Pro Light",
-            title: null,
         });
 
         const config2 = await page.evaluate(async () => {
@@ -111,9 +94,7 @@ test.describe("Save/Restore", async () => {
         });
 
         expect(config2).toEqual({
-            version: API_VERSION,
-            aggregates: {},
-            split_by: [],
+            ...DEFAULT_CONFIG,
             columns: [
                 "Row ID",
                 "Order ID",
@@ -135,15 +116,9 @@ test.describe("Save/Restore", async () => {
                 "Discount",
                 "Profit",
             ],
-            expressions: {},
-            filter: [],
             plugin: "Debug",
-            plugin_config: {},
-            group_by: [],
             settings: true,
-            sort: [],
             theme: "Pro Light",
-            title: null,
         });
 
         const config3 = await page.evaluate(async (config) => {
@@ -153,19 +128,12 @@ test.describe("Save/Restore", async () => {
         }, config);
 
         expect(config3).toEqual({
-            version: API_VERSION,
-            aggregates: {},
-            split_by: [],
+            ...DEFAULT_CONFIG,
             columns: ["Profit", "Sales"],
-            expressions: {},
-            filter: [],
             plugin: "Debug",
-            plugin_config: {},
             group_by: ["State"],
             settings: true,
-            sort: [],
             theme: "Pro Light",
-            title: null,
         });
 
         const contents = await get_contents(page);
diff --git a/tools/perspective-scripts/lint.mjs b/tools/perspective-scripts/lint.mjs
index 8f17244c9b..9a88fd29d7 100644
--- a/tools/perspective-scripts/lint.mjs
+++ b/tools/perspective-scripts/lint.mjs
@@ -30,7 +30,7 @@ export function lint_js(is_fix = false) {
     const fix = is_fix ? "--fix" : undefined;
     cmd.sh`cd rust/perspective-viewer`;
     cmd.sh`cargo build -p perspective-lint --release`;
-    cmd.sh`cargo clippy ${fix} ${dirty} ${staged}`;
+    cmd.sh`cargo clippy ${fix} ${dirty} ${staged} -- -Dwarnings`;
     cmd.sh`RUSTFMT="target/release/lint" cargo fmt ${check}`;
     cmd.runSync();
 }
diff --git a/tools/perspective-scripts/package.json b/tools/perspective-scripts/package.json
index 5abbe192e7..de79a38f27 100644
--- a/tools/perspective-scripts/package.json
+++ b/tools/perspective-scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-scripts",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Build scripts based on perspective",
     "private": true,
     "files": [
diff --git a/tools/perspective-test/package.json b/tools/perspective-test/package.json
index 504d02c7c9..731c088af4 100644
--- a/tools/perspective-test/package.json
+++ b/tools/perspective-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@finos/perspective-test",
-    "version": "2.8.1",
+    "version": "2.9.0",
     "description": "Test utility based on perspective",
     "private": true,
     "main": "src/js/index",
@@ -19,7 +19,7 @@
     "author": "",
     "license": "Apache-2.0",
     "dependencies": {
-        "@finos/perspective": "^2.8.1",
+        "@finos/perspective": "^2.9.0",
         "xml-formatter": "2.4.0"
     }
 }
diff --git a/tools/perspective-test/playwright.config.ts b/tools/perspective-test/playwright.config.ts
index b4f6c9f3c6..13fa82ab12 100644
--- a/tools/perspective-test/playwright.config.ts
+++ b/tools/perspective-test/playwright.config.ts
@@ -154,9 +154,9 @@ const PROJECTS = (() => {
 
 // See https://playwright.dev/docs/test-configuration.
 export default defineConfig({
-    timeout: 300_000,
+    timeout: 30_000,
     expect: {
-        timeout: 100_000,
+        timeout: 10_000,
     },
     forbidOnly: !!process.env.CI,
     retries: process.env.CI ? 2 : 0,
diff --git a/tools/perspective-test/results.tar.gz b/tools/perspective-test/results.tar.gz
index 60526daaa1..9d85251343 100644
Binary files a/tools/perspective-test/results.tar.gz and b/tools/perspective-test/results.tar.gz differ
diff --git a/tools/perspective-test/src/js/global_teardown.ts b/tools/perspective-test/src/js/global_teardown.ts
index 50e4d17fc4..1adaacef82 100644
--- a/tools/perspective-test/src/js/global_teardown.ts
+++ b/tools/perspective-test/src/js/global_teardown.ts
@@ -13,6 +13,7 @@
 import tar from "tar";
 import fs from "fs";
 import path from "path";
+import glob from "glob";
 
 const RESULTS_PATH = path.join(__dirname, "../../results.tar.gz");
 
@@ -39,7 +40,10 @@ export default async function run() {
                     return !path.endsWith(".DS_Store");
                 },
             },
-            [path.join("tools/perspective-test/dist/snapshots")],
+            [
+                ...glob.sync("tools/perspective-test/dist/snapshots/**/*.txt"),
+                ...glob.sync("tools/perspective-test/dist/snapshots/**/*.html"),
+            ],
             x
         )
     );
diff --git a/tools/perspective-test/src/js/models/column_settings.ts b/tools/perspective-test/src/js/models/column_settings.ts
index 2857e2fe1b..55a1e3f17a 100644
--- a/tools/perspective-test/src/js/models/column_settings.ts
+++ b/tools/perspective-test/src/js/models/column_settings.ts
@@ -45,10 +45,10 @@ export class ColumnSettingsSidebar {
     }
 
     async openTab(name: string) {
-        let locator = this.tabTitle.filter({ hasText: name });
+        let locator = this.container.locator("#" + name);
         await locator.click({ timeout: 1000 });
         await this.container
-            .locator(".tab.selected", { hasText: name })
+            .locator(`.tab.selected #${name}`)
             .waitFor({ timeout: 1000 });
     }
 
@@ -120,13 +120,11 @@ export class ExpressionEditor {
 export class StyleTab {
     container: Locator;
     contents: Locator;
-    precision_input: Locator;
     symbolsEditor: SymbolsEditor;
 
     constructor(parent: Locator) {
         this.container = parent.locator("#style-tab");
         this.contents = parent.locator(".style_contents");
-        this.precision_input = parent.locator("#fixed-param");
         this.symbolsEditor = new SymbolsEditor(this.container);
     }
 }
diff --git a/tools/perspective-test/src/js/models/page.ts b/tools/perspective-test/src/js/models/page.ts
index 6ec977e854..6ec19a7afd 100644
--- a/tools/perspective-test/src/js/models/page.ts
+++ b/tools/perspective-test/src/js/models/page.ts
@@ -102,7 +102,7 @@ export class PageView {
             }
             await this.settingsPanel.createNewExpression("expr", expr, true);
             await settingsPanel.activeColumns.activateColumn("expr");
-            col = settingsPanel.activeColumns.getColumnByName("expr");
+            col = await settingsPanel.activeColumns.getColumnByName("expr");
         }
         await expect(col.container).toBeVisible();
         return col;
@@ -131,4 +131,38 @@ export class PageView {
             return viewer.shadowRoot?.activeElement;
         });
     }
+
+    /**
+     * Adds an event listener to the viewer.
+     * Unlike page.
+     * @param eventName
+     * @param options
+     * @returns A future
+     */
+    async getEventListener(eventName: string, options?: { timeout?: number }) {
+        let key = `__${eventName}_FIRED__`;
+        await this.container.evaluate(
+            (target, { eventName, key }) => {
+                target.addEventListener(eventName, (event) => {
+                    window[key] = true;
+                    console.log(event);
+                });
+            },
+            { eventName, key }
+        );
+        return async () => {
+            return await this.page.evaluate(
+                async ({ options, key }) => {
+                    let i = 0;
+                    while (!window[key]) {
+                        await new Promise((x) => setTimeout(x, 10));
+                        let timeout = options?.timeout ?? 1000;
+                        if (i++ > timeout / 10) return false;
+                    }
+                    return true;
+                },
+                { options, key }
+            );
+        };
+    }
 }
diff --git a/tools/perspective-test/src/js/models/settings_panel.ts b/tools/perspective-test/src/js/models/settings_panel.ts
index b1a7feaea2..0a768cda39 100644
--- a/tools/perspective-test/src/js/models/settings_panel.ts
+++ b/tools/perspective-test/src/js/models/settings_panel.ts
@@ -210,7 +210,7 @@ export class SettingsPanel {
      */
     async selectPlugin(name: string) {
         await this.pluginSelector.click();
-        await this.pluginSelector.getByText(name).click();
+        await this.pluginSelector.locator(`[data-plugin="${name}"]`).click();
     }
 }
 
@@ -267,10 +267,20 @@ export class ActiveColumns {
         return new ColumnSelector(this.columnSelector.first(), true);
     }
 
-    getColumnByName(name: string) {
-        let locator = this.columnSelector.filter({
+    async getColumnByName(name: string, exact: boolean = false) {
+        let locators = this.columnSelector.filter({
             hasText: name,
         });
+
+        let locator: Locator;
+        if (exact) {
+            locator = (await locators.all()).filter(
+                async (l) => (await l.innerText()) === name
+            )[0];
+        } else {
+            locator = locators.first();
+        }
+
         return new ColumnSelector(locator, true);
     }
 
diff --git a/tools/perspective-test/src/js/utils.ts b/tools/perspective-test/src/js/utils.ts
index f5fafe22be..f4bb3b45df 100644
--- a/tools/perspective-test/src/js/utils.ts
+++ b/tools/perspective-test/src/js/utils.ts
@@ -10,12 +10,29 @@
 // ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
 // ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
 
+import { PerspectiveViewerConfig } from "@finos/perspective-viewer";
 import { expect, Locator, Page } from "@playwright/test";
 import * as fs from "node:fs";
 
 export const API_VERSION = JSON.parse(
     fs.readFileSync(__dirname + "/../../package.json").toString()
 )["version"];
+export const DEFAULT_CONFIG: PerspectiveViewerConfig = {
+    aggregates: {},
+    columns_config: {},
+    columns: [],
+    expressions: {},
+    filter: [],
+    group_by: [],
+    plugin: "",
+    plugin_config: {},
+    settings: false,
+    sort: [],
+    split_by: [],
+    version: API_VERSION,
+    title: null,
+    theme: "Pro Light",
+};
 
 /**
  * Clean a `<svg>` for serialization/comparison.
@@ -313,32 +330,3 @@ export async function compareNodes(left: Locator, right: Locator, page: Page) {
         }
     );
 }
-
-/**
- * Adds an event listener and returns a handle which, when awaited, will check if the event has been triggered.
- * @param page
- * @param event
- */
-export async function getEventListener(page: Page, eventName: string) {
-    let hasListener = await page.evaluate((eventName) => {
-        let viewer = document.querySelector("perspective-viewer");
-        if (!viewer) {
-            return false;
-        } else {
-            viewer.addEventListener(eventName, async (event) => {
-                window.__PSP_TEST_LAST_EVENT__ = eventName;
-            });
-            return true;
-        }
-    }, eventName);
-    expect(hasListener).toBe(true);
-
-    // TODO: This should wait for the event to fire instead of just checking.
-    // That would require something like an abort handler and a timeout,
-    // or to race two promises, or something like that. I wasn't able to figure it out but this still works.
-    return async () =>
-        await page.evaluate(
-            (eventName) => window.__PSP_TEST_LAST_EVENT__ === eventName,
-            eventName
-        );
-}
diff --git a/vendor/pyodide/Emscripten.cmake b/vendor/pyodide/Emscripten.cmake
deleted file mode 100644
index 81280a3926..0000000000
--- a/vendor/pyodide/Emscripten.cmake
+++ /dev/null
@@ -1,107 +0,0 @@
-###############################################################################################
-# This file is a 'toolchain description file' for CMake.                                      #
-# Differences from the original Emscripten toolchain file are:                                #
-# - set TARGET_SUPPORTS_SHARED_LIBS to TRUE                                                   #
-# - set CMAKE_INSTALL_PREFIX to WASM_LIBRARY_DIR                                              #
-# - disable the usage of response file for object and libraries                               #
-# - allow to overwrite CMAKE_PROJECT_INCLUDE, CMAKE_PROJECT_INCLUDE_BEFORE with env variable  #
-# - append SIDE_MODULE_CFLAGS and SIDE_MODULE_LDFLAGS automatically                           #
-###############################################################################################
-
-# First, we inherit most of settings from the original Emscripten toolchain file.
-# Then, we will update some settings.
-
-execute_process(COMMAND "em-config" "EMSCRIPTEN_ROOT"
-  RESULT_VARIABLE _emconfig_result
-  OUTPUT_VARIABLE _emconfig_output
-  OUTPUT_STRIP_TRAILING_WHITESPACE)
-if (NOT _emconfig_result EQUAL 0)
-  message(FATAL_ERROR "Failed to find emscripten root directory with command \"em-config EMSCRIPTEN_ROOT\"! Process returned with error code ${_emcache_result}.")
-endif()
-
-file(TO_CMAKE_PATH "${_emconfig_output}" _emcache_output)
-set(EMSCRIPTEN_CMAKE_TOOLCHAIN_FILE "${_emconfig_output}/cmake/Modules/Platform/Emscripten.cmake" CACHE FILEPATH "Path to Emscripten CMake toolchain file.")
-include("${EMSCRIPTEN_CMAKE_TOOLCHAIN_FILE}")
-
-# From Emscripten 3.1.33, CACHE property was removed from these variables,
-# so it is not possible to overwrite them by -D<var>=<value>.
-# See: https://github.com/emscripten-core/emscripten/pull/18764
-# But we need to do it, so set them again here...
-unset(CMAKE_C_COMPILER)
-unset(CMAKE_CXX_COMPILER)
-unset(CMAKE_AR)
-unset(CMAKE_RANLIB)
-unset(CMAKE_C_COMPILER_AR)
-unset(CMAKE_CXX_COMPILER_AR)
-unset(CMAKE_C_COMPILER_RANLIB)
-unset(CMAKE_CXX_COMPILER_RANLIB)
-
-set(CMAKE_C_COMPILER "${EMSCRIPTEN_ROOT_PATH}/emcc${EMCC_SUFFIX}" CACHE FILEPATH "Emscripten emcc")
-set(CMAKE_CXX_COMPILER "${EMSCRIPTEN_ROOT_PATH}/em++${EMCC_SUFFIX}" CACHE FILEPATH "Emscripten em++")
-set(CMAKE_AR "${EMSCRIPTEN_ROOT_PATH}/emar${EMCC_SUFFIX}" CACHE FILEPATH "Emscripten ar")
-set(CMAKE_RANLIB "${EMSCRIPTEN_ROOT_PATH}/emranlib${EMCC_SUFFIX}" CACHE FILEPATH "Emscripten ranlib")
-set(CMAKE_C_COMPILER_AR "${CMAKE_AR}" CACHE FILEPATH "Emscripten ar")
-set(CMAKE_CXX_COMPILER_AR "${CMAKE_AR}" CACHE FILEPATH "Emscripten ar")
-set(CMAKE_C_COMPILER_RANLIB "${CMAKE_RANLIB}" CACHE FILEPATH "Emscripten ranlib")
-set(CMAKE_CXX_COMPILER_RANLIB "${CMAKE_RANLIB}" CACHE FILEPATH "Emscripten ranlib")
-
-# Note: this is False in original Emscripten toolchain,
-#       however we always want to allow build shared libs
-#       (See also: https://github.com/emscripten-core/emscripten/pull/16281)
-set_property(GLOBAL PROPERTY TARGET_SUPPORTS_SHARED_LIBS TRUE)
-
-# CMakeSystemSpecificInformation.cmake tries to include a Toolchain file from ${CMAKE_MODULE_PATH}/Platform/{CMAKE_SYSTEM_NAME}.cmake.
-# So in order to prevent CMake from loading the original Emscripten toolchain file, we need to prepend our own toolchain file.
-list(PREPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_LIST_DIR}/..")
-
-# We build libraries into WASM_LIBRARY_DIR, so lets tell CMake
-# to find libraries from there.
-if (NOT "$ENV{WASM_LIBRARY_DIR}" STREQUAL "")
-  list(PREPEND CMAKE_FIND_ROOT_PATH "$ENV{WASM_LIBRARY_DIR}")
-  if (CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT)
-    set(CMAKE_INSTALL_PREFIX "$ENV{WASM_LIBRARY_DIR}" CACHE PATH
-      "Install path prefix, prepended onto install directories." FORCE)
-  endif()
-endif()
-
-# Note: Emscripten installs libraries into subdirectories such as:
-# - Non PIC: <SYSROOT>/lib/<arch>/<lib>
-# - PIC: <SYSROOT>/lib/<arch>/pic/<lib>
-# - LTO: <SYSROOT>/lib/<arch>/lto/<lib>
-# - PIC+LTO: <SYSROOT>/lib/<arch>/pic/lto/<lib>
-# We always wants to use a library built with "-fPIC", but
-# CMake's find_library() will search Non-PIC dir only by default.
-# This is a hack which overrides find_library() to tell CMake to look at PIC dirs first.
-if ($ENV{CFLAGS} MATCHES "MEMORY64")
-  set(CMAKE_LIBRARY_ARCHITECTURE "wasm64-emscripten/pic")
-else()
-  set(CMAKE_LIBRARY_ARCHITECTURE "wasm32-emscripten/pic")
-endif()
-
-set(CMAKE_C_USE_RESPONSE_FILE_FOR_LIBRARIES 0)
-set(CMAKE_CXX_USE_RESPONSE_FILE_FOR_LIBRARIES 0)
-set(CMAKE_C_USE_RESPONSE_FILE_FOR_OBJECTS 1)
-set(CMAKE_CXX_USE_RESPONSE_FILE_FOR_OBJECTS 1)
-set(CMAKE_C_USE_RESPONSE_FILE_FOR_INCLUDES 1)
-set(CMAKE_CXX_USE_RESPONSE_FILE_FOR_INCLUDES 1)
-
-# Allow some of the variables to be overridden by the user by env variable
-# CMAKE_PROJECT_INCLUDE is a nice way to override some properties of the project
-# It can be set by passing -DCMAKE_PROJECT_INCLUDE=... to cmake
-# But some python packages will not allow users to pass extra arguments to cmake
-# So this is a workaround to allow users to override CMAKE_PROJECT_INCLUDE by env variable
-if ("${CMAKE_PROJECT_INCLUDE_BEFORE}" STREQUAL "" AND DEFINED ENV{CMAKE_PROJECT_INCLUDE_BEFORE})
-  message(STATUS "Set CMAKE_PROJECT_INCLUDE_BEFORE to $ENV{CMAKE_PROJECT_INCLUDE_BEFORE} using env variable")
-  set(CMAKE_PROJECT_INCLUDE_BEFORE "$ENV{CMAKE_PROJECT_INCLUDE_BEFORE}")
-endif()
-
-if ("${CMAKE_PROJECT_INCLUDE}" STREQUAL ""  AND DEFINED ENV{CMAKE_PROJECT_INCLUDE})
-  message(STATUS "Set CMAKE_PROJECT_INCLUDE to $ENV{CMAKE_PROJECT_INCLUDE} using env variable")
-  set(CMAKE_PROJECT_INCLUDE "$ENV{CMAKE_PROJECT_INCLUDE}")
-endif()
-
-# Set SIDE_MODULE_CFLAGS and SIDE_MODULE_LDFLAGS automatically
-# This is automatically set for Python project, but we often omit these in libraries.
-set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} $ENV{SIDE_MODULE_CFLAGS}")
-set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} $ENV{SIDE_MODULE_CXXFLAGS}")
-set(CMAKE_SHARED_LINKER_FLAGS "${CMAKE_SHARED_LINKER_FLAGS} $ENV{SIDE_MODULE_LDFLAGS}")