add config to show/hide table header

This commit is contained in:
jeffvli
2026-01-29 19:43:00 -08:00
parent a496c04701
commit c1f48b21a4
30 changed files with 90 additions and 7 deletions
+2 -1
View File
@@ -655,7 +655,7 @@
"standardTags": "standard tags",
"customTags": "custom tags"
},
"releaseType": {
"releaseType": {
"primary": {
"album": "$t(entity.album, {\"count\": 1})",
"broadcast": "broadcast",
@@ -1080,6 +1080,7 @@
"alternateRowColors": "alternate row colors",
"horizontalBorders": "row borders",
"rowHoverHighlight": "row hover highlight",
"showHeader": "show header",
"verticalBorders": "column borders"
},
"label": {
@@ -84,6 +84,7 @@ export interface ItemListTableComponentProps<TQuery> extends ItemListComponentPr
autoFitColumns?: boolean;
columns: ItemTableListColumnConfig[];
enableAlternateRowColors?: boolean;
enableHeader?: boolean;
enableHorizontalBorders?: boolean;
enableRowHoverHighlight?: boolean;
enableSelection?: boolean;
@@ -774,7 +774,7 @@ const AlbumDetailSongsTable = ({ songs }: AlbumDetailSongsTableProps) => {
enableDragScroll={false}
enableEntranceAnimation={false}
enableExpansion={false}
enableHeader
enableHeader={tableConfig.enableHeader}
enableHorizontalBorders={tableConfig.enableHorizontalBorders}
enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
enableSelection
@@ -143,6 +143,7 @@ export const AlbumListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -159,6 +160,7 @@ export const AlbumListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -23,6 +23,7 @@ export const AlbumListInfiniteTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -73,6 +74,7 @@ export const AlbumListInfiniteTable = ({
columns={columns}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -25,6 +25,7 @@ export const AlbumListPaginatedTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -86,6 +87,7 @@ export const AlbumListPaginatedTable = ({
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -404,7 +404,7 @@ const AlbumArtistMetadataTopSongsContent = ({
enableDrag
enableDragScroll={false}
enableExpansion={false}
enableHeader
enableHeader={tableConfig.enableHeader}
enableHorizontalBorders={tableConfig.enableHorizontalBorders}
enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
enableSelection
@@ -122,6 +122,7 @@ export const AlbumArtistListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -138,6 +139,7 @@ export const AlbumArtistListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -24,6 +24,7 @@ export const AlbumArtistListInfiniteTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -75,6 +76,7 @@ export const AlbumArtistListInfiniteTable = ({
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -26,6 +26,7 @@ export const AlbumArtistListPaginatedTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -88,6 +89,7 @@ export const AlbumArtistListPaginatedTable = ({
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -114,6 +114,7 @@ export const ArtistListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -130,6 +131,7 @@ export const ArtistListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -23,6 +23,7 @@ export const ArtistListInfiniteTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -74,6 +75,7 @@ export const ArtistListInfiniteTable = ({
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -25,6 +25,7 @@ export const ArtistListPaginatedTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -87,6 +88,7 @@ export const ArtistListPaginatedTable = ({
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -123,7 +123,7 @@ const AlbumArtistDetailTopSongsListRoute = () => {
enableAlternateRowColors={tableConfig.enableAlternateRowColors}
enableDrag
enableExpansion={false}
enableHeader
enableHeader={tableConfig.enableHeader}
enableHorizontalBorders={tableConfig.enableHorizontalBorders}
enableRowHoverHighlight={tableConfig.enableRowHoverHighlight}
enableSelection
@@ -181,6 +181,7 @@ export const FolderListView = ({ folderQuery }: FolderListViewProps) => {
enableAlternateRowColors={table.enableAlternateRowColors}
enableDrag={true}
enableExpansion={false}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -110,6 +110,7 @@ export const GenreListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -126,6 +127,7 @@ export const GenreListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -23,6 +23,7 @@ export const GenreListInfiniteTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -74,6 +75,7 @@ export const GenreListInfiniteTable = ({
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -25,6 +25,7 @@ export const GenreListPaginatedTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -87,6 +88,7 @@ export const GenreListPaginatedTable = ({
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -185,7 +185,7 @@ export const PlayQueue = forwardRef<ItemListHandle, QueueProps>(
enableAlternateRowColors={table.enableAlternateRowColors}
enableDrag
enableExpansion={false}
enableHeader
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableScrollShadow={enableScrollShadow}
@@ -107,6 +107,7 @@ export const PlaylistDetailSongListView = ({ data }: { data: PlaylistSongListRes
columns={table.columns}
data={data}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -236,6 +237,7 @@ export const PlaylistDetailSongListEdit = ({ data }: { data: PlaylistSongListRes
columns={columns}
data={localData}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -34,6 +34,7 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
columns,
data,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -115,6 +116,7 @@ export const PlaylistDetailSongListTable = forwardRef<any, PlaylistDetailSongLis
data={songData}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -143,6 +145,7 @@ export const PlaylistDetailSongListEditTable = forwardRef<any, PlaylistDetailSon
columns,
data,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -205,6 +208,7 @@ export const PlaylistDetailSongListEditTable = forwardRef<any, PlaylistDetailSon
enableAlternateRowColors={enableAlternateRowColors}
enableDrag
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -120,6 +120,7 @@ export const PlaylistListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -136,6 +137,7 @@ export const PlaylistListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -23,6 +23,7 @@ export const PlaylistListInfiniteTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -73,6 +74,7 @@ export const PlaylistListInfiniteTable = ({
columns={columns}
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -25,6 +25,7 @@ export const PlaylistListPaginatedTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -86,6 +87,7 @@ export const PlaylistListPaginatedTable = ({
columns={columns}
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -166,6 +166,18 @@ export const TableConfig = ({
postProcess: 'titleCase',
}),
},
{
component: (
<ListConfigBooleanControl
onChange={(e) => setList(listKey, { table: { enableHeader: e } })}
value={list.table.enableHeader}
/>
),
id: 'enableHeader',
label: t('table.config.general.showHeader', {
postProcess: 'sentenceCase',
}),
},
{
component: (
<ListConfigBooleanControl
@@ -61,7 +61,7 @@ export const SimilarSongsList = ({ count, song }: SimilarSongsListProps) => {
data={tableData}
enableAlternateRowColors={fullScreenTable?.enableAlternateRowColors}
enableExpansion={false}
enableHeader
enableHeader={fullScreenTable?.enableHeader}
enableHorizontalBorders={fullScreenTable?.enableHorizontalBorders}
enableRowHoverHighlight={fullScreenTable?.enableRowHoverHighlight}
enableScrollShadow={false}
@@ -138,6 +138,7 @@ export const SongListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -153,6 +154,7 @@ export const SongListView = ({
autoFitColumns={table.autoFitColumns}
columns={table.columns}
enableAlternateRowColors={table.enableAlternateRowColors}
enableHeader={table.enableHeader}
enableHorizontalBorders={table.enableHorizontalBorders}
enableRowHoverHighlight={table.enableRowHoverHighlight}
enableVerticalBorders={table.enableVerticalBorders}
@@ -19,6 +19,7 @@ export const SongListInfiniteTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -73,6 +74,7 @@ export const SongListInfiniteTable = ({
data={loadedItems}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
@@ -21,6 +21,7 @@ export const SongListPaginatedTable = ({
autoFitColumns = false,
columns,
enableAlternateRowColors = false,
enableHeader = true,
enableHorizontalBorders = false,
enableRowHoverHighlight = true,
enableSelection = true,
@@ -86,6 +87,7 @@ export const SongListPaginatedTable = ({
data={data || []}
enableAlternateRowColors={enableAlternateRowColors}
enableExpansion={false}
enableHeader={enableHeader}
enableHorizontalBorders={enableHorizontalBorders}
enableRowHoverHighlight={enableRowHoverHighlight}
enableSelection={enableSelection}
+27 -1
View File
@@ -190,6 +190,7 @@ const ItemTableListPropsSchema = z.object({
autoFitColumns: z.boolean(),
columns: z.array(ItemTableListColumnConfigSchema),
enableAlternateRowColors: z.boolean(),
enableHeader: z.boolean(),
enableHorizontalBorders: z.boolean(),
enableRowHoverHighlight: z.boolean(),
enableVerticalBorders: z.boolean(),
@@ -1098,6 +1099,7 @@ const initialState: SettingsState = {
],
}),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1126,6 +1128,7 @@ const initialState: SettingsState = {
width: column.width,
})),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1176,6 +1179,7 @@ const initialState: SettingsState = {
width: column.width,
})),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1216,6 +1220,7 @@ const initialState: SettingsState = {
],
}),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1261,6 +1266,7 @@ const initialState: SettingsState = {
],
}),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1306,6 +1312,7 @@ const initialState: SettingsState = {
width: column.width,
})),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1341,6 +1348,7 @@ const initialState: SettingsState = {
],
}),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1387,6 +1395,7 @@ const initialState: SettingsState = {
width: column.width,
})),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1415,6 +1424,7 @@ const initialState: SettingsState = {
width: column.width,
})),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1461,6 +1471,7 @@ const initialState: SettingsState = {
width: column.width,
})),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1491,6 +1502,7 @@ const initialState: SettingsState = {
],
}),
enableAlternateRowColors: false,
enableHeader: true,
enableHorizontalBorders: false,
enableRowHoverHighlight: true,
enableVerticalBorders: false,
@@ -1998,10 +2010,24 @@ export const useSettingsStore = createWithEqualityFn<SettingsSlice>()(
});
}
if (version <= 22) {
// Add enableHeader to all list table configs
Object.keys(state.lists).forEach((listKey) => {
const listConfig = state.lists[listKey as keyof typeof state.lists];
if (
listConfig?.table &&
typeof listConfig.table === 'object' &&
!('enableHeader' in listConfig.table)
) {
(listConfig.table as any).enableHeader = true;
}
});
}
return persistedState;
},
name: 'store_settings',
version: 22,
version: 23,
},
),
);