# Dashboard2 table node breakpoint width

**URL:** <https://discourse.nodered.org/t/dashboard2-table-node-breakpoint-width/99447>\
**Category:** General\
**Tags:** home-assistant, dashboard-2\
**Created:** [18 October 2025 18:18 UTC](https://discourse.nodered.org/t/dashboard2-table-node-breakpoint-width/99447 "2025-10-18T18:18:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![777fatcat](https://avatars.discourse-cdn.com/v4/letter/7/e95f7d/32.png) [@777fatcat](https://discourse.nodered.org/u/777fatcat)\
**Post date:** [18 October 2025 18:18 UTC](https://discourse.nodered.org/t/dashboard2-table-node-breakpoint-width/99447/1 "2025-10-18T18:18:39Z")

</div>

I have a basic MariaDB which I query and add the subsequent dataset to a table. The flow is below.

The node-red dashboard 2.0 documentation suggests that a breakpoint is available to switch from data in a table to data in individual cards (mobile mode).

Documentation suggests there are a] 4 defaults (of which my instance only has 3), b] a method to manually specify a px value or c] none (never switch).

My dashboard 2 table node only has 3 defaults - mobile, tablet and Desktop. Since my data when displayed is wider than the defaults, I would like to be able to either specify a px value or none.

How do I do that?  
Thanks for any help

[  
{  
"id": "d1739be96a07a6c9",  
"type": "ui-table",  
"z": "42a8588e795251ca",  
"group": "78f803b4efd79705",  
"name": "Basic Table",  
"label": "my test db",  
"order": 1,  
"width": 0,  
"height": 0,  
"maxrows": 0,  
"passthru": false,  
"autocols": true,  
"showSearch": false,  
"deselect": true,  
"selectionType": "none",  
"columns": ,  
"mobileBreakpoint": "sm",  
"mobileBreakpointType": "defaults",  
"action": "replace",  
"x": 850,  
"y": 180,  
"wires": [  
  
]  
},  
{  
"id": "78f803b4efd79705",  
"type": "ui-group",  
"name": "Group 1",  
"page": "048a05cbebcaa0df",  
"width": 6,  
"height": 1,  
"order": 1,  
"showTitle": true,  
"className": "",  
"visible": "true",  
"disabled": "false",  
"groupType": "default"  
},  
{  
"id": "048a05cbebcaa0df",  
"type": "ui-page",  
"name": "Page 1",  
"ui": "c3c68f976471aa26",  
"path": "/page1",  
"icon": "home",  
"layout": "grid",  
"theme": "e097e95414056b0d",  
"breakpoints": [  
{  
"name": "Default",  
"px": "0",  
"cols": "3"  
},  
{  
"name": "Tablet",  
"px": "576",  
"cols": "12"  
},  
{  
"name": "Small Desktop",  
"px": "768",  
"cols": "9"  
},  
{  
"name": "Desktop",  
"px": "1024",  
"cols": "12"  
}  
],  
"order": 1,  
"className": "",  
"visible": "true",  
"disabled": "false"  
},  
{  
"id": "c3c68f976471aa26",  
"type": "ui-base",  
"name": "[http://homeassistant.local:1880/endpoint/dashboard](http://homeassistant.local:1880/endpoint/dashboard)",  
"path": "/dashboard",  
"appIcon": "",  
"includeClientData": true,  
"acceptsClientConfig": [  
"ui-notification",  
"ui-control"  
],  
"showPathInSidebar": false,  
"headerContent": "page",  
"navigationStyle": "default",  
"titleBarStyle": "default",  
"showReconnectNotification": true,  
"notificationDisplayTime": 1,  
"showDisconnectNotification": true,  
"allowInstall": false  
},  
{  
"id": "e097e95414056b0d",  
"type": "ui-theme",  
"name": "Default Theme",  
"colors": {  
"surface": "#ffffff",  
"primary": "#0094CE",  
"bgPage": "#eeeeee",  
"groupBg": "#ffffff",  
"groupOutline": "#cccccc"  
},  
"sizes": {  
"density": "default",  
"pagePadding": "12px",  
"groupGap": "12px",  
"groupBorderRadius": "4px",  
"widgetGap": "12px"  
}  
}  
]

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [18 October 2025 18:49 UTC](https://discourse.nodered.org/t/dashboard2-table-node-breakpoint-width/99447/2 "2025-10-18T18:49:47Z")

</div>

Have you looked at `Edit ui-page node`. You can vary the breakpoints of the existing layouts, or create a new one.

PS: the fourth layout is` default` which has Breakpoint 0px and 3 columns

---

<div class="post-metadata">

**Author:** ![777fatcat](https://avatars.discourse-cdn.com/v4/letter/7/e95f7d/32.png) [@777fatcat](https://discourse.nodered.org/u/777fatcat)\
**Post date:** [18 October 2025 22:19 UTC](https://discourse.nodered.org/t/dashboard2-table-node-breakpoint-width/99447/3 "2025-10-18T22:19:44Z")

</div>

Hi  
thanks. found configuration for my dashboard. I deleted all 3 defaults for screen size leaving just the default option available. My table now displays as a normal table no matter what device I am using to view the table.  
Have a nice day.

---

<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:** [1 November 2025 22:19 UTC](https://discourse.nodered.org/t/dashboard2-table-node-breakpoint-width/99447/4 "2025-11-01T22:19:54Z")

</div>

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