v8: How to get table RowType ?

[talatkuyuk]

As you know we can set the RowType while creating table:

const table = createTable().setRowType<User>();  // here is the RowType is "User"

I need to get this RowType from the table instance in the Filter component in order to derive a specific column is Date or number. In my table, the data column (createdAt) holds unix timestamps which is actually number. So I have only chance via getting RowType so I can understand the column is Date not number.

if It is Date, I am going to place a datepicker instead of DebouncedInput for column filtering. This is my aim.

type Props<TGenerics> = {
  column: Column<TGenerics>;
  instance: TableInstance<TGenerics>;
};

const Filter = <TGenerics,>({ column, instance }: Props<TGenerics>) => {
  // now I have the instance and the column
  type rowtype = typeof instance.getRowModel().rows[0].original // something like that, but here returns "object"
  // I want to get "User" as a type actually.
}

Is it possible to get RowType through the table instance or the column or in combination?

[tannerlinsley]

Instead of using your own TGenerics, you can just use typeof table.generics (table in this case is your table returned from createTable()

[talatkuyuk]

I've created a CustomTable that receives a table instance as a prop in order to re-use it for different table instances.

My components hierarchy is like below: (Each is different typescript file)
UserComponent -> CustomTable -> FilterComponent
ProductComponent -> CustomTable -> FilterComponent

So the FilterComponent is also reusable component for the other tables.

How can I pass the typeof table.generics which I created in the UserComponent into FilterComponent which is child of child? The only chance is that the typescript infer the type via generic type for re-usability.

But I couldn't figure out how to get the RowType in the FilterComponent?

[tannerlinsley]

If your Filter component can work for any table (which would mean any row type), then what you have above in the OP is great. You don't know what the row type is at that point, so you TS can't tell you.

If your Filter component is only meant to work with a table that is set up with the User type, then you should enforce that expectation with:

const Filter = ({ column, instance }: Props<typeof table.generics>) => {
  type rowtype = typeof instance.getRowModel().rows[0].original
}

[talatkuyuk]

In that case the typescript can't tell the row type to me, Maybe I have to pass not only the table instance but also the table itself into the child components in order to ensure re-usability. I am going to try it.

Anyway, I would think to get the RowType from the table instance, but now I understand it is not viable. (it would be nice:) ) Thanks for your quick replies.

[talatkuyuk]

I figure out how I can make the FilterComponent is re-usable for any table with any row type: There is cool handy flexibility for us : Meta Data Thanks you @tannerlinsley for providing Meta's for the table, for the column etc.

I've decided to provide a meta data to some columns that I select. So that, I can use the column's meta data for determining the column has Date or Number type values.

In the UsersComponent.tsx

  const table = createTable()
    .setRowType<User>()
    .setColumnMetaType<string>(); // <------------------- here I set the ColumnMeta type

  const defaultColumns = useMemo(
    () => [
      // the rest columns are omitted
      table.createDataColumn("createdAt", {
        cell: (info) => new Date(Number(info.getValue())).toLocaleDateString(),
        header: () => <span>Registration Date</span>,
        footer: (props) => props.column.id,
        meta: "Date", // <------------------------------- here I provided the meta data
      }),
    ],
  []);

 // render the component
 return(
    // the rest JSX code is omitted
    <TableCustom
        instance={instance} // this is the table instance that I created above but I omitted the code
        isLoading={isLoading}
    />
 )

In the TableCustomComponent.tsx

type Props<TGenerics> = {
  instance: TableInstance<TGenerics>;
  isLoading: boolean;
};

type TColumnWithMeta = Column<TGenerics> & { meta: string | undefined }; // typescript trick

const TableCustom = <TGenerics,>({ instance, isLoading }: Props<TGenerics>): JSX.Element => {
  // the rest code is omitted
  return (
     // the JSX code and the table HTML structure is omitted
             <th
                  key={header.id}
                  colSpan={header.colSpan}
                >
                  {header.isPlaceholder ? null : (
                    <>
                      {header.renderHeader()}
                      {header.column.getCanFilter() ? (
                          <FilterComponent // <------------------------ here I place the FilterComponent
                            column={header.column as TColumnWithMeta} // cast the type in order the typescript not to be angry
                            instance={instance}
                          />
                      ) : null}
                    </>
                  )}
             </th>
  )
}

In the FilterComponent.tsx

type Props<TGenerics> = {
  column: Column<TGenerics> & { meta: string | undefined };  // <----- to tell to typescript the Column type has meta key
  instance: TableInstance<TGenerics>;
};

const Filter = <TGenerics,>({ column, instance }: Props<TGenerics>): JSX.Element => {
  // now here in the component I am able to use `column.meta`

  // here is the logic for providing specific component for the column filters (think the code below is pseudo code, the idea)
  if (column.meta === "Date") return <DatePicker />
  if (typeof firstValue === "string") return <DebouncedInput />
  if (typeof firstValue === "number") return two DebouncedInput for the min max values etc.
}

It works viola :) Cheers to Meta Data :) Now, I have a custom table and custom filter component re-usable for any RowType.

[Gusis93]

I have been trying to find a way to extend the column definitions to specify things like alignment for example but I can't find a way so I will use this meta trick