A powerful, full-stack CRUD table component with optimistic updates, real-time loading states, sorting, pagination, and seamless Next.js server actions integration.

Basic CRUD Table

A comprehensive, full-stack CRUD table component that combines the power of Next.js server actions with an intuitive user interface. Features optimistic updates, real-time loading states, advanced sorting, pagination, and seamless data management capabilities.

Loading component registry...

Installation

Install the component using the AxionsJS CLI:

npx axionjs-ui add simple-crud-table

Configure your database connection in .env:

DATABASE_URL="postgresql://username:password@localhost:5432/database_name"

Set up Prisma (if not already configured):

npx prisma db push

The component comes with a complete Product model schema and is ready to use out of the box. You can customize the schema to fit your specific needs.

Database Schema

The component uses Prisma with the following schema. Add this to your schema.prisma file:

schema.prisma

model Product {
  id          String   @id @default(cuid())
  name        String
  description String?
  price       Float
  stock       Int
  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt
}

Run npx prisma db push or npx prisma migrate dev after adding the schema to apply changes to your database.

Usage

Import and use the SimpleCrudTable component:

app/products/page.tsx

import { SimpleCrudTable } from "@/components/simple-crud-table";
 
export default function ProductsPage() {
  return (
    <div className="container mx-auto py-10">
      <h1 className="text-3xl font-bold mb-6">Product Management</h1>
      <SimpleCrudTable />
    </div>
  );
}

Key Features

Optimistic Updates

Instant UI feedback with automatic rollback on errors

Real-time Loading States

Individual loading indicators for each operation

Advanced Sorting

Click-to-sort columns with visual indicators

Smart Pagination

Efficient server-side pagination with navigation

Inline Editing

Edit records directly in the table interface

Error Handling

Comprehensive error handling with user feedback

Loading States

Individual loading states for different operations ensure users always know what’s happening:

Creating: Shows spinner on create button
Updating: Skeleton placeholders for the row being updated
Deleting: Red overlay with opacity change for the row being deleted
Fetching: Skeleton placeholders for all rows during initial load

Sorting

Click any column header to sort data with visual feedback:

<TableHead
  className="cursor-pointer hover:bg-muted/50 transition-colors"
  onClick={() => handleSort("name")}
>
  Name {sortConfig.field === "name" && (sortConfig.direction === "asc" ? "↑" : "↓")}
</TableHead>

Pagination

Efficient server-side pagination with comprehensive navigation:

Page Navigation: Previous/Next buttons with state management
Page Information: “Showing X to Y of Z products”
Dynamic Totals: Real-time count updates
Keyboard Navigation: Arrow key support (planned)

Server Actions

The component utilizes Next.js server actions for seamless full-stack functionality:

actions/crud-table-actions.ts

export async function createProduct(
  data: Omit<Product, "id" | "createdAt" | "updatedAt">,
) {
  console.log("Creating product with data:", data);
  
  const product = await db.product.create({ data });
  revalidatePath("/");
  return product;
}

Features:

Automatic ID generation using cuid()
Timestamp management (createdAt, updatedAt)
Path revalidation for cache invalidation
Type-safe data validation

Custom Hook: useCrudTable

The useCrudTable hook provides comprehensive state management and operations:

Hook API

Prop	Type	Default
`initialPageSize`	`number`	`5`

Return Values

Prop	Type	Default
`data`	`{ products: Product[]; totalCount: number }`	-
`loading`	`boolean`	-
`error`	`string \| null`	-
`page`	`number`	-
`pageSize`	`number`	-
`sortConfig`	`{ field: string; direction: "asc" \| "desc" }`	-
`operationLoading`	`{ creating: boolean; updating: string \| null; deleting: string \| null }`	-
`setPage`	`(page: number) => void`	-
`setPageSize`	`(size: number) => void`	-
`handleSort`	`(field: string) => void`	-
`handleCreate`	`(data: CreateProductData) => Promise<{ success: boolean; error?: string }>`	-
`handleUpdate`	`(data: UpdateProductData) => Promise<{ success: boolean; error?: string }>`	-
`handleDelete`	`(id: string) => Promise<{ success: boolean; error?: string }>`	-
`fetchData`	`() => Promise<void>`	-

Conclusion

The Basic CRUD Table component delivers a robust, end-to-end solution for data management in Next.js applications. With built-in server actions for create/read/update/delete, optimistic UI feedback, and flexible customization points, it empowers developers to build rich, responsive CRUD interfaces with minimal effort.

CRUD Table