feat: add pagination for runs

src/components/run/RunsTable.tsx

@@ -86,6 +86,8 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const { t } = useTranslation();
   const navigate = useNavigate();
 
+  const [accordionPage, setAccordionPage] = useState(0);
+  const [accordionsPerPage, setAccordionsPerPage] = useState(10);
   const [accordionSortConfigs, setAccordionSortConfigs] = useState<AccordionSortConfig>({});
 
   const handleSort = useCallback((columnId: keyof Data, robotMetaId: string) => {
@@ -114,8 +116,6 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     [t]
   );
 
-  // const [page, setPage] = useState(0);
-  // const [rowsPerPage, setRowsPerPage] = useState(10);
   const [rows, setRows] = useState<Data[]>([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(true);
@@ -128,6 +128,15 @@ export const RunsTable: React.FC<RunsTableProps> = ({
     navigate(isExpanded ? `/runs/${robotMetaId}` : '/runs');
   }, [navigate]);
 
+  const handleAccordionPageChange = useCallback((event: unknown, newPage: number) => {
+    setAccordionPage(newPage);
+  }, []);
+  
+  const handleAccordionsPerPageChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    setAccordionsPerPage(+event.target.value);
+    setAccordionPage(0); 
+  }, []);
+
   const handleChangePage = useCallback((robotMetaId: string, newPage: number) => {
     setPaginationStates(prev => ({
       ...prev,
@@ -174,6 +183,7 @@ export const RunsTable: React.FC<RunsTableProps> = ({
   const handleSearchChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     const debouncedSetSearch = debouncedSearch((value: string) => {
       setSearchTerm(value);
+      setAccordionPage(0);
       setPaginationStates(prev => {
         const reset = Object.keys(prev).reduce((acc, robotId) => ({
           ...acc,
@@ -347,7 +357,12 @@ export const RunsTable: React.FC<RunsTableProps> = ({
       </Box>
 
       <TableContainer component={Paper} sx={{ width: '100%', overflow: 'hidden' }}>
-        {Object.entries(groupedRows).map(([robotMetaId, data]) => (
+        {Object.entries(groupedRows)
+          .slice(
+            accordionPage * accordionsPerPage,
+            accordionPage * accordionsPerPage + accordionsPerPage
+          )
+          .map(([robotMetaId, data]) => (
             <Accordion 
               key={robotMetaId} 
               onChange={(event, isExpanded) => handleAccordionChange(robotMetaId, isExpanded)}
@@ -427,6 +442,16 @@ export const RunsTable: React.FC<RunsTableProps> = ({
             </Accordion>
           ))}
       </TableContainer>
+
+      <TablePagination
+        component="div"
+        count={Object.keys(groupedRows).length}
+        page={accordionPage}
+        rowsPerPage={accordionsPerPage}
+        onPageChange={handleAccordionPageChange}
+        onRowsPerPageChange={handleAccordionsPerPageChange}
+        rowsPerPageOptions={[10, 25, 50, 100]}
+      />
     </React.Fragment>
   );
 };