add initial table columns

2026-05-07 04:20:12 +02:00 · 2025-10-03 23:08:34 -07:00
parent c27c05ac5d
commit ae8ca54a07
21 changed files with 511 additions and 28 deletions
@@ -820,7 +820,8 @@
            "size": "$t(common.size)",
            "songCount": "$t(entity.track_other)",
            "title": "title",
-            "trackNumber": "track"
+            "trackNumber": "track",
+            "owner": "owner"
        },
        "config": {
            "general": {
@@ -0,0 +1,19 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Icon } from '/@/shared/components/icon/icon';
+
+export const ActionsColumn = (props: ItemTableListInnerColumn) => {
+    const row: any = (props.data as (any | undefined)[])[props.rowIndex];
+
+    if (row !== undefined) {
+        return (
+            <TableColumnContainer {...props}>
+                <Icon icon="ellipsisHorizontal" size="sm" />
+            </TableColumnContainer>
+        );
+    }
+
+    return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
+};
@@ -0,0 +1,23 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const CountColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return (
+            <TableColumnTextContainer {...props}>{row.toLocaleString()}</TableColumnTextContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,50 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { formatDateAbsolute, formatDateRelative } from '/@/renderer/utils/format';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const DateColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        return (
+            <TableColumnTextContainer {...props}>
+                {formatDateAbsolute(row)}
+            </TableColumnTextContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
+
+export const RelativeDateColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string') {
+        return (
+            <TableColumnTextContainer {...props}>
+                {formatDateRelative(row)}
+            </TableColumnTextContainer>
+        );
+    }
+
+    if (row === null) {
+        return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -1,6 +1,6 @@
 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';

@@ -10,16 +10,16 @@ export const DefaultColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'string') {
-        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
    }

    if (typeof row === 'undefined') {
        return (
-            <TableColumnContainer {...props}>
+            <TableColumnTextContainer {...props}>
                <Skeleton />
-            </TableColumnContainer>
+            </TableColumnTextContainer>
        );
    }

-    return null;
+    return <TableColumnTextContainer {...props}>&nbsp;</TableColumnTextContainer>;
 };
@@ -2,7 +2,7 @@ import formatDuration from 'format-duration';

 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';

@@ -12,12 +12,14 @@ export const DurationColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'number') {
-        return <TableColumnContainer {...props}>{formatDuration(row)}</TableColumnContainer>;
+        return (
+            <TableColumnTextContainer {...props}>{formatDuration(row)}</TableColumnTextContainer>
+        );
    }

    return (
-        <TableColumnContainer {...props}>
+        <TableColumnTextContainer {...props}>
            <Skeleton />
-        </TableColumnContainer>
+        </TableColumnTextContainer>
    );
 };
@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Icon } from '/@/shared/components/icon/icon';
+
+export const FavoriteColumn = (props: ItemTableListInnerColumn) => {
+    const row: boolean | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'boolean') {
+        return (
+            <TableColumnContainer {...props}>
+                <Icon fill={row ? 'primary' : undefined} icon={'favorite'} size="md" />
+            </TableColumnContainer>
+        );
+    }
+
+    return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
+};
@@ -1,21 +1,47 @@
 import {
    ItemTableListInnerColumn,
    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Badge } from '/@/shared/components/badge/badge';
+import { Group } from '/@/shared/components/group/group';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
 import { Genre } from '/@/shared/types/domain-types';
+import { stringToColor } from '/@/shared/utils/string-to-color';

 export const GenreColumn = (props: ItemTableListInnerColumn) => {
    const row: Genre[] | undefined = (props.data as (Genre[] | undefined)[])[props.rowIndex]?.[
        props.columns[props.columnIndex].id
    ];

+    const genres = (row || []).map((genre) => {
+        const { color, isLight } = stringToColor(genre.name);
+        return { ...genre, color, isLight };
+    });
+
    if (Array.isArray(row)) {
        return (
            <TableColumnContainer {...props}>
-                {row.map((genre) => genre?.name).join(', ')}
+                <Group gap="xs" wrap="nowrap">
+                    {genres.map((genre) => (
+                        <Badge
+                            key={genre.id}
+                            style={{
+                                backgroundColor: genre.color,
+                                color: genre.isLight ? 'black' : 'white',
+                            }}
+                        >
+                            {genre.name}
+                        </Badge>
+                    ))}
+                </Group>
            </TableColumnContainer>
        );
    }

-    return null;
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
 };
@@ -2,7 +2,7 @@ import styles from './image-column.module.css';

 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Image } from '/@/shared/components/image/image';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';
@@ -14,15 +14,15 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {

    if (typeof row === 'string') {
        return (
-            <TableColumnContainer {...props}>
+            <TableColumnTextContainer {...props}>
                <Image src={row} />
-            </TableColumnContainer>
+            </TableColumnTextContainer>
        );
    }

    return (
-        <TableColumnContainer {...props}>
+        <TableColumnTextContainer {...props}>
            <Skeleton containerClassName={styles.skeleton} />
-        </TableColumnContainer>
+        </TableColumnTextContainer>
    );
 };
@@ -1,6 +1,6 @@
 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { Skeleton } from '/@/shared/components/skeleton/skeleton';

@@ -10,12 +10,12 @@ export const NameColumn = (props: ItemTableListInnerColumn) => {
    ];

    if (typeof row === 'string') {
-        return <TableColumnContainer {...props}>{row}</TableColumnContainer>;
+        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
    }

    return (
-        <TableColumnContainer {...props}>
+        <TableColumnTextContainer {...props}>
            <Skeleton />
-        </TableColumnContainer>
+        </TableColumnTextContainer>
    );
 };
@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const NumericColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return <TableColumnTextContainer {...props}>{row}</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,24 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const PathColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        const maxLength = 50;
+        const displayPath = row.length > maxLength ? `...${row.slice(-maxLength + 3)}` : row;
+
+        return <TableColumnTextContainer {...props}>{displayPath}</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,21 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Rating } from '/@/shared/components/rating/rating';
+
+export const RatingColumn = (props: ItemTableListInnerColumn) => {
+    const row: null | number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number' || row === null) {
+        return (
+            <TableColumnContainer {...props}>
+                <Rating readOnly value={row || 0} />
+            </TableColumnContainer>
+        );
+    }
+
+    return <TableColumnContainer {...props}>&nbsp;</TableColumnContainer>;
+};
@@ -1,8 +1,8 @@
 import {
    ItemTableListInnerColumn,
-    TableColumnContainer,
+    TableColumnTextContainer,
 } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';

 export const RowIndexColumn = (props: ItemTableListInnerColumn) => {
-    return <TableColumnContainer {...props}>{props.rowIndex + 1}</TableColumnContainer>;
+    return <TableColumnTextContainer {...props}>{props.rowIndex + 1}</TableColumnTextContainer>;
 };
@@ -0,0 +1,24 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { formatSizeString } from '/@/renderer/utils/format';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const SizeColumn = (props: ItemTableListInnerColumn) => {
+    const row: number | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'number') {
+        return (
+            <TableColumnTextContainer {...props}>{formatSizeString(row)}</TableColumnTextContainer>
+        );
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,24 @@
+import {
+    ItemTableListInnerColumn,
+    TableColumnTextContainer,
+} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { Skeleton } from '/@/shared/components/skeleton/skeleton';
+
+export const TextColumn = (props: ItemTableListInnerColumn) => {
+    const row: string | undefined = (props.data as (any | undefined)[])[props.rowIndex]?.[
+        props.columns[props.columnIndex].id
+    ];
+
+    if (typeof row === 'string' && row) {
+        const maxLength = 100;
+        const displayText = row.length > maxLength ? `${row.slice(0, maxLength)}...` : row;
+
+        return <TableColumnTextContainer {...props}>{displayText}</TableColumnTextContainer>;
+    }
+
+    return (
+        <TableColumnTextContainer {...props}>
+            <Skeleton />
+        </TableColumnTextContainer>
+    );
+};
@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+
+import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
+import { TableColumn } from '/@/shared/types/types';
+
+export const TableColumnHeader = (
+    props: ItemTableListColumn & {
+        children: React.ReactNode;
+        className?: string;
+        containerClassName?: string;
+        type: TableColumn;
+    },
+) => {
+    return <div className={clsx(props.className)}>{props.children}</div>;
+};
@@ -6,6 +6,19 @@
    padding: var(--theme-spacing-xs);
 }

+.container.center {
+    align-items: center;
+    text-align: center;
+}
+
+.container.left {
+    text-align: left;
+}
+
+.container.right {
+    text-align: right;
+}
+
 .content {
    display: -webkit-box;
    overflow: hidden;
@@ -19,3 +32,23 @@
 .container.compact {
    padding: var(--theme-spacing-xs);
 }
+
+.header-container {
+    background: none;
+}
+
+.header-content {
+    display: flex;
+}
+
+.header-content.center {
+    justify-content: center;
+}
+
+.header-content.left {
+    justify-content: flex-start;
+}
+
+.header-content.right {
+    justify-content: flex-end;
+}
@@ -1,14 +1,29 @@
 import clsx from 'clsx';
+import React, { ReactNode } from 'react';
 import { CellComponentProps } from 'react-window-v2';

 import styles from './item-table-list-column.module.css';

+import i18n from '/@/i18n/i18n';
+import { ActionsColumn } from '/@/renderer/components/item-list/item-table-list/columns/actions-column';
+import { CountColumn } from '/@/renderer/components/item-list/item-table-list/columns/count-column';
+import {
+    DateColumn,
+    RelativeDateColumn,
+} from '/@/renderer/components/item-list/item-table-list/columns/date-column';
 import { DefaultColumn } from '/@/renderer/components/item-list/item-table-list/columns/default-column';
 import { DurationColumn } from '/@/renderer/components/item-list/item-table-list/columns/duration-column';
+import { FavoriteColumn } from '/@/renderer/components/item-list/item-table-list/columns/favorite-column';
 import { GenreColumn } from '/@/renderer/components/item-list/item-table-list/columns/genre-column';
 import { ImageColumn } from '/@/renderer/components/item-list/item-table-list/columns/image-column';
+import { NumericColumn } from '/@/renderer/components/item-list/item-table-list/columns/numeric-column';
+import { PathColumn } from '/@/renderer/components/item-list/item-table-list/columns/path-column';
+import { RatingColumn } from '/@/renderer/components/item-list/item-table-list/columns/rating-column';
 import { RowIndexColumn } from '/@/renderer/components/item-list/item-table-list/columns/row-index-column';
+import { SizeColumn } from '/@/renderer/components/item-list/item-table-list/columns/size-column';
+import { TextColumn } from '/@/renderer/components/item-list/item-table-list/columns/text-column';
 import { CellProps } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { Icon } from '/@/shared/components/icon/icon';
 import { Text } from '/@/shared/components/text/text';
 import { TableColumn } from '/@/shared/types/types';

@@ -21,23 +36,73 @@ export interface ItemTableListInnerColumn extends ItemTableListColumn {
 export const ItemTableListColumn = (props: ItemTableListColumn) => {
    const type = props.columns[props.columnIndex].id as TableColumn;

+    const isHeaderEnabled = !!props.enableHeader;
+
+    if (isHeaderEnabled && props.rowIndex === 0) {
+        return <TableColumnHeaderContainer {...props} type={type}></TableColumnHeaderContainer>;
+    }
+
    switch (type) {
+        case TableColumn.ACTIONS:
+        case TableColumn.SKIP:
+            return <ActionsColumn {...props} type={type} />;
+
+        case TableColumn.ALBUM_COUNT:
+        case TableColumn.PLAY_COUNT:
+        case TableColumn.SONG_COUNT:
+            return <CountColumn {...props} type={type} />;
+
+        case TableColumn.BIOGRAPHY:
+        case TableColumn.COMMENT:
+            return <TextColumn {...props} type={type} />;
+
+        case TableColumn.BIT_RATE:
+        case TableColumn.BPM:
+        case TableColumn.CHANNELS:
+        case TableColumn.DISC_NUMBER:
+        case TableColumn.TRACK_NUMBER:
+        case TableColumn.YEAR:
+            return <NumericColumn {...props} type={type} />;
+
+        case TableColumn.DATE_ADDED:
+        case TableColumn.RELEASE_DATE:
+            return <DateColumn {...props} type={type} />;
+
        case TableColumn.DURATION:
            return <DurationColumn {...props} type={type} />;
+
        case TableColumn.GENRE:
            return <GenreColumn {...props} type={type} />;
+
        case TableColumn.IMAGE:
            return <ImageColumn {...props} type={type} />;
+
+        case TableColumn.LAST_PLAYED:
+            return <RelativeDateColumn {...props} type={type} />;
+
+        case TableColumn.PATH:
+            return <PathColumn {...props} type={type} />;
+
        case TableColumn.ROW_INDEX:
            return <RowIndexColumn {...props} type={type} />;
+
+        case TableColumn.SIZE:
+            return <SizeColumn {...props} type={type} />;
+
+        case TableColumn.USER_FAVORITE:
+            return <FavoriteColumn {...props} type={type} />;
+
+        case TableColumn.USER_RATING:
+            return <RatingColumn {...props} type={type} />;
+
        default:
            return <DefaultColumn {...props} type={type} />;
    }
 };

-const NonMutedColumns = [TableColumn.TITLE];
+const NonMutedColumns = [TableColumn.TITLE, TableColumn.TITLE_COMBINED];

-export const TableColumnContainer = (
+export const TableColumnTextContainer = (
    props: ItemTableListColumn & {
        children: React.ReactNode;
        className?: string;
@@ -48,7 +113,10 @@ export const TableColumnContainer = (
    return (
        <div
            className={clsx(styles.container, props.containerClassName, {
+                [styles.center]: props.columns[props.columnIndex].align === 'center',
                [styles.compact]: props.size === 'compact',
+                [styles.left]: props.columns[props.columnIndex].align === 'start',
+                [styles.right]: props.columns[props.columnIndex].align === 'end',
            })}
            onClick={(e) => props.handleExpand(e, props.data[props.rowIndex], props.itemType)}
            style={props.style}
@@ -63,3 +131,114 @@ export const TableColumnContainer = (
        </div>
    );
 };
+
+export const TableColumnContainer = (
+    props: ItemTableListColumn & {
+        children: React.ReactNode;
+        className?: string;
+        containerClassName?: string;
+        type: TableColumn;
+    },
+) => {
+    return (
+        <div
+            className={clsx(styles.container, props.containerClassName, {
+                [styles.center]: props.columns[props.columnIndex].align === 'center',
+                [styles.compact]: props.size === 'compact',
+                [styles.left]: props.columns[props.columnIndex].align === 'start',
+                [styles.right]: props.columns[props.columnIndex].align === 'end',
+            })}
+            onClick={(e) => props.handleExpand(e, props.data[props.rowIndex], props.itemType)}
+            style={props.style}
+        >
+            {props.children}
+        </div>
+    );
+};
+
+export const TableColumnHeaderContainer = (
+    props: ItemTableListColumn & {
+        className?: string;
+        containerClassName?: string;
+        type: TableColumn;
+    },
+) => {
+    return (
+        <div
+            className={clsx(styles.container, styles.headerContainer, props.containerClassName, {})}
+            style={props.style}
+        >
+            <Text
+                className={clsx(styles.headerContent, props.className, {
+                    [styles.center]: props.columns[props.columnIndex].align === 'center',
+                    [styles.left]: props.columns[props.columnIndex].align === 'start',
+                    [styles.right]: props.columns[props.columnIndex].align === 'end',
+                })}
+                isNoSelect
+            >
+                {columnLabelMap[props.type]}
+            </Text>
+        </div>
+    );
+};
+
+const columnLabelMap: Record<TableColumn, ReactNode | string> = {
+    [TableColumn.ACTIONS]: '',
+    [TableColumn.ALBUM]: i18n.t('table.column.album', { postProcess: 'titleCase' }) as string,
+    [TableColumn.ALBUM_ARTIST]: i18n.t('table.column.albumArtist', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.ALBUM_COUNT]: i18n.t('table.column.albumCount', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.ARTIST]: i18n.t('table.column.artist', { postProcess: 'titleCase' }) as string,
+    [TableColumn.BIOGRAPHY]: i18n.t('table.column.biography', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.BIT_RATE]: i18n.t('table.column.bitrate', { postProcess: 'titleCase' }) as string,
+    [TableColumn.BPM]: i18n.t('table.column.bpm', { postProcess: 'titleCase' }) as string,
+    [TableColumn.CHANNELS]: i18n.t('table.column.channels', { postProcess: 'titleCase' }) as string,
+    [TableColumn.CODEC]: i18n.t('table.column.codec', { postProcess: 'titleCase' }) as string,
+    [TableColumn.COMMENT]: i18n.t('table.column.comment', { postProcess: 'titleCase' }) as string,
+    [TableColumn.DATE_ADDED]: i18n.t('table.column.dateAdded', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.DISC_NUMBER]: i18n.t('table.column.discNumber', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.DURATION]: <Icon icon="duration" size="md" />,
+    [TableColumn.GENRE]: i18n.t('table.column.genre', { postProcess: 'titleCase' }) as string,
+    [TableColumn.ID]: 'ID',
+    [TableColumn.IMAGE]: '',
+    [TableColumn.LAST_PLAYED]: i18n.t('table.column.lastPlayed', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.OWNER]: i18n.t('table.column.owner', { postProcess: 'titleCase' }) as string,
+    [TableColumn.PATH]: i18n.t('table.column.path', { postProcess: 'titleCase' }) as string,
+    [TableColumn.PLAY_COUNT]: i18n.t('table.column.playCount', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.RELEASE_DATE]: i18n.t('table.column.releaseDate', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.ROW_INDEX]: '#',
+    [TableColumn.SIZE]: i18n.t('table.column.size', { postProcess: 'titleCase' }) as string,
+    [TableColumn.SKIP]: '',
+    [TableColumn.SONG_COUNT]: i18n.t('table.column.songCount', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.TITLE]: i18n.t('table.column.title', { postProcess: 'titleCase' }) as string,
+    [TableColumn.TITLE_COMBINED]: i18n.t('table.column.titleCombined', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.TRACK_NUMBER]: i18n.t('table.column.trackNumber', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.USER_FAVORITE]: i18n.t('table.column.favorite', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.USER_RATING]: i18n.t('table.column.rating', {
+        postProcess: 'titleCase',
+    }) as string,
+    [TableColumn.YEAR]: i18n.t('table.column.releaseYear', { postProcess: 'titleCase' }) as string,
+};
@@ -38,7 +38,7 @@
 }

 .item-table-pinned-rows-grid-container.with-header {
-    background-color: var(--theme-colors-surface);
+    border-bottom: 2px solid var(--theme-colors-border);
 }

 .item-table-pinned-columns-grid-container {
@@ -55,7 +55,7 @@
 }

 .item-table-pinned-intersection-grid-container.with-header {
-    background-color: var(--theme-colors-surface);
+    border-bottom: 2px solid var(--theme-colors-border);
 }

 .item-table-pinned-columns-container {
@@ -151,7 +151,7 @@ export enum TableColumn {
    BIT_RATE = 'bitRate',
    BPM = 'bpm',
    CHANNELS = 'channels',
-    CODEC = 'codec',
+    CODEC = 'container',
    COMMENT = 'comment',
    DATE_ADDED = 'dateAdded',
    DISC_NUMBER = 'discNumber',