Hi @tomgobich ! I have a quick question concerning your inertia course. On your deployed app, there is the Sortable feature on the /courses page. I could not find the corresponding code on your repo or your other branches on GitHub. Can you share the code of that part? I am having troubles with <Table> components and some hydratation mismatches so I can maybe understand what I am doing wrong :)
(Amazing course by the way!)
By the way I am trying to use <Sortable> inside a <TableBody> and it says Hydration node mismatch however when I am using it without Shadcn components it is working just fine. I tried to add the Sortable component in app.ts and ssr.ts like the Inertia Link but it doesn't help 🤔
Hey memsbdm! Yeah, the deployed app has been expanded beyond the scope of the Building with AdonisJS & Inertia series. It's what I use to plan lessons and series, and also feeds the data shown on our schedule page. So, I've added some things since. Apologies if that caused any confusion!
I did have the repository private, but just made it public. You can find the code for the live PlotMyCourse app here.
The <Sortable> component accepts a tag prop, and I have that set as tbody so that it plays well structurally with the table itself. I think that might be all you're missing!
<Table> <TableHeader> <TableRow> <!-- ... --> </TableRow> </TableHeader> <Sortable v-if="courses?.length" v-model="courses" item-key="id" handle=".handle" tag="tbody" <!-- 👈 --> class="[&_tr:last-child]:border-0" @end="onOrderUpdate" > <template #item="{ element: course }"> <TableRow class="group"> <!-- ... --> </TableRow> </template> </Sortable> </Table>Copied!
