translation-table.tsx

Overview

The translation-table.tsx file defines a reusable React functional component named TranslationTable that renders a dynamic, sortable, and filterable table of translation keys and their corresponding translations in multiple languages. Leveraging the Table component from the Ant Design (antd) UI library, this component is designed to facilitate the display and exploration of multilingual translation data in a structured tabular format.

Key features include:

• Dynamic columns generated based on the languages provided.

• Sorting capability on both translation keys and translation strings per language.

• Filtering to show only empty or non-empty translation entries on a per-language basis.

• Fixed "Key" column to improve usability when horizontally scrolling through many languages.

• Pagination with a default page size of 10 entries.

This component is useful in localization management tools, content review interfaces, or admin panels where translation data needs to be inspected or edited (though editing is not provided here).

Detailed Explanation

Types and Interfaces

TranslationTableRow

type TranslationTableRow = {
  key: string;
  [language: string]: string;
};

• Represents a single row in the translation table.

• Properties:

  • key: A unique identifier string for the translation entry (e.g., a message ID).

  • Dynamic string keys matching language codes (e.g., "en", "fr", "es") with their corresponding translated strings.

Example:

{
  key: "greeting",
  en: "Hello",
  fr: "Bonjour",
  es: "Hola"
}

TranslationTableProps

interface TranslationTableProps {
  data: TranslationTableRow[];
  languages: string[];
}

• Props accepted by TranslationTable.

• Properties:

  • data: Array of TranslationTableRow objects representing the translation entries to display.

  • languages: Array of language codes to dynamically generate columns for each language.

Component: TranslationTable

const TranslationTable: React.FC<TranslationTableProps> = ({ data, languages }) => { ... }

Purpose

Renders a translation table with dynamic columns, sorting, and filtering capabilities.

Parameters

• data (TranslationTableRow[]): The dataset containing translation records.

• languages (string[]): List of languages to display as columns.

Implementation Details

1. Columns Definition

   • Starts with a fixed "Key" column:

     • Fixed to the left.

     • Width of 200 pixels.

     • Sortable alphabetically by the translation key.

   • Dynamically appends one column per language:

     • Title is the language code (e.g., "en").

     • Sortable alphabetically by the translation string in that language.

     • Includes filters:

       • "Show Empty": filters rows where the translation value is empty or missing.

       • "Show Non-Empty": filters rows where the translation value exists and is not empty.

     • Filtering logic based on the selected filter value applies per language column.

2. Table Configuration

   • Uses Ant Design's Table component.

   • columns and dataSource are passed accordingly.

   • rowKey is set to "key" to uniquely identify rows.

   • Pagination set with a page size of 10 entries.

   • Horizontal scroll enabled (scroll={{ x: true }}) to handle many language columns.

Return Value

Returns a JSX element rendering the configured Table.

Usage Example

import React from 'react';
import TranslationTable from './translation-table';

const data = [
  { key: 'welcome', en: 'Welcome', fr: 'Bienvenue', es: 'Bienvenido' },
  { key: 'bye', en: 'Goodbye', fr: '', es: 'Adiós' },
];

const languages = ['en', 'fr', 'es'];

const App = () => (
  <TranslationTable data={data} languages={languages} />
);

export default App;

Important Implementation Details

• The component leverages TypeScript for type safety.

• Dynamic column generation reduces redundancy and adapts to any number of languages.

• Sorting uses locale string comparison to ensure alphabetical order.

• Filtering allows users to quickly isolate untranslated or translated entries.

• The "Key" column is fixed to improve navigation when many language columns exist.

Interaction with Other System Components

• This component depends on the antd library for UI elements, specifically the Table component.

• It expects translation data structured as an array of objects with a unique key and language-specific string values.

• It can be integrated into localization management systems, dashboards, or admin panels where translations are reviewed.

• The component can be extended or wrapped to add editing capabilities or data fetching from APIs.

• The parent component is responsible for managing the data and supplying supported languages.

Diagram: Component Structure and Data Flow

componentDiagram
    component TranslationTable {
        +props: TranslationTableProps
        +render(): JSX.Element
    }
    component Table (Ant Design Table)
    TranslationTable --> Table : renders with dynamic columns and data

    TranslationTableProps <|-- TranslationTable : receives data, languages
    TranslationTableProps : data: TranslationTableRow[]
    TranslationTableProps : languages: string[]

    note right of TranslationTable
      - Defines columns dynamically based on languages
      - Sorting and filtering per column
      - Fixed key column
      - Pagination enabled
    end note

Summary

The translation-table.tsx file provides a flexible, well-typed React component that dynamically creates a sortable and filterable translation table for multiple languages. Built atop Ant Design's Table, it is ideal for translation management interfaces, allowing users to efficiently view and filter multilingual content. The file cleanly separates data structure definitions, UI logic, and configuration, enabling easy integration and extension.