I tried to style a react-virtuoso table and I need to have first column fixed. When I added the styles for the bottom border I noticed that randomly for some rows the bottom border is not shown and sometimes the row before that has a double bottom border.
import { TableVirtuoso } from "react-virtuoso";
import { generateUsers } from "./data";
import { useMemo } from "react";
export default function App() {
return (
<TableVirtuoso
style={{ height: 400 }}
data={generateUsers(1000)}
components={{
Table: ({ style, ...props }) => (
<table
{...props}
style={{ ...style, width: 700, borderCollapse: "seperate" }}
/>
),
}}
fixedHeaderContent={() => (
<tr>
<th
style={{
width: 150,
background: "white",
position: "sticky",
left: 0,
zIndex: 1,
}}
>
Name
</th>
<th style={{ background: "white" }}>Description</th>
<th style={{ background: "white" }}>Description</th>
<th style={{ background: "white" }}>Description</th>
<th style={{ background: "white" }}>Description</th>
<th style={{ background: "white" }}>Description</th>
</tr>
)}
itemContent={(index, user) => (
<>
<td
style={{
width: 150,
background: "white",
position: "sticky",
left: 0,
borderBottom: "1px solid black",
boxShadow: "0 1px 0 0 red",
}}
>
{user.name}
</td>
<td>{user.description}</td>
<td>{user.description}</td>
<td>{user.description}</td>
<td>{user.description}</td>
<td>{user.description}</td>
</>
)}
/>
);
}
Here is the full codesandbox example: Virtualized list with sticky columns
I tried several solutions, including the borderCollapse: 'collapse' and adding the border to the tr element but the problem persists.