v8: How to get Table type?

[Obiwarn]

As @tannerlinsley showed in #3818 you can access the Table generics via table.generics.

However, now I try to refactor my columns into a separate file.

Is there a way to "create" the table type (like type myTable = TableType<Person>)?

I try to accomplish sth. like this:

export function createTableColumns(store: Store, table: Table<MY TABLE TYPE HERE>) {
return () =>
    table.createColumns([
      table.createGroup({

Right now, I always have to create my table instance in that function above.

[colindjk]

The react-table library has a Table type exported from here, is that what you're requesting?

import { Table } from '@tanstack/react-table'

[Obiwarn]

Table is generic. The problem is that I cannot find a way to specify it properly, like e.g. Table<{Row: Person}>.

[Obiwarn]

Right now I try to refactor my row logic into a separate file and I get the same problem.

I guess we need a proper Table type @tannerlinsley ? Or am I missing something here.

I.e. this part in the example:

 <tbody {...instance.getTableBodyProps()}>
            {instance.getRowModel().rows.map(row => (

           // how to refactor this below (with correct types)?

              <tr {...row.getRowProps()}>
                {row.getVisibleCells().map(cell => (
                  <td
                    {...cell.getCellProps(props => ({
                      ...props,
                      style: {
                        ...props.style,
                        width: cell.column.getWidth(),
                      },
                    }))}
                  >
                    {cell.renderCell()}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>

[fkaempfer]

This seems to work for me, but it's quite ugly:

class Wrapper<T> {
  wrapped() {
    return createTable<{
      Row: T
    }>()
  }
}

type TableGenerics<T> = ReturnType<Wrapper<T>["wrapped"]>["generics"]

function myFunction(rows: Row<TableGenerics<T>>){

}

But it would be awesome to have the type available somehow.

[tannerlinsley]

let table = createTable<{
  Row: Person
  TableMeta: {
    // We can tell our table about a custom "updateData" method we will provide it
    updateData: (rowIndex: number, columnId: string, value: unknown) => void
  }
}>()

// Get our table generics
type TableGenerics = typeof table.generics

// Use them in any type
function somethingWithTheTableInstance (instance: TableInstance<TableGenerics>) {
  // ...
}

[fkaempfer]

It makes sense to create the table outside of a component to improve performance.

In my case though, I have a generic data table component that I want to port to v8, so because I don't know the Row type beforehand it would be nice to derive the type TableGenerics somehow from the Row type without instantiating the table first.

[tannerlinsley]

I’ll provide a utility type to extract the generics.

[tannerlinsley]

Turns out there shouldn't really be a need for a utility after all. All of the types for React Table rely on a single generic map.

Either you know the generics ahead of time and want to enforce them:

let table = createTable<{
  Row: Person
  TableMeta: {
    // We can tell our table about a custom "updateData" method we will provide it
    updateData: (rowIndex: number, columnId: string, value: unknown) => void
  }
}>()

// Get our table generics
type TableGenerics = typeof table.generics

// Use them in any type
function somethingWithTheTableInstance (instance: TableInstance<TableGenerics>) {
  // ...
}

Or you don't know the generics and simply want to pass them through:

export function somethingWithTheTableInstance <TGenerics extends AnyGenerics>(instance: TableInstance<TGenerics>) {
  // ...
}

export function somethingWithARow <TGenerics extends AnyGenerics>(row: Row<TGenerics>) {
  // ...
}

[david-crespo]

This is very helpful and would be great if an example showed it off!

[Obiwarn]

Sorry for replying so late (Easter holidays).

What I try is to enforce the generics in a different file, i.e., having the somethingWithTheTableInstance function separate from the createTable call.

I still don't really understand how I pass the generics in this case.

[talatkuyuk]

createTable function does not accept any type argument. So the code blow (provided by @tannerlinsley) is not working:

let table = createTable<{
  Row: Person
  TableMeta: {
    // We can tell our table about a custom "updateData" method we will provide it
    updateData: (rowIndex: number, columnId: string, value: unknown) => void
  }
}>()

The typescript is warning that Expected 0 type arguments, but got 1. ts(2558)

I don't know how to set up RowType and ColumnMetaType and TableMetaType at the same time.

[talatkuyuk]

Hmm. I figure out that we can do like below:

  const table = createTable()
    .setRowType<User>()
    .setColumnMetaType<string>()
    .setTableMetaType<{
      updateData: (rowIndex: number, columnId: string, value: unknown) => void;
    }>();

[david-crespo]

Yes, the API changed in the past month to what you have there. That's correct.