# Dashboard 2.0 - format table

**URL:** <https://discourse.nodered.org/t/dashboard-2-0-format-table/95753>\
**Category:** General\
**Created:** [2 March 2025 11:07 UTC](https://discourse.nodered.org/t/dashboard-2-0-format-table/95753 "2025-03-02T11:07:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Switchblade2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/switchblade2/32/60655_2.png) [@Switchblade2](https://discourse.nodered.org/u/Switchblade2)\
**Post date:** [2 March 2025 11:07 UTC](https://discourse.nodered.org/t/dashboard-2-0-format-table/95753/1 "2025-03-02T11:07:30Z")

</div>

Hi,  
I want to reduce the height of the rows in a table to have a more compact view of the table.  
The table has 12 rows so it covers more than a 13" screen  
I've tired using a template node with the following code

```auto
<template>
    <v-table density="compact">
    </v-table>
</template>

<style>
    .v-table {
        border-collapse: collapse;
        font-family: Arial, sans-serif;
    }

    .v-table th {
        background-color: #4CAF50;
        color: white !important;
        font-weight: bold;

    }
</style>

```

The section is taken from [vuetifyjs](https://vuetifyjs.com/en/components/tables/#density) but it has no impact  
The section does modify the table (colours & fonts) but I've not found a way to change the row height and I've tested adding the following code in the section

```auto
.v-table tr {
        line-height: 0.8; /* Reduces row height */
        height: 15px !important; /* Forces row height reduction */
    }

```

Any idea on what I can do have more compact table?

---

<div class="post-metadata">

**Author:** ![ceysa75](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ceysa75/32/31340_2.png) [@ceysa75](https://discourse.nodered.org/u/ceysa75)\
**Post date:** [2 March 2025 16:29 UTC](https://discourse.nodered.org/t/dashboard-2-0-format-table/95753/2 "2025-03-02T16:29:26Z")

</div>

Under the Theming Tab for dashboard 2.0 there is a general setting with this regard (Row Height = Compact). Probably this is already sufficient for your needs:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a6485e7ef4ce3e93fde8fad7d409e4cabfa107c2.png)

---

<div class="post-metadata">

**Author:** ![Switchblade2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/switchblade2/32/60655_2.png) [@Switchblade2](https://discourse.nodered.org/u/Switchblade2)\
**Post date:** [2 March 2025 16:56 UTC](https://discourse.nodered.org/t/dashboard-2-0-format-table/95753/3 "2025-03-02T16:56:51Z")

</div>

Perfect. Many thanks @ceysa75

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [4 March 2025 11:46 UTC](https://discourse.nodered.org/t/dashboard-2-0-format-table/95753/4 "2025-03-04T11:46:39Z")

</div>

Just in case, further compactness needed,..

> [@UI-Theme - Row height](https://discourse.nodered.org/t/ui-theme-row-height/94913/2):
>
> 2 things to adjust Font size and the row height. Find good balance between those. .nrdb-ui-table .v-table--density-default{ --v-table-row-height: 20px; } .nrdb-ui-table .v-table\_\_wrapper{ font-size: smaller; }

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 March 2025 11:47 UTC](https://discourse.nodered.org/t/dashboard-2-0-format-table/95753/5 "2025-03-18T11:47:15Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.