[wip] fix scroll for big datasets

README.md

@@ -100,8 +100,7 @@ interface TableProps {
   focus?: boolean // focus table on mount? (default true)
   maxRowNumber?: number // maximum row number to display (for row headers). Useful for filtered data. If undefined, the number of rows in the data frame is applied.
   orderBy?: OrderBy // order by column (if defined, the component order is controlled by the parent)
-  overscan?: number // number of rows to fetch outside of the viewport (default 20)
-  padding?: number // number of extra rows to render outside of the viewport (default 20)
+  padding?: number // number of extra rows to fetch and render outside of the viewport (default 20)
   selection?: Selection // selection state (if defined, the component selection is controlled by the parent)
   styled?: boolean // use styled component? (default true)
   onColumnsVisibilityChange?: (columnVisibilityStates: Record<string, MaybeHiddenColumn>) => void // columns visibility change handler

src/HighTable.module.css

@@ -17,20 +17,20 @@
 
   /* Note that this class cannot be easily overriden by custom CSS. It's not really an issue as its role is functional. */
   .table-scroll {
-    flex: 1;
-    overflow: auto;
-    & > div {
-      position: relative;
-    }
+    overflow: auto;    
     /* avoid the row and column headers (sticky) to overlap the current navigation cell */
     scroll-padding-inline-start: var(--row-number-width);
     scroll-padding-block-start: var(--column-header-height);
-  }
 
+    /* the canvas */
+    & > div {
+      overflow-y: clip;
+      /* the children (table, and mock row labels) are positioned absolutely */
+      position: relative;
+    }
+  }
   table {
-    position: absolute;
     max-width: 100%;
-    overflow-x: auto;
   }
 
   /* cells */
@@ -207,7 +207,7 @@
   .mock-row-label {
     content: "";
     position: absolute;
-    top: var(--mock-row-label-top, 0);
+    top: 0;
     left: 0;
     bottom: 0;
     background: var(--mock-row-label-background, transparent);
@@ -647,7 +647,6 @@
   /* mock row numbers */
   /* Note that this class cannot be easily overriden by custom CSS. Use the variable to change the background. */
   --mock-row-label-background: var(--row-number-background-color);
-  --mock-row-label-top: var(--top-border-height, 0);
 }
 
 @keyframes textshimmer {

src/components/HighTable/HighTable.stories.tsx

@@ -207,6 +207,38 @@ function createFilteredData(): DataFrame {
   return df
 }
 
+function createLargeData(): DataFrame {
+  const numRows = 777_000_000
+  const columnDescriptors = ['ID', 'Value'].map(name => ({ name }))
+  function getCell({ row, column }: { row: number, column: string }): ResolvedValue | undefined {
+    return {
+      value: column === 'ID'
+        ? `row ${row}`
+        : column === 'Value'
+          ? Math.floor(100 * random(135 + row))
+          : undefined,
+    }
+  }
+  const getRowNumber = createGetRowNumber({ numRows })
+  return { columnDescriptors, numRows, getCell, getRowNumber }
+}
+
+function createSmallData(): DataFrame {
+  const numRows = 8
+  const columnDescriptors = ['ID', 'Value'].map(name => ({ name }))
+  function getCell({ row, column }: { row: number, column: string }): ResolvedValue | undefined {
+    return {
+      value: column === 'ID'
+        ? `row ${row}`
+        : column === 'Value'
+          ? Math.floor(100 * random(135 + row))
+          : undefined,
+    }
+  }
+  const getRowNumber = createGetRowNumber({ numRows })
+  return { columnDescriptors, numRows, getCell, getRowNumber }
+}
+
 function CustomCellContent({ cell, row, col, stringify }: CellContentProps) {
   return (
     <span>
@@ -572,3 +604,15 @@ export const SortedVaryingData: Story = {
     data: sortableDataFrame(createVaryingArrayDataFrame({ delay_ms: 200, maxRows: 20 })),
   },
 }
+
+export const LargeData: Story = {
+  args: {
+    data: createLargeData(),
+  },
+}
+
+export const SmallData: Story = {
+  args: {
+    data: createSmallData(),
+  },
+}

src/components/HighTable/HighTable.test.tsx

@@ -102,8 +102,8 @@ describe('HighTable', () => {
     })
   })
 
-  it('uses overscan option', async () => {
-    const { getByText } = render(<HighTable data={mockData} overscan={10} />)
+  it('uses padding option', async () => {
+    const { getByText } = render(<HighTable data={mockData} padding={10} />)
     await waitFor(() => {
       getByText('ID')
       expect(mockData.getCell).toHaveBeenCalledWith({ row: 13, column: 'Age', orderBy: [] })
@@ -255,8 +255,8 @@ describe('with async data, HighTable', () => {
   })
 
   it('renders initial rows', async () => {
-    const defaultOverscan = 20
-    const rowEnd = defaultOverscan + 4
+    const defaultPadding = 20
+    const rowEnd = defaultPadding + 4
     const asyncData = createAsyncDataFrame()
     const { getByText } = render(<HighTable data={asyncData} />)
     await waitFor(() => {
@@ -268,11 +268,11 @@ describe('with async data, HighTable', () => {
     })
   })
 
-  it('uses overscan option', async () => {
-    const overscan = 10
-    const rowEnd = overscan + 4
+  it('uses padding option', async () => {
+    const padding = 10
+    const rowEnd = padding + 4
     const asyncData = createAsyncDataFrame()
-    const { getByText } = render(<HighTable data={asyncData} overscan={overscan} />)
+    const { getByText } = render(<HighTable data={asyncData} padding={padding} />)
     await waitFor(() => {
       getByText('ID')
       expect(asyncData.fetch).toHaveBeenCalledExactlyOnceWith({ rowStart: 0, rowEnd, columns: ['ID', 'Name', 'Age'], orderBy: [], signal: expect.any(AbortSignal) })