Modern Table Component

A beautiful, responsive table component built with Tailwind CSS, DaisyUI, and HTMX for modern Node.js applications.

Features

• ✨ Modern Design: Beautiful UI with DaisyUI components and Tailwind CSS
• 🚀 HTMX Integration: Dynamic updates without writing JavaScript
• 🎨 Multiple Themes: Switch between Light, Dark, Cupcake, and Cyberpunk themes
• 📱 Responsive: Works seamlessly on all device sizes
• ⚡ Fast: Minimal JavaScript, leveraging HTMX for server-side rendering
• 🔍 Filtering & Sorting: Filter by status, priority, and sort dynamically
• ➕ CRUD Operations: Create, Read, Update, and Delete tasks
• 🎯 Hover Effects: Smooth animations and transitions
• ♿ Accessible: Built with accessibility in mind

Tech Stack

• Backend: Node.js + Express
• Frontend: HTMX 1.9.10
• Styling: Tailwind CSS 3.4 + DaisyUI 4.4
• Icons: Heroicons (SVG)

Installation

1. Clone the repository:

   git clone <repository-url>
   cd task-manager

2. Install dependencies:

   npm install

3. Build Tailwind CSS:

   npx tailwindcss -i ./src/styles/input.css -o ./public/css/output.css

4. Start the server:

   npm start

5. Visit the application: Open http://localhost:3000 in your browser

Development

For development with auto-reload:

Terminal 1 - Watch CSS changes:

npm run build:css

Terminal 2 - Run server with nodemon:

npm run dev

Component Features

1. Dynamic Filtering

Filter tasks by:

• Status: All, Pending, In Progress, Completed
• Priority: All, High, Medium, Low
• Sort: Title, Due Date, Priority

2. HTMX Powered

All dynamic features use HTMX attributes:

• hx-get: Fetch filtered/sorted data
• hx-post: Create new tasks
• hx-delete: Remove tasks
• hx-put: Update tasks
• hx-target: Specify where to inject response
• hx-include: Include other form elements

3. Table Features

• ✅ Checkbox selection (single and bulk)
• 🏷️ Status badges with color coding
• 🎯 Priority indicators
• 👁️ Hover-to-reveal action buttons
• 🎨 Zebra striping for readability
• 📊 Responsive layout

4. Theme Switching

Toggle between multiple DaisyUI themes:

• Light (default)
• Dark
• Cupcake
• Cyberpunk

Themes persist in localStorage.

API Endpoints

GET /api/tasks

Fetch all tasks with optional filters:

• Query params: status, priority, sort
• Returns: HTML table rows

POST /api/tasks

Create a new task:

• Body: { title, priority, assignee, dueDate }
• Returns: Updated HTML table rows

PUT /api/tasks/:id

Update a task:

• Body: Task fields to update
• Returns: Updated task row HTML

DELETE /api/tasks/:id

Delete a task:

• Returns: Updated HTML table rows

Customization

Tailwind Configuration

Edit tailwind.config.js to customize:

• Content paths
• Theme extensions
• DaisyUI themes
• Plugins

Custom Styles

Add custom styles in src/styles/input.css:

@layer components {
  .your-custom-class {
    @apply your-tailwind-classes;
  }
}

Add More Themes

In tailwind.config.js:

daisyui: {
  themes: ["light", "dark", "cupcake", "cyberpunk", "forest", "luxury"],
}

Component Structure

task-manager/
├── public/
│   ├── index.html          # Main HTML file with table component
│   └── css/
│       └── output.css      # Compiled Tailwind CSS
├── src/
│   └── styles/
│       └── input.css       # Tailwind source styles
├── server.js               # Express server with API endpoints
├── package.json            # Dependencies
├── tailwind.config.js      # Tailwind configuration
└── README.md               # Documentation

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Performance Tips

1. CSS: Tailwind removes unused styles in production
2. HTMX: Minimal JavaScript footprint (~14kb gzipped)
3. Server-side rendering: Reduces client-side processing
4. Lazy loading: Load data on demand with HTMX

Future Enhancements

• Pagination for large datasets
• Inline editing
• Drag-and-drop row reordering
• Export to CSV/Excel
• Advanced search
• Keyboard shortcuts
• Dark mode auto-detection
• WebSocket for real-time updates

License

ISC

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and questions, please open an issue on GitHub.

---

Built with ❤️ using Tailwind CSS, DaisyUI, and HTMX