diff --git a/src/renderer/components/item-list/item-table-list/columns/album-column.module.css b/src/renderer/components/item-list/item-table-list/columns/album-column.module.css
new file mode 100644
index 000000000..279b8c896
--- /dev/null
+++ b/src/renderer/components/item-list/item-table-list/columns/album-column.module.css
@@ -0,0 +1,16 @@
+.album-container {
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ color: var(--theme-colors-foreground-muted);
+ user-select: none;
+}
+
+.album-container.compact {
+ -webkit-line-clamp: 1;
+}
+
+.album-container.large {
+ -webkit-line-clamp: 3;
+}
diff --git a/src/renderer/components/item-list/item-table-list/columns/album-column.tsx b/src/renderer/components/item-list/item-table-list/columns/album-column.tsx
new file mode 100644
index 000000000..95d0dba2b
--- /dev/null
+++ b/src/renderer/components/item-list/item-table-list/columns/album-column.tsx
@@ -0,0 +1,77 @@
+import clsx from 'clsx';
+import { memo, useMemo } from 'react';
+import { generatePath, Link } from 'react-router';
+
+import styles from './album-column.module.css';
+
+import {
+ ColumnNullFallback,
+ ColumnSkeletonVariable,
+ ItemTableListInnerColumn,
+ TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { AppRoute } from '/@/renderer/router/routes';
+import { Text } from '/@/shared/components/text/text';
+import { Song } from '/@/shared/types/domain-types';
+
+const AlbumColumn = (props: ItemTableListInnerColumn) => {
+ const row: null | string | undefined = (props.data as (null | string | undefined)[])[
+ props.rowIndex
+ ]?.[props.columns[props.columnIndex].id];
+
+ const song = props.data[props.rowIndex] as Song | undefined;
+ const albumId = song?.albumId;
+
+ const albumPath = useMemo(() => {
+ if (!albumId) return null;
+ return generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId });
+ }, [albumId]);
+
+ if (typeof row === 'string') {
+ if (albumId && albumPath) {
+ return (
+
+
+ {row}
+
+
+ );
+ }
+
+ return (
+
+
+ {row}
+
+
+ );
+ }
+
+ if (row === null) {
+ return ;
+ }
+
+ return ;
+};
+
+export const AlbumColumnMemo = memo(AlbumColumn);
+
+export { AlbumColumnMemo as AlbumColumn };
diff --git a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
index 67d13be3b..7177dee04 100644
--- a/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
+++ b/src/renderer/components/item-list/item-table-list/item-table-list-column.tsx
@@ -19,6 +19,7 @@ import i18n from '/@/i18n/i18n';
import { getDraggedItems } from '/@/renderer/components/item-list/helpers/get-dragged-items';
import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
import { AlbumArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-artists-column';
+import { AlbumColumn } from '/@/renderer/components/item-list/item-table-list/columns/album-column';
import { ArtistsColumn } from '/@/renderer/components/item-list/item-table-list/columns/artists-column';
import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
import {
@@ -376,6 +377,9 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
case TableColumn.SKIP:
return ;
+ case TableColumn.ALBUM:
+ return ;
+
case TableColumn.ALBUM_ARTIST:
return ;