Feature: DataTable Component

.cursor/rules/coding.mdc

@@ -36,7 +36,7 @@ Always follow the following recipe for implementing tasks:
    8. If the user approves submitting a PR, and before PR is submitted, the task is marked with "PR" in docs/project_plan.md. 
 4. PR submission:
    1. Do this only after the user approves submitting a PR.
-   2. Create a temporary markdown file with the PR description. 
+   2. Create a temporary markdown file in /tmp with the PR description. 
    3. Submit the PR, using the temporary markdown file.
    4. After PR ist submitted, report to the user and wait for manual instructions.
    5. The user will then review and merge the PR or ask for updates.

.cursor/rules/styling_rules.mdc

@@ -7,7 +7,6 @@ alwaysApply: false
 
 - Tailwind classes **only inside ui-kit**; no classes in consuming apps.
 - Always use shadcn ui components with the shadcn CLI (npx shadcn@latest <command>)
-- Initialitze 
 - Never override Shadcn component CSS directly; extend via wrapper props.
 - Colours/spacings via CSS vars mapped to DaisyUI tokens.
 - Use `@apply` sparingly inside `theme.css`, never in JSX.

docs/project_plan.md

@@ -54,9 +54,9 @@ A pragmatic breakdown into **four one‑week sprints** plus a preparatory **Spri
 
 | #   | Task                                                                                         | DoD                                                                                                                | Status |
 | --- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ |
-| 3.1 | Wrap **TanStack Table** into `DataTable` with pagination, resize.                            | Story with 50 rows paginates; Playwright test clicks next page.                                                    |        |
+| 3.1 | Wrap **TanStack Table** into `DataTable` with pagination, resize.                            | Story with 50 rows paginates; Playwright test clicks next page.                                                    | PR     |
 | 3.2 | Build **MainLayout** with TopBar + LeftNav + Breadcrumb.                                     | Storybook viewport test at 1280 & 1024 px shows responsive collapse.                                               |        |
-| 3.3 | Implement Toast system (`useToast`) + StatusBadge.                                           | Vitest renders Toast, axe‑core passes.                                                                             |        |
+| 3.3 | Implement Toast system (`useToast`) + StatusBadge.                                           | Vitest renders Toast, axe-core passes.                                                                             |        |
 | 3.4 | Sample showcase: login page + dashboard + customers table route.                             | E2E Playwright run (login → dashboard) green in CI.                                                                |        |
 | 3.5 | Add i18n infrastructure (`react-i18next`) with `en`, `de` locales.                           | Storybook toolbar allows locale switch; renders German labels.                                                     |        |
 | 3.6 | **SQLite seed script** – generate 100 customers & 2 users; hook `pnpm run seed` in showcase. | Script executes without error; Playwright test logs in with `admin` credentials, verifies 100 customers paginated. |        |

docs/task-planning/task-3.1-data-table.md

@@ -0,0 +1,71 @@
+# Task 3.1 - DataTable Component with TanStack Table
+
+## Overview
+
+This task involves implementing a DataTable component that wraps TanStack Table v8 with pagination and resize functionality. The component will be reusable across the application and will serve as the foundation for displaying tabular data.
+
+## Objectives
+
+- Create a DataTable component that wraps TanStack Table v8
+- Implement pagination functionality
+- Add column resize capabilities
+- Create a Storybook story with 50 rows to demonstrate pagination
+- Write Playwright tests to verify pagination functionality
+
+## Requirements
+
+1. The DataTable component should:
+
+   - Accept data as an array of objects
+   - Allow configuration of columns (width, header, accessor)
+   - Support client-side pagination
+   - Support column resizing
+   - Be fully accessible (keyboard navigation, screen reader support)
+   - Support sorting (optional)
+   - Support filtering (optional)
+
+2. The component should integrate with the existing UI Kit design system:
+   - Use existing Button components for pagination controls
+   - Match the design language of the UI Kit
+   - Support both light and dark themes
+
+## Tasks
+
+| Task Description                               | DoD (Definition of Done)                          | Status   |
+| ---------------------------------------------- | ------------------------------------------------- | -------- |
+| Install TanStack Table v8 and related packages | Packages installed and working in the project     | Complete |
+| Create basic DataTable component structure     | Component renders with basic column definitions   | Complete |
+| Implement column resizing                      | Users can resize columns by dragging              | Complete |
+| Add pagination functionality                   | Table paginates with configurable page size       | Complete |
+| Create Storybook story with 50 rows            | Story demonstrates pagination working properly    | Complete |
+| Write Playwright test for pagination           | Test verifies clicking next page works            | Complete |
+| Ensure accessibility compliance                | Component passes axe-core tests                   | Complete |
+| Add comprehensive documentation                | Component has full API documentation in Storybook | Complete |
+
+## Implementation Plan
+
+1. **Research and Setup**:
+
+   - Research TanStack Table v8 API and best practices
+   - Install required dependencies
+   - Set up basic component structure
+
+2. **Core Functionality**:
+
+   - Implement basic table rendering
+   - Add column configuration options
+   - Implement pagination hooks and UI
+   - Add column resize functionality
+
+3. **Testing and Documentation**:
+   - Create comprehensive Storybook stories
+   - Write Playwright tests for pagination
+   - Ensure accessibility compliance
+   - Document the component API and usage examples
+
+## Technical Considerations
+
+- TanStack Table v8 is headless, so we'll need to implement all UI elements. UI elements should be created using shadcn CLI and then wrapped in wrapper components; check styling_rules.mdc for details.
+- Pagination can be implemented using TanStack's built-in pagination hooks
+- Column resizing will require some custom CSS and event handling
+- We'll need to ensure the table is accessible to keyboard and screen reader users

package.json

@@ -50,6 +50,7 @@
     "@radix-ui/react-checkbox": "^1.3.1",
     "@radix-ui/react-radio-group": "^1.3.6",
     "@radix-ui/react-select": "^2.2.4",
+    "@tanstack/react-table": "^8.21.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },

packages/ui-kit/playwright/DataTable.spec.ts

@@ -0,0 +1,27 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('DataTable Component', () => {
+    test('pagination functionality works', async ({ page }) => {
+        // Navigate to the DataTable story in Storybook
+        await page.goto('http://localhost:6006/?path=/story/data-display-datatable--default');
+
+        // Wait for the table to be visible
+        await page.waitForSelector('table');
+
+        // Check if we're on page 1
+        await expect(page.locator('text=Page 1 of')).toBeVisible();
+
+        // Verify the first row contains "Name 1"
+        await expect(page.locator('tbody tr:first-child td:nth-child(2)')).toContainText('Name 1');
+
+        // Click the "Next page" button
+        await page.click('button[aria-label="Next page"]');
+
+        // Check if we're on page 2
+        await expect(page.locator('text=Page 2 of')).toBeVisible();
+
+        // Verify the first row on page 2 no longer contains "Name 1" and instead has "Name 11"
+        await expect(page.locator('tbody tr:first-child td:nth-child(2)')).not.toContainText('Name 1');
+        await expect(page.locator('tbody tr:first-child td:nth-child(2)')).toContainText('Name 11');
+    });
+});