Search code examples
reactjstypescriptnext.jsprismatanstack-table

Prisma findMany type for tanstack react table usage


I want to make a table (using tanstack table) with data fetched with Prisma.findMany. Let's say I have a User model:

model User {
  id Int @id @default(autoincrement())
  name String
  age String
  email String
}

Now In my page component I use (for pagination):

const users = await prisma.user.findMany({skip: 0, take: 10})

Then I need to create columnDefs:

export const userColumnDefs: ColumnDef<WHAT_HERE>[] = [
  {
    accessorKey: "id",
    header: "ID",
    enableHiding: false,
  },
  {
    accessorKey: "User Name",
    accessorFn: (user: WHAT_HERE) => user.name,
    header: ({ column }) => {
      return (
        <Button onClick={() => column.toggleSorting()}>
          <span className="text-xs">User Name</span>
        </Button>
      );
    },
    enableHiding: false,
  },
  ...and more
]

My question is what type I can use for that case? I want extract columnDefs to another file so can't really do typeof users

I couldn't really find any proper solution so thanks for every comment.


Solution

  • prisma generate command generates types for every table at "@prisma/client";

    import { type User } from "@prisma/client";
    
    export const userColumnDefs: ColumnDef<User>[] = [
      {
        accessorKey: "User Name",
        accessorFn: (user) => user.name,
        header: ({ column }) => {
          return (
            <Button onClick={() => column.toggleSorting()}>
              <span className="text-xs">User Name</span>
            </Button>
          );
        },
      },
    ]