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

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