Add templates for Data table and columns

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 .DS_Store
+tester/

README.md

@@ -182,7 +182,7 @@ To run locally:
 
 ```sh
 pnpm i
-pnpm run dev
+pnpm run build
 
 npm install -g . (in a second terminal - this will then make kirimase available across your machine using "kirimase *command*")
 ```

package.json

@@ -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",
     "dev2": "node dist/index.js",
     "dev": "tsc -w"
   },
@@ -30,6 +30,7 @@
     "chalk": "^5.3.0",
     "commander": "^11.0.0",
     "consola": "^3.2.3",
+    "eta": "^3.2.0",
     "execa": "^8.0.1",
     "figlet": "^1.7.0",
     "ora": "^8.0.1",

src/commands/add/componentLib/shadcn-ui/index.ts

@@ -1,6 +1,7 @@
 import { consola } from "consola";
 // import { execa } from "execa";
 import { existsSync } from "fs";
+import { eta } from "../../../../eta.js";
 import {
   addPackageToConfig,
   createFile,
@@ -47,6 +48,7 @@ const manualInstallShadCn = async (
 
   addToInstallList({
     regular: [
+      "@tanstack/react-table",
       "tailwindcss-animate",
       "class-variance-authority",
       "clsx",
@@ -85,6 +87,16 @@ const manualInstallShadCn = async (
     rootPath.concat("components/ui/ThemeToggle.tsx"),
     generateThemeToggler()
   );
+
+  // generate base Data Table
+  createFile(
+    rootPath.concat("components/ui/DataTable/index.tsx"),
+    eta.render("DataTable/index.eta", {})
+  );
+  createFile(
+    rootPath.concat("components/ui/DataTable/pagination.tsx"),
+    eta.render("DataTable/pagination.eta", {})
+  );
   // add context provider to layout
   addContextProviderToRootLayout("ThemeProvider");
 };
@@ -131,6 +143,8 @@ export const installShadcnUI = async (
   //   "label",
   // ]);
   addToShadcnComponentList([
+    "table",
+    "pagination",
     "button",
     "sonner",
     "avatar",

src/commands/add/orm/drizzle/generators.ts

@@ -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}`,
     "db:studio": "drizzle-kit studio",
     "db:check": `drizzle-kit check:${driver}`,
   };

src/commands/add/orm/drizzle/utils.ts

@@ -69,7 +69,6 @@ ${nanoidContent.split("\n")[1].trim()}
     replaceFile(utilsPath, newContent);
   }
 };
-
 export const checkTimestampsInUtils = () => {
   const timestampsContent = `export const timestamps: { createdAt: true; updatedAt: true } = {
   createdAt: true,

src/commands/generate/generators/views-with-server-actions.ts

@@ -36,6 +36,7 @@ import { formatTableName, toCamelCase } from "../utils.js";
 import { existsSync, readFileSync } from "fs";
 import { consola } from "consola";
 import { addToShadcnComponentList } from "../../add/utils.js";
+import eta from "../../../eta.js";
 
 export const scaffoldViewsAndComponentsWithServerActions = async (
   schema: ExtendedSchema
@@ -80,6 +81,15 @@ export const scaffoldViewsAndComponentsWithServerActions = async (
       createListComponent(schema)
     );
 
+    // create columns
+    createFile(
+      formatFilePath(
+        `app/(app)/${tableNameKebabCase}/columns.tsx`,
+        { prefix: "rootPath", removeExtension: false }
+      ),
+      eta.render('DataTable/columns.eta', { fields: schema.fields })
+    );
+
     // create components/tableName/TableNameForm.tsx
     createFile(
       formatFilePath(
@@ -251,7 +261,8 @@ const generateView = (schema: Schema) => {
   const relationsFormatted = formatRelations(relations);
 
   return `import { Suspense } from "react";
-
+import { DataTable } from "${formatFilePath(`components/ui/DataTable`, {prefix: "alias", removeExtension: false})}";
+import { columns } from "./columns";
 import Loading from "${formatFilePath("app/loading", {
     prefix: "alias",
     removeExtension: false,
@@ -313,6 +324,7 @@ const ${tableNameCapitalised} = async () => {
               .join(" ")
           : ""
       } />
+      <DataTable data={${tableNameCamelCase}} columns={columns} />
     </Suspense>
   );
 };

src/commands/generate/generators/views.ts

@@ -16,6 +16,7 @@ import {
   toNormalEnglish,
 } from "../utils.js";
 import { addToShadcnComponentList } from "../../add/utils.js";
+import eta from "../../../eta.js";
 
 export const scaffoldViewsAndComponents = async (schema: Schema) => {
   const { hasSrc, packages } = readConfigFile();
@@ -46,6 +47,11 @@ export const scaffoldViewsAndComponents = async (schema: Schema) => {
       ),
       createFormComponent(schema)
     );
+    // create components/tableName/columns.tsx
+    createFile(
+      rootPath.concat(`components/${tableNameCamelCase}/columns.tsx`),
+      eta.render('DataTable/columns.eta', { fields: schema.fields });
+    );
     // create components/tableName/TableNameModal.tsx
     createFile(
       rootPath.concat(
@@ -101,6 +107,8 @@ import { api } from "${formatFilePath(trpc.trpcApiTs, {
         })}";`
       : ""
   }
+import { DataTable } from "${alias}/components/ui/dataTable";
+import { columns } from "./columns";
 
 export default async function ${tableNameCapitalised}() {
   ${
@@ -113,6 +121,7 @@ export default async function ${tableNameCapitalised}() {
         <h1 className="font-semibold text-2xl my-2">${tableNameNormalEnglishCapitalised}</h1>
         <New${tableNameSingularCapitalised}Modal />
       </div>
+      <DataTable data={${tableNameCamelCase}} columns={columns} />
       <${tableNameSingularCapitalised}List ${tableNameCamelCase}={${tableNameCamelCase}} />
     </main>
   );

src/commands/init/utils.ts

@@ -268,4 +268,4 @@ export const toggleAnalytics = (input: { toggle?: boolean }) => {
       `Anonymous analytics are currently ${analytics ? "on" : "off"}`
     );
   }
-};
+};

src/eta.ts

@@ -0,0 +1,9 @@
+import { Eta } from "eta"
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export const eta = new Eta({ views: path.join(__dirname, "templates") });
+export default eta;

src/index.ts

@@ -20,6 +20,7 @@ addCommonOptions(program.command("init"))
 
 program
   .command("generate")
+  .alias("g")
   .description("Generate a new resource")
   .action(buildSchema);
 

src/templates/DataTable/columns.eta

@@ -0,0 +1,44 @@
+"use client"
+import { MoreHorizontal } from "lucide-react"
+import {
+  ColumnDef,
+} from "@tanstack/react-table"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Button } from "@/components/ui/button"
+
+export const columns: ColumnDef<TData, TValue>[] = [
+  <% it.fields.map(function (field) { %>
+    {
+      accessorKey: "<%_ = field.name _%>",
+      header: "<%_ = field.name _%>",
+    },
+  <% }) %>
+  {
+    id: "actions",
+    enableHiding: false,
+    cell: ({ row }) => {
+      const resource = row.original
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="square-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="square-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem>Edit</DropdownMenuItem>
+            <DropdownMenuItem>Delete</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )
+    },
+  },
+]

src/templates/DataTable/index.eta

@@ -0,0 +1,133 @@
+"use client"
+import * as React from "react"
+import {
+  VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { DataTablePagination } from './pagination'
+
+export interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({})
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    state: {
+      columnVisibility,
+    },
+  })
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              Columns <ChevronDown className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                )
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <DataTablePagination table={table} />
+    </div>
+  )
+}