diff --git a/docs/examples/ui-table-cell-types.json b/docs/examples/ui-table-cell-types.json
new file mode 100644
index 000000000..2d84a4745
--- /dev/null
+++ b/docs/examples/ui-table-cell-types.json
@@ -0,0 +1,171 @@
+[
+    {
+        "id": "78b43be39f6db8e1",
+        "type": "ui-table",
+        "z": "9cb9bb3cd8e3faee",
+        "group": "5c66023267e5559e",
+        "name": "",
+        "label": "text",
+        "order": 3,
+        "width": 0,
+        "height": 0,
+        "maxrows": "0",
+        "autocols": false,
+        "showSearch": false,
+        "selectionType": "none",
+        "columns": [
+            {
+                "title": "My Column",
+                "key": "columnA",
+                "type": "text",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "My Other Column",
+                "key": "columnB",
+                "type": "text",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "URL",
+                "key": "link",
+                "type": "link",
+                "width": "300px",
+                "align": "start"
+            },
+            {
+                "title": "Progress",
+                "key": "progress",
+                "type": "progress",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Row",
+                "key": "",
+                "type": "row",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Trend",
+                "key": "array",
+                "type": "sparkline-trend",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Bar",
+                "key": "array",
+                "type": "sparkline-bar",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Tick/Cross",
+                "key": "boolean",
+                "type": "tickcross",
+                "width": "",
+                "align": "start"
+            },
+            {
+                "title": "Spot",
+                "key": "color",
+                "type": "color",
+                "width": "",
+                "align": "center"
+            }
+        ],
+        "x": 490,
+        "y": 60,
+        "wires": [
+            []
+        ]
+    },
+    {
+        "id": "6cdf36ffe9daf59c",
+        "type": "inject",
+        "z": "9cb9bb3cd8e3faee",
+        "name": "",
+        "props": [
+            {
+                "p": "payload"
+            }
+        ],
+        "repeat": "",
+        "crontab": "",
+        "once": true,
+        "onceDelay": 0.1,
+        "topic": "",
+        "payload": "[{\"columnA\":\"Hello\",\"columnB\":\"World\",\"link\":\"https://news.bbc.co.uk\",\"progress\":76,\"color\":\"#FF0000\",\"array\":[6,7,9,2,4],\"boolean\":true},{\"columnA\":\"Hey\",\"columnB\":\"Globe\",\"link\":\"https://flowfuse.com\",\"progress\":56,\"color\":\"#24aa69\",\"array\":[1,3,6,3,5],\"boolean\":false}]",
+        "payloadType": "json",
+        "x": 350,
+        "y": 60,
+        "wires": [
+            [
+                "78b43be39f6db8e1"
+            ]
+        ]
+    },
+    {
+        "id": "5c66023267e5559e",
+        "type": "ui-group",
+        "name": "Table Cell Types",
+        "page": "bbc7b44a426b2b01",
+        "width": "12",
+        "height": "1",
+        "order": 3,
+        "showTitle": true,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "bbc7b44a426b2b01",
+        "type": "ui-page",
+        "name": "UI Table Example",
+        "ui": "c2e1aa56f50f03bd",
+        "path": "/table",
+        "icon": "table",
+        "layout": "grid",
+        "theme": "c2ff5ba1f92a0f0e",
+        "order": 11,
+        "className": "",
+        "visible": "true",
+        "disabled": "false"
+    },
+    {
+        "id": "c2e1aa56f50f03bd",
+        "type": "ui-base",
+        "name": "Dashboard",
+        "path": "/dashboard",
+        "includeClientData": true,
+        "acceptsClientConfig": [
+            "ui-control",
+            "ui-notification"
+        ],
+        "showPathInSidebar": true,
+        "navigationStyle": "temporary",
+        "titleBarStyle": "fixed"
+    },
+    {
+        "id": "c2ff5ba1f92a0f0e",
+        "type": "ui-theme",
+        "name": "Default",
+        "colors": {
+            "surface": "#ffffff",
+            "primary": "#0094ce",
+            "bgPage": "#eeeeee",
+            "groupBg": "#ffffff",
+            "groupOutline": "#cccccc"
+        },
+        "sizes": {
+            "pagePadding": "12px",
+            "groupGap": "12px",
+            "groupBorderRadius": "4px",
+            "widgetGap": "12px"
+        }
+    }
+]
\ No newline at end of file
diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
index 3fdb9ab50..c67f3dd9a 100644
--- a/docs/nodes/widgets/ui-table.md
+++ b/docs/nodes/widgets/ui-table.md
@@ -16,9 +16,19 @@ dynamic:
 ---
 
 <script setup>
+    import { ref } from 'vue'
+
+    import ExampleCellTypes from '../../examples/ui-table-cell-types.json'
+
+    import FlowViewer from '../../components/FlowViewer.vue'
     import AddedIn from '../../components/AddedIn.vue'
+
+    const examples = ref({
+      'cellTypes': ExampleCellTypes
+    })
 </script>
 
+
 # Data Table `ui-table` <AddedIn version="0.4.0" />
 
 Renders a set of data in a tabular format. Expects an input (`msg.payload`) in the format of:
@@ -47,19 +57,58 @@ The table will be rendered with colums `colA`, `colB` and `colC`, unless "Column
 - **Click**: The full row becomes a clickable entity, and the `ui-table` node will _output the full object_ associated to a row when clicked.
 - **Checkbox**: Each row has a checkbox, and the `ui-table` node will _output an array of objects_ associated to the checked rows when a checkbox is selected.
 
+
+### Configuring Columns
+
+![Screenshot of the configuration options available for column types in Node-RED](/images/node-examples/ui-table-column-config.png "Screenshot of the configuration options available for column types in Node-RED"){data-zoomable}
+_Screenshot of the configuration options available for column types in Node-RED_
+
+If you toggle "off" the "Auto Columns" option, you will have more control to define the columns for your table. For each column, you can define the following:
+
+- **Key**: The key in the object to use for the column data.
+- **Label**: The text to display in the column header.
+- **Width**: The width of the column, can be in `px`, `%`, or any other valid CSS sizing.
+- **Align:** The alignment of the text in the column. Can be `Left`, `Center`, or `Right`. Note that some columns do look odd with "Center" alignment as the header does also contain space for the sorting icon.
+- **Type**: Defines the cell's type and controls how your data will be rendered for this column.
+
+### Cell Types <AddedIn version="1.10.0" />
+
+![An example of a ui-table displaying various of the cell types available](/images/node-examples/ui-table-cell-types.png "An example of a ui-table displaying various of the cell types available"){data-zoomable}
+_An example of a ui-table displaying various of the cell types available_
+
+- **Text**: Renders the cell as plain text.
+- **HTML**: Will respect new line breaks (e.g. `\n`) and basic HTML tags.
+- **Link**: Renders the cell as a hyperlink. The `Link` field should contain the URL to link to.
+- **Color**: Renders the cell as a colored box. The `Color` field should contain a valid CSS color.
+- **Tick/Cross**: Renders the cell as a tick or cross. The `Value` field should contain a boolean (`true`/`false`) value.
+- **Progress**: Renders the cell as a progress bar. The `Value` field should contain a number between 0 and 100.
+- **Sparkline - Trend**: Renders the cell as a small line chart without axes. The `Value` field should contain an array of numbers to be plotted.
+- **Sparkline - Bar**: Renders the cell as a small bar chart without axes. The `Value` field should contain an array of numbers to be plotted.
+- **Row Number**: Renders the row number into the cell.
+
+#### Example
+
+<FlowViewer :flow="examples['cellTypes']" height="200px"/>
+
 ## Dynamic Properties
 
 <DynamicPropsTable/>
 
-## Examples
+## Table Configuration
 
 ### Search & Filter
 
+The `ui-table` node can be configured to include a search bar above the table. This will allow users to search and filter across all columns, and automatically search across all columns when you type.
+
+#### Example
+
 ![Example of a Data Table with Search & Filter](/images/node-examples/ui-table-search.png "Example of a Data Table with Search & Filter"){data-zoomable}
 *Example of a Data Table with Search & Filter" enabled.*
 
 ### Interaction
 
+Example that show how a table will appear with different selection types chosen.
+
 #### Default - No Selection Events
 
 ![Example of a Data Table](/images/node-examples/ui-table.png "Example of a Data Table"){data-zoomable}
diff --git a/docs/public/images/node-examples/ui-table-cell-types.png b/docs/public/images/node-examples/ui-table-cell-types.png
new file mode 100644
index 000000000..cc1e97ea2
Binary files /dev/null and b/docs/public/images/node-examples/ui-table-cell-types.png differ
diff --git a/docs/public/images/node-examples/ui-table-column-config.png b/docs/public/images/node-examples/ui-table-column-config.png
new file mode 100644
index 000000000..d5ebdef9c
Binary files /dev/null and b/docs/public/images/node-examples/ui-table-column-config.png differ
diff --git a/nodes/widgets/locales/en-US/ui_table.html b/nodes/widgets/locales/en-US/ui_table.html
new file mode 100644
index 000000000..f6e708ac2
--- /dev/null
+++ b/nodes/widgets/locales/en-US/ui_table.html
@@ -0,0 +1,55 @@
+<script type="text/html" data-help-name="ui-table">
+    <p>
+        Display and manage complex datasets with ease using the ui-table widget.
+    </p>
+    <h3>Input</h3>
+    <p>
+        The ui-table widget requires an array of data to be sent via <code>msg.payload</code>.
+        The table will then render a row for each object within the array, and, by default, a
+        column for each property in the objects.
+    </p>
+    <h3>Properties</h3>
+    <dl class="message-properties">
+        <dt>Max Rows <span class="property-type">num</span></dt>
+        <dd>
+            Defines the maximum number of data-rows to render in the table.
+            Excess rows will be available through pagination control.
+        </dd>
+        <dt>Selection <span class="property-type">none | click | checkbox</span></dt>
+        <dd>
+            Defines any interaction available on the table. This will emit events
+            with the respective selections taking place.
+        </dd>
+        <dt>Show Search <span class="property-type">boolean</span></dt>
+        <dd>Will display a search bar above the table, allowing for text-based filtering of the data.</dd>
+        <dt>Auto Columns <span class="property-type">boolean</span></dt>
+        <dd>
+            If true, the table will automatically display all data provided.
+            If false, then you have much more control over the rendering of each column.
+        </dd>
+        <dt>Columns <span class="property-type">array</span></dt>
+        <dd>A list of the columns to render in the table. Only an available option if "Auto Columns" is set to "false"</dd>
+    </dl>
+    <h3>Cell Types</h3>
+    <p>The following details the available cell types that can be used in your tables</p>
+    <dl class="message-properties">
+        <dt>Text <span class="property-type">any</span></dt>
+        <dd>Will render the raw value provided, without any modification or formatting</dd>
+        <dt>HTML <span class="property-type">string</span></dt>
+        <dd>Respects new line breaks (e.g. <code>\n</code>) and basic HTML tags.</dd>
+        <dt>Link <span class="property-type">url</span></dt>
+        <dd>Renders the cell as a hyperlink. The "Link" value provided should be a valid URL.</dd>
+        <dt>Color <span class="property-type">color</span></dt>
+        <dd>Renders the cell as a colored box. The "Color" field should contain a valid CSS color.</dd>
+        <dt>Tick/Cross <span class="property-type">boolean</span></dt>
+        <dd>Renders the cell as a tick or cross. The "Value" field should contain a boolean value.</dd>
+        <dt>Progress <span class="property-type">number</span></dt>
+        <dd>Renders the cell as a progress bar. The `Value` field should contain a number between 0 and 100.</dd>
+        <dt>Sparkline - Trend <span class="property-type">array</span></dt>
+        <dd>Renders the cell as a small line chart without axes. The value should be an array of numbers to be plotted.</dd>
+        <dt>Sparkline - Bar <span class="property-type">array</span></dt>
+        <dd>Renders the cell as a small bar chart without axes. The value should be an array of numbers to be plotted.</dd>
+        <dt>Row Number <span class="property-type">number</span></dt>
+        <dd>Requires no "key" to be provided as this will just render the row number (1 -> n).</dd>
+    </dl>
+</script>
\ No newline at end of file
diff --git a/nodes/widgets/locales/en-US/ui_table.json b/nodes/widgets/locales/en-US/ui_table.json
index ea18e838c..4461935b5 100644
--- a/nodes/widgets/locales/en-US/ui_table.json
+++ b/nodes/widgets/locales/en-US/ui_table.json
@@ -8,6 +8,12 @@
             "autoCalculateColumns": "Auto Calculate Columns",
             "key": "Key",
             "label": "Label",
+            "type": "Type",
+            "width": "Width",
+            "align": "Align",
+            "alignLeft": "Left",
+            "alignCenter": "Center",
+            "alignRight": "Right",
             "column": "column",
             "selection": "Interaction",
             "search": "Search",
diff --git a/nodes/widgets/ui_table.html b/nodes/widgets/ui_table.html
index 3381379f8..81d69a9ec 100644
--- a/nodes/widgets/ui_table.html
+++ b/nodes/widgets/ui_table.html
@@ -1,5 +1,61 @@
+<style>
+    #node-input-column-container-div {
+        min-height: 36px;
+    }
+    .node-input-column-container-row {
+        flex-grow: 1;
+    }
+    .node-input-column-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 6px;
+    }
+    .node-input-column-row .node-input-column-handle {
+        color: var(--red-ui-form-text-color, #eee);
+        cursor: move;
+        margin-right: 3px;
+    }
+    .node-input-column-options {
+        flex-grow: 1;
+    }
+    .node-input-column-row-property {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 6px;
+        flex-grow: 1;
+    }
+    .node-input-column-row-property label {
+        min-width: 50px;
+        width: auto !important;
+    }
+    .node-input-column-row-property:not(:first-child) {
+        margin-top: 3px;
+    }
+    #node-input-column-container .node-input-column-row-property input,
+    #node-input-column-container .node-input-column-row-property select {
+        flex-grow: 1;
+        width: 50%;
+    }
+    .flex-grow {
+        flex-grow: 1;
+    }
+</style>
+
 <script type="text/javascript">
     (function () {
+        const COLUMN_TYPES = [
+            { value: 'text', label: 'Text' },
+            { value: 'html', label: 'HTML' },
+            { value: 'link', label: 'Link (https://...)' },
+            { value: 'color', label: 'Color (#RRGGBB)' },
+            { value: 'tickcross', label: 'Tick/Cross (Boolean)' },
+            { value: 'progress', label: 'Progress (1-100)' },
+            { value: 'sparkline-trend', label: 'Sparkline - Trend (Array)' },
+            { value: 'sparkline-bar', label: 'Sparkline - Bar (Array)' },
+            { value: 'row', label: 'Row Number' }
+        ]
         RED.nodes.registerType('ui-table', {
             category: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.label.category'),
             color: RED._('@flowfuse/node-red-dashboard/ui-base:ui-base.colors.medium'),
@@ -77,14 +133,84 @@
                 // Columns Editor
                 function generateColumn (i, col) {
                     const container = $('<li/>', { style: 'background: var(--red-ui-secondary-background, #fff); margin:0; padding:8px 0px 0px; border-bottom: 1px solid var(--red-ui-form-input-border-color, #ccc);' })
-                    const row = $('<div/>').appendTo(container)
+                    const row = $('<div/>', {
+                        class: 'node-input-column-row'
+                    }).appendTo(container)
                     $('<div/>', { style: 'padding-top:5px; padding-left:175px;' }).appendTo(container)
                     $('<div/>', { style: 'padding-top:5px; padding-left:120px;' }).appendTo(container)
 
-                    $('<i style="color: var(--red-ui-form-text-color, #eee); cursor:move; margin-left:3px;" class="node-input-column-handle fa fa-bars"></i>').appendTo(row)
+                    // sorting handle
+                    $('<i class="node-input-column-handle fa fa-bars"></i>').appendTo(row)
+
+                    const options = $('<div/>', {
+                        class: 'node-input-column-options'
+                    }).appendTo(row)
+
+                    // key
+                    const keyRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
+                    $('<label/>', {
+                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.key')}:`
+                    }).appendTo(keyRow)
+                    $('<input/>', {
+                        class: 'node-input-column-key',
+                        type: 'text',
+                        placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.key'),
+                        value: col.key
+                    }).appendTo(keyRow)
+    
+                    // label
+                    const labelRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
+                    $('<label/>', {
+                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.label')}:`
+                    }).appendTo(labelRow)
+                    $('<input/>', {
+                        class: 'node-input-column-label',
+                        type: 'text',
+                        placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.label'),
+                        value: col.title
+                    }).appendTo(labelRow)
 
-                    $('<input/>', { class: 'node-input-column-key', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.key'), value: col.key }).appendTo(row)
-                    $('<input/>', { class: 'node-input-column-label', type: 'text', style: 'margin-left:7px; width:calc(50% - 32px);', placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.label'), value: col.title }).appendTo(row)
+                    // style
+                    const styleRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
+                    // style - width
+                    const widthRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(styleRow)
+                    $('<label/>', {
+                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.width')}:`
+                    }).appendTo(widthRow)
+                    $('<input/>', {
+                        type: 'text',
+                        class: 'node-input-column-width',
+                        placeholder: RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.width'),
+                        value: col.width
+                    }).appendTo(widthRow)
+                    // style - align
+                    const alignRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(styleRow)
+                    $('<label/>', {
+                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.align')}:`
+                    }).appendTo(alignRow)
+                    const alignOptions = $('<select>', {
+                        class: 'node-input-column-align'
+                    }).appendTo(alignRow)
+                    alignOptions.append($('<option>').attr('value', 'start').text(RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.alignLeft')))
+                    alignOptions.append($('<option>').attr('value', 'center').text(RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.alignCenter')))
+                    alignOptions.append($('<option>').attr('value', 'end').text(RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.alignRight')))
+                    alignOptions.val(col.align).change()
+
+                    // type
+                    const typeRow = $('<div />', { class: 'node-input-column-row-property' }).appendTo(options)
+                    $('<label/>', {
+                        text: `${RED._('@flowfuse/node-red-dashboard/ui-table:ui-table.label.type')}:`
+                    }).appendTo(typeRow)
+                    const typeOptions = $('<select>', {
+                        class: 'node-input-column-type'
+                    }).appendTo(typeRow)
+
+                    // add options for each supported column type
+                    $(COLUMN_TYPES).each(function () {
+                        typeOptions.append($('<option>').attr('value', this.value).text(this.label))
+                    })
+
+                    typeOptions.val(col.type).change()
 
                     const finalSpan = $('<span/>', { style: 'float:right; margin-right:8px;' }).appendTo(row)
                     const deleteButton = $('<a/>', { href: '#', class: 'editor-button editor-button-small', style: 'margin-top:7px; margin-left:5px;' }).appendTo(finalSpan)
@@ -101,7 +227,11 @@
                 }
 
                 $('#node-input-add-column').click(function () {
-                    generateColumn($('#node-input-column-container').children().length + 1, {})
+                    const defaultColumn = {
+                        type: 'text',
+                        align: 'start'
+                    }
+                    generateColumn($('#node-input-column-container').children().length + 1, defaultColumn)
                     $('#node-input-column-container-div').scrollTop($('#node-input-column-container-div').get(0).scrollHeight)
                 })
 
@@ -124,7 +254,10 @@
                     const column = $(this)
                     const o = {
                         title: column.find('.node-input-column-label').val(),
-                        key: column.find('.node-input-column-key').val()
+                        key: column.find('.node-input-column-key').val(),
+                        type: column.find('.node-input-column-type').find(':selected').val(),
+                        width: column.find('.node-input-column-width').val(),
+                        align: column.find('.node-input-column-align').find(':selected').val()
                     }
                     node.columns.push(o)
                 })
@@ -173,15 +306,17 @@
             <label  for="node-input-showSearch" data-i18n="ui-table.label.showSearch"></label>
         </div>
     </div>
-    <div class="form-row" style="display:flex;">
+    <div class="form-row" style="display:flex; margin-bottom: 3px;">
         <label for="node-input-width" style="vertical-align:top"><i class="fa fa-list-alt"></i> <span data-i18n="ui-table.label.columns"></label>
-        <div class="form-row node-input-column-container-row" style="margin-bottom: 0px; width:calc(70% + 15px);">
-            <div>
-                <input type="checkbox" checked id="node-input-autocols" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
-                <label style="width:auto" for="node-input-autocols" data-i18n="ui-table.label.autoCalculateColumns"></label>
-            </div>
+        <div>
+            <input type="checkbox" checked id="node-input-autocols" style="display: inline-block; width: auto; margin: 0px 0px 0px 4px;">
+            <label style="width:auto" for="node-input-autocols" data-i18n="ui-table.label.autoCalculateColumns"></label>
+        </div>
+    </div>
+    <div class="form-row">
+        <div class="form-row node-input-column-container-row">
             <div id="node-input-columns-container">
-                <div id="node-input-column-container-div" style="box-sizing:border-box; border-radius:5px; height:257px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 100%;">
+                <div id="node-input-column-container-div" style="box-sizing:border-box; border-radius:5px; padding:5px; border:1px solid var(--red-ui-form-input-border-color, #ccc); overflow-y:scroll; display:inline-block; width: 100%;">
                     <ol id="node-input-column-container" style="list-style-type:none; margin:0;"></ol>
                 </div>
                 <a href="#" class="editor-button editor-button-small" id="node-input-add-column" style="margin-top:4px;"><i class="fa fa-plus"></i> <span data-i18n="ui-table.label.columns"></span></a>
diff --git a/nodes/widgets/ui_table.js b/nodes/widgets/ui_table.js
index 727bc89c7..7aa105eec 100644
--- a/nodes/widgets/ui_table.js
+++ b/nodes/widgets/ui_table.js
@@ -17,7 +17,10 @@ module.exports = function (RED) {
                 // map older data where 'label' was used.
                 return {
                     title: col.title || col.label,
-                    key: col.key
+                    key: col.key,
+                    type: col.type,
+                    width: col.width,
+                    align: col.align
                 }
             })
         }
diff --git a/package-lock.json b/package-lock.json
index 81515cf7b..80837fc23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@flowfuse/node-red-dashboard",
-    "version": "1.8.1",
+    "version": "1.9.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@flowfuse/node-red-dashboard",
-            "version": "1.8.1",
+            "version": "1.9.1",
             "license": "Apache-2.0",
             "dependencies": {
                 "acorn": "^8.11.2",
@@ -36,7 +36,7 @@
                 "eslint-plugin-no-only-tests": "^3.1.0",
                 "eslint-plugin-promise": "^6.1.1",
                 "eslint-plugin-vue": "^9.18.1",
-                "eslint-plugin-vuetify": "^2.1.0",
+                "eslint-plugin-vuetify": "^2.4.0",
                 "glob": "^10.3.4",
                 "highlight.js": "^11.8.0",
                 "luxon": "^3.4.3",
@@ -57,7 +57,7 @@
                 "vite-plugin-pwa": "^0.19.8",
                 "vitepress": "^1.0.2",
                 "vue-router": "^4.2.4",
-                "vuetify": "^3.5.17",
+                "vuetify": "^3.6.0",
                 "vuex": "^4.1.0"
             },
             "engines": {
@@ -7498,9 +7498,9 @@
             "dev": true
         },
         "node_modules/eslint-plugin-vuetify": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-2.1.0.tgz",
-            "integrity": "sha512-ROq2pUtpMljys8243rO9bdbYSWTqVvbrRr6B4lIuLe3GZu4y97rjgb+ea90XJyZFnKEqyzs9Mgczka0o+Z1+hA==",
+            "version": "2.4.0",
+            "resolved": "https://registry.npmjs.org/eslint-plugin-vuetify/-/eslint-plugin-vuetify-2.4.0.tgz",
+            "integrity": "sha512-WAZjnGXPrxqHBzYjxxUT8jf30O69Hitmj+wYhTIEG/XgqfvnPwqVtqrU2FGLsDtfFskKva0vuZemfbiq8yA/fQ==",
             "dev": true,
             "dependencies": {
                 "eslint-plugin-vue": "^9.6.0",
@@ -15472,9 +15472,9 @@
             }
         },
         "node_modules/vuetify": {
-            "version": "3.5.17",
-            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.17.tgz",
-            "integrity": "sha512-/Veklxxyu/l63q7QQOqJZeZukIKI2sBxY7FKMDcNup2KSGMjyjT+oYXy1DOdl7wlU3c3fKGQMFHqVWb0HDsyDw==",
+            "version": "3.6.6",
+            "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.6.tgz",
+            "integrity": "sha512-7RkL0kuLsVUbc0YCwhPhVq54gSFKt5xv+SOrF01dxwJz7Ke3tAbvO616WhhQIfS78h1q/Ev952WJj5jpsdK58g==",
             "dev": true,
             "engines": {
                 "node": "^12.20 || >=14.13"
diff --git a/package.json b/package.json
index ddcb03580..9b88a7a68 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
         "eslint-plugin-no-only-tests": "^3.1.0",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-vue": "^9.18.1",
-        "eslint-plugin-vuetify": "^2.1.0",
+        "eslint-plugin-vuetify": "^2.4.0",
         "glob": "^10.3.4",
         "highlight.js": "^11.8.0",
         "luxon": "^3.4.3",
@@ -101,7 +101,7 @@
         "vite-plugin-pwa": "^0.19.8",
         "vitepress": "^1.0.2",
         "vue-router": "^4.2.4",
-        "vuetify": "^3.5.17",
+        "vuetify": "^3.6.0",
         "vuex": "^4.1.0"
     },
     "engines": {
diff --git a/ui/src/main.mjs b/ui/src/main.mjs
index 40534e447..821dca3e6 100644
--- a/ui/src/main.mjs
+++ b/ui/src/main.mjs
@@ -18,7 +18,6 @@ import * as directives from 'vuetify/directives'
 
 // Labs Imports
 import { VNumberInput } from 'vuetify/labs/VNumberInput'
-import { VSparkline } from 'vuetify/labs/VSparkline'
 import { VTreeview } from 'vuetify/labs/VTreeview'
 
 import './stylesheets/common.css'
@@ -53,7 +52,6 @@ const vuetify = createVuetify({
     components: {
         ...components,
         VNumberInput,
-        VSparkline,
         VTreeview
     },
     directives,
diff --git a/ui/src/widgets/ui-table/UITable.vue b/ui/src/widgets/ui-table/UITable.vue
index 04d04e495..d91e30d62 100644
--- a/ui/src/widgets/ui-table/UITable.vue
+++ b/ui/src/widgets/ui-table/UITable.vue
@@ -18,23 +18,36 @@
         @update:model-value="onMultiSelect"
     >
         <template v-if="itemsPerPage === 0" #bottom />
-        <template #item="{ index, item, internalItem }">
-            <v-data-table-row
-                :index="index" :item="internalItem"
+        <template #item="{ item, index, internalItem, isSelected, toggleSelect }">
+            <tr
                 :class="{'nrdb-table-row-selectable': props.selectionType === 'click', 'nrdb-table-row-selected': selected === item}"
                 @click="props.selectionType === 'click' ? onRowClick(item) : {}"
-            />
+            >
+                <td v-if="props.selectionType === 'checkbox'" class="v-data-table__td v-data-table-column--no-padding v-data-table-column--align-start">
+                    <v-checkbox-btn :modelValue="isSelected(internalItem)" @click="toggleSelect(internalItem)" />
+                </td>
+                <td v-for="col in headers" :key="col.key">
+                    <div class="nrdb-table-cell-align" :style="{'justify-content': col.align || 'start'}">
+                        <UITableCell :row="index + 1" :value="item[col.key]" :type="col.type" />
+                    </div>
+                </td>
+            </tr>
         </template>
     </v-data-table>
 </template>
 
 <script>
 
+import UITableCell from './UITableCell.vue'
+
 import { useDataTracker } from '../data-tracker.mjs' // eslint-disable-line import/order
 import { mapState } from 'vuex' // eslint-disable-line import/order
 
 export default {
     name: 'DBUITable',
+    components: {
+        UITableCell
+    },
     inject: ['$socket'],
     props: {
         id: { type: String, required: true },
@@ -82,7 +95,10 @@ export default {
                 return this.props.columns.map((col) => {
                     return {
                         key: col.key,
-                        title: col.label || col.title
+                        title: col.label || col.title,
+                        type: col.type,
+                        align: col.align,
+                        width: col.width
                     }
                 })
             } else {
@@ -102,6 +118,12 @@ export default {
         },
         itemsPerPage () {
             return this.props.maxrows || 0
+        },
+        columnTypes () {
+            return this.headers.reduce((typeMap, col) => {
+                typeMap[col.key] = col.type
+                return typeMap
+            }, {})
         }
     },
     watch: {
@@ -177,6 +199,12 @@ export default {
 .nrdb-table-nodata td {
     opacity: 0.5;
 }
+
+.nrdb-table-cell-align {
+    display: flex;
+    align-items: center;
+}
+
 .nrdb-table.v-data-table .v-table__wrapper>table>thead>tr>th.v-data-table__th--sortable:hover,
 .nrdb-table.v-data-table .v-table__wrapper>table tbody>tr>th.v-data-table__th--sortable:hover
 {
diff --git a/ui/src/widgets/ui-table/UITableCell.vue b/ui/src/widgets/ui-table/UITableCell.vue
new file mode 100644
index 000000000..767370002
--- /dev/null
+++ b/ui/src/widgets/ui-table/UITableCell.vue
@@ -0,0 +1,77 @@
+<template>
+    <template v-if="type === 'row'">
+        {{ row }}
+    </template>
+    <template v-else-if="type === 'html'">
+        <pre style="white-space: pre-wrap" v-html="localValue" />
+    </template>
+    <template v-else-if="type === 'link'">
+        <a :href="localValue">{{ localValue }}</a>
+    </template>
+    <template v-else-if="type === 'color'">
+        <i class="nrdb-ui-table-cell-color-spot" :style="{'background-color': localValue}" />
+    </template>
+    <template v-else-if="type === 'tickcross'">
+        <v-icon class="nrdb-ui-table-cell-bool" :icon="localValue ? 'mdi-check-bold' : 'mdi-close-thick'" />
+    </template>
+    <template v-else-if="type === 'progress'">
+        <v-progress-linear v-model="localValue" color="primary" :height="8" />
+    </template>
+    <template v-else-if="type === 'sparkline-trend'">
+        <!-- eslint-disable-next-line vuetify/no-deprecated-components -->
+        <v-sparkline v-model="localValue" color="primary" :padding="2" line-width="6" />
+    </template>
+    <template v-else-if="type === 'sparkline-bar'">
+        <!-- eslint-disable-next-line vuetify/no-deprecated-components -->
+        <v-sparkline v-model="localValue" type="bar" color="primary" :padding="2" line-width="16" />
+    </template>
+    <template v-else>
+        {{ localValue }}
+    </template>
+</template>
+
+<script>
+export default {
+    name: 'UITableCell',
+    props: {
+        row: {
+            type: Number,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'text'
+        },
+        value: {
+            type: [String, Boolean, Number, Object, Array],
+            required: true
+        }
+    },
+    emits: ['update:modelValue'],
+    computed: {
+        localValue: {
+            get () {
+                return this.value
+            },
+            set (value) {
+                this.$emit('update:modelValue', value)
+            }
+        }
+    }
+}
+</script>
+
+<style>
+.nrdb-ui-table-cell-bool.mdi-check-bold {
+    color: #24aa69;
+}
+.nrdb-ui-table-cell-bool.mdi-close-thick {
+    color: red;
+}
+.nrdb-ui-table-cell-color-spot {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+    margin-right: 8px;
+}
+</style>