React-virtuoso randomly doesn't render a bottom border on fixed column

40 Views Asked by At

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.

Row without a 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.

0

There are 0 best solutions below