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]

I made this example on StackBlitz:

https://stackblitz.com/edit/github-6xqt97?file=main.js

It nicely renders the table, but pagination is not working unfortunately yet, but it can be a good start for others interested.
The table.nextPAge() and table.previousPage() calls do not seem to update the table state at all...
I also create a separate issue for this: #5375

[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.

[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

[marceloverdijk]

This evening I went further with @KasimAhmic example and have created 2 examples on StackBlitz:

• Tanstack Table Vanilla Example: Basic
• Tanstack Table Vanilla Example: Pagination

The basically mimic the React Basic and pagination examples.
So the first one is maybe not so interesting as there is not much happening, but the second one with pagination is completely interactive using Vanilla TS.

The create and render parts are completely independent of each other and thus decoupled.

@KevinVandy if you can help organising to contribute this to the project that would be great.

Maybe the createVanillaTable method (maybe not the best name) can be added as adapter to the project, together with providing some examples similar as is done for the other adapters. What do you think?

[marceloverdijk]

I have even improved the createVanillaTable adapter implementation in my local project.
It allows partial state to be provided in the create call, similar as the other adapters do, which makes it more easier to use for the user.

This also means e.g. the columnPinning: {}, is not needed to supply anymore, which seemed quite strange to be needed.

https://stackblitz.com/edit/vitejs-vite-wcxv2m?file=src%2Fcreate-vanilla-table.ts

[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.