feat: Catalog table columns support i18n

Signed-off-by: mario ma <mario.ma.node@gmail.com>

.changeset/lovely-frogs-share.md

@@ -0,0 +1,6 @@
+---
+'@backstage/plugin-catalog-react': patch
+'@backstage/plugin-catalog': patch
+---
+
+Catalog table columns support i18n

plugins/catalog-react/report-alpha.api.md

@@ -86,6 +86,18 @@ export const catalogReactTranslationRef: TranslationRef<
     readonly 'userListPicker.personalFilter.title': 'Personal';
     readonly 'userListPicker.personalFilter.ownedLabel': 'Owned';
     readonly 'userListPicker.personalFilter.starredLabel': 'Starred';
+    readonly 'entityTableColumnTitle.name': 'Name';
+    readonly 'entityTableColumnTitle.type': 'Type';
+    readonly 'entityTableColumnTitle.label': 'Label';
+    readonly 'entityTableColumnTitle.title': 'Title';
+    readonly 'entityTableColumnTitle.description': 'Description';
+    readonly 'entityTableColumnTitle.domain': 'Domain';
+    readonly 'entityTableColumnTitle.namespace': 'Namespace';
+    readonly 'entityTableColumnTitle.lifecycle': 'Lifecycle';
+    readonly 'entityTableColumnTitle.owner': 'Owner';
+    readonly 'entityTableColumnTitle.system': 'System';
+    readonly 'entityTableColumnTitle.targets': 'Targets';
+    readonly 'entityTableColumnTitle.tags': 'Tags';
   }
 >;
 
@@ -517,6 +529,40 @@ export type EntityPredicateValue =
       $contains: EntityPredicateExpression;
     };
 
+// @alpha (undocumented)
+export const EntityTableColumnTitle: ({
+  translationKey,
+}: EntityTableColumnTitleProps) =>
+  | 'Domain'
+  | 'System'
+  | 'Name'
+  | 'Description'
+  | 'Lifecycle'
+  | 'Namespace'
+  | 'Owner'
+  | 'Tags'
+  | 'Type'
+  | 'Targets'
+  | 'Title'
+  | 'Label';
+
+// @alpha (undocumented)
+export type EntityTableColumnTitleProps = {
+  translationKey:
+    | 'name'
+    | 'system'
+    | 'owner'
+    | 'type'
+    | 'lifecycle'
+    | 'namespace'
+    | 'description'
+    | 'tags'
+    | 'targets'
+    | 'title'
+    | 'label'
+    | 'domain';
+};
+
 // @alpha
 export function isOwnerOf(owner: Entity, entity: Entity): boolean;
 

plugins/catalog-react/report.api.md

@@ -171,7 +171,7 @@ export const columnFactories: Readonly<{
     defaultKind?: string;
   }): TableColumn<T>;
   createEntityRelationColumn<T extends Entity>(options: {
-    title: string;
+    title: string | JSX.Element;
     relation: string;
     defaultKind?: string;
     filter?: {
@@ -575,7 +575,7 @@ export const EntityTable: {
       defaultKind?: string;
     }): TableColumn<T>;
     createEntityRelationColumn<T extends Entity>(options: {
-      title: string;
+      title: string | JSX.Element;
       relation: string;
       defaultKind?: string;
       filter?: {

plugins/catalog-react/src/alpha/index.ts

@@ -20,3 +20,4 @@ export * from './predicates';
 export { catalogReactTranslationRef } from '../translation';
 export { isOwnerOf } from '../utils/isOwnerOf';
 export { useEntityPermission } from '../hooks/useEntityPermission';
+export * from '../components/EntityTable/TitleColumn';

plugins/catalog-react/src/components/EntityTable/TitleColumn.test.tsx

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { screen } from '@testing-library/react';
+import { EntityTableColumnTitle } from './TitleColumn';
+import { renderInTestApp } from '@backstage/test-utils';
+
+describe('<EntityTableColumnTitle />', () => {
+  it('renders the translated title for the given key', async () => {
+    await renderInTestApp(<EntityTableColumnTitle translationKey="name" />);
+    expect(screen.getByText('Name')).toBeInTheDocument();
+  });
+});

plugins/catalog-react/src/components/EntityTable/TitleColumn.tsx

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useTranslationRef } from '@backstage/frontend-plugin-api';
+import { catalogReactTranslationRef } from '../../translation';
+
+/**
+ * @alpha
+ */
+export type EntityTableColumnTitleProps = {
+  translationKey:
+    | 'name'
+    | 'system'
+    | 'owner'
+    | 'type'
+    | 'lifecycle'
+    | 'namespace'
+    | 'description'
+    | 'tags'
+    | 'targets'
+    | 'title'
+    | 'label'
+    | 'domain';
+};
+
+/**
+ * @alpha
+ */
+export const EntityTableColumnTitle = ({
+  translationKey,
+}: EntityTableColumnTitleProps) => {
+  const { t } = useTranslationRef(catalogReactTranslationRef);
+  return t(`entityTableColumnTitle.${translationKey}`);
+};

plugins/catalog-react/src/components/EntityTable/columns.tsx

@@ -27,8 +27,7 @@ import {
   EntityRefLinks,
   humanizeEntityRef,
 } from '../EntityRefLink';
-
-// TODO: column title support i18n
+import { EntityTableColumnTitle } from './TitleColumn';
 
 /** @public */
 export const columnFactories = Object.freeze({
@@ -46,7 +45,7 @@ export const columnFactories = Object.freeze({
     }
 
     return {
-      title: 'Name',
+      title: <EntityTableColumnTitle translationKey="name" />,
       highlight: true,
       customFilterAndSearch(filter, entity) {
         // TODO: We could implement this more efficiently, like searching over
@@ -72,7 +71,7 @@ export const columnFactories = Object.freeze({
     };
   },
   createEntityRelationColumn<T extends Entity>(options: {
-    title: string;
+    title: string | JSX.Element;
     relation: string;
     defaultKind?: string;
     filter?: { kind: string };
@@ -109,14 +108,14 @@ export const columnFactories = Object.freeze({
   },
   createOwnerColumn<T extends Entity>(): TableColumn<T> {
     return this.createEntityRelationColumn({
-      title: 'Owner',
+      title: <EntityTableColumnTitle translationKey="type" />,
       relation: RELATION_OWNED_BY,
       defaultKind: 'group',
     });
   },
   createDomainColumn<T extends Entity>(): TableColumn<T> {
     return this.createEntityRelationColumn({
-      title: 'Domain',
+      title: <EntityTableColumnTitle translationKey="domain" />,
       relation: RELATION_PART_OF,
       defaultKind: 'domain',
       filter: {
@@ -126,7 +125,7 @@ export const columnFactories = Object.freeze({
   },
   createSystemColumn<T extends Entity>(): TableColumn<T> {
     return this.createEntityRelationColumn({
-      title: 'System',
+      title: <EntityTableColumnTitle translationKey="system" />,
       relation: RELATION_PART_OF,
       defaultKind: 'system',
       filter: {
@@ -136,7 +135,7 @@ export const columnFactories = Object.freeze({
   },
   createMetadataDescriptionColumn<T extends Entity>(): TableColumn<T> {
     return {
-      title: 'Description',
+      title: <EntityTableColumnTitle translationKey="description" />,
       field: 'metadata.description',
       render: entity => (
         <OverflowTooltip
@@ -149,13 +148,13 @@ export const columnFactories = Object.freeze({
   },
   createSpecLifecycleColumn<T extends Entity>(): TableColumn<T> {
     return {
-      title: 'Lifecycle',
+      title: <EntityTableColumnTitle translationKey="lifecycle" />,
       field: 'spec.lifecycle',
     };
   },
   createSpecTypeColumn<T extends Entity>(): TableColumn<T> {
     return {
-      title: 'Type',
+      title: <EntityTableColumnTitle translationKey="type" />,
       field: 'spec.type',
     };
   },

plugins/catalog-react/src/translation.ts

@@ -124,5 +124,19 @@ export const catalogReactTranslationRef = createTranslationRef({
       },
       orgFilterAllLabel: 'All',
     },
+    entityTableColumnTitle: {
+      name: 'Name',
+      system: 'System',
+      owner: 'Owner',
+      type: 'Type',
+      lifecycle: 'Lifecycle',
+      namespace: 'Namespace',
+      description: 'Description',
+      tags: 'Tags',
+      targets: 'Targets',
+      title: 'Title',
+      label: 'Label',
+      domain: 'Domain',
+    },
   },
 });

plugins/catalog/src/components/CatalogTable/columns.tsx

@@ -23,6 +23,7 @@ import { CatalogTableRow } from './types';
 import { OverflowTooltip, TableColumn } from '@backstage/core-components';
 import { Entity } from '@backstage/catalog-model';
 import { JsonArray } from '@backstage/types';
+import { EntityTableColumnTitle } from '@backstage/plugin-catalog-react/alpha';
 
 // The columnFactories symbol is not directly exported, but through the
 // CatalogTable.columns field.
@@ -41,7 +42,7 @@ export const columnFactories = Object.freeze({
     }
 
     return {
-      title: 'Name',
+      title: <EntityTableColumnTitle translationKey="name" />,
       field: 'resolved.entityRef',
       highlight: true,
       customSort({ entity: entity1 }, { entity: entity2 }) {
@@ -59,7 +60,7 @@ export const columnFactories = Object.freeze({
   },
   createSystemColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'System',
+      title: <EntityTableColumnTitle translationKey="system" />,
       field: 'resolved.partOfSystemRelationTitle',
       customFilterAndSearch: (query, row) => {
         if (!row.resolved.partOfSystemRelations) {
@@ -83,7 +84,7 @@ export const columnFactories = Object.freeze({
   },
   createOwnerColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'Owner',
+      title: <EntityTableColumnTitle translationKey="owner" />,
       field: 'resolved.ownedByRelationsTitle',
       render: ({ resolved }) => (
         <EntityRefLinks
@@ -95,7 +96,7 @@ export const columnFactories = Object.freeze({
   },
   createSpecTargetsColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'Targets',
+      title: <EntityTableColumnTitle translationKey="targets" />,
       field: 'entity.spec.targets',
       customFilterAndSearch: (query, row) => {
         let targets: JsonArray = [];
@@ -132,7 +133,7 @@ export const columnFactories = Object.freeze({
     } = { hidden: false },
   ): TableColumn<CatalogTableRow> {
     return {
-      title: 'Type',
+      title: <EntityTableColumnTitle translationKey="type" />,
       field: 'entity.spec.type',
       hidden: options.hidden,
       width: 'auto',
@@ -140,13 +141,13 @@ export const columnFactories = Object.freeze({
   },
   createSpecLifecycleColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'Lifecycle',
+      title: <EntityTableColumnTitle translationKey="lifecycle" />,
       field: 'entity.spec.lifecycle',
     };
   },
   createMetadataDescriptionColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'Description',
+      title: <EntityTableColumnTitle translationKey="description" />,
       field: 'entity.metadata.description',
       render: ({ entity }) => (
         <OverflowTooltip
@@ -159,7 +160,7 @@ export const columnFactories = Object.freeze({
   },
   createTagsColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'Tags',
+      title: <EntityTableColumnTitle translationKey="tags" />,
       field: 'entity.metadata.tags',
       cellStyle: {
         padding: '0px 16px 0px 20px',
@@ -185,7 +186,7 @@ export const columnFactories = Object.freeze({
     hidden?: boolean;
   }): TableColumn<CatalogTableRow> {
     return {
-      title: 'Title',
+      title: <EntityTableColumnTitle translationKey="title" />,
       field: 'entity.metadata.title',
       hidden: options?.hidden,
       searchable: true,
@@ -202,7 +203,9 @@ export const columnFactories = Object.freeze({
     }
 
     return {
-      title: options?.title || 'Label',
+      title: options?.title || (
+        <EntityTableColumnTitle translationKey="label" />
+      ),
       field: 'entity.metadata.labels',
       cellStyle: {
         padding: '0px 16px 0px 20px',
@@ -235,7 +238,7 @@ export const columnFactories = Object.freeze({
   },
   createNamespaceColumn(): TableColumn<CatalogTableRow> {
     return {
-      title: 'Namespace',
+      title: <EntityTableColumnTitle translationKey="namespace" />,
       field: 'entity.metadata.namespace',
       width: 'auto',
     };