@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,406 @@
+"use client"
+
+import * as React from "react"
+import { flexRender } from "@tanstack/react-table"
+import { Loader2, AlertCircle } from "lucide-react"
+import { DataTableProps } from "./types"
+import { useDataTable } from "./hooks/useDataTable"
+import { useTableLayout } from "./hooks/useTableLayout"
+import { useDataTableEdit } from "./hooks/useDataTableEdit"
+import { DataTableToolbar } from "./DataTableToolbar"
+import { DataTablePagination } from "./DataTablePagination"
+import { DataTableFilters } from "./DataTableFilters"
+import { DataTableEditCell } from "./DataTableEditCell"
+import { Checkbox } from "../checkbox"
+import { Button } from "../button"
+import { cn } from "./utils"
+import { useTranslation } from "react-i18next"
+
+/**
+ * Composant DataTable ultra-complet basé sur TanStack Table v8
+ * 
+ * @example
+ * ```tsx
+ * <DataTable
+ *   data={users}
+ *   columns={userColumns}
+ *   layout="standard"
+ *   pagination={{ mode: "client", pageSize: 10 }}
+ *   selection
+ *   enableExport
+ * />
+ * ```
+ */
+export function DataTable<TData>({
+  data,
+  columns: initialColumns,
+  layout: layoutProp = "standard",
+  variant = "bordered",
+  density: densityProp = "comfortable",
+  filters,
+  filterPosition = "top",
+  toolbar,
+  pagination: paginationConfig,
+  selection = false,
+  actions,
+  i18nNamespace,
+  loading = false,
+  error,
+  emptyState,
+  headerSticky = false,
+  columnVisibilityToggle = true,
+  columnResize = false,
+  enableExport = false,
+  enableImport = false,
+  enableReorder = false,
+  enableContextMenu = false,
+  onRowClick,
+  onRowDoubleClick,
+  onSortingChange,
+  onFiltersChange,
+  onSelectionChange,
+  className,
+  tableId,
+  virtualization,
+  edit,
+}: DataTableProps<TData>) {
+  const { t } = useTranslation(i18nNamespace)
+
+  // Hook de layout
+  const {
+    layout,
+    setLayout,
+    density,
+    setDensity,
+    densityClasses,
+  } = useTableLayout(layoutProp, densityProp)
+
+  // Colonnes avec sélection et édition si activées
+  const columns = React.useMemo(() => {
+    const cols = [...initialColumns]
+
+    // Ajouter colonne de sélection si activée
+    if (selection) {
+      const selectionColumn = {
+        id: "select",
+        header: ({ table }: any) => (
+          <Checkbox
+            checked={table.getIsAllPageRowsSelected()}
+            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+            aria-label={t("datatable.selectAll", { defaultValue: "Select all" })}
+          />
+        ),
+        cell: ({ row }: any) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(value) => row.toggleSelected(!!value)}
+            aria-label={t("datatable.selectRow", { defaultValue: "Select row" })}
+          />
+        ),
+        enableSorting: false,
+        enableHiding: false,
+      }
+      cols.unshift(selectionColumn)
+    }
+
+    return cols
+  }, [initialColumns, selection, edit, t])
+
+  // Hook principal du DataTable
+  const {
+    table,
+    globalFilter,
+    setGlobalFilter,
+    selectedRows,
+    resetFilters,
+    exportData,
+  } = useDataTable({
+    data,
+    columns,
+    pagination: paginationConfig,
+    tableId,
+    onSortingChange,
+    onFiltersChange,
+    onSelectionChange,
+  })
+
+  // Hook d'édition si configuré
+  const [editState, editActions] = useDataTableEdit(table, {
+    onSave: edit?.onSave,
+    onCancel: edit?.onCancel,
+    autoSave: edit?.autoSave,
+    autoSaveDelay: edit?.autoSaveDelay,
+  })
+
+  // Ajouter colonne d'actions d'édition directement dans les colonnes
+  if (edit?.editableColumns && edit.editableColumns.length > 0) {
+    const editColumn = {
+      id: "edit-actions",
+      header: () => t("datatable.actions", { defaultValue: "Actions" }),
+      cell: ({ row }: any) => {
+        const isEditing = editState.editingRowId === row.id
+        
+        if (isEditing) {
+          return (
+            <div className="flex gap-1">
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => editActions.saveEdit()}
+                disabled={!editState.hasChanges}
+              >
+                {t("datatable.save", { defaultValue: "Save" })}
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                onClick={() => editActions.cancelEdit()}
+              >
+                {t("datatable.cancel", { defaultValue: "Cancel" })}
+              </Button>
+            </div>
+          )
+        }
+        
+        return (
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => {
+              console.log("🔧 Starting edit for row:", row.id, row.original)
+              editActions.startEdit(row.id, row.original)
+            }}
+          >
+            {t("datatable.edit", { defaultValue: "Edit" })}
+          </Button>
+        )
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }
+    columns.push(editColumn)
+  }
+
+  // Utiliser la table originale pour l'instant
+  const displayTable = table
+
+  // Handler d'export
+  const handleExport = React.useCallback((format: string) => {
+    const dataToExport = exportData()
+    console.log("Export", format, dataToExport)
+  }, [exportData])
+
+  // Handler d'import
+  const handleImport = React.useCallback((file: File) => {
+    console.log("Import", file)
+  }, [])
+
+  // Classes CSS selon variant
+  const variantClasses = {
+    bordered: "border rounded-lg",
+    minimal: "",
+    striped: "[&_tbody_tr:nth-child(even)]:bg-muted/50",
+    glass: "backdrop-blur-sm bg-background/80 border rounded-lg",
+  }
+
+  // Si loading
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64 border rounded-lg">
+        <div className="flex flex-col items-center gap-2">
+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">
+            {t("datatable.loading", { defaultValue: "Loading..." })}
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  // Si erreur
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-64 border rounded-lg bg-destructive/10">
+        <div className="flex flex-col items-center gap-2 text-destructive">
+          <AlertCircle className="h-8 w-8" />
+          <p className="text-sm font-medium">{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Si pas de données
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex flex-col">
+        {/* Toolbar même sans données */}
+        {toolbar && (
+          <DataTableToolbar
+            table={table}
+            config={toolbar}
+            globalFilter={globalFilter}
+            onGlobalFilterChange={setGlobalFilter}
+            density={density}
+            onDensityChange={setDensity}
+            onExport={enableExport ? handleExport : undefined}
+            onImport={enableImport ? handleImport : undefined}
+          />
+        )}
+        
+        <div className="flex items-center justify-center h-64 border rounded-lg">
+          {emptyState || (
+            <div className="flex flex-col items-center gap-2 text-muted-foreground">
+              <p className="text-lg font-medium">
+                {t("datatable.noData", { defaultValue: "No data" })}
+              </p>
+              <p className="text-sm">
+                {t("datatable.noDataDescription", { defaultValue: "There are no results to display" })}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Layout avec filtres selon la position
+  const renderWithFilters = () => {
+    const tableContent = (
+      <>
+        {/* Toolbar avec filtres intégrés */}
+        <div className="flex items-center justify-between gap-4">
+          {toolbar && (
+            <div className="flex-1">
+              <DataTableToolbar
+                table={table}
+                config={toolbar}
+                globalFilter={globalFilter}
+                onGlobalFilterChange={setGlobalFilter}
+                density={density}
+                onDensityChange={setDensity}
+                onExport={enableExport ? handleExport : undefined}
+                onImport={enableImport ? handleImport : undefined}
+              />
+            </div>
+          )}
+
+          {/* Bouton filtres */}
+          {filters && (
+            <DataTableFilters
+              table={table}
+              filters={filters}
+              position={filterPosition}
+              onFiltersChange={onFiltersChange}
+            />
+          )}
+        </div>
+
+        {/* Table */}
+        <div className={cn("w-full overflow-auto", variantClasses[variant])}>
+          <table className={cn("w-full caption-bottom text-sm", densityClasses.table)}>
+            <thead className={cn(headerSticky && "sticky top-0 bg-background z-10")}>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id} className="border-b">
+                  {headerGroup.headers.map((header) => (
+                    <th
+                      key={header.id}
+                      className={cn(
+                        "text-left font-medium text-muted-foreground",
+                        densityClasses.header,
+                        header.column.getCanSort() && "cursor-pointer select-none hover:text-foreground"
+                      )}
+                      onClick={header.column.getToggleSortingHandler()}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                      {header.column.getIsSorted() && (
+                        <span className="ml-2">
+                          {header.column.getIsSorted() === "asc" ? "↑" : "↓"}
+                        </span>
+                      )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => (
+                <tr
+                  key={row.id}
+                  className={cn(
+                    "border-b transition-colors",
+                    onRowClick && "cursor-pointer hover:bg-muted/50",
+                    row.getIsSelected() && "bg-muted"
+                  )}
+                  onClick={() => onRowClick?.(row.original)}
+                  onDoubleClick={() => onRowDoubleClick?.(row.original)}
+                >
+                  {row.getVisibleCells().map((cell) => {
+                    const cellValue = cell.getValue()
+                    const columnId = cell.column.id
+                    const rowId = row.id
+                    const isEditing = editState.editingRowId === rowId
+                    
+                    // Vérifier si cette colonne est éditable
+                    const editableColumn = edit?.editableColumns?.find(
+                      col => col.field === columnId
+                    )
+                    
+                    if (editableColumn && isEditing) {
+                      return (
+                        <td
+                          key={cell.id}
+                          className={cn("align-middle", densityClasses.cell)}
+                        >
+                          <DataTableEditCell
+                            value={cellValue}
+                            field={columnId as keyof TData}
+                            config={editableColumn.config}
+                            isEditing={isEditing}
+                            onChange={(value) => editActions.updateField(columnId as keyof TData, value)}
+                            onStartEdit={() => editActions.startEdit(rowId, row.original)}
+                            onSave={() => editActions.saveEdit()}
+                            onCancel={() => editActions.cancelEdit()}
+                          />
+                        </td>
+                      )
+                    }
+                    
+                    return (
+                      <td
+                        key={cell.id}
+                        className={cn("align-middle", densityClasses.cell)}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    )
+                  })}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        {paginationConfig && (
+          <DataTablePagination
+            table={table}
+            pageSizeOptions={paginationConfig.pageSizeOptions}
+          />
+        )}
+      </>
+    )
+
+    return <div className="space-y-4">{tableContent}</div>
+  }
+
+  return (
+    <div className={cn("w-full", className)}>
+      {renderWithFilters()}
+    </div>
+  )
+}