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
@@ -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}