What to pass to createTable for state, onStateChange and renderFallbackValue

[marceloverdijk]

I'm trying to use Tanstack Table using vanilla js/ts (so without any framework.

The docs are very limited for this use case as it only states:

import { createTable } from '@tanstack/table-core'

const table = createTable(options)

So I went ahead with it and tried something:

  import {
    createTable,
    createColumnHelper,
    getCoreRowModel,
    getPaginationRowModel,
    TableState,
    Updater,
  } from '@tanstack/table-core'

  type Constructor = Prisma.KonstructorGetPayload<{ .. }>

  const data: Constructor[] = [] // get the actual data
  const columnHelper = createColumnHelper<Constructor>()
  const columns = [
    columnHelper.accessor('name', {
      cell: (info) => info.getValue(),
    }),
  ]
  const table = createTable<Constructor>({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    state: undefined, // what to pass here?
    onStateChange: function (updater: Updater<TableState>): void {
      throw new Error('Function not implemented.')
    },  // what to pass here?
    renderFallbackValue: undefined,  // what to pass here?
  })

I initially omitted state, onStateChange and renderFallbackValue from the options but then VS code was complaining they were required... So I let VS code add them, but what to actually pass to them as value?
VS code is now complaining that status cannot be undefined.

[marceloverdijk]

I also tried with:

  const data: Constructor[] = theData // []
  const columnHelper = createColumnHelper<Constructor>()
  const columns = [
    columnHelper.accessor('name', {
      cell: (info) => info.getValue(),
    }),
  ]
  const table = createTable<Constructor>({
    debugAll: true,
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // getPaginationRowModel: getPaginationRowModel(),
    state: {},
    onStateChange: function() {},
    renderFallbackValue: undefined,
  })

  console.dir(table.getHeaderGroups())

but this gives:

Creating Table Instance...
utils.ts:175 ⏱     0 /    0 ms getDefaultColumnDef
utils.ts:175 ⏱     1 /    1 ms getAllColumns
utils.ts:175 ⏱     0 /    0 ms getAllLeafColumns
utils.ts:175 ⏱     0 /    1 ms getVisibleLeafColumns
headers.ts:119 Uncaught TypeError: Cannot read properties of undefined (reading 'left')
    at headers.ts:119:28
    at Object.getHeaderGroups (utils.ts:143:21)
    at index.astro:239:21

Not sure what is causing this.

Basically I want to use tanstack table in a vanilla js/ts environment but have no idea how to set it up.
I'm trying to create the table, and then in js/ts loop the headers to create custom <table>, <tr> and <th> elements.

[KevinVandy]

We've gotten reports that devs using Jet Brains IDEs get these false errors for some reason. None of those options are required.

[marceloverdijk]

Thx for confirming.
I get them in VS code btw

gives:

missing the following properties from type 'CoreOptions<Constructor>': 
state, onStateChange, renderFallbackValuets(2345)

If I look at at table.d.ts the CoreOptions is defined as:

export interface CoreOptions<TData extends RowData> {
    data: TData[];
    state: Partial<TableState>;
    onStateChange: (updater: Updater<TableState>) => void;
    debugAll?: boolean;
    debugTable?: boolean;
    debugHeaders?: boolean;
    debugColumns?: boolean;
    debugRows?: boolean;
    initialState?: InitialTableState;
    autoResetAll?: boolean;
    mergeOptions?: (defaultOptions: TableOptions<TData>, options: Partial<TableOptions<TData>>) => TableOptions<TData>;
    meta?: TableMeta<TData>;
    getCoreRowModel: (table: Table<any>) => () => RowModel<any>;
    getSubRows?: (originalRow: TData, index: number) => undefined | TData[];
    getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string;
    columns: ColumnDef<TData, any>[];
    defaultColumn?: Partial<ColumnDef<TData, unknown>>;
    renderFallbackValue: any;
}

So state, onStateChange and renderFallbackValue seem to be required in that definition...
Which can be seen here as well in the source code. If these options are not required that maybe it's a bug in the definition?

But ok, I removed them from createTable like:

  const data: Constructor[] = theData // []
  const columnHelper = createColumnHelper<Constructor>()
  const columns = [
    columnHelper.accessor('name', {
      cell: (info) => info.getValue(),
    }),
  ]
  const table = createTable<Constructor>({
    debugAll: true,
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  console.dir(table.getHeaderGroups())

but this gives:

Creating Table Instance...
utils.ts:175 ⏱     0 /    0 ms getDefaultColumnDef
utils.ts:175 ⏱     1 /    1 ms getAllColumns
Ordering.ts:60 Uncaught TypeError: Cannot read properties of undefined (reading 'columnOrder')
    at _getOrderColumnsFn.orderedColumns (Ordering.ts:60:25)
    at Object._getOrderColumnsFn (utils.ts:143:21)
    at table.ts:326:43
    at Object.getAllLeafColumns (utils.ts:143:21)
    at Visibility.ts:172:21
    at Visibility.ts:149:11
    at Object.getVisibleLeafColumns (utils.ts:143:21)
    at headers.ts:118:17
    at Object.getHeaderGroups (utils.ts:143:21)
    at index.astro:229:21

Am I missing some setup part?

[marceloverdijk]

Note, I also created a PR to make these option optional as you said none of them are required.

But tests are failing unfortunately.. https://github.com/TanStack/table/actions/runs/4664525325/jobs/8256860203?pr=4805

Error: packages/table-core/src/core/table.ts(152,5): error TS2322: Type '{ data: TData[]; state?: Partial | undefined; onStateChange?: ((updater: Updater) => void) | undefined; debugAll?: boolean | undefined; ... 71 more ...; onRowSelectionChange?: OnChangeFn<...> | undefined; }' is not assignable to type 'RequiredKeys<TableOptionsResolved, "state">'.

[marceloverdijk]

Note I also crate a small example repo here: https://github.com/marceloverdijk/astro-tanstack-table-vanilla
And more specifically here it goes wrong: https://github.com/marceloverdijk/astro-tanstack-table-vanilla/blob/main/src/pages/index.astro#L112-L115

[EugenePeter]

Any update on this? I am also using vanilla js (No framework) and getting the same errors.

[f8k8]

I know this is quite a long time after these comments, but I just had the same issue. useReactTable will copy the table's initialState to it's current state when the table is created, so if you're using plain createTable, you also need to do this. E.g.:

const table = createTable({
  data: tableData,
  columns: columnDefs,
  getCoreRowModel: getCoreRowModel(),
  state: {},
  onStateChange: () => {},
  renderFallbackValue: null,
});
table.options.state = {
  ...table.initialState,
};