Add album grouping column (#1722)

* Add album grouping column

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Norman
2026-02-26 20:34:55 -08:00
committed by GitHub
parent 4918b412b2
commit eb8913479b
18 changed files with 467 additions and 120 deletions
@@ -94,7 +94,7 @@ const hasRequiredStateItemProperties = (
);
};
enum TableItemSize {
export enum TableItemSize {
COMPACT = 40,
DEFAULT = 64,
LARGE = 88,
@@ -204,17 +204,6 @@ const VirtualizedTableGrid = ({
[columnWidth, pinnedLeftColumnCount],
);
const rowHeightMemoized = useCallback(
(index: number, cellProps: TableItemProps) =>
getRowHeight(index + pinnedRowCount, cellProps),
[getRowHeight, pinnedRowCount],
);
const pinnedRightColumnWidthMemoized = useCallback(
(index: number) => columnWidth(index + pinnedLeftColumnCount + totalColumnCount),
[columnWidth, pinnedLeftColumnCount, totalColumnCount],
);
const groupHeaderInfoByRowIndex = useMemo(() => {
if (!groups || groups.length === 0) return undefined;
@@ -231,6 +220,19 @@ const VirtualizedTableGrid = ({
return map;
}, [groups, enableHeader]);
const rowHeightMemoized = useCallback(
(index: number, cellProps: TableItemProps) => {
const adjustedIndex = index + pinnedRowCount;
return getRowHeight(adjustedIndex, cellProps);
},
[getRowHeight, pinnedRowCount],
);
const pinnedRightColumnWidthMemoized = useCallback(
(index: number) => columnWidth(index + pinnedLeftColumnCount + totalColumnCount),
[columnWidth, pinnedLeftColumnCount, totalColumnCount],
);
const getGroupRenderData = useCallback(() => data, [data]);
// Calculate pinned column widths for group header positioning
@@ -349,6 +351,7 @@ const VirtualizedTableGrid = ({
controls,
enableHeader,
getRowHeight,
hasAlbumGroupColumn: parsedColumns.some((col) => col.id === TableColumn.ALBUM_GROUP),
internalState,
itemType,
playerContext,
@@ -802,6 +805,7 @@ export interface TableItemProps {
getRowItem?: (rowIndex: number) => null | undefined | unknown;
groupHeaderInfoByRowIndex?: Map<number, { groupIndex: number; startDataIndex: number }>;
groups?: TableGroupHeader[];
hasAlbumGroupColumn?: boolean;
internalState: ItemListStateActions;
itemType: ItemTableListProps['itemType'];
onRowClick?: (item: any, event: React.MouseEvent<HTMLDivElement>) => void;