Point 31: Table Text Localization¶

Objective¶

Localize all table-related texts including pagination, search, and filters across the entire application.

Changes Made¶

1. Translation Keys Added¶

German (de.json)¶

"common": {
  // ... existing keys
  "pagination": {
    "showing": "Zeige {{start}} bis {{end}} von {{total}} Ergebnissen",
    "showingTotal": "Zeige {{total}} Ergebnisse",
    "showingFiltered": "Zeige {{filtered}} von {{total}} Ergebnissen",
    "previous": "Zurück",
    "next": "Weiter",
    "page": "Seite {{page}} von {{total}}",
    "results": "Ergebnisse"
  },
  "table": {
    "search": "Suchen...",
    "filters": "Filter",
    "noResults": "Keine Ergebnisse gefunden"
  }
}

English (en.json)¶

"common": {
  // ... existing keys
  "pagination": {
    "showing": "Showing {{start}} to {{end}} of {{total}} results",
    "showingTotal": "Showing {{total}} results",
    "showingFiltered": "Showing {{filtered}} of {{total}} results",
    "previous": "Previous",
    "next": "Next",
    "page": "Page {{page}} of {{total}}",
    "results": "results"
  },
  "table": {
    "search": "Search...",
    "filters": "Filters",
    "noResults": "No results found"
  }
}

2. Components Updated¶

SmartPagination.tsx¶

Before:

<button>Previous</button>
<button>Next</button>

After:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

<button>{t('common.pagination.previous')}</button>
<button>{t('common.pagination.next')}</button>

DatabaseManagementTemplate.tsx¶

Before:

Showing <span className="font-medium">{startIndex + 1}</span> to{' '}
<span className="font-medium">{Math.min(endIndex, totalItems)}</span> of{' '}
<span className="font-medium">{totalItems}</span> results

After:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

{t('common.pagination.showing', {
  start: startIndex + 1,
  end: Math.min(endIndex, totalItems),
  total: totalItems
})}

UnifiedHeader.tsx¶

Before:

<>Showing {filteredCount} of {totalCount} results</>
<>Showing {totalCount} results</>

After:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

<>{t('common.pagination.showingFiltered', { filtered: filteredCount, total: totalCount })}</>
<>{t('common.pagination.showingTotal', { total: totalCount })}</>

data-table.tsx¶

Before:

placeholder="Search..."
<button>Filters</button>
Showing {start} to {end} of {total} results

After:

import { useTranslation } from 'react-i18next';

const { t } = useTranslation();

placeholder={t('common.table.search')}
<button>{t('common.table.filters')}</button>
{t('common.pagination.showing', { start, end, total })}

3. Benefits¶

Consistency: All pagination and table texts now use the same translation keys
Maintainability: Centralized translation management in common section
Bilingual Support: Full German and English support for all table components
Reusability: Translation keys can be used across all pages
User Experience: Users see interface in their preferred language

4. Affected Pages¶

All pages using these components are now fully localized: - ✅ Participants Management - ✅ Clubs Management - ✅ Disciplines Management - ✅ Discipline Fields Management - ✅ Events Management - ✅ Associations Management - ✅ Regions Management - ✅ Event Participants - ✅ Competitions - ✅ And all other database management pages

5. Testing¶

Build completed successfully:

✓ 2205 modules transformed.
✓ built in 6.21s

No TypeScript errors in localized components.

Status¶

✅ Completed - All table texts (Showing, Previous, Next, Search, Filters) are now localized across the entire application.