Add templates for Data table and columns#148
Add templates for Data table and columns#148afogel wants to merge 6 commits intonicoalbanese:masterfrom
Conversation
afogel
left a comment
afogel
left a comment
There was a problem hiding this comment.
initial PR pass, it should work e2e, but happy to update further based on feedback.
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "build": "npx tsc", | ||
| "build": "npx tsc && rm -rf dist/templates && cp -r src/templates dist/templates", |
There was a problem hiding this comment.
not sure if there is a better way to do this, but I figured this is at least a quick and dirty way to pull templates into the dist folder.
There was a problem hiding this comment.
I personally used a npm package called typescript-cp for it and then just using the watch flag in dev and without it when building it.
Edit: I'm also using npm-run-all to run the dev scripts in parallel. I dont like concurrently so I used npm-run-all.
| "db:drop": "drizzle-kit drop", | ||
| "db:pull": `drizzle-kit introspect:${driver}`, | ||
| ...(driver !== "pg" ? { "db:push": `drizzle-kit push:${driver}` } : {}), | ||
| "db:push": `drizzle-kit push:${driver}`, |
There was a problem hiding this comment.
remove the guardrails around db:push for pg, now that it's supported.
|
|
||
| program | ||
| .command("generate") | ||
| .alias("g") |
| import { Button } from "@/components/ui/button" | ||
|
|
||
| export const columns: ColumnDef<TData, TValue>[] = [ | ||
| <% it.fields.map(function (field) { %> |
There was a problem hiding this comment.
templating in action
| + | ||
| </Button> | ||
| </div> | ||
| {optimistic${tableNamePluralCapitalised}.length === 0 ? ( |
There was a problem hiding this comment.
remove this list since it's taken care of by the table
| PaginationLink, | ||
| PaginationNext, | ||
| PaginationPrevious, | ||
| } from "@/components/ui/pagination"; |
There was a problem hiding this comment.
Please format the imports also so it works with a different alias.
I got that part working if u want some code. I'll push it later onto my fork in a new branch.
2 participants
This PR is the first of a few to incorporate a data table for the index page when generating a new resource using kirimase.
It incorporates the Eta templating package in order to generate views and components.
Additionally, it incorporates the tanstack react-table library, as per Shadcn's recommendations. I purposefully kept the table relatively barebones in this first attempt. It includes pagination and column hiding, alone.
I have a few outstanding questions re: incremental improvements, but I figure that smaller PRs that are easier to review are better than mammoth new PRs.
To test, generate a new next project:
bun run reinstall && bun run createTesterAppcdinto thetesterdir.then, generate a new resource using kirimase:
kirimase gfollow the instructions. When you hit the index page for the newly created resource, you should see a table under the list of actions.
This should work when you generate a new project both with server actions as well as trpc.
Screenshots