Add containerProps and itemProps to Virtualizer

[AdamConleyDSI]

Is your feature request related to a problem? Please describe.
I have a standard table component that I'd like to use as the container for Virtualizer, something like <Virtualizer as={MyTableThing}>...</Virtualizer>. However, I need to be able to pass in the column definitions, as this container component would build the header row, and the children would be rows to be virtualized.

Describe the solution you'd like
I'd like a couple of new props added to Virtualizer:

containerProps - this would be an object which would be passed with/inside the CustomContainerComponentProps to the container component.
itemProps - something similar that would be passed to custom items (not really necessary for my use case, but could be useful)

along with the same additions to CustomContainerComponentProps and CustomItemComponentProps.

This would allow for something like:

// This component would be in a separate file...
export const MyTableThing = forwardRef<HTMLTableElement, CustomContainerComponentProps>(
  ({children, style, containerProps}, ref) => {
    return (
        <table ref={ref}>
          <thead>
            <tr>
              {containerProps.columns.map((c, i) => (
                <th key={i}>{c.name}</th>
              ))}
            </tr>
          </thead>
        <tbody>
          {children}
        </tbody>
      </table>
    );
  }
);

// And in another component, I'd use it like this:
<Virtualizer as={MyTableThing} 
    containerProps={{ columns: [{name: "col1", width: "100"},{name: "col2", width: 150}], headerHeight: 30}}
    item="tr">
    ...
</Virtualizer>

Describe alternatives you've considered
I'll admit that maybe I'm not a React expert, so I may be missing a really simple solution to this, but I don't think there are any alternatives besides not having a re-usable component for the table.

[inokawa]

Hi, you could do the same thing with React's context like this:

import { createContext, useContext } from 'react';

const ColumnContext = createContext([])
const MyTableThing = forwardRef<HTMLTableElement, CustomContainerComponentProps>(
  ({children, style }, ref) => {
    const columns = useContext(ColumnContext);
    return (
        <table ref={ref}>
          <thead>
            <tr>
              {columns.map((c, i) => (
                <th key={i}>{c.name}</th>
              ))}
            </tr>
          </thead>
        <tbody>
          {children}
        </tbody>
      </table>
    );
  }
);

const TableWithHeader = ({ columns, ...tableProps }: TableWithHeaderProps) => {
  return (
    <ColumnContext.Provider value={columns}>
      <Virtualizer as={MyTableThing} item="tr" {...tableProps} />
    </ColumnContext.Provider>
  );
};

For now I don't think I'd like to add the containerProps prop because it's substitutable with the way I mentioned. And I'm also not satisfied with the current table support in virtua, so I may add a new component or props in #312 for easier table virtualization.