v8: How to derive the Cell render type?

[Obiwarn]

Is there a way to get the type of the finally rendered cell?

So that I could do something like this (e.g. conditionally formatting numbers or plain strings):

  {row.getVisibleCells().map((cell) => {
    const cellContent = cell.renderCell();
    const isNumberCell = typeof cellContent === "number";
      // ...

[tannerlinsley]

I think cell.value is what you’re looking for :)

[tannerlinsley]

Do not do the above. Just add a default cell option like this:

const defaultColumn = {
  cell: (props) => <div style={{padding: '10px'}}>{props.value}</div>
}

// ...

const tableInstance = useTable({
  defaultColumn
})

[Obiwarn]

Thank you! This works.

However, I get typing errors for the cell function:

TS2322: Type '(props: { instance: TableInstance<T>; row: Row<T>; column: Column<T>; cell: Cell<T>; value: T["Value"]; }) => Element' is not assignable to type 'Renderable<T, { instance: TableInstance<T>; row: Row<T>; column: Column<T>; cell: Cell<T>; value: T["Value"]; }> | undefined'.   Type '(props: { instance: TableInstance<T>; row: Row<T>; column: Column<T>; cell: Cell<T>; value: T["Value"]; }) => Element' is not assignable to type '(props: { instance: TableInstance<T>; row: Row<T>; column: Column<T>; cell: Cell<T>; value: T["Value"]; }) => ReturnType<UseRenderer<T>>'.     Type 'Element' is not assignable to type 'ReturnType<UseRenderer<T>>'.

The code:

interface Props<T extends AnyGenerics> {
  table: Table<T>;
}

export const SuperTable = <T extends AnyGenerics>(props: Props<T>) => { 
  type TableGenerics = typeof props.table.generics

  const defaultColumn: Partial<ColumnDef<TableGenerics>> = {
    cell: (props) => <div style={{ padding: "40px" }}>{props.value}</div>,   // <-- here error
  };

// ...

[tannerlinsley]

If you have no idea what your generics are, you can just use the exported TableGenerics type instead of your own generic variable. If you do know your generics, this is probably what you want:

let table = createTable()

type TableGenerics = typeof table.generics

interface Props {
  table: Table<TableGenerics>
}

export const SuperTable = (props: Props) => {
  const defaultColumn: Partial<ColumnDef<TableGenerics>> = {
    cell: props => <div style={{ padding: '40px' }}>{props.value}</div>,
  }

  const instance = useTableInstance(table, {
    columns: [],
    data: [],
    defaultColumn,
    getCoreRowModel: null!
  })
}

[Obiwarn]

@tannerlinsley when using the exported TableGenerics I get some typing errors (I guess that is a bug?) :

Codesandbox

I use "@tanstack/react-table": "^8.0.0-alpha.58",

import {
  ColumnDef,
  createTable,
  Table,
  TableGenerics,
  useTableInstance,
} from "@tanstack/react-table";
import React from "react";

let table = createTable();

interface Props {
  table: Table<TableGenerics>;
}

export const Test = () => <SuperTable table={table}></SuperTable>;

const SuperTable = (props: Props) => {
  const defaultColumn: Partial<ColumnDef<TableGenerics>> = {
    cell: (props) => (
      <div style={{ padding: "40px" }}>{props.value as any}</div>
    ),
  };

  const instance = useTableInstance(table, {
    columns: [],
    data: [],
    defaultColumn,
    getCoreRowModel: null!,
  });
  return <div></div>;
};