update

src/components/SearchResults/SearchResults.tsx

@@ -9,6 +9,7 @@ import React, {
   useMemo,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import Paper from "@mui/material/Paper";
 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
@@ -197,9 +198,10 @@ function SearchResults<T extends ResultWithId>({
   setCheckboxIds = undefined,
   onRowClick = undefined,
 }: Props<T>) {
+  const { t } = useTranslation("dashboard"); 
   const [page, setPage] = React.useState(0);
   const [rowsPerPage, setRowsPerPage] = React.useState(10);
-
+  
   /// this
   const handleChangePage: TablePaginationProps["onPageChange"] = (
     _event,
@@ -404,19 +406,18 @@ function SearchResults<T extends ResultWithId>({
         </Table>
       </TableContainer>
       <TablePagination
-        rowsPerPageOptions={[10, 25, 100]}
-        component="div"
-        count={!totalCount || totalCount == 0 ? items.length : totalCount}
-        // count={
-        //   !pagingController || pagingController.totalCount == 0
-        //     ? items.length
-        //     : pagingController.totalCount
-        // }
-        rowsPerPage={pagingController?.pageSize ? pagingController?.pageSize : rowsPerPage}
-        page={pagingController?.pageNum ? pagingController?.pageNum - 1 : page}
-        onPageChange={handleChangePage}
-        onRowsPerPageChange={handleChangeRowsPerPage}
-      />
+  rowsPerPageOptions={[10, 25, 100]}
+  component="div"
+  count={!totalCount || totalCount == 0 ? items.length : totalCount}
+  rowsPerPage={pagingController?.pageSize ? pagingController?.pageSize : rowsPerPage}
+  page={pagingController?.pageNum ? pagingController?.pageNum - 1 : page}
+  onPageChange={handleChangePage}
+  onRowsPerPageChange={handleChangeRowsPerPage}
+  labelRowsPerPage={t("Rows per page")}
+  labelDisplayedRows={({ from, to, count }) => 
+    `${from}-${to} of ${count !== -1 ? count : `more than ${to}`}`
+  }
+/>
     </>
   );
 

src/i18n/zh/dashboard.json

@@ -55,5 +55,6 @@
   "escalateFrom": "上報同事",
   "No": "無",
   "Responsible Escalation List": "負責的上報列表",
-  "show completed logs": "顯示已完成上報"
+  "show completed logs": "顯示已完成上報",
+   "Rows per page": "每頁行數"
 }