How to render two first items like Headers with search input?

[adhenrique]

Hello friends, help me with any ideas. I'm building a matrix table where the first 2 rows should always be rendered, as headers. The only way I managed to do this was by adding 2 specific objects inside the FixedSizeList itemData, something like:

<FixedSizeList
  itemData={[
       {themeId: 'months'},
        themeId: 'days'},
       …clonedRows,
  ]}
  ...
>
    <MatrixRow ... />
</FixedSizeList>

Then inside the MatrixRow I do a conditional rendering, checking for themeId === 'months' or themeId === 'days'.

Yes, I could add them outside the itemData, rendering above the FixedSizeList, but then I would create a second scroll on the page and I would also have to create an additional rule for the page scroll to scroll along with the FixedSizeList scroll.

It worked but I found another problem: in the second line I have a search field to filter the matrix items. When I type a value the array is filtered and the field loses focus. I understand that because the array is being modified with filter(), FixedSizeList re-renders and then the field loses its focus.

Does react-window have any feature to fix 2 lines on top, or is there any approach I can get around re-rendering?

See image of my matrix:

This is the function to filter the items:

const changeSearchValue = useCallback((input, value) => {
  setClonedRows(prevState =>
    prevState.filter(row => {
      if (row[input]) {
        return row[input].toLowerCase().includes(value.toLowerCase());
      }
      return [];
    }),
  );
}, []);

Would appreciate any help possible!