virtualized + variable row height

[hyusetiawan]

is it possible to combine these two features on the same table?

[rwieruch]

Yes. The prop rowHeight can be a function too: https://react-table-library.com/?path=/docs/types-virtualized--page Does this help?

[hyusetiawan]

thank you! it works but it leaves a gap on the first row as shown here:

this is my code:

const layout: Layout = { isDiv: true, fixedHeader: true, horizontalScroll: true, custom: true }
export const Table = (props: Props) => {
  const theme = useTheme({
    ...getTheme(),
    Table: `
    --data-table-library_grid-template-columns:  48px 25% 25% 25% 20% 10%;
    `,
  })

  return (
    <ReactTableLibrary data={props.data} theme={theme} layout={layout}>
      {(tableList) => (
        <Virtualized
          tableList={tableList}
          rowHeight={(item, index) => 100}
          tableOptions={{}}
          rowOptions={{}}
          header={() => (
            <HeaderRow>
              <HeaderCell pinLeft>
                <Checkbox />
              </HeaderCell>
              <HeaderCell>Deadline</HeaderCell>
              <HeaderCell>Type</HeaderCell>
              <HeaderCell>Complete</HeaderCell>
              <HeaderCell>Tasks</HeaderCell>
              <HeaderCell>Count</HeaderCell>
            </HeaderRow>
          )}
          body={(item, index) => {
            return (
              <Row item={item}>
                <Cell pinLeft>
                  <Checkbox />
                </Cell>
                <Cell>{item.name}</Cell>
                <Cell>
                  {item.deadline.toLocaleDateString('en-US', {
                    year: 'numeric',
                    month: '2-digit',
                    day: '2-digit',
                  })}
                </Cell>
                <Cell>{item.type}</Cell>
                <Cell>{item.isComplete.toString()}</Cell>
                <Cell>{item.nodes?.length}</Cell>
              </Row>
            )
          }}
        ></Virtualized>
      )}
    </ReactTableLibrary>
  )
}

[rwieruch]

Did you set the height of the header row somewhere in getTheme() which conflicts with it?

[sammerante]

@rwieruch @hyusetiawan I'm not sure if you figured this out, but I'm having the same issue I'm trying to resolve but looks like there's no way I can find to override the current behaviour easily from outside the package.. I think it might be a super easy fix, but I'm not sure if I understand all the props well enough..

Currently it looks like row position isn't calculated properly with variable row height and virtualization I believe.

I tracked it down to src/virtualized/Virtualized.tsx line 54: top: +(style.top || 0) + getRowHeight(rowHeight, data.items[index], index),

In this example I have dynamic row height set so the first row, is 320 and the rest are 400px height, I've applied outline to clearly see the rows heights and top positioning.

Whenever using dynamic heights, if the next row is bigger there's a gap, if it's smaller the rows will overlap. In this example you can see row 2 is bigger, and there's a gap:

For this to work correctly I believe the code should be setting top to style.top + previousElements height, not the current elements: suggestion top: 320 + 320 -> 640 // top + previousHeight This would be perfectly aligning each row.. currently top: 320 + 400 -> 720 // top + curentHeight Causes a gap anytime there's a variable row height

Suggestions to possibly resolve the issue:

Current:

top: +(style.top || 0) + getRowHeight(rowHeight, data.items[index], index)

Fixes

top: +(style.top || 0) + (data.items[index]?.height || getRowHeight(rowHeight, data.items[index], index))

Or

top: +(style.top || 0) + getRowHeight(rowHeight, data.items[index > 0 ? index - 1 : index], index)

[sachinverma111]

@rwieruch @sammerante facing a similar issue while setting dynamic row heights using virtualised feature. Any fix for the same?