feat(i18n): add support for translatable column labels in DataTable

Enhanced the `DataTable` component to support translatable column labels: - Updated `TableColumns` type to accept translation objects with `id` and `defaultMessage`. - Refactored `processColumns` to translate labels using `useTranslation`. - Ensured compatibility with existing column options and React components. This update improves internationalization (i18n) support for dynamic table headers.
Coursemology · Dec 17, 2024 · 601fb15 · 601fb15
1 parent eed61a6
commit 601fb15
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 17 deletions.
diff --git a/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx b/client/app/bundles/course/leaderboard/components/tables/LeaderboardTable.tsx
@@ -1,5 +1,5 @@
 import { FC, memo, useEffect, useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Avatar, AvatarGroup, Box, Tooltip } from '@mui/material';
 import { TableColumns } from 'types/components/DataTable';
 import {
@@ -48,6 +48,30 @@ const translations = defineMessages({
     id: 'course.leaderboard.LeaderboardTable.achievements',
     defaultMessage: 'Achievements',
   },
+  rank: {
+    id: 'course.leaderboard.LeaderboardTable.rank',
+    defaultMessage: 'Rank',
+  },
+  name: {
+    id: 'course.leaderboard.LeaderboardTable.name',
+    defaultMessage: 'Name',
+  },
+  level: {
+    id: 'course.leaderboard.LeaderboardTable.level',
+    defaultMessage: 'Level',
+  },
+  averageExperience: {
+    id: 'course.leaderboard.LeaderboardTable.averageExperience',
+    defaultMessage: 'Average Experience',
+  },
+  averageAchievements: {
+    id: 'course.leaderboard.LeaderboardTable.averageAchievements',
+    defaultMessage: 'Average Achievements',
+  },
+  members: {
+    id: 'course.leaderboard.LeaderboardTable.members',
+    defaultMessage: 'Members',
+  },
 });
 
 const styles = {
@@ -78,6 +102,7 @@ const styles = {
 
 const LeaderboardTable: FC<Props> = (props: Props) => {
   const { data, id: tableType } = props;
+  const { formatMessage: t } = useIntl();
   const tabletView = useMedia.MinWidth('sm');
   const phoneView = useMedia.MinWidth('xs');
   const [maxAvatars, setMaxAvatars] = useState(6);
@@ -95,7 +120,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
   const columns: TableColumns[] = [
     {
       name: 'id',
-      label: 'Rank',
+      label: t(translations.rank),
       options: {
         filter: false,
         sort: false,
@@ -116,7 +141,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
       | LeaderboardAchievement[];
     columns.push({
       name: 'name',
-      label: 'Name',
+      label: t(translations.name),
       options: {
         filter: false,
         sort: false,
@@ -157,7 +182,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
     columns.push(
       {
         name: 'level',
-        label: 'Level',
+        label: t(translations.level),
         options: {
           filter: false,
           sort: false,
@@ -172,7 +197,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
       },
       {
         name: 'experience',
-        label: 'Experience',
+        label: t(translations.experience),
         options: {
           filter: false,
           sort: false,
@@ -192,7 +217,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
     const achievementData = data as LeaderboardAchievement[];
     columns.push({
       name: 'achievements',
-      label: 'Achievements',
+      label: t(translations.achievements),
       options: {
         filter: false,
         sort: false,
@@ -249,7 +274,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
     columns.push(
       {
         name: 'name',
-        label: 'Name',
+        label: t(translations.name),
         options: {
           filter: false,
           sort: false,
@@ -268,7 +293,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
       },
       {
         name: 'members',
-        label: 'Members',
+        label: t(translations.members),
         options: {
           filter: false,
           sort: false,
@@ -306,7 +331,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
     const groupPointData = data as GroupLeaderboardPoints[];
     columns.push({
       name: 'points',
-      label: 'Average Experience',
+      label: t(translations.averageExperience),
       options: {
         filter: false,
         sort: false,
@@ -332,7 +357,7 @@ const LeaderboardTable: FC<Props> = (props: Props) => {
     const groupAchievementData = data as GroupLeaderboardAchievement[];
     columns.push({
       name: 'achievements',
-      label: 'Average Achievements',
+      label: t(translations.averageAchievements),
       options: {
         filter: false,
         sort: false,

diff --git a/client/app/lib/components/core/layouts/DataTable.jsx b/client/app/lib/components/core/layouts/DataTable.jsx
@@ -4,6 +4,8 @@ import MUIDataTable from 'mui-datatables';
 
 import styles from 'lib/components/core/layouts/layout.scss';
 import LoadingOverlay from 'lib/components/core/LoadingOverlay';
+import useTranslation from "lib/hooks/useTranslation";
+import React from "react";
 
 const options = {
   filter: true,
@@ -59,22 +61,26 @@ const processTheme = (theme, newHeight, grid, alignCenter, newPadding) =>
     },
   });
 
-const processColumns = (includeRowNumber, columns) => {
+const processColumns = (includeRowNumber, columns, t) => {
   if (!columns.length) return columns;
 
   const processed = columns.map((column) => {
     if (!column.options?.alignCenter && !column.options?.hideInSmallScreen)
       return column;
 
     return produce(column, (draft) => {
+      if (typeof draft.label !== 'string' && !React.isValidElement(draft.label)) {
+        draft.label = t(draft.label);
+      }
+
       draft.options.setCellHeaderProps = () => {
         let align = null;
         let className = '';
-        if (column.options?.alignCenter) {
+        if (draft.options?.alignCenter) {
           className += `${styles.centeredTableHead}`;
           align = 'center';
         }
-        if (column.options?.hideInSmallScreen) {
+        if (draft.options?.hideInSmallScreen) {
           className += ' !hidden sm:!table-cell';
         }
         return {
@@ -86,11 +92,12 @@ const processColumns = (includeRowNumber, columns) => {
       draft.options.setCellProps = () => {
         let align = null;
         let className = '';
-        if (column.options?.alignCenter) {
+        if (draft.options?.alignCenter) {
           align = 'center';
         }
-        if (column.options?.hideInSmallScreen)
+        if (draft.options?.hideInSmallScreen) {
           className += ' !hidden sm:!table-cell';
+        }
         return {
           ...(align && { align }),
           className,
@@ -120,6 +127,7 @@ const processColumns = (includeRowNumber, columns) => {
  */
 const DataTable = (props) => {
   const theme = useTheme();
+  const { t } = useTranslation();
 
   return (
     <ThemeProvider
@@ -135,7 +143,7 @@ const DataTable = (props) => {
         {props.isLoading && <LoadingOverlay />}
         <MUIDataTable
           {...props}
-          columns={processColumns(props.includeRowNumber, props.columns)}
+          columns={processColumns(props.includeRowNumber, props.columns, t)}
           options={{ ...options, ...(props.options ?? {}) }}
         />
       </div>

diff --git a/client/app/types/components/DataTable.ts b/client/app/types/components/DataTable.ts
@@ -5,7 +5,13 @@ import { CSSProperties } from 'react';
  */
 export interface TableColumns {
   name: string;
-  label: string | JSX.Element;
+  label:
+    | string
+    | JSX.Element
+    | {
+        id: string;
+        defaultMessage: string;
+      };
   options: {
     alignCenter?: boolean;
     alignLeft?: boolean;