handle table row index values on paginated lists

src/renderer/components/item-list/item-table-list/columns/row-index-column.tsx

@@ -37,11 +37,16 @@ const DefaultRowIndexColumn = (props: ItemTableListInnerColumn) => {
         internalState,
         itemType,
         rowIndex,
+        startRowIndex,
     } = props;
 
-    const adjustedRowIndex =
+    let adjustedRowIndex =
         adjustedRowIndexMap?.get(rowIndex) ?? (enableHeader ? rowIndex : rowIndex + 1);
 
+    if (startRowIndex !== undefined && adjustedRowIndex > 0) {
+        adjustedRowIndex = startRowIndex + adjustedRowIndex;
+    }
+
     if (enableExpansion) {
         return (
             <TableColumnContainer {...props}>
@@ -75,10 +80,14 @@ const QueueSongRowIndexColumn = (props: ItemTableListInnerColumn) => {
     const song = props.data[props.rowIndex] as QueueSong;
     const isActive = props.activeRowId === song?._uniqueId;
 
-    const adjustedRowIndex =
+    let adjustedRowIndex =
         props.adjustedRowIndexMap?.get(props.rowIndex) ??
         (props.enableHeader ? props.rowIndex : props.rowIndex + 1);
 
+    if (props.startRowIndex !== undefined && adjustedRowIndex > 0) {
+        adjustedRowIndex = props.startRowIndex + adjustedRowIndex;
+    }
+
     return (
         <TableColumnTextContainer {...props}>
             {isActive ? (

src/renderer/components/item-list/item-table-list/item-table-list.tsx

@@ -119,6 +119,7 @@ interface VirtualizedTableGridProps {
     showRightShadow: boolean;
     showTopShadow: boolean;
     size: 'compact' | 'default' | 'large';
+    startRowIndex?: number;
     tableId: string;
     totalColumnCount: number;
     totalRowCount: number;
@@ -161,6 +162,7 @@ const VirtualizedTableGrid = React.memo(
         showRightShadow,
         showTopShadow,
         size,
+        startRowIndex,
         tableId,
         totalColumnCount,
         totalRowCount,
@@ -300,6 +302,7 @@ const VirtualizedTableGrid = React.memo(
                 pinnedRightColumnWidths,
                 playerContext,
                 size,
+                startRowIndex,
                 tableId,
             }),
             [
@@ -330,6 +333,7 @@ const VirtualizedTableGrid = React.memo(
                 pinnedRightColumnWidths,
                 playerContext,
                 size,
+                startRowIndex,
                 tableId,
             ],
         );
@@ -654,6 +658,7 @@ export interface TableItemProps {
     pinnedRightColumnWidths?: number[];
     playerContext: PlayerContext;
     size?: ItemTableListProps['size'];
+    startRowIndex?: number;
     tableId: string;
 }
 
@@ -663,7 +668,6 @@ interface ItemTableListProps {
     CellComponent: JSXElementConstructor<CellComponentProps<TableItemProps>>;
     cellPadding?: 'lg' | 'md' | 'sm' | 'xl' | 'xs';
     columns: ItemTableListColumnConfig[];
-    currentPage?: number;
     data: unknown[];
     enableAlternateRowColors?: boolean;
     enableDrag?: boolean;
@@ -684,6 +688,7 @@ interface ItemTableListProps {
         type: 'index' | 'offset';
     };
     itemType: LibraryItem;
+    startRowIndex?: number;
     onColumnReordered?: (
         columnIdFrom: TableColumn,
         columnIdTo: TableColumn,
@@ -703,7 +708,6 @@ export const ItemTableList = ({
     CellComponent,
     cellPadding = 'sm',
     columns,
-    currentPage,
     data,
     enableAlternateRowColors = false,
     enableDrag = true,
@@ -727,6 +731,7 @@ export const ItemTableList = ({
     ref,
     rowHeight,
     size = 'default',
+    startRowIndex,
 }: ItemTableListProps) => {
     const tableId = useId();
     const totalItemCount = enableHeader ? data.length + 1 : data.length;
@@ -1682,12 +1687,12 @@ export const ItemTableList = ({
         }
     }, [initialTop, scrollToTableIndex, scrollToTableOffset]);
 
-    // Scroll to top when currentPage changes
+    // Scroll to top when startRowIndex changes
     useEffect(() => {
-        if (currentPage !== undefined) {
+        if (startRowIndex !== undefined) {
             scrollToTableOffset(0);
         }
-    }, [currentPage, scrollToTableOffset]);
+    }, [startRowIndex, scrollToTableOffset]);
 
     const imperativeHandle: ItemListHandle = useMemo(() => {
         return {
@@ -2068,6 +2073,7 @@ export const ItemTableList = ({
                 showRightShadow={showRightShadow}
                 showTopShadow={showTopShadow}
                 size={size}
+                startRowIndex={startRowIndex}
                 tableId={tableId}
                 totalColumnCount={totalColumnCount}
                 totalRowCount={totalRowCount}

src/renderer/features/albums/components/album-list-paginated-table.tsx

@@ -74,6 +74,8 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
             itemListKey: ItemListKey.ALBUM,
         });
 
+        const startRowIndex = currentPage * itemsPerPage;
+
         return (
             <ItemListWithPagination
                 currentPage={currentPage}
@@ -86,7 +88,6 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
                     autoFitColumns={autoFitColumns}
                     CellComponent={ItemTableListColumn}
                     columns={columns}
-                    currentPage={currentPage}
                     data={data || []}
                     enableAlternateRowColors={enableAlternateRowColors}
                     enableHorizontalBorders={enableHorizontalBorders}
@@ -103,6 +104,7 @@ export const AlbumListPaginatedTable = forwardRef<any, AlbumListPaginatedTablePr
                     onScrollEnd={handleOnScrollEnd}
                     ref={ref}
                     size={size}
+                    startRowIndex={startRowIndex}
                 />
             </ItemListWithPagination>
         );

src/renderer/features/artists/components/album-artist-list-paginated-table.tsx

@@ -75,6 +75,8 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
             itemListKey: ItemListKey.ALBUM_ARTIST,
         });
 
+        const startRowIndex = currentPage * itemsPerPage;
+
         return (
             <ItemListWithPagination
                 currentPage={currentPage}
@@ -87,7 +89,6 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
                     autoFitColumns={autoFitColumns}
                     CellComponent={ItemTableListColumn}
                     columns={columns}
-                    currentPage={currentPage}
                     data={data || []}
                     enableAlternateRowColors={enableAlternateRowColors}
                     enableExpansion={false}
@@ -105,6 +106,7 @@ export const AlbumArtistListPaginatedTable = forwardRef<any, AlbumArtistListPagi
                     onScrollEnd={handleOnScrollEnd}
                     ref={ref}
                     size={size}
+                    startRowIndex={startRowIndex}
                 />
             </ItemListWithPagination>
         );

src/renderer/features/artists/components/artist-list-paginated-table.tsx

@@ -6,10 +6,10 @@ import { useItemListPaginatedLoader } from '/@/renderer/components/item-list/hel
 import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
 import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
 import { useItemListScrollPersist } from '/@/renderer/components/item-list/helpers/use-item-list-scroll-persist';
-import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
-import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListWithPagination } from '/@/renderer/components/item-list/item-list-pagination/item-list-pagination';
 import { useItemListPagination } from '/@/renderer/components/item-list/item-list-pagination/use-item-list-pagination';
+import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ItemListTableComponentProps } from '/@/renderer/components/item-list/types';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
 import {
@@ -74,6 +74,8 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
             itemListKey: ItemListKey.ARTIST,
         });
 
+        const startRowIndex = currentPage * itemsPerPage;
+
         return (
             <ItemListWithPagination
                 currentPage={currentPage}
@@ -86,7 +88,6 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
                     autoFitColumns={autoFitColumns}
                     CellComponent={ItemTableListColumn}
                     columns={columns}
-                    currentPage={currentPage}
                     data={data || []}
                     enableAlternateRowColors={enableAlternateRowColors}
                     enableExpansion={false}
@@ -104,6 +105,7 @@ export const ArtistListPaginatedTable = forwardRef<any, ArtistListPaginatedTable
                     onScrollEnd={handleOnScrollEnd}
                     ref={ref}
                     size={size}
+                    startRowIndex={startRowIndex}
                 />
             </ItemListWithPagination>
         );

src/renderer/features/genres/components/genre-list-paginated-table.tsx

@@ -74,6 +74,8 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
             itemListKey: ItemListKey.GENRE,
         });
 
+        const startRowIndex = currentPage * itemsPerPage;
+
         return (
             <ItemListWithPagination
                 currentPage={currentPage}
@@ -86,7 +88,6 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
                     autoFitColumns={autoFitColumns}
                     CellComponent={ItemTableListColumn}
                     columns={columns}
-                    currentPage={currentPage}
                     data={data || []}
                     enableAlternateRowColors={enableAlternateRowColors}
                     enableExpansion={false}
@@ -104,6 +105,7 @@ export const GenreListPaginatedTable = forwardRef<any, GenreListPaginatedTablePr
                     onScrollEnd={handleOnScrollEnd}
                     ref={ref}
                     size={size}
+                    startRowIndex={startRowIndex}
                 />
             </ItemListWithPagination>
         );

src/renderer/features/playlists/components/playlist-list-paginated-table.tsx

@@ -74,6 +74,8 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
             itemListKey: ItemListKey.PLAYLIST,
         });
 
+        const startRowIndex = currentPage * itemsPerPage;
+
         return (
             <ItemListWithPagination
                 currentPage={currentPage}
@@ -86,7 +88,6 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
                     autoFitColumns={autoFitColumns}
                     CellComponent={ItemTableListColumn}
                     columns={columns}
-                    currentPage={currentPage}
                     data={data || []}
                     enableAlternateRowColors={enableAlternateRowColors}
                     enableHorizontalBorders={enableHorizontalBorders}
@@ -103,6 +104,7 @@ export const PlaylistListPaginatedTable = forwardRef<any, PlaylistListPaginatedT
                     onScrollEnd={handleOnScrollEnd}
                     ref={ref}
                     size={size}
+                    startRowIndex={startRowIndex}
                 />
             </ItemListWithPagination>
         );

src/renderer/features/songs/components/song-list-paginated-table.tsx

@@ -69,6 +69,8 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
             itemListKey: ItemListKey.SONG,
         });
 
+        const startRowIndex = currentPage * itemsPerPage;
+
         return (
             <ItemListWithPagination
                 currentPage={currentPage}
@@ -81,7 +83,6 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
                     autoFitColumns={autoFitColumns}
                     CellComponent={ItemTableListColumn}
                     columns={columns}
-                    currentPage={currentPage}
                     data={data || []}
                     enableAlternateRowColors={enableAlternateRowColors}
                     enableExpansion={false}
@@ -99,6 +100,7 @@ export const SongListPaginatedTable = forwardRef<any, SongListPaginatedTableProp
                     onScrollEnd={handleOnScrollEnd}
                     ref={ref}
                     size={size}
+                    startRowIndex={startRowIndex}
                 />
             </ItemListWithPagination>
         );