@wakastellar/ui 2.0.0 → 2.1.0

package/src/components/DataTable/DataTableAdvanced.tsx

@@ -0,0 +1,720 @@
+"use client"
+
+import * as React from "react"
+import { flexRender } from "@tanstack/react-table"
+import { Loader2, AlertCircle, ChevronDown, ChevronRight, GripVertical } from "lucide-react"
+import { DataTableProps } from "./types"
+import { useDataTableAdvanced } from "./hooks/useDataTableAdvanced"
+import { useDataTableVirtualization } from "./hooks/useDataTableVirtualization"
+import { useDataTableExport } from "./hooks/useDataTableExport"
+import { useDataTableImport } from "./hooks/useDataTableImport"
+import { useDataTableTheme } from "./hooks/useDataTableTheme"
+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 avec toutes les fonctionnalités avancées
+ * 
+ * @example
+ * ```tsx
+ * <DataTableAdvanced
+ *   data={users}
+ *   columns={userColumns}
+ *   layout="standard"
+ *   variant="bordered"
+ *   density="comfortable"
+ *   selection="multiple"
+ *   grouping={{ columns: ["department"], showTotals: true }}
+ *   rowExpansion={{ enabled: true, renderExpanded: (row) => <UserDetails user={row} /> }}
+ *   virtualization={{ type: "dynamic", estimatedItemHeight: 60 }}
+ *   columnResize={{ enabled: true, mode: "onChange" }}
+ *   enableExport={{ formats: ["csv", "xlsx", "json"] }}
+ *   enableImport={{ accept: ".csv,.xlsx,.json" }}
+ *   theme={{
+ *     colors: { primary: "#3b82f6", secondary: "#64748b" },
+ *     spacing: { md: "1.5rem" }
+ *   }}
+ * />
+ * ```
+ */
+export function DataTableAdvanced<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,
+  columnOrder: columnOrderConfig,
+  grouping,
+  rowExpansion,
+  virtualization,
+  sortMode = "multiple",
+  enableExport = false,
+  enableImport = false,
+  enableReorder = false,
+  enableContextMenu = false,
+  onRowClick,
+  onRowDoubleClick,
+  onSortingChange,
+  onFiltersChange,
+  onSelectionChange,
+  onColumnOrderChange,
+  onExpandedChange,
+  onGroupingChange,
+  className,
+  tableId,
+  edit,
+  theme,
+  performance,
+}: DataTableProps<TData>) {
+  const { t } = useTranslation(i18nNamespace)
+  const containerRef = React.useRef<HTMLDivElement>(null)
+
+  // Hook de layout
+  const {
+    layout,
+    setLayout,
+    density,
+    setDensity,
+    densityClasses,
+  } = useTableLayout(layoutProp, densityProp)
+
+  // Hook de thème
+  const {
+    theme: mergedTheme,
+    variantClasses,
+    densityClasses: themeDensityClasses,
+    customStyles,
+    getThemedClass,
+    getThemedStyles,
+  } = useDataTableTheme({ theme, variant, density })
+
+
+  // Colonnes avec fonctionnalités avancé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,
+        size: 50,
+      }
+      cols.unshift(selectionColumn)
+    }
+
+    // Ajouter colonne d'expansion si activée
+    if (rowExpansion?.enabled) {
+      const expansionColumn = {
+        id: "expand",
+        header: () => null,
+        cell: ({ row }: any) => {
+          if (!row.getCanExpand()) return null
+          
+          return (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => row.toggleExpanded()}
+              className="h-8 w-8 p-0"
+            >
+              {row.getIsExpanded() ? (
+                <ChevronDown className="h-4 w-4" />
+              ) : (
+                <ChevronRight className="h-4 w-4" />
+              )}
+            </Button>
+          )
+        },
+        enableSorting: false,
+        enableHiding: false,
+        size: 50,
+      }
+      cols.unshift(expansionColumn)
+    }
+
+    // Ajouter colonne de réordonnancement si activée
+    if (enableReorder) {
+      const reorderColumn = {
+        id: "reorder",
+        header: () => null,
+        cell: () => (
+          <Button variant="ghost" size="sm" className="h-8 w-8 p-0 cursor-move">
+            <GripVertical className="h-4 w-4" />
+          </Button>
+        ),
+        enableSorting: false,
+        enableHiding: false,
+        size: 50,
+      }
+      cols.unshift(reorderColumn)
+    }
+
+    return cols
+  }, [initialColumns, selection, rowExpansion, enableReorder, t])
+
+  // Debug: Vérifier les props de groupement et expansion
+  console.log("DataTableAdvanced - props:", {
+    grouping,
+    rowExpansion,
+    dataLength: data.length
+  })
+
+  // Hook principal avancé
+  const {
+    table,
+    sorting,
+    setSorting,
+    columnFilters,
+    setColumnFilters,
+    columnVisibility,
+    setColumnVisibility,
+    columnOrder,
+    setColumnOrder,
+    expanded,
+    setExpanded,
+    grouping: groupingState,
+    setGrouping,
+    rowSelection,
+    setRowSelection,
+    globalFilter,
+    setGlobalFilter,
+    pagination,
+    setPagination,
+    selectedRows,
+    resetFilters,
+    resetSelection,
+    resetAll,
+    exportData,
+    getGroupedData,
+    getExpandedData,
+    toggleGrouping,
+    clearGrouping,
+    toggleRowExpansion,
+    expandAll,
+    collapseAll,
+  } = useDataTableAdvanced({
+    data,
+    columns,
+    pagination: paginationConfig,
+    tableId,
+    onSortingChange,
+    onFiltersChange,
+    onSelectionChange,
+    onColumnOrderChange,
+    onExpandedChange,
+    onGroupingChange,
+    grouping,
+    virtualization,
+    sortMode,
+    performance,
+  })
+
+  // Hook de virtualisation
+  const {
+    isVirtualized,
+    virtualItems,
+    totalSize,
+    scrollToIndex,
+    scrollToOffset,
+  } = useDataTableVirtualization({
+    data,
+    virtualization,
+    containerRef,
+  })
+
+
+  // Hook d'export
+  const { exportData: exportDataFn, exportAll, exportSelected } = useDataTableExport({
+    data,
+    columns,
+    exportConfig: typeof enableExport === "object" ? enableExport : undefined,
+  })
+
+  // Hook d'import
+  const { importWithUI, supportedFormats } = useDataTableImport({
+    importConfig: typeof enableImport === "object" ? enableImport : undefined,
+  })
+
+  // 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
+  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={() => editActions.startEdit(row.id, row.original)}
+          >
+            {t("datatable.edit", { defaultValue: "Edit" })}
+          </Button>
+        )
+      },
+      enableSorting: false,
+      enableHiding: false,
+    }
+    columns.push(editColumn)
+  }
+
+  // Handler d'export
+  const handleExport = React.useCallback(async (format: string) => {
+    try {
+      await exportDataFn(format)
+    } catch (error) {
+      console.error("Erreur lors de l'export:", error)
+    }
+  }, [exportDataFn])
+
+  // Handler d'import
+  const handleImport = React.useCallback(async () => {
+    try {
+      const importedData = await importWithUI()
+      console.log("Données importées:", importedData)
+    } catch (error) {
+      console.error("Erreur lors de l'import:", error)
+    }
+  }, [importWithUI])
+
+  // 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>
+    )
+  }
+
+  // Rendu du tableau avec virtualisation
+  const renderTable = () => {
+    if (isVirtualized) {
+      return (
+        <div
+          ref={containerRef}
+          className="h-full overflow-auto"
+          style={{ height: virtualization?.containerHeight || 600 }}
+        >
+          <table 
+            className={cn("w-full caption-bottom text-sm", themeDensityClasses.table)}
+            style={getThemedStyles()}
+          >
+            <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",
+                        themeDensityClasses.header,
+                        header.column.getCanSort() && "cursor-pointer select-none hover:text-foreground"
+                      )}
+                      onClick={header.column.getToggleSortingHandler()}
+                      style={{
+                        width: header.getSize(),
+                        minWidth: header.column.columnDef.minSize,
+                        maxWidth: header.column.columnDef.maxSize,
+                      }}
+                    >
+                      {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>
+              {virtualItems.map((virtualItem) => {
+                const rows = grouping?.columns?.length ? table.getGroupedRowModel().rows : 
+                  rowExpansion?.enabled ? table.getExpandedRowModel().rows : 
+                  table.getRowModel().rows
+                const row = rows[virtualItem.index]
+                if (!row) return null
+
+                return (
+                  <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)}
+                    style={{
+                      position: "absolute",
+                      top: virtualItem.start,
+                      left: 0,
+                      width: "100%",
+                      height: virtualItem.size,
+                    }}
+                  >
+                    {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", themeDensityClasses.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", themeDensityClasses.cell)}
+                        >
+                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                        </td>
+                      )
+                    })}
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )
+    }
+
+    // Rendu standard
+    return (
+      <div className={cn("w-full overflow-auto", variantClasses)}>
+        <table 
+          className={cn("w-full caption-bottom text-sm", themeDensityClasses.table)}
+          style={getThemedStyles()}
+        >
+          <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",
+                      themeDensityClasses.header,
+                      header.column.getCanSort() && "cursor-pointer select-none hover:text-foreground"
+                    )}
+                    onClick={header.column.getToggleSortingHandler()}
+                    style={{
+                      width: header.getSize(),
+                      minWidth: header.column.columnDef.minSize,
+                      maxWidth: header.column.columnDef.maxSize,
+                    }}
+                  >
+                    {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>
+            {(() => {
+              const rows = grouping?.columns?.length ? table.getGroupedRowModel().rows : 
+                rowExpansion?.enabled ? table.getExpandedRowModel().rows : 
+                table.getRowModel().rows
+              
+              console.log("DataTableAdvanced - rendering rows:", {
+                totalRows: rows.length,
+                grouping: grouping?.columns,
+                rowExpansion: rowExpansion?.enabled,
+                firstRow: rows[0]
+              })
+              
+              return rows.map((row, index) => {
+                const isGroupRow = row.getIsGrouped()
+                const isExpanded = row.getIsExpanded()
+                
+                return (
+                  <React.Fragment key={`${row.id}-${index}`}>
+                    <tr
+                      className={cn(
+                        "border-b transition-colors",
+                        onRowClick && "cursor-pointer hover:bg-muted/50",
+                        row.getIsSelected() && "bg-muted",
+                        isGroupRow && "bg-muted/30 font-medium"
+                      )}
+                      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", themeDensityClasses.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", themeDensityClasses.cell)}
+                        >
+                          {isGroupRow ? (
+                            <div className="flex items-center gap-2">
+                              <button
+                                onClick={(e) => {
+                                  e.stopPropagation()
+                                  row.toggleExpanded()
+                                }}
+                                className="p-1 hover:bg-muted rounded"
+                              >
+                                {isExpanded ? "▼" : "▶"}
+                              </button>
+                              <span className="font-medium">
+                                {cell.getValue() as string} ({row.subRows.length} éléments)
+                              </span>
+                            </div>
+                          ) : (
+                            flexRender(cell.column.columnDef.cell, cell.getContext())
+                          )}
+                        </td>
+                      )
+                    })}
+                    </tr>
+                    {/* Ligne d'expansion */}
+                    {rowExpansion?.enabled && isExpanded && (
+                      <tr key={`${row.id}-expanded-${index}`}>
+                        <td colSpan={columns.length} className="p-0">
+                          <div className="border-b">
+                            {rowExpansion.renderExpanded?.(row.original)}
+                          </div>
+                        </td>
+                      </tr>
+                    )}
+                  </React.Fragment>
+                )
+              })
+            })()}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("w-full", className)} style={getThemedStyles()}>
+      {/* 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 */}
+      {renderTable()}
+
+      {/* Pagination */}
+      {paginationConfig && (
+        <DataTablePagination
+          table={table}
+          pageSizeOptions={paginationConfig.pageSizeOptions}
+        />
+      )}
+    </div>
+  )
+}