feat: introduce FillerRow Component prop

Useful if building table with divs, fixes #625

examples/react-table-flexlayout.tsx

@@ -0,0 +1,133 @@
+import * as React from 'react'
+import {
+  Column, TableBodyProps,
+  useFlexLayout,
+  useTable,
+} from 'react-table'
+import { FillerRowProps, TableVirtuoso } from '../src/'
+import { ItemProps, ScrollSeekPlaceholderProps } from '../dist'
+
+const items: Array<ReturnType<typeof item>> = []
+function item(index: number) {
+  return {
+    id: index + 1,
+    content: `Table ${index}`,
+  }
+}
+
+export const getItem = (index: number) => {
+  if (!items[index]) {
+    items[index] = item(index)
+  }
+
+  return items[index]
+}
+
+const generateData = (length: number, startIndex = 0) => {
+  return Array.from({ length }).map((_, i) => getItem(i + startIndex))
+}
+
+export default function App() {
+
+  const [data, columns] = React.useMemo(() => {
+    const columns: readonly Column<{ id: number; content: string; }>[] = [
+        {
+          Header: 'Id',
+          accessor: 'id'
+        },
+        {
+          Header: 'Table item',
+          accessor: 'content'
+        }
+      ];
+    return [generateData(500), columns];
+
+  }, []);
+
+  const {
+    getTableBodyProps,
+    getTableProps,
+    prepareRow,
+    headerGroups,
+    rows,
+  } = useTable({
+    data,
+    columns
+  }, useFlexLayout);
+
+  const TableRow = (props: ItemProps): React.ReactElement => {
+    const index: number = props["data-index"];
+    const row = rows[index];
+    return (
+      <div
+        {...props}
+        {...row.getRowProps()}
+      />
+    );
+  };
+  const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(
+    (props, ref) => <div {...getTableBodyProps()} {...props} ref={ref} />
+  );
+  TableBody.displayName = "TableBody";
+
+  const TableHead = React.forwardRef<HTMLTableSectionElement>((props, ref) => (
+    <div {...props} ref={ref} />
+  )) as any; // typings from lib component not working properly
+  TableHead.displayName = "TableHead";
+
+  const TableItem = React.useCallback(
+    (index: number, style: object) => {
+      const row = rows[index];
+      prepareRow(row);
+      return row.cells.map(cell => (
+        <div
+          {...cell.getCellProps({ style })}
+          key={cell.getCellProps().key}
+        >
+          {cell.render("Cell")}
+        </div>
+      ));
+    },
+    [rows]
+  );
+
+  return (
+    <>
+      <TableVirtuoso
+        totalCount={500}
+        components={{
+          Table: ({ style, ...props }) => (
+            <div {...getTableProps({ style })} {...props} />
+          ),
+          TableHead,
+          TableBody,
+          TableRow,
+          ScrollSeekPlaceholder: ({ height }: ScrollSeekPlaceholderProps) => <div style={{ height, padding: 0, border: 0 }} />,
+          FillerRow: ({ height}: FillerRowProps) => <div style={{height}} />,
+          EmptyPlaceholder: () => <div>Empty</div>,
+        }}
+        style={{ height: 700 }}
+        fixedHeaderContent={() => {
+          return (
+            headerGroups.map(headerGroup => (
+              <div
+                {...headerGroup.getHeaderGroupProps()}
+                key={headerGroup.getHeaderGroupProps().key}
+              >
+                {headerGroup.headers.map(column => (
+                  <div
+                    {...column.getHeaderProps()}
+                    key={column.getHeaderProps().key}
+                  >
+                    {column.render("Header")}
+                  </div>
+                ))}
+              </div>
+            ))
+          )
+        }}
+        itemContent={TableItem}
+      />
+    </>
+  )
+}

package.json

@@ -62,6 +62,7 @@
     "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-dom": "^16.9.8",
     "@types/react-router-dom": "^5.1.7",
+    "@types/react-table": "^7.7.10",
     "@types/react-test-renderer": "^16.9.3",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
@@ -92,6 +93,7 @@
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
+    "react-table": "^7.7.0",
     "react-test-renderer": "^16.13.1",
     "rollup-plugin-dts": "^4.2.0",
     "semantic-release": "^17.3.0",

src/Table.tsx

@@ -46,6 +46,7 @@ const tableComponentPropsSystem = system(() => {
     ScrollerComponent: distinctProp('Scroller', 'div'),
     EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
     ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder'),
+    FillerRow: distinctProp('FillerRow'),
   }
 })
 
@@ -59,7 +60,7 @@ const DefaultScrollSeekPlaceholder = ({ height }: { height: number }) => (
   </tr>
 )
 
-const FillerRow = ({ height }: { height: number }) => (
+const DefaultFillerRow = ({ height }: { height: number }) => (
   <tr>
     <td style={{ height: height, padding: 0, border: 0 }}></td>
   </tr>
@@ -83,6 +84,7 @@ export const Items = React.memo(function VirtuosoItems() {
   const ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, scrollContainerStateCallback, log, customScrollParent)
   const EmptyPlaceholder = useEmitterValue('EmptyPlaceholder')
   const ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder
+  const FillerRow = useEmitterValue('FillerRow') || DefaultFillerRow
   const TableBodyComponent = useEmitterValue('TableBodyComponent')!
   const TableRowComponent = useEmitterValue('TableRowComponent')!
   const computeItemKey = useEmitterValue('computeItemKey')

src/interfaces.ts

@@ -66,6 +66,12 @@ export interface ScrollSeekPlaceholderProps {
   groupIndex?: number
   type: 'group' | 'item'
 }
+/**
+ * Passed to the Components.FillerRow custom component
+ */
+export interface FillerRowProps {
+  height: number
+}
 
 /**
  * Passed to the GridComponents.ScrollSeekPlaceholder custom component
@@ -168,6 +174,11 @@ export interface TableComponents<Context = unknown> {
    * Set to render an item placeholder when the user scrolls fast.  See the `scrollSeek` property for more details.
    */
   ScrollSeekPlaceholder?: ComponentType<ScrollSeekPlaceholderProps & { context?: Context }>
+
+  /**
+   * Set to render an empty item placeholder.
+   */
+  FillerRow?: ComponentType<FillerRowProps & { context?: Context }>
 }
 
 export interface ComputeItemKey<D, C> {

yarn.lock

@@ -2415,6 +2415,13 @@
     "@types/history" "^4.7.11"
     "@types/react" "*"
 
+"@types/react-table@^7.7.10":
+  version "7.7.10"
+  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.10.tgz#ca8bb5420bfeae964ff61682f31f1cadfcfee726"
+  integrity sha512-yt7FHv/2cFsucStSWLBOB3OmsRZF08DvVHzz8Zg41B4tzRL6pQ+5VYvmhaR1dKS//tDG4UOJ1RQJPEINHYoRtg==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-test-renderer@^16.9.3":
   version "16.9.5"
   resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.5.tgz#edab67da470f7c3e997f58d55dcfe2643cc30a68"
@@ -10571,6 +10578,11 @@ [email protected]:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-table@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
+  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
+
 react-test-renderer@^16.13.1:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"