handle table row index values on paginated lists

This commit is contained in:
jeffvli
2025-11-19 15:55:36 -08:00
parent 0dff13c43f
commit c691c349dd
8 changed files with 42 additions and 15 deletions
@@ -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 ? (
@@ -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}
@@ -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>
);
@@ -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>
);
@@ -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>
);
@@ -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>
);
@@ -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>
);
@@ -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>
);