Summary

Design and implement a generic, composable DataTable component for @datum-cloud/datum-ui that replaces the removed tightly-coupled data-table implementation. The new component should follow the existing two-layer architecture (shadcn primitives → datum wrapper) and provide a declarative, type-safe API for rendering tabular data across multiple consumer applications.

Motivation

Currently, each consumer application (Cloud Portal, Staff Portal, etc.) implements its own data table solution, leading to:

• Code duplication and maintenance overhead
• Inconsistent user experience and styling across products
• Difficulty in sharing improvements and bug fixes
• Increased development time for new features requiring tabular data display

A unified, composable DataTable component in @datum-cloud/datum-ui will:

• Enable code reuse across Cloud Portal, Staff Portal, and future consumers
• Ensure consistent behavior and visual design
• Reduce development time for tabular data features
• Provide a single source of truth for data table functionality
• Allow flexible configuration for different use cases

Requirements

Core Features

• Sorting - Support column sorting (ascending/descending)
• Filtering - Allow filtering by multiple columns with various filter types
• Search - Global and column-specific search capabilities
• Pagination - Handle pagination for large datasets
• Server-side Rendering - Support fetching data from backend APIs
• Client-side Rendering - Support in-memory data processing
• Type Safety - Full TypeScript support with generic types
• Responsive Design - Work seamlessly on desktop, tablet, and mobile screens

Customization & Styling

• Easy Style Customization - Components should be highly customizable without requiring deep knowledge of internal structure
• Cell Rendering - Support custom cell content and styling through render functions
• Header Customization - Allow custom header content, icons, and styling
• Pagination Styling - Customizable pagination UI (buttons, styling, layout)
• Search/Filter UI - Flexible search and filter component styling and layout
• Row Styling - Support custom row classes and conditional styling
• Theme Integration - Work seamlessly with design tokens and theme system
• Slot-based Composition - Use named slots for header, footer, filters, pagination