diff --git a/src/components/viewtypes/ListViewTable.tsx b/src/components/viewtypes/ListViewTable.tsx
index 4ef16e3..61a5d2b 100644
--- a/src/components/viewtypes/ListViewTable.tsx
+++ b/src/components/viewtypes/ListViewTable.tsx
@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import path from 'path';
import settings from 'electron-settings';
+import styled from 'styled-components';
import { useQueryClient } from 'react-query';
import { useHotkeys } from 'react-hotkeys-hook';
import { nanoid } from 'nanoid';
@@ -36,6 +37,19 @@ import {
toggleSelected,
} from '../../redux/multiSelectSlice';
+const StyledTable = styled(Table)<{ rowHeight: number }>`
+ .rs-table-row.selected {
+ background: ${(props) => props.theme.primary.rowSelected};
+ // Resolve bug from rsuite-table where certain scrollpoints show a horizontal border
+ height: ${(props) => `${props.rowHeight + 1}px !important`};
+ }
+ .rs-table-row,
+ .rs-table-cell-group,
+ .rs-table-cell {
+ transition: none;
+ }
+`;
+
const ListViewTable = ({
tableRef,
height,
@@ -250,13 +264,20 @@ const ListViewTable = ({
return (
<>
-
+ multiSelect?.selected.find((e: any) => e?.uniqueId === rowData?.uniqueId)
+ ? 'selected'
+ : ''
+ }
ref={tableRef}
height={height}
data={sortColumn && !nowPlaying ? sortedData : data}
virtualized={virtualized}
rowHeight={rowHeight}
hover
+ cellBordered={false}
+ bordered={false}
affixHeader
autoHeight={autoHeight}
affixHorizontalScrollbar
@@ -346,17 +367,17 @@ const ListViewTable = ({
{(rowData: any, rowIndex: any) => {
return (
e.uniqueId === rowData.uniqueId)
+ ? 'custom-cell selected'
+ : 'custom-cell'
+ }
playing={
(rowData.uniqueId === playQueue?.currentSongUniqueId && nowPlaying) ||
(!nowPlaying && rowData.id === playQueue?.currentSongId)
? 'true'
: 'false'
}
- rowselected={
- multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
- ? 'true'
- : 'false'
- }
height={rowHeight}
onClick={(e: any) => {
if (!dnd) {
@@ -450,11 +471,6 @@ const ListViewTable = ({
{(rowData: any, rowIndex: any) => {
return (
e.uniqueId === rowData.uniqueId)
- ? 'true'
- : 'false'
- }
onClick={(e: any) =>
handleRowClick(e, {
...rowData,
@@ -616,11 +632,6 @@ const ListViewTable = ({
{(rowData: any) => {
return (
e.uniqueId === rowData.uniqueId)
- ? 'true'
- : 'false'
- }
height={rowHeight}
onMouseDown={(e: any) => handleSelectMouseDown(e, rowData)}
onMouseEnter={() => handleSelectMouseEnter(rowData)}
@@ -675,11 +686,6 @@ const ListViewTable = ({
? 'true'
: 'false'
}
- rowselected={
- multiSelect?.selected.find((e: any) => e.uniqueId === rowData.uniqueId)
- ? 'true'
- : 'false'
- }
height={rowHeight}
onClick={(e: any) => {
if (!column.dataKey?.match(/starred|songCount|duration|userRating/)) {
@@ -798,7 +804,7 @@ const ListViewTable = ({
)}
))}
-
+
>
);
};
diff --git a/src/components/viewtypes/styled.tsx b/src/components/viewtypes/styled.tsx
index 3b81cf4..edf15f8 100644
--- a/src/components/viewtypes/styled.tsx
+++ b/src/components/viewtypes/styled.tsx
@@ -25,14 +25,11 @@ export const RsuiteLinkButton = styled(Button)<{
`;
export const TableCellWrapper = styled.div<{
- rowselected: string;
playing?: string;
height?: number;
dragover?: string;
dragfield?: string;
}>`
- background: ${(props) =>
- props.rowselected === 'true' ? props.theme.primary.rowSelected : undefined};
color: ${(props) => (props.playing === 'true' ? props.theme.primary.main : undefined)};
line-height: ${(props) => (props.height ? `${props.height}px` : undefined)};
box-shadow: ${(props) =>