React component hydration / rending issue error when using shadcn & TanStack/table | Astro Lounge | Page 1

spring cape Jul 18, 2023, 8:01 PM

#

Hey everyone, I am taking a discussion to here which was previously posted on this GitHub Issue (contains full reproduction issue): https://github.com/withastro/astro/issues/7709

In short, I am currently unable to render the example DataTable component provided in the shadcn docs which uses @tanstack/react-table. This is the error I currently get "An error occurred during hydration. The server HTML was replaced with client content in <astro-island>"

Documentation References:

shandcn w/ Astro - https://ui.shadcn.com/docs/installation/astro
DataTable component - https://ui.shadcn.com/docs/components/data-table
Repro Link - https://stackblitz.com/github/lucaswalter/astro-shadcn-tanstack-repro?file=src%2Fcomponents%2Fcolumns.tsx%3AL25

Has anyone had any success getting this DataTable working at all? Right now I am not able to get table rendered at all in Astro with either of these directives

client:load
client:only="react"

west nexus Jul 18, 2023, 8:05 PM

#

Hey @spring cape thanks for moving over to Discord! I'm still a bit confused by what could be going on here, but I'm trying to debug it

#

Doesn't seem to be anything related to our JSX transfrom as I'd hoped

#

Following the shadcn tutorial works up until this point, where custom formatting should be added https://ui.shadcn.com/docs/components/data-table#cell-formatting

Data Table

Powerful table and datagrids built using TanStack Table.

spring cape Jul 18, 2023, 8:11 PM

#

Thanks a ton @west nexus - That matches my observation as well on the shadcn tutorial.

maiden geode Jul 19, 2023, 9:31 AM

#

I reproduced it with both Astro and Vite, in Astro, I managed to make it work, I can't really explain it but I always had issues importing react libs directly from .astro, and it works with another wrapping layer of .tsx component

my-workaround-repo : https://github.com/MicroWebStacks/astro-react-table-test
Stackbliz : https://stackblitz.com/github/MicroWebStacks/astro-react-table-test
so I shifted the table usage to MyTable.tsx

import { Payment, columns } from "../components/columns";
import { DataTable } from "../components/data-table";

async function getData(): Promise<Payment[]> {
    // Fetch data from your API here.
    return [
        {
            id: "728ed52f",
            amount: 100,
            status: "pending",
            email: "[email protected]",
        },
        {
            id: "728ed52sf",
            amount: 100,
            status: "pending",
            email: "[email protected]",
        },
        {
            id: "728234fed52f",
            amount: 100,
            status: "pending",
            email: "[email protected]",
        },
    ];
}

const data = await getData();

export function MyTable(){
    return(
        <DataTable columns={columns} data={data} />
    )
}

then in index.astro

---
import Layout from "../layouts/Layout.astro";
import { MyTable } from "@/components/MyTable";

import "@/styles/globals.css";

---

<Layout title="Welcome to Astro.">
    <main class="space-y-2">
        <h1>
            Welcome to <span class="text-gradient">Astro</span>
        </h1>
        <p>The "Amount" column should be rendering but is not.</p>
        <div>
            <MyTable client:load ></MyTable>
        </div>
    </main>
</Layout>
...

maiden geode Jul 19, 2023, 9:55 AM

#

here another solution
on the unmodified example from lucaswalter repo just change this

<DataTable client:load columns={columns} data={data} />

to this, (removing the client directive)

<DataTable columns={columns} data={data} />

this shows a sort of mismatch between react usage as a component rendered by Astro on server side and the workaround usage as client component when wrapped in another jsx.
When removing the client:load directive, there's obviously no react on client anymore and it's all rendered to html by astro on serevr side.

spring cape Jul 19, 2023, 3:52 PM

#

Thanks a ton @maiden geode — going to try the wrapper component idea out now. I'd eventually like to add pagination & filtering to the component so that would be perfect if I can keep the client:load directive in place

maiden geode Jul 19, 2023, 3:57 PM

#

Sure, then you need to keep them active, not just html, the wrapper with client:load should work then

spring cape Jul 22, 2023, 12:56 AM

#

Huge thanks @maiden geode @west nexus — the workaround shared worked with client:load as expected. You have saved me a signficant headache!!

inner dome Dec 19, 2023, 4:01 PM

#

I'm facing the same issue here, was trying to replicate this data table from the example and when I tried this example for the actions column https://ui.shadcn.com/docs/components/data-table#update-columns-definition-1 , I got this error Did not expect server HTML to contain a <div> in <td>..

When I removed client:load the table did render but no interactivity. Any solution?

Data Table

Powerful table and datagrids built using TanStack Table.

west nexus Dec 19, 2023, 4:02 PM

#

inner dome I'm facing the same issue here, was trying to replicate this data table from the...

This sounds like a hyrdation mismatch error. Is div even a valid child of td per the HTML spec?

#

Oh yeah it is

#

Hmm....

inner dome Dec 19, 2023, 4:03 PM

#

Is there a fix for it?

west nexus Dec 19, 2023, 4:04 PM

#

Not sure, I don't have enough information to know what is happening in your specific situation. Can you share your .astro file?

inner dome Dec 19, 2023, 4:06 PM

#

File is pretty bare, imported the layout component, and imported this data table

import BaseLayout from '@/layout/base-layout.astro';

import { Anchor } from '@/components/ui/anchor';
import { Plus } from 'lucide-react';

import { Payment, columns } from '@/components/listing-table/columns';
import { DataTable } from '@/components/listing-table/listing-data-table';

async function getData(): Promise<Payment[]> {
  // Fetch data from your API here.
  return [
    {
      id: '728ed52f',
      amount: 100,
      status: 'pending',
      email: '[email protected]'
    }
  ];
}

const data = [
  {
    id: '728ed52f',
    amount: 100,
    status: 'pending',
    email: '[email protected]'
  }
];
---

<div>
    <DataTable client:load columns={columns} data={data} />
  </div>```

#

I replaced the await with static data to check if the table loads with interactivity, it still doesn't.

west nexus Dec 19, 2023, 4:08 PM

#

Have you tried the workaround mentioned further up this thread? That seemed to solve the issue for the previous user.
#1130952479555735612 message

inner dome Dec 19, 2023, 4:11 PM

#

Yea, when I removed the client:load table renders, but the button on the actions is not clickable.

west nexus Dec 19, 2023, 4:13 PM

#

Right, without a client:load directive, Astro doesn't send any JavaScript to the client. That's expected

inner dome Dec 19, 2023, 4:13 PM

#

Sorry, pls ignore.

#

It's working now.

#

It wasn't working a while ago, but now it does 😅

#

Thanks @west nexus

west nexus Dec 19, 2023, 4:14 PM

#

No problem, glad it's working!

mild lynx Aug 22, 2024, 10:19 PM

#

just dropping a thanks to everyone in this thread as I landed here when facing the same issue.

grand steeple Jan 7, 2025, 3:44 PM

#

Hi all, sorry to revive an old thread but I recently started working with react-table/shadcn data-tables myself in Astro and encountered similar issues, even with the fixes mentioned above. Any updates since then? For me either changes in columns.tsx work OR pagination & sorting works, I cannot get both to work, with or without client:load.

grand steeple Jan 8, 2025, 2:35 PM

#

@inner dome Sorry for the ping: what made it work for you eventually, if I may ask?

#React component hydration / rending issue error when using shadcn & TanStack/table