Add main column to data table (#13966)

hassio/src/backups/hassio-backups.ts

@@ -119,6 +119,7 @@ export class HassioBackups extends LitElement {
     (narrow: boolean): DataTableColumnContainer => ({
       name: {
         title: this.supervisor.localize("backup.name"),
+        main: true,
         sortable: true,
         filterable: true,
         grows: true,

src/components/data-table/ha-data-table.ts

@@ -69,6 +69,7 @@ export interface DataTableSortColumnData {
 }
 
 export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
+  main?: boolean;
   title: TemplateResult | string;
   label?: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
@@ -406,7 +407,7 @@ export class HaDataTable extends LitElement {
           }
           return html`
             <div
-              role="cell"
+              role=${column.main ? "rowheader" : "cell"}
               class="mdc-data-table__cell ${classMap({
                 "mdc-data-table__cell--numeric": column.type === "numeric",
                 "mdc-data-table__cell--icon": column.type === "icon",

src/panels/config/automation/ha-automation-picker.ts

@@ -100,6 +100,7 @@ class HaAutomationPicker extends LitElement {
           title: this.hass.localize(
             "ui.panel.config.automation.picker.headers.name"
           ),
+          main: true,
           sortable: true,
           filterable: true,
           direction: "asc",

src/panels/config/backup/ha-config-backup.ts

@@ -51,6 +51,7 @@ class HaConfigBackup extends LitElement {
     (narrow, _language): DataTableColumnContainer => ({
       name: {
         title: this.hass.localize("ui.panel.config.backup.name"),
+        main: true,
         sortable: true,
         filterable: true,
         grows: true,

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -109,6 +109,7 @@ class HaBlueprintOverview extends LitElement {
         title: this.hass.localize(
           "ui.panel.config.blueprint.overview.headers.name"
         ),
+        main: true,
         sortable: true,
         filterable: true,
         direction: "asc",

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -238,6 +238,7 @@ export class HaConfigDeviceDashboard extends LitElement {
       const columns: DataTableColumnContainer = narrow
         ? {
             name: {
+              main: true,
               title: this.hass.localize(
                 "ui.panel.config.devices.data_table.device"
               ),

src/panels/config/entities/ha-config-entities.ts

@@ -182,6 +182,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         `,
       },
       name: {
+        main: true,
         title: this.hass.localize(
           "ui.panel.config.entities.picker.headers.name"
         ),

src/panels/config/helpers/ha-config-helpers.ts

@@ -91,6 +91,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
         },
         name: {
           title: localize("ui.panel.config.helpers.picker.headers.name"),
+          main: true,
           sortable: true,
           filterable: true,
           grows: true,

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -78,6 +78,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           title: this.hass.localize(
             "ui.panel.config.lovelace.dashboards.picker.headers.title"
           ),
+          main: true,
           sortable: true,
           filterable: true,
           grows: true,

src/panels/config/scene/ha-scene-dashboard.ts

@@ -95,6 +95,7 @@ class HaSceneDashboard extends LitElement {
           title: this.hass.localize(
             "ui.panel.config.scene.picker.headers.name"
           ),
+          main: true,
           sortable: true,
           filterable: true,
           direction: "asc",

src/panels/config/script/ha-script-picker.ts

@@ -93,6 +93,7 @@ class HaScriptPicker extends LitElement {
       },
       name: {
         title: this.hass.localize("ui.panel.config.script.picker.headers.name"),
+        main: true,
         sortable: true,
         filterable: true,
         direction: "asc",

src/panels/config/tags/ha-config-tags.ts

@@ -66,6 +66,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         },
         display_name: {
           title: this.hass.localize("ui.panel.config.tag.headers.name"),
+          main: true,
           sortable: true,
           filterable: true,
           grows: true,

src/panels/config/users/ha-config-users.ts

@@ -43,6 +43,7 @@ export class HaConfigUsers extends LitElement {
       const columns: DataTableColumnContainer<User> = {
         name: {
           title: localize("ui.panel.config.users.picker.headers.name"),
+          main: true,
           sortable: true,
           filterable: true,
           width: "25%",