implements @ZmagoD comments

app/javascript/src/config/locales/messages.js

@@ -62,6 +62,7 @@ export default {
       all_teams: "All teams",
       in_team: "You are member of {num} team.",
       in_teams: "You are member of {num} teams.",
+      shows_total_entries: "Showing {start} to {to} of {total} entries.",
       leave_team: "Leave team",
       account: "Account",
       team: "Team",
@@ -152,7 +153,8 @@ export default {
         title: "New team",
         name_label: "Team name",
         name_placeholder: "My team",
-        name_sublabel: "Pick a name that would best describe your team (e.g. 'University of ..., Department of ...').",
+        name_sublabel:
+          "Pick a name that would best describe your team (e.g. 'University of ..., Department of ...').",
         description_label: "Description",
         description_sublabel: "Describe your team.",
         create: "Create team"

app/javascript/src/scenes/SettingsPage/scenes/teams/components/TeamsDataTable.jsx

@@ -9,6 +9,21 @@ import DataTable from "../../../../../components/data_table";
 import { SETTINGS_TEAMS_ROUTE } from "../../../../../config/routes";
 
 class TeamsDataTable extends Component {
+  static renderShowsTotal(start, to, total) {
+    return (
+      <span>
+        <FormattedMessage
+          id="settings_page.shows_total_entries"
+          values={{
+            start,
+            to,
+            total
+          }}
+        />
+      </span>
+    );
+  }
+
   constructor(props) {
     super(props);
 
@@ -37,19 +52,7 @@ class TeamsDataTable extends Component {
   }
 
   linkToTeam(name, row) {
-    return (
-      <Link to={`${SETTINGS_TEAMS_ROUTE}/${row.id}`}>
-        {name}
-      </Link>
-    );
-  }
-
-  renderShowsTotal(start, to, total) {
-    return (
-      <span>
-        Showing { start } to { to } of { total } entries.
-      </span>
-    );
+    return <Link to={`${SETTINGS_TEAMS_ROUTE}/${row.id}`}>{name}</Link>;
   }
 
   render() {
@@ -57,9 +60,9 @@ class TeamsDataTable extends Component {
       defaultSortName: "name",
       defaultSortOrder: "desc",
       sizePerPageList: [10, 25, 50, 100],
-      prePage: 'Prev', // Previous page button text
-      nextPage: 'Next', // Next page button textu
-      paginationShowsTotal: this.renderShowsTotal,
+      prePage: "Prev", // Previous page button text
+      nextPage: "Next", // Next page button textu
+      paginationShowsTotal: TeamsDataTable.renderShowsTotal,
       alwaysShowAllBtns: true
     };
     const columns = [
@@ -71,7 +74,7 @@ class TeamsDataTable extends Component {
         dataFormat: this.linkToTeam,
         position: 0,
         dataSort: true,
-        width: '50%'
+        width: "50%"
       },
       {
         id: 2,
@@ -80,7 +83,7 @@ class TeamsDataTable extends Component {
         textId: "role",
         position: 1,
         dataSort: true,
-        width: '35%'
+        width: "35%"
       },
       {
         id: 3,
@@ -89,7 +92,7 @@ class TeamsDataTable extends Component {
         textId: "members",
         position: 2,
         dataSort: true,
-        width: '15%'
+        width: "15%"
       },
       {
         id: 4,
@@ -98,7 +101,7 @@ class TeamsDataTable extends Component {
         textId: "id",
         dataFormat: this.leaveTeamButton,
         position: 3,
-        width: '116px'
+        width: "116px"
       }
     ];
     return (