Problems with the props of a react-table v8 alpha HOC

[Obiwarn]

I am testing @tanstack/react-table: 8.0.0-alpha.11, which works great so far.

Now, I try to create a reusable Table component for my app that encapsulates most of react-table.

I have a hard time to get the typings right, could you give me a hint @tannerlinsley?

Also, I am not sure if I understand the API right but: it seems that I have to pass all three props? (since table is needed to create columns outside the component and needed in the useTable hook inside the component?).

So far I got this:

interface Props<T> {
  table: TableFactory<T>;
  data: T[];
  columns: ColumnDef<Partial<DefaultGenerics>>[];
}

export const SuperTable = <T extends object>(props:Props<T>) => {
    // ...

[tannerlinsley]

TableFactory takes partial generics too https://github.com/TanStack/react-table/blob/f10003b398be44d2f85e94874b7c8d307b464754/packages/table-core/src/createTable.tsx#L46 Tanner Linsley

…

On Mar 30, 2022, 12:54 PM -0700, Sebastian Obentheuer ***@***.***>, wrote: I am testing @tanstack/react-table: 8.0.0-alpha.11, which works great so far. Now, I try to create a reusable Table component for my app that encapsulates most of react-table. I have a hard time to get the typings right, could you give me a hint @tannerlinsley? Also, I am not sure if I understand the API right but: it seems that I have to pass all three props? (since table is needed to create columns outside the component and needed in the useTable hook inside the component?). So far I got this: interface Props<T> { table: TableFactory<T>; data: T[]; columns: ColumnDef<Partial<DefaultGenerics>>[]; } export const SuperTable = <T extends object>(props:Props<T>) => { // ... — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[talatkuyuk]

Which one is better react-table experience for creating custom Table Component ?

1. (First Approach) Create table + columns; then pass the table + the columns + the data to the custom table component. And create the table instance in the custom table component
2. (Second Approach) Create table + columns + instance; then pass the instance + the data to the custom table component. (I am currently using this)

[knoefel]

@talatkuyuk i think the first approach is handling additional configuration better, e.g. adding pagination as you can do the setup in your custom table component and therefore encapsulate this logic. Choosing the second approach you would need to pass/setup the pagination state to the table instance for every component where you want to use the table component.

[knoefel]

@knoefel Your example seems to work for me. I just had to do String(row[rowId]) in getRowId since some of my id's are integers.

@edwin177 That's interesting. In my case row is losing the type bindings, as shown here:

In an earlier version where i don't have implemented the generics typing yet, i could only access properties on row which were indeed keys of T so it would pass for rowId, which i typed as keyof T, but would fail for any arbitrary value.

[edwin177]

@knoefel This is my setup so far:

[knoefel]

@edwin177 That's great. I just tried it out. I like it, it's much cleaner than my version. Thanks a lot for sharing!!