Sticky position with horizontal true

[skopz356]

Is your feature request related to a problem? Please describe.
I would like to have a horizontal list with first item sticky.

Describe the solution you'd like
I would like an example how to implement it because when I tried edit this example with prop horizontal=true it does not work.

[inokawa]

Hi, I'm not sure this is your intended markup, but you can make horizontal version of the example like this:

2023-08-31.23.47.08.mov

<VList style={{ width: "100vw", height: 160 }} horizontal>
  {Array.from({ length: 100 }).map((_, i) => {
    return (
      <div
        key={i}
        style={{
          display: "flex",
          flexDirection: "row",
          borderBottom: "solid 1px #ccc",
        }}
      >
        {Array.from({ length: 10 }).map((_, j) => {
          const isGroupTop = j === 0;
          return (
            <div
              key={j}
              style={{
                width: 120,
                background: "#fff",
                ...(isGroupTop && {
                  left: 0,
                  width: 60,
                  position: "sticky",
                  borderRight: "solid 1px #ccc",
                }),
              }}
            >
              {isGroupTop ? i : `${i} - ${j}`}
            </div>
          );
        })}
      </div>
    );
  })}
</VList>;

[inokawa]

Close due to inactivity. Feel free to reopen it if you have any problems.