vanilla js implementation | No Framework

[EugenePeter]

Is there an existing example of implementing table using the @tanstack/table-core.
At the moment docs only have:

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

const table = createTable(options)`

I tried to implement like so:

` const columnHelper = createColumnHelper();
const columns = [
columnHelper.accessor("firstName", {
cell: (info) => info.getValue(),
footer: (info) => info.column.id,
}),
columnHelper.accessor((row) => row.lastName, {
id: "lastName",
cell: (info) => {info.getValue()},
header: () => Last Name,
footer: (info) => info.column.id,
}),
columnHelper.accessor("age", {
header: () => "Age",
cell: (info) => info.renderValue(),
footer: (info) => info.column.id,
}),
columnHelper.accessor("visits", {
header: () => Visits,
footer: (info) => info.column.id,
}),
columnHelper.accessor("status", {
header: "Status",
footer: (info) => info.column.id,
}),
columnHelper.accessor("progress", {
header: "Profile Progress",
footer: (info) => info.column.id,
}),
];

const data: Person[] = [
{
firstName: "tanner",
lastName: "linsley",
age: 24,
visits: 100,
status: "In Relationship",
progress: 50,
},
{
firstName: "tandy",
lastName: "miller",
age: 40,
visits: 40,
status: "Single",
progress: 80,
},
{
firstName: "joe",
lastName: "dirte",
age: 45,
visits: 20,
status: "Complicated",
progress: 10,
},
];

const table = createTable({
columns,
data,
getCoreRowModel: getCoreRowModel(),
state: {}, // Provide the state property here
onStateChange: () => {}, // Provide the onStateChange property here
renderFallbackValue: () => null, // Provide the renderFallbackValue property here
});`

<table> <thead> { table?.getHeaderGroups()?.map((headerGroup) => ( <tr key={headerGroup.id}> {headerGroup?.headers?.map((header) => ( <th key={header.id}> hello {/* {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} */} </th> )) } </tr> )) } hello </thead> <tbody> {table?.getRowModel()?.rows?.map((row) => ( <tr key={row.id}> {row.getVisibleCells().map((cell) => { const value = cell?.value; console.log("VALUEEEEE:", value); return <td key={cell.id}>hello</td>; return ( <td key={cell.id}> {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */} </td> ); })} </tr> ))} </tbody> </table>

  Notice that I commented out flexRenderer, I don't if it's available from '@tanstack/table-core'
  
  Now I am getting error:
  `Cannot read properties of undefined (reading 'left')`
  
  `    at file:///C:/Users/epmae/Desktop/eugene/development/qwik-test/node_modules/@tanstack/table-core/build/lib/index.mjs:1738:97
at Object.getLeftVisibleCells (file:///C:/Users/epmae/Desktop/eugene/development/qwik-test/node_modules/@tanstack/table-core/build/lib/index.mjs:59:21)
at getVisibleCells.memo.key (file:///C:/Users/epmae/Desktop/eugene/development/qwik-test/node_modules/@tanstack/table-core/build/lib/index.mjs:2559:40)
at Object.getVisibleCells (file:///C:/Users/epmae/Desktop/eugene/development/qwik-test/node_modules/@tanstack/table-core/build/lib/index.mjs:59:21)
at C:\Users\epmae\Desktop\eugene\development\qwik-test\src\routes\members\index.tsx:115:20
at Array.map (<anonymous>)
at AsyncFunction.members_component_DpttA29SYVY (C:\Users\epmae\Desktop\eugene\development\qwik-test\src\routes\members\index.tsx:113:40)
at AsyncFunction.invoke (C:\Users\epmae\Desktop\eugene\development\qwik-test\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:1290:26)
at C:\Users\epmae\Desktop\eugene\development\qwik-test\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:8158:35
at then (C:\Users\epmae\Desktop\eugene\development\qwik-test\dist-dev\tsc-out\packages\qwik\src\core\util\implicit_dollar.js:433:56`

[KasimAhmic]

Did you ever figure this out? Running into the same issue now.

[marceloverdijk]

I tried once for a POC but abandoned as there is no documentation or further assistance unfortunately.

Once somebody figured out I might give Tanstack Table a retry in the future.

[marceloverdijk]

I created this repo in the past to come to a working solution:

https://github.com/marceloverdijk/astro-tanstack-table-vanilla

Had a brief discussion with @tannerlinsley on Twitter about it but unfortunately never emerged into something useful. There seems not to be enough interest, nor examples online. I even wondered back then if a no-framework approach is feasible, despite being advertised.

[KasimAhmic]

Ah bummer. Oh well, thanks anyway for the reply!

[geries-visdom]

For those landing here you need to have a proper state with minimal props like this

 const state = {
    columnPinning: {},
    pagination: {
      pageIndex: 0,
      pageSize: 20,
    },
  };
  const table = createTable<Person>({
    data: defaultData,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    state,
    onStateChange: () => {}, // noop
    renderFallbackValue: undefined,
    debugAll: true,
  });

The should solve the exception you getting in the table object.

Then when doing the actual rendering, you need to do this:

First you need a flexRenderer which will make it easier to fingure out if the value is a function(called template by them) or a string

const flexRenderer = (comp, attrs) => {
  if (typeof comp === "function") {
    return comp(attrs);
  }

  return comp
};

Then it is used like this when rendering the table

 header.isPlaceholder ? "" : flexRenderer(header.column.columnDef?.header, header.getContext()),
// or in case of the cell
flexRenderer(cell.column.columnDef?.cell, cell.getContext())

[marceloverdijk]

This thread on X with @KevinVandy is also interesting to follow: https://twitter.com/marceloverdijk/status/1762606611535687699

Apparently when using Vanilla JS we should not use state but initialState and remove the onStateChange...
However this gives new problems: https://stackblitz.com/edit/github-6xqt97-4ufpds?file=main.js

Uncaught TypeError: Cannot read properties of undefined (reading 'columnOrder')
    at table._getOrderColumnsFn.orderedColumns (Ordering.ts:114:25)

I hope @KevinVandy might chime in here to help and give some pointers to keep going, as I'm stuck now and out of ideas how to continue.

[KevinVandy]

No, not true. I hadn't realized that they were using vanilla js. Thought that they were using React.

[marceloverdijk]

Thx @KevinVandy for stepping in.

In this topic we are trying to indeed get Tanstack table running with vanilla js without any framework (so indeed not using React).

So from your last comment do I understand correct the usage of state and that noop onStateChange: () => {} is correct?

Do you have any other pointers on how to get it working. In https://stackblitz.com/edit/github-6xqt97?file=main.js nextPage()/previousPage() will not change the state..

I'm a little bit confused now, what behaviour is expected, and e.g. if the comment in #5375 is correct then.

[marceloverdijk]

I came a bit further this evening, and I have a table with working pagination now:

https://github.com/marceloverdijk/astro-tanstack-table-vanilla
https://stackblitz.com/github/marceloverdijk/astro-tanstack-table-vanilla

I'm using Nanostores Atom for state management.
I basically followed the React adapter and changed it to use Nanostores.
Not sure if this is the best approach or if it has drawbacks... love to get some feedback on it.

[fsmeier]

Exceptions because of not setting default values in vanilla likeconst state = { columnPinning: {}, pagination: { pageIndex: 0, pageSize: 20, }, }; seems like a bug to me...

[rlsystems]

I couldn't even figure out how to import the library, would love a full example. Trying to get this working in a simple html template for now. Ultimately in an ASP.NET Razor Pages project

[geries-visdom]

Wow this is awesome work.

[0Chan-smc]

@marceloverdijk Your work really helped me a lot. Thank you so much.

[KevinVandy]

would really like to get these vanilla examples in the official docs @marceloverdijk. A PR from you would speed this up, otherwise, I'll eventually copy these suggestions.

[mario-yanill]

In this approach how do I update the table content (rows)? If anyone could help it would be great, thanks in advance

[0Chan-smc]

@mario-yanill Have you tried creating another table with createVanillaTable with new content in it? You can then simply render it.

[fsmeier]

+1 for vanilla examples

[marceloverdijk]

Sorry, for not earlier responding.
But actually, today I was looking into a vanilla implementation again during the holidays ;-)

However, like in the https://stackblitz.com/github/marceloverdijk/astro-tanstack-table-vanilla example, creating the html manually is quite painful... so today I worked on a proof of concept with @tanstack/table-core, nanostores for state management, and lit-html for html templates.
Note not to confuse lit-html with lit-element and the Tanstack Table lit adapter.

The outcome was I had searchable, sortable and pageable page with vanilla js/ts.

Here is a stackblitz example of it:

https://stackblitz.com/edit/github-isvmcumr?file=src%2Fpages%2Findex.astro

Back to the vanilla examples, @KevinVandy do you think it's a good idea to create vanilla examples with lit-html for html templating?
Let me know, I will make it one of my new years resolutions to provide examples!

On a related note @tanstack/table-core provides the bare bones createTable function, and for frameworks there are use* variants with flexRender functions. I think for vanilla js it could be useful to have a use* and flexRender as well.

for example as simple as:

export function flexRender<TProps extends object>(comp: any, props: TProps) {
  if (typeof comp === 'function') {
    return comp(props);
  }
  return comp;
}

What do you think?

[0Chan-smc]

I prefer to use fewer dependencies. But the example with lit-html is not bad.

[KevinVandy]

We already have a Lit adapter, so if someone is going to use Lit, they should use these. https://tanstack.com/table/latest/docs/framework/lit/examples/filters

I think a vanilla example should define it's own flexRender function?

[marceloverdijk]

lit-html is a standalone html template renderer, it's not the same as lit element with controllers etc as in the lit adapter examples.

But no problem, the vanilla examples can be done without lit-html. At the end everybody can choose what ever they want for the html rendering.

[marceloverdijk]

Here we go, a first take at the PR for a basic and pagination example using Vanilla js/ts (without any dependency except nanostores):
#5853

@KevinVandy let me know what you think

[marceloverdijk]

Vanilla examples basic, pagination and sorting are now available here:

• https://tanstack.com/table/latest/docs/framework/vanilla/examples/basic
• https://tanstack.com/table/latest/docs/framework/vanilla/examples/pagination
• https://tanstack.com/table/latest/docs/framework/vanilla/examples/sorting

Let's mark this discussion thread as answered.