florian Posts - Answer Overflow

florian

•Created by florian on 1/20/2025 in #support

`scroll` event emitted until end reached when scrolling lazy-rendered table

I'm currently working on an app which displays a lot of data in a table that often has thousands of rows. To reduce the time spent while rendering the table I wanted to make it lazy-rendered so it just renders the rows in view and adds padding before and after the elements to correct the scroll position. The solution I came up with does just that but for some reason it keeps emitting scroll events when starting to scroll down until the end is reached, even when just increasing scrollTop by a few pixel and no manual scrolling at all. This doesn't happen when scrolling up for some reason? I created a minimal example that has the same behaviour like in my app here: https://playground.solidjs.com/anonymous/239274a9-b2f9-4c66-bb52-f9d69d40845f I know there are more performance improvements available but this would make the example just more complicated.

1 replies

SSolidJS

•Created by florian on 6/9/2024 in #support

Split server code from client code

32 replies

SSolidJS

•Created by florian on 6/8/2024 in #support

Run route.load and access return value only once when navigating to page

17 replies

SSolidJS

•Created by florian on 12/12/2023 in #support

Pass every child in props.children a context of their index

I want to create a table where every cell knows its column number without passing it via props. I tried multiple things but they all either didn't work at all or returned undefined when getting the index from the context. Here is how I would like it to work:

const ColumnContext = createContext();

function Cell(props) {
  const column = useContext(ColumnContext);
  
  onMount(() => console.log(column)); // logs undefined, expected index
  
  return (
    ...
  );
}

function Row(props) {
  const resolved = children(() => props.children);
  return (
    <div>
      <For each={resolved()}>
        {(child, index) => (
          <ColumnContext.Provider value={index()}>
            {child}
          </ColumnContext.Provider>
        )} 
      </For>
    </div>
  );
}

function App() {
  return (
    <Row>
      <Cell>...</Cell>
      <Cell>...</Cell>
      <Cell>...</Cell>
    </Row>
  );
}

const ColumnContext = createContext();

function Cell(props) {
  const column = useContext(ColumnContext);
  
  onMount(() => console.log(column)); // logs undefined, expected index
  
  return (
    ...
  );
}

function Row(props) {
  const resolved = children(() => props.children);
  return (
    <div>
      <For each={resolved()}>
        {(child, index) => (
          <ColumnContext.Provider value={index()}>
            {child}
          </ColumnContext.Provider>
        )} 
      </For>
    </div>
  );
}

function App() {
  return (
    <Row>
      <Cell>...</Cell>
      <Cell>...</Cell>
      <Cell>...</Cell>
    </Row>
  );
}

Is this even possible and if so how?

24 replies

Gaming

Programming