(v9) Introduce ability to create custom Table component when using createTableHook

[neefrehman]

This discussion is similar to TanStack/form#1682. When testing out v9 and its ability to help create a flexible table package for use in our company's monorepo, I've been finding that it would be beneficial to ensure a single, canonical Table component is used without requiring a separate table.AppTable wrapper.

As my suggestion in TanStack/form#1682 (comment) alludes to, the mindset I have going into the creation of our table package is that we should ideally a) not be leaking the App* prefix to the callsite of our table hooks, and b) support a single top-level component that mixes the library's context with other context and UI we want to add.

A rough sketch of what that API could look like is:

export const {
  useAppTable: useTable,
  createAppColumnHelper: createColumnHelper,
  useTableContext,
  useCellContext,
  useHeaderContext,
} = createFormHook({
  _features,
  _rowModels,
  tableComponents,
  cellComponents,
  headerComponents,
  tableComponent: MyTable, // Auto-wraps in TableContext.Provider for use with useTableContext
});

And then at the callsites:

const form = useTable(tableOptions)

<table.Table customProp={value} />

I think the direction implied by the addition of createTableHook is aligned with these thoughts, but I thought it was worth flagging a desire to take it a bit further!

[KevinVandy]

you already get to register any table component of any name via the tableComponents option. I don't see how you can't already do what you want to do.