Integrate Home Assistant data table with enhanced UI features

[brayStorm]

Summary

• Integrate Home Assistant style data table component for device list view
• Add text-based online/offline status indicators with visual dots for better accessibility
• Implement comprehensive table view with sorting and filtering capabilities
• Fix mDNS display to use configuration filename instead of device name
• Enhance card layout with improved grid responsiveness and theming
• Fix icon colors in dropdown menus for better visibility

Key Features

• HA Data Table Integration: Implements Home Assistant's data table pattern for consistent UX across ESPHome and HA ecosystem
• Dual View Modes: Toggle between card view and table view with persistent user preferences
• Advanced Sorting: Sort by device name, IP address, or connection status with proper status ordering
• Status Filtering: Filter devices by online/offline status for easier management
• Responsive Design: Adaptive grid layout supporting 1-5 columns based on screen size
• Enhanced Accessibility: Text-based status indicators combined with visual dots

Technical Implementation

• New esphome-data-table component following HA design patterns
• Device IP resolution API integration for accurate network information
• LocalStorage-based preference persistence for view settings
• Comprehensive CSS theming supporting both light and dark modes
• Proper mDNS address formatting using configuration filenames

Test Plan

• [x] Verify HA-style data table renders correctly with proper theming
• [x] Test table sorting by name, IP address, and status with correct ordering
• [x] Confirm status filtering works for online/offline devices
• [x] Verify text status indicators display correctly in both card and table views
• [x] Confirm mDNS addresses show configuration filename (e.g., "device-name.local")
• [x] Check responsive grid layout across different screen sizes (1-5 columns)
• [x] Validate icon colors in dropdown menus are properly visible in all themes
• [x] Test preference persistence across browser sessions
• [x] Verify compatibility with existing device management workflows

[swoboda1337]

I tried this. IP shows as the mDNS name for all devices except one and in table view there is no IP address at all everything is "-":

[balloob]

Let's pull in the data table like how HACS does it, with a git submodule: https://github.com/hacs/frontend

Could you also include screenshots?

Here is a mockup that we've been working on based on the data table. Could you make it look like this?

[brayStorm]

I tried this. IP shows as the mDNS name for all devices except one and in table view there is no IP address at all everything is "-":

Waiting on PR on esphome https://github.com/esphome/esphome/pull/9006

[brayStorm]

Let's pull in the data table like how HACS does it, with a git submodule: https://github.com/hacs/frontend

Could you also include screenshots?

Here is a mockup that we've been working on based on the data table. Could you make it look like this?

Yes - give me a little bit.

[balloob]

Any reason we would want to show the IP address and not just show the mdns name? (as-in, do we need that new API?)

[swoboda1337]

Any reason we would want to show the IP address and not just show the mdns name? (as-in, do we need that new API?)

Agreed, not sure we even need the mdns name as its in the config.

[Misiu]

Agreed, not sure we even need the mdns name as its in the config.

name_add_mac_suffix affects the device name. Doesn't it also affect the mDNS name? If yes, then maybe we should display the actual mDNS name.

[jesserockz]

Agreed, not sure we even need the mdns name as its in the config.

name_add_mac_suffix affects the device name. Doesn't it also affect the mDNS name? If yes, then maybe we should display the actual mDNS name.

Yes, but the dashboard is not the place if you are writing a config that has the suffix enabled. The dashboard works on one YAML per one device only

[nielsnl68]

Yes, but the dashboard is not the place if you are writing a config that has the suffix enabled. The dashboard works on one YAML per one device only

I think i would prefer seeing the mDNS name more then the configurated name. Would it be an idea to add it to a list of none visible column's and the user could select which column is being shown. Like HACS has.

Anyway a good Job @brayStorm.

[bdraco]

@brayStorm Just wanted to check in on this one. Happy to help move this forward.

[bdraco]

Properly adding the submodule is proving very challenging

[bdraco]

Let's pull in the data table like how HACS does it, with a git submodule: hacs/frontend

I spent a few hours exploring that, and while I got it working, we end up with a 785k index.js from all the deps that HA has. It was quite noticeable. I think the maint burden of keeping up with all of HA's deps will exceed the value so it likely makes sense to vendor it here instead.

https://github.com/esphome/dashboard/tree/ha_data_table_submodule

[bdraco]

Tried to make it a bit more like the mock up above. Getting the zindex to work with the expansion menu is difficult

[tbrasser]

Not sure if this is the right place, but having another table (as per the mockup) to edit packages/includes would be amazing.