vanilla js implementation | No Framework #4928
Replies: 4 comments 25 replies
-
|
Did you ever figure this out? Running into the same issue now. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Ah bummer. Oh well, thanks anyway for the reply! |
Beta Was this translation helpful? Give feedback.
-
|
For those landing here you need to have a proper The should solve the exception you getting in the Then when doing the actual rendering, you need to do this: First you need a Then it is used like this when rendering the table |
Beta Was this translation helpful? Give feedback.
-
|
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 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. |
Beta Was this translation helpful? Give feedback.
-
|
No, not true. I hadn't realized that they were using vanilla js. Thought that they were using React. |
Beta Was this translation helpful? Give feedback.
-
|
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 Do you have any other pointers on how to get it working. In https://stackblitz.com/edit/github-6xqt97?file=main.js I'm a little bit confused now, what behaviour is expected, and e.g. if the comment in #5375 is correct then. |
Beta Was this translation helpful? Give feedback.
-
|
I came a bit further this evening, and I have a table with working pagination now: https://github.com/marceloverdijk/astro-tanstack-table-vanilla I'm using Nanostores Atom for state management. |
Beta Was this translation helpful? Give feedback.
-
|
Exceptions because of not setting default values in vanilla like |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Wow this is awesome work. |
Beta Was this translation helpful? Give feedback.
-
|
@marceloverdijk Your work really helped me a lot. Thank you so much. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
In this approach how do I update the table content (rows)? If anyone could help it would be great, thanks in advance |
Beta Was this translation helpful? Give feedback.
-
|
@mario-yanill Have you tried creating another table with createVanillaTable with new content in it? You can then simply render it. |
Beta Was this translation helpful? Give feedback.
-
|
+1 for vanilla examples |
Beta Was this translation helpful? Give feedback.
-
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>Beta Was this translation helpful? Give feedback.
All reactions