Fix sort arrows

optuna_dashboard/ts/components/TrialTable.tsx

@@ -14,7 +14,19 @@ import TableCell from "@mui/material/TableCell"
 import TableContainer from "@mui/material/TableContainer"
 import TableHead from "@mui/material/TableHead"
 import TableRow from "@mui/material/TableRow"
+import TablePagination from "@mui/material/TablePagination"
 import Paper from "@mui/material/Paper"
+import { TablePaginationActionsProps } from "@mui/material/TablePagination/TablePaginationActions"
+import FirstPageIcon from "@mui/icons-material/FirstPage"
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"
+import LastPageIcon from "@mui/icons-material/LastPage"
+
+import {
+  TiArrowSortedDown,
+  TiArrowSortedUp,
+  TiArrowUnsorted,
+} from "react-icons/ti"
 
 import {
   ColumnDef,
@@ -22,18 +34,87 @@ import {
   flexRender,
   getCoreRowModel,
   getSortedRowModel,
+  getPaginationRowModel,
   SortingState,
   useReactTable,
 } from "@tanstack/react-table"
 
-function BasicTable(props: {
-  columns: ColumnDef<Trial>[]
-  rows: Trial[]
-}): React.ReactElement {
-  const { columns, rows } = props
-  const [sorting, setSorting] = React.useState<SortingState>([])
+const TablePaginationActions = (props: TablePaginationActionsProps) => {
+  const theme = useTheme()
+  const { count, page, rowsPerPage, onPageChange } = props
 
-  const data = rows
+  const handleFirstPageButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    onPageChange(event, 0)
+  }
+
+  const handleBackButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    onPageChange(event, page - 1)
+  }
+
+  const handleNextButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    onPageChange(event, page + 1)
+  }
+
+  const handleLastPageButtonClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
+  }
+
+  return (
+    <Box sx={{ flexShrink: 0, ml: 2.5 }}>
+      <IconButton
+        onClick={handleFirstPageButtonClick}
+        disabled={page === 0}
+        aria-label="first page"
+      >
+        {theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
+      </IconButton>
+      <IconButton
+        onClick={handleBackButtonClick}
+        disabled={page === 0}
+        aria-label="previous page"
+      >
+        {theme.direction === "rtl" ? (
+          <KeyboardArrowRight />
+        ) : (
+          <KeyboardArrowLeft />
+        )}
+      </IconButton>
+      <IconButton
+        onClick={handleNextButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="next page"
+      >
+        {theme.direction === "rtl" ? (
+          <KeyboardArrowLeft />
+        ) : (
+          <KeyboardArrowRight />
+        )}
+      </IconButton>
+      <IconButton
+        onClick={handleLastPageButtonClick}
+        disabled={page >= Math.ceil(count / rowsPerPage) - 1}
+        aria-label="last page"
+      >
+        {theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
+      </IconButton>
+    </Box>
+  )
+}
+
+function BasicTable(props: {
+  data: Trial[]
+  columns: ColumnDef<Trial>[]
+}): React.ReactElement {
+  const { data, columns } = props
+  const [sorting, setSorting] = React.useState<SortingState>([])
 
   const table = useReactTable({
     data,
@@ -44,9 +125,13 @@ function BasicTable(props: {
     onSortingChange: setSorting,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    //
     debugTable: true,
   })
 
+  const { pageSize, pageIndex } = table.getState().pagination
+
   return (
     <Box sx={{ width: "100%" }}>
       <TableContainer component={Paper}>
@@ -79,10 +164,13 @@ function BasicTable(props: {
                             header.column.columnDef.header,
                             header.getContext()
                           )}
-                          {{
-                            asc: " 🔼",
-                            desc: " 🔽",
-                          }[header.column.getIsSorted() as string] ?? null}
+                          {header.column.getCanSort()
+                            ? {
+                                asc: <TiArrowSortedUp />,
+                                desc: <TiArrowSortedDown />,
+                                false: <TiArrowUnsorted />,
+                              }[header.column.getIsSorted() as string]
+                            : null}
                         </div>
                       )}
                     </TableCell>
@@ -111,6 +199,27 @@ function BasicTable(props: {
           </TableBody>
         </Table>
       </TableContainer>
+      <TablePagination
+        rowsPerPageOptions={[10, 50, 100, { label: "All", value: data.length }]}
+        component="div"
+        count={table.getFilteredRowModel().rows.length}
+        rowsPerPage={pageSize}
+        page={pageIndex}
+        slotProps={{
+          select: {
+            inputProps: { "aria-label": "rows per page" },
+            native: true,
+          },
+        }}
+        onPageChange={(_, page) => {
+          table.setPageIndex(page)
+        }}
+        onRowsPerPageChange={(e) => {
+          const size = e.target.value ? Number(e.target.value) : 10
+          table.setPageSize(size)
+        }}
+        ActionsComponent={TablePaginationActions}
+      />
     </Box>
   )
 }
@@ -359,7 +468,7 @@ export const TrialTable: FC<{
       >
         Download CSV File
       </Button>
-      <BasicTable columns={tcolumns} rows={trials.slice(1, 10)} />
+      <BasicTable data={trials} columns={tcolumns} />
     </>
   )
 }