Add templates for Data table and columns #148
Conversation
| @@ -9,7 +9,7 @@ | |||
| }, | |||
| "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.
| @@ -540,7 +540,7 @@ export const addScriptsToPackageJson = ( | |||
| "db:migrate": `tsx ${libPath}/db/migrate.ts`, | |||
| "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.
| @@ -20,6 +20,7 @@ addCommonOptions(program.command("init")) | |||
|
|
|||
| 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
| @@ -469,19 +481,6 @@ export default function ${tableNameSingularCapitalised}List({ | |||
| + | |||
| </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.
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