@wakastellar/ui 4.0.0-dev.0 → 4.0.1

package/dist/components/DataTable/DataTable.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../button/index.cjs.js`),n=require(`../checkbox/index.cjs.js`),r=require(`./utils.cjs.js`),i=require(`./hooks/useDataTable.cjs.js`),a=require(`./hooks/useTableLayout.cjs.js`),o=require(`./hooks/useDataTableEdit.cjs.js`),s=require(`./DataTableToolbar.cjs.js`),c=require(`./DataTablePagination.cjs.js`),l=require(`./DataTableFilters.cjs.js`),u=require(`./DataTableEditCell.cjs.js`);let d=require(`react`);d=e.__toESM(d);let f=require(`lucide-react`),p=require(`react/jsx-runtime`),m=require(`@tanstack/react-table`),h=require(`react-i18next`);function g({data:e,columns:g,layout:_=`standard`,variant:v=`bordered`,density:y=`comfortable`,filters:b,filterPosition:x=`top`,toolbar:S,pagination:C,selection:w=!1,actions:ee,i18nNamespace:T,loading:E=!1,error:D,emptyState:O,headerSticky:k=!1,columnVisibilityToggle:te=!0,columnResize:ne=!1,enableExport:A=!1,enableImport:j=!1,enableReorder:re=!1,enableContextMenu:ie=!1,onRowClick:M,onRowDoubleClick:N,onSortingChange:P,onFiltersChange:F,onSelectionChange:I,className:L,tableId:R,virtualization:z,edit:B}){let{t:V}=(0,h.useTranslation)(T),{layout:ae,setLayout:oe,density:H,setDensity:U,densityClasses:W}=a.useTableLayout(_,y),G=d.useMemo(()=>{let e=[...g];return w&&e.unshift({id:`select`,header:({table:e})=>(0,p.jsx)(n.Checkbox,{checked:e.getIsAllPageRowsSelected(),onCheckedChange:t=>e.toggleAllPageRowsSelected(!!t),"aria-label":V(`datatable.selectAll`,{defaultValue:`Select all`})}),cell:({row:e})=>(0,p.jsx)(n.Checkbox,{checked:e.getIsSelected(),onCheckedChange:t=>e.toggleSelected(!!t),"aria-label":V(`datatable.selectRow`,{defaultValue:`Select row`})}),enableSorting:!1,enableHiding:!1}),e},[g,w,B,V]),{table:K,globalFilter:q,setGlobalFilter:J,selectedRows:se,resetFilters:ce,exportData:Y}=i.useDataTable({data:e,columns:G,pagination:C,tableId:R,onSortingChange:P,onFiltersChange:F,onSelectionChange:I}),[X,Z]=o.useDataTableEdit(K,{onSave:B?.onSave,onCancel:B?.onCancel,autoSave:B?.autoSave,autoSaveDelay:B?.autoSaveDelay});B?.editableColumns&&B.editableColumns.length>0&&G.push({id:`edit-actions`,header:()=>V(`datatable.actions`,{defaultValue:`Actions`}),cell:({row:e})=>X.editingRowId===e.id?(0,p.jsxs)(`div`,{className:`flex gap-1`,children:[(0,p.jsx)(t.Button,{size:`sm`,variant:`ghost`,onClick:()=>Z.saveEdit(),disabled:!X.hasChanges,children:V(`datatable.save`,{defaultValue:`Save`})}),(0,p.jsx)(t.Button,{size:`sm`,variant:`ghost`,onClick:()=>Z.cancelEdit(),children:V(`datatable.cancel`,{defaultValue:`Cancel`})})]}):(0,p.jsx)(t.Button,{size:`sm`,variant:`ghost`,onClick:()=>{console.log(`🔧 Starting edit for row:`,e.id,e.original),Z.startEdit(e.id,e.original)},children:V(`datatable.edit`,{defaultValue:`Edit`})}),enableSorting:!1,enableHiding:!1});let Q=d.useCallback(e=>{let t=Y();console.log(`Export`,e,t)},[Y]),$=d.useCallback(e=>{console.log(`Import`,e)},[]);return E?(0,p.jsx)(`div`,{className:`flex items-center justify-center h-64 border rounded-lg`,children:(0,p.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,p.jsx)(f.Loader2,{className:`h-8 w-8 animate-spin text-muted-foreground`}),(0,p.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:V(`datatable.loading`,{defaultValue:`Loading...`})})]})}):D?(0,p.jsx)(`div`,{className:`flex items-center justify-center h-64 border rounded-lg bg-destructive/10`,children:(0,p.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-destructive`,children:[(0,p.jsx)(f.AlertCircle,{className:`h-8 w-8`}),(0,p.jsx)(`p`,{className:`text-sm font-medium`,children:D})]})}):!e||e.length===0?(0,p.jsxs)(`div`,{className:`flex flex-col`,children:[S&&(0,p.jsx)(s.DataTableToolbar,{table:K,config:S,globalFilter:q,onGlobalFilterChange:J,density:H,onDensityChange:U,onExport:A?Q:void 0,onImport:j?$:void 0}),(0,p.jsx)(`div`,{className:`flex items-center justify-center h-64 border rounded-lg`,children:O||(0,p.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-muted-foreground`,children:[(0,p.jsx)(`p`,{className:`text-lg font-medium`,children:V(`datatable.noData`,{defaultValue:`No data`})}),(0,p.jsx)(`p`,{className:`text-sm`,children:V(`datatable.noDataDescription`,{defaultValue:`There are no results to display`})})]})})]}):(0,p.jsx)(`div`,{className:r.cn(`w-full`,L),children:(0,p.jsx)(`div`,{className:`space-y-4`,children:(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[S&&(0,p.jsx)(`div`,{className:`flex-1`,children:(0,p.jsx)(s.DataTableToolbar,{table:K,config:S,globalFilter:q,onGlobalFilterChange:J,density:H,onDensityChange:U,onExport:A?Q:void 0,onImport:j?$:void 0})}),b&&(0,p.jsx)(l.DataTableFilters,{table:K,filters:b,position:x,onFiltersChange:F})]}),(0,p.jsx)(`div`,{className:r.cn(`w-full overflow-auto`,{bordered:`border rounded-lg`,minimal:``,striped:`[&_tbody_tr:nth-child(even)]:bg-muted/50`,glass:`backdrop-blur-sm bg-background/80 border rounded-lg`}[v]),children:(0,p.jsxs)(`table`,{className:r.cn(`w-full caption-bottom text-sm`,W.table),children:[(0,p.jsx)(`thead`,{className:r.cn(k&&`sticky top-0 bg-background z-10`),children:K.getHeaderGroups().map(e=>(0,p.jsx)(`tr`,{className:`border-b`,children:e.headers.map(e=>(0,p.jsxs)(`th`,{className:r.cn(`text-left font-medium text-muted-foreground`,W.header,e.column.getCanSort()&&`cursor-pointer select-none hover:text-foreground`),onClick:e.column.getToggleSortingHandler(),children:[e.isPlaceholder?null:(0,m.flexRender)(e.column.columnDef.header,e.getContext()),e.column.getIsSorted()&&(0,p.jsx)(`span`,{className:`ml-2`,children:e.column.getIsSorted()===`asc`?`↑`:`↓`})]},e.id))},e.id))}),(0,p.jsx)(`tbody`,{children:K.getRowModel().rows.map(e=>(0,p.jsx)(`tr`,{className:r.cn(`border-b transition-colors`,M&&`cursor-pointer hover:bg-muted/50`,e.getIsSelected()&&`bg-muted`),onClick:()=>M?.(e.original),onDoubleClick:()=>N?.(e.original),children:e.getVisibleCells().map(t=>{let n=t.getValue(),i=t.column.id,a=e.id,o=X.editingRowId===a,s=B?.editableColumns?.find(e=>e.field===i);return s&&o?(0,p.jsx)(`td`,{className:r.cn(`align-middle`,W.cell),children:(0,p.jsx)(u.DataTableEditCell,{value:n,field:i,config:s.config,isEditing:o,onChange:e=>Z.updateField(i,e),onStartEdit:()=>Z.startEdit(a,e.original),onSave:()=>Z.saveEdit(),onCancel:()=>Z.cancelEdit()})},t.id):(0,p.jsx)(`td`,{className:r.cn(`align-middle`,W.cell),children:(0,m.flexRender)(t.column.columnDef.cell,t.getContext())},t.id)})},e.id))})]})}),C&&(0,p.jsx)(c.DataTablePagination,{table:K,pageSizeOptions:C.pageSizeOptions})]})})})}exports.DataTable=g;

package/dist/components/DataTable/DataTable.es.js

@@ -0,0 +1,215 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { Checkbox as t } from "../checkbox/index.es.js";
+import { cn as n } from "./utils.es.js";
+import { useDataTable as r } from "./hooks/useDataTable.es.js";
+import { useTableLayout as i } from "./hooks/useTableLayout.es.js";
+import { useDataTableEdit as a } from "./hooks/useDataTableEdit.es.js";
+import { DataTableToolbar as o } from "./DataTableToolbar.es.js";
+import { DataTablePagination as s } from "./DataTablePagination.es.js";
+import { DataTableFilters as c } from "./DataTableFilters.es.js";
+import { DataTableEditCell as l } from "./DataTableEditCell.es.js";
+import * as u from "react";
+import { AlertCircle as d, Loader2 as f } from "lucide-react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { flexRender as g } from "@tanstack/react-table";
+import { useTranslation as _ } from "react-i18next";
+//#region src/components/DataTable/DataTable.tsx
+function v({ data: v, columns: y, layout: ee = "standard", variant: b = "bordered", density: x = "comfortable", filters: S, filterPosition: C = "top", toolbar: w, pagination: T, selection: E = !1, actions: te, i18nNamespace: D, loading: O = !1, error: k, emptyState: A, headerSticky: j = !1, columnVisibilityToggle: ne = !0, columnResize: re = !1, enableExport: M = !1, enableImport: N = !1, enableReorder: ie = !1, enableContextMenu: ae = !1, onRowClick: P, onRowDoubleClick: F, onSortingChange: I, onFiltersChange: L, onSelectionChange: oe, className: R, tableId: z, virtualization: se, edit: B }) {
+	let { t: V } = _(D), { layout: ce, setLayout: le, density: H, setDensity: U, densityClasses: W } = i(ee, x), G = u.useMemo(() => {
+		let e = [...y];
+		return E && e.unshift({
+			id: "select",
+			header: ({ table: e }) => /* @__PURE__ */ m(t, {
+				checked: e.getIsAllPageRowsSelected(),
+				onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
+				"aria-label": V("datatable.selectAll", { defaultValue: "Select all" })
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ m(t, {
+				checked: e.getIsSelected(),
+				onCheckedChange: (t) => e.toggleSelected(!!t),
+				"aria-label": V("datatable.selectRow", { defaultValue: "Select row" })
+			}),
+			enableSorting: !1,
+			enableHiding: !1
+		}), e;
+	}, [
+		y,
+		E,
+		B,
+		V
+	]), { table: K, globalFilter: q, setGlobalFilter: J, selectedRows: ue, resetFilters: de, exportData: Y } = r({
+		data: v,
+		columns: G,
+		pagination: T,
+		tableId: z,
+		onSortingChange: I,
+		onFiltersChange: L,
+		onSelectionChange: oe
+	}), [X, Z] = a(K, {
+		onSave: B?.onSave,
+		onCancel: B?.onCancel,
+		autoSave: B?.autoSave,
+		autoSaveDelay: B?.autoSaveDelay
+	});
+	B?.editableColumns && B.editableColumns.length > 0 && G.push({
+		id: "edit-actions",
+		header: () => V("datatable.actions", { defaultValue: "Actions" }),
+		cell: ({ row: t }) => X.editingRowId === t.id ? /* @__PURE__ */ h("div", {
+			className: "flex gap-1",
+			children: [/* @__PURE__ */ m(e, {
+				size: "sm",
+				variant: "ghost",
+				onClick: () => Z.saveEdit(),
+				disabled: !X.hasChanges,
+				children: V("datatable.save", { defaultValue: "Save" })
+			}), /* @__PURE__ */ m(e, {
+				size: "sm",
+				variant: "ghost",
+				onClick: () => Z.cancelEdit(),
+				children: V("datatable.cancel", { defaultValue: "Cancel" })
+			})]
+		}) : /* @__PURE__ */ m(e, {
+			size: "sm",
+			variant: "ghost",
+			onClick: () => {
+				console.log("🔧 Starting edit for row:", t.id, t.original), Z.startEdit(t.id, t.original);
+			},
+			children: V("datatable.edit", { defaultValue: "Edit" })
+		}),
+		enableSorting: !1,
+		enableHiding: !1
+	});
+	let Q = u.useCallback((e) => {
+		let t = Y();
+		console.log("Export", e, t);
+	}, [Y]), $ = u.useCallback((e) => {
+		console.log("Import", e);
+	}, []);
+	return O ? /* @__PURE__ */ m("div", {
+		className: "flex items-center justify-center h-64 border rounded-lg",
+		children: /* @__PURE__ */ h("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [/* @__PURE__ */ m(f, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ m("p", {
+				className: "text-sm text-muted-foreground",
+				children: V("datatable.loading", { defaultValue: "Loading..." })
+			})]
+		})
+	}) : k ? /* @__PURE__ */ m("div", {
+		className: "flex items-center justify-center h-64 border rounded-lg bg-destructive/10",
+		children: /* @__PURE__ */ h("div", {
+			className: "flex flex-col items-center gap-2 text-destructive",
+			children: [/* @__PURE__ */ m(d, { className: "h-8 w-8" }), /* @__PURE__ */ m("p", {
+				className: "text-sm font-medium",
+				children: k
+			})]
+		})
+	}) : !v || v.length === 0 ? /* @__PURE__ */ h("div", {
+		className: "flex flex-col",
+		children: [w && /* @__PURE__ */ m(o, {
+			table: K,
+			config: w,
+			globalFilter: q,
+			onGlobalFilterChange: J,
+			density: H,
+			onDensityChange: U,
+			onExport: M ? Q : void 0,
+			onImport: N ? $ : void 0
+		}), /* @__PURE__ */ m("div", {
+			className: "flex items-center justify-center h-64 border rounded-lg",
+			children: A || /* @__PURE__ */ h("div", {
+				className: "flex flex-col items-center gap-2 text-muted-foreground",
+				children: [/* @__PURE__ */ m("p", {
+					className: "text-lg font-medium",
+					children: V("datatable.noData", { defaultValue: "No data" })
+				}), /* @__PURE__ */ m("p", {
+					className: "text-sm",
+					children: V("datatable.noDataDescription", { defaultValue: "There are no results to display" })
+				})]
+			})
+		})]
+	}) : /* @__PURE__ */ m("div", {
+		className: n("w-full", R),
+		children: /* @__PURE__ */ m("div", {
+			className: "space-y-4",
+			children: /* @__PURE__ */ h(p, { children: [
+				/* @__PURE__ */ h("div", {
+					className: "flex items-center justify-between gap-4",
+					children: [w && /* @__PURE__ */ m("div", {
+						className: "flex-1",
+						children: /* @__PURE__ */ m(o, {
+							table: K,
+							config: w,
+							globalFilter: q,
+							onGlobalFilterChange: J,
+							density: H,
+							onDensityChange: U,
+							onExport: M ? Q : void 0,
+							onImport: N ? $ : void 0
+						})
+					}), S && /* @__PURE__ */ m(c, {
+						table: K,
+						filters: S,
+						position: C,
+						onFiltersChange: L
+					})]
+				}),
+				/* @__PURE__ */ m("div", {
+					className: n("w-full overflow-auto", {
+						bordered: "border rounded-lg",
+						minimal: "",
+						striped: "[&_tbody_tr:nth-child(even)]:bg-muted/50",
+						glass: "backdrop-blur-sm bg-background/80 border rounded-lg"
+					}[b]),
+					children: /* @__PURE__ */ h("table", {
+						className: n("w-full caption-bottom text-sm", W.table),
+						children: [/* @__PURE__ */ m("thead", {
+							className: n(j && "sticky top-0 bg-background z-10"),
+							children: K.getHeaderGroups().map((e) => /* @__PURE__ */ m("tr", {
+								className: "border-b",
+								children: e.headers.map((e) => /* @__PURE__ */ h("th", {
+									className: n("text-left font-medium text-muted-foreground", W.header, e.column.getCanSort() && "cursor-pointer select-none hover:text-foreground"),
+									onClick: e.column.getToggleSortingHandler(),
+									children: [e.isPlaceholder ? null : g(e.column.columnDef.header, e.getContext()), e.column.getIsSorted() && /* @__PURE__ */ m("span", {
+										className: "ml-2",
+										children: e.column.getIsSorted() === "asc" ? "↑" : "↓"
+									})]
+								}, e.id))
+							}, e.id))
+						}), /* @__PURE__ */ m("tbody", { children: K.getRowModel().rows.map((e) => /* @__PURE__ */ m("tr", {
+							className: n("border-b transition-colors", P && "cursor-pointer hover:bg-muted/50", e.getIsSelected() && "bg-muted"),
+							onClick: () => P?.(e.original),
+							onDoubleClick: () => F?.(e.original),
+							children: e.getVisibleCells().map((t) => {
+								let r = t.getValue(), i = t.column.id, a = e.id, o = X.editingRowId === a, s = B?.editableColumns?.find((e) => e.field === i);
+								return s && o ? /* @__PURE__ */ m("td", {
+									className: n("align-middle", W.cell),
+									children: /* @__PURE__ */ m(l, {
+										value: r,
+										field: i,
+										config: s.config,
+										isEditing: o,
+										onChange: (e) => Z.updateField(i, e),
+										onStartEdit: () => Z.startEdit(a, e.original),
+										onSave: () => Z.saveEdit(),
+										onCancel: () => Z.cancelEdit()
+									})
+								}, t.id) : /* @__PURE__ */ m("td", {
+									className: n("align-middle", W.cell),
+									children: g(t.column.columnDef.cell, t.getContext())
+								}, t.id);
+							})
+						}, e.id)) })]
+					})
+				}),
+				T && /* @__PURE__ */ m(s, {
+					table: K,
+					pageSizeOptions: T.pageSizeOptions
+				})
+			] })
+		})
+	});
+}
+//#endregion
+export { v as DataTable };

package/dist/components/DataTable/DataTableAdvanced.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`../button/index.cjs.js`),n=require(`../checkbox/index.cjs.js`),r=require(`./utils.cjs.js`),i=require(`./hooks/useTableLayout.cjs.js`),a=require(`./hooks/useDataTableEdit.cjs.js`),o=require(`./DataTableToolbar.cjs.js`),s=require(`./DataTablePagination.cjs.js`),c=require(`./DataTableFilters.cjs.js`),l=require(`./DataTableEditCell.cjs.js`),u=require(`./hooks/useDataTableAdvanced.cjs.js`),d=require(`./hooks/useDataTableVirtualization.cjs.js`),f=require(`./hooks/useDataTableExport.cjs.js`),ee=require(`./hooks/useDataTableImport.cjs.js`),p=require(`./hooks/useDataTableTheme.cjs.js`);let m=require(`react`);m=e.__toESM(m);let h=require(`lucide-react`),g=require(`react/jsx-runtime`),_=require(`@tanstack/react-table`),te=require(`react-i18next`);function v({data:e,columns:v,layout:ne=`standard`,variant:re=`bordered`,density:ie=`comfortable`,filters:y,filterPosition:ae=`top`,toolbar:b,pagination:x,selection:S=!1,actions:oe,i18nNamespace:se,loading:ce=!1,error:C,emptyState:le,headerSticky:w=!1,columnVisibilityToggle:ue=!0,columnResize:de=!1,columnOrder:fe,grouping:T,rowExpansion:E,virtualization:D,sortMode:pe=`multiple`,enableExport:O=!1,enableImport:k=!1,enableReorder:A=!1,enableContextMenu:me=!1,onRowClick:j,onRowDoubleClick:M,onSortingChange:he,onFiltersChange:N,onSelectionChange:ge,onColumnOrderChange:_e,onExpandedChange:ve,onGroupingChange:ye,className:be,tableId:P,edit:F,theme:I,performance:L}){let{t:R}=(0,te.useTranslation)(se),z=m.useRef(null),{layout:xe,setLayout:Se,density:B,setDensity:V,densityClasses:Ce}=i.useTableLayout(ne,ie),{theme:we,variantClasses:Te,densityClasses:H,customStyles:Ee,getThemedClass:De,getThemedStyles:U}=p.useDataTableTheme({theme:I,variant:re,density:B}),W=m.useMemo(()=>{let e=[...v];return S&&e.unshift({id:`select`,header:({table:e})=>(0,g.jsx)(n.Checkbox,{checked:e.getIsAllPageRowsSelected(),onCheckedChange:t=>e.toggleAllPageRowsSelected(!!t),"aria-label":R(`datatable.selectAll`,{defaultValue:`Select all`})}),cell:({row:e})=>(0,g.jsx)(n.Checkbox,{checked:e.getIsSelected(),onCheckedChange:t=>e.toggleSelected(!!t),"aria-label":R(`datatable.selectRow`,{defaultValue:`Select row`})}),enableSorting:!1,enableHiding:!1,size:50}),E?.enabled&&e.unshift({id:`expand`,header:()=>null,cell:({row:e})=>e.getCanExpand()?(0,g.jsx)(t.Button,{variant:`ghost`,size:`sm`,onClick:()=>e.toggleExpanded(),className:`h-8 w-8 p-0`,children:e.getIsExpanded()?(0,g.jsx)(h.ChevronDown,{className:`h-4 w-4`}):(0,g.jsx)(h.ChevronRight,{className:`h-4 w-4`})}):null,enableSorting:!1,enableHiding:!1,size:50}),A&&e.unshift({id:`reorder`,header:()=>null,cell:()=>(0,g.jsx)(t.Button,{variant:`ghost`,size:`sm`,className:`h-8 w-8 p-0 cursor-move`,children:(0,g.jsx)(h.GripVertical,{className:`h-4 w-4`})}),enableSorting:!1,enableHiding:!1,size:50}),e},[v,S,E,A,R]),{table:G,sorting:Oe,setSorting:ke,columnFilters:Ae,setColumnFilters:je,columnVisibility:Me,setColumnVisibility:Ne,columnOrder:Pe,setColumnOrder:Fe,expanded:Ie,setExpanded:Le,grouping:Re,setGrouping:ze,rowSelection:Be,setRowSelection:Ve,globalFilter:K,setGlobalFilter:q,pagination:He,setPagination:Ue,selectedRows:We,resetFilters:Ge,resetSelection:Ke,resetAll:qe,exportData:Je,getGroupedData:Ye,getExpandedData:Xe,toggleGrouping:Ze,clearGrouping:Qe,toggleRowExpansion:$e,expandAll:et,collapseAll:tt}=u.useDataTableAdvanced({data:e,columns:W,pagination:x,tableId:P,onSortingChange:he,onFiltersChange:N,onSelectionChange:ge,onColumnOrderChange:_e,onExpandedChange:ve,onGroupingChange:ye,grouping:T,virtualization:D,sortMode:pe,performance:L}),{isVirtualized:nt,virtualItems:rt,totalSize:it,scrollToIndex:at,scrollToOffset:ot}=d.useDataTableVirtualization({data:e,virtualization:D,containerRef:z}),{exportData:J,exportAll:st,exportSelected:ct}=f.useDataTableExport({data:e,columns:W,exportConfig:typeof O==`object`?O:void 0}),{importWithUI:Y,supportedFormats:lt}=ee.useDataTableImport({importConfig:typeof k==`object`?k:void 0}),[X,Z]=a.useDataTableEdit(G,{onSave:F?.onSave,onCancel:F?.onCancel,autoSave:F?.autoSave,autoSaveDelay:F?.autoSaveDelay});F?.editableColumns&&F.editableColumns.length>0&&W.push({id:`edit-actions`,header:()=>R(`datatable.actions`,{defaultValue:`Actions`}),cell:({row:e})=>X.editingRowId===e.id?(0,g.jsxs)(`div`,{className:`flex gap-1`,children:[(0,g.jsx)(t.Button,{size:`sm`,variant:`ghost`,onClick:()=>Z.saveEdit(),disabled:!X.hasChanges,children:R(`datatable.save`,{defaultValue:`Save`})}),(0,g.jsx)(t.Button,{size:`sm`,variant:`ghost`,onClick:()=>Z.cancelEdit(),children:R(`datatable.cancel`,{defaultValue:`Cancel`})})]}):(0,g.jsx)(t.Button,{size:`sm`,variant:`ghost`,onClick:()=>Z.startEdit(e.id,e.original),children:R(`datatable.edit`,{defaultValue:`Edit`})}),enableSorting:!1,enableHiding:!1});let Q=m.useCallback(async e=>{try{await J(e)}catch(e){console.error(`Erreur lors de l'export:`,e)}},[J]),$=m.useCallback(async()=>{try{await Y()}catch(e){console.error(`Erreur lors de l'import:`,e)}},[Y]);return ce?(0,g.jsx)(`div`,{className:`flex items-center justify-center h-64 border rounded-lg`,children:(0,g.jsxs)(`div`,{className:`flex flex-col items-center gap-2`,children:[(0,g.jsx)(h.Loader2,{className:`h-8 w-8 animate-spin text-muted-foreground`}),(0,g.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:R(`datatable.loading`,{defaultValue:`Loading...`})})]})}):C?(0,g.jsx)(`div`,{className:`flex items-center justify-center h-64 border rounded-lg bg-destructive/10`,children:(0,g.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-destructive`,children:[(0,g.jsx)(h.AlertCircle,{className:`h-8 w-8`}),(0,g.jsx)(`p`,{className:`text-sm font-medium`,children:C})]})}):!e||e.length===0?(0,g.jsxs)(`div`,{className:`flex flex-col`,children:[b&&(0,g.jsx)(o.DataTableToolbar,{table:G,config:b,globalFilter:K,onGlobalFilterChange:q,density:B,onDensityChange:V,onExport:O?Q:void 0,onImport:k?$:void 0}),(0,g.jsx)(`div`,{className:`flex items-center justify-center h-64 border rounded-lg`,children:le||(0,g.jsxs)(`div`,{className:`flex flex-col items-center gap-2 text-muted-foreground`,children:[(0,g.jsx)(`p`,{className:`text-lg font-medium`,children:R(`datatable.noData`,{defaultValue:`No data`})}),(0,g.jsx)(`p`,{className:`text-sm`,children:R(`datatable.noDataDescription`,{defaultValue:`There are no results to display`})})]})})]}):(0,g.jsxs)(`div`,{className:r.cn(`w-full`,be),style:U(),children:[(0,g.jsxs)(`div`,{className:`flex items-center justify-between gap-4`,children:[b&&(0,g.jsx)(`div`,{className:`flex-1`,children:(0,g.jsx)(o.DataTableToolbar,{table:G,config:b,globalFilter:K,onGlobalFilterChange:q,density:B,onDensityChange:V,onExport:O?Q:void 0,onImport:k?$:void 0})}),y&&(0,g.jsx)(c.DataTableFilters,{table:G,filters:y,position:ae,onFiltersChange:N})]}),nt?(0,g.jsx)(`div`,{ref:z,className:`h-full overflow-auto`,style:{height:D?.containerHeight||600},children:(0,g.jsxs)(`table`,{className:r.cn(`w-full caption-bottom text-sm`,H.table),style:U(),children:[(0,g.jsx)(`thead`,{className:r.cn(w&&`sticky top-0 bg-background z-10`),children:G.getHeaderGroups().map(e=>(0,g.jsx)(`tr`,{className:`border-b`,children:e.headers.map(e=>(0,g.jsxs)(`th`,{className:r.cn(`text-left font-medium text-muted-foreground`,H.header,e.column.getCanSort()&&`cursor-pointer select-none hover:text-foreground`),onClick:e.column.getToggleSortingHandler(),style:{width:e.getSize(),minWidth:e.column.columnDef.minSize,maxWidth:e.column.columnDef.maxSize},children:[e.isPlaceholder?null:(0,_.flexRender)(e.column.columnDef.header,e.getContext()),e.column.getIsSorted()&&(0,g.jsx)(`span`,{className:`ml-2`,children:e.column.getIsSorted()===`asc`?`↑`:`↓`})]},e.id))},e.id))}),(0,g.jsx)(`tbody`,{children:rt.map(e=>{let t=(T?.columns?.length?G.getGroupedRowModel().rows:E?.enabled?G.getExpandedRowModel().rows:G.getRowModel().rows)[e.index];return t?(0,g.jsx)(`tr`,{className:r.cn(`border-b transition-colors`,j&&`cursor-pointer hover:bg-muted/50`,t.getIsSelected()&&`bg-muted`),onClick:()=>j?.(t.original),onDoubleClick:()=>M?.(t.original),style:{position:`absolute`,top:e.start,left:0,width:`100%`,height:e.size},children:t.getVisibleCells().map(e=>{let n=e.getValue(),i=e.column.id,a=t.id,o=X.editingRowId===a,s=F?.editableColumns?.find(e=>e.field===i);return s&&o?(0,g.jsx)(`td`,{className:r.cn(`align-middle`,H.cell),children:(0,g.jsx)(l.DataTableEditCell,{value:n,field:i,config:s.config,isEditing:o,onChange:e=>Z.updateField(i,e),onStartEdit:()=>Z.startEdit(a,t.original),onSave:()=>Z.saveEdit(),onCancel:()=>Z.cancelEdit()})},e.id):(0,g.jsx)(`td`,{className:r.cn(`align-middle`,H.cell),children:(0,_.flexRender)(e.column.columnDef.cell,e.getContext())},e.id)})},t.id):null})})]})}):(0,g.jsx)(`div`,{className:r.cn(`w-full overflow-auto`,Te),children:(0,g.jsxs)(`table`,{className:r.cn(`w-full caption-bottom text-sm`,H.table),style:U(),children:[(0,g.jsx)(`thead`,{className:r.cn(w&&`sticky top-0 bg-background z-10`),children:G.getHeaderGroups().map(e=>(0,g.jsx)(`tr`,{className:`border-b`,children:e.headers.map(e=>(0,g.jsxs)(`th`,{className:r.cn(`text-left font-medium text-muted-foreground`,H.header,e.column.getCanSort()&&`cursor-pointer select-none hover:text-foreground`),onClick:e.column.getToggleSortingHandler(),style:{width:e.getSize(),minWidth:e.column.columnDef.minSize,maxWidth:e.column.columnDef.maxSize},children:[e.isPlaceholder?null:(0,_.flexRender)(e.column.columnDef.header,e.getContext()),e.column.getIsSorted()&&(0,g.jsx)(`span`,{className:`ml-2`,children:e.column.getIsSorted()===`asc`?`↑`:`↓`})]},e.id))},e.id))}),(0,g.jsx)(`tbody`,{children:(T?.columns?.length?G.getGroupedRowModel().rows:E?.enabled?G.getExpandedRowModel().rows:G.getRowModel().rows).map((e,t)=>{let n=e.getIsGrouped(),i=e.getIsExpanded();return(0,g.jsxs)(m.Fragment,{children:[(0,g.jsx)(`tr`,{className:r.cn(`border-b transition-colors`,j&&`cursor-pointer hover:bg-muted/50`,e.getIsSelected()&&`bg-muted`,n&&`bg-muted/30 font-medium`),onClick:()=>j?.(e.original),onDoubleClick:()=>M?.(e.original),children:e.getVisibleCells().map(t=>{let a=t.getValue(),o=t.column.id,s=e.id,c=X.editingRowId===s,u=F?.editableColumns?.find(e=>e.field===o);return u&&c?(0,g.jsx)(`td`,{className:r.cn(`align-middle`,H.cell),children:(0,g.jsx)(l.DataTableEditCell,{value:a,field:o,config:u.config,isEditing:c,onChange:e=>Z.updateField(o,e),onStartEdit:()=>Z.startEdit(s,e.original),onSave:()=>Z.saveEdit(),onCancel:()=>Z.cancelEdit()})},t.id):(0,g.jsx)(`td`,{className:r.cn(`align-middle`,H.cell),children:n?(0,g.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,g.jsx)(`button`,{onClick:t=>{t.stopPropagation(),e.toggleExpanded()},className:`p-1 hover:bg-muted rounded`,children:i?`▼`:`▶`}),(0,g.jsxs)(`span`,{className:`font-medium`,children:[t.getValue(),` (`,e.subRows.length,` éléments)`]})]}):(0,_.flexRender)(t.column.columnDef.cell,t.getContext())},t.id)})}),E?.enabled&&i&&(0,g.jsx)(`tr`,{children:(0,g.jsx)(`td`,{colSpan:W.length,className:`p-0`,children:(0,g.jsx)(`div`,{className:`border-b`,children:E.renderExpanded?.(e.original)})})},`${e.id}-expanded-${t}`)]},`${e.id}-${t}`)})})]})}),x&&(0,g.jsx)(s.DataTablePagination,{table:G,pageSizeOptions:x.pageSizeOptions})]})}exports.DataTableAdvanced=v;

package/dist/components/DataTable/DataTableAdvanced.es.js

@@ -0,0 +1,356 @@
+"use client";
+"use client";
+import { Button as e } from "../button/index.es.js";
+import { Checkbox as t } from "../checkbox/index.es.js";
+import { cn as n } from "./utils.es.js";
+import { useTableLayout as r } from "./hooks/useTableLayout.es.js";
+import { useDataTableEdit as i } from "./hooks/useDataTableEdit.es.js";
+import { DataTableToolbar as a } from "./DataTableToolbar.es.js";
+import { DataTablePagination as o } from "./DataTablePagination.es.js";
+import { DataTableFilters as s } from "./DataTableFilters.es.js";
+import { DataTableEditCell as c } from "./DataTableEditCell.es.js";
+import { useDataTableAdvanced as l } from "./hooks/useDataTableAdvanced.es.js";
+import { useDataTableVirtualization as u } from "./hooks/useDataTableVirtualization.es.js";
+import { useDataTableExport as ee } from "./hooks/useDataTableExport.es.js";
+import { useDataTableImport as te } from "./hooks/useDataTableImport.es.js";
+import { useDataTableTheme as ne } from "./hooks/useDataTableTheme.es.js";
+import * as d from "react";
+import { AlertCircle as re, ChevronDown as ie, ChevronRight as f, GripVertical as ae, Loader2 as oe } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { flexRender as h } from "@tanstack/react-table";
+import { useTranslation as se } from "react-i18next";
+//#region src/components/DataTable/DataTableAdvanced.tsx
+function g({ data: g, columns: _, layout: ce = "standard", variant: le = "bordered", density: ue = "comfortable", filters: v, filterPosition: y = "top", toolbar: b, pagination: x, selection: S = !1, actions: de, i18nNamespace: fe, loading: pe = !1, error: C, emptyState: me, headerSticky: w = !1, columnVisibilityToggle: he = !0, columnResize: ge = !1, columnOrder: _e, grouping: T, rowExpansion: E, virtualization: D, sortMode: ve = "multiple", enableExport: O = !1, enableImport: k = !1, enableReorder: A = !1, enableContextMenu: ye = !1, onRowClick: j, onRowDoubleClick: M, onSortingChange: N, onFiltersChange: P, onSelectionChange: F, onColumnOrderChange: be, onExpandedChange: xe, onGroupingChange: Se, className: Ce, tableId: I, edit: L, theme: we, performance: Te }) {
+	let { t: R } = se(fe), z = d.useRef(null), { layout: Ee, setLayout: De, density: B, setDensity: V, densityClasses: Oe } = r(ce, ue), { theme: ke, variantClasses: Ae, densityClasses: H, customStyles: je, getThemedClass: Me, getThemedStyles: U } = ne({
+		theme: we,
+		variant: le,
+		density: B
+	}), W = d.useMemo(() => {
+		let n = [..._];
+		return S && n.unshift({
+			id: "select",
+			header: ({ table: e }) => /* @__PURE__ */ p(t, {
+				checked: e.getIsAllPageRowsSelected(),
+				onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
+				"aria-label": R("datatable.selectAll", { defaultValue: "Select all" })
+			}),
+			cell: ({ row: e }) => /* @__PURE__ */ p(t, {
+				checked: e.getIsSelected(),
+				onCheckedChange: (t) => e.toggleSelected(!!t),
+				"aria-label": R("datatable.selectRow", { defaultValue: "Select row" })
+			}),
+			enableSorting: !1,
+			enableHiding: !1,
+			size: 50
+		}), E?.enabled && n.unshift({
+			id: "expand",
+			header: () => null,
+			cell: ({ row: t }) => t.getCanExpand() ? /* @__PURE__ */ p(e, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => t.toggleExpanded(),
+				className: "h-8 w-8 p-0",
+				children: t.getIsExpanded() ? /* @__PURE__ */ p(ie, { className: "h-4 w-4" }) : /* @__PURE__ */ p(f, { className: "h-4 w-4" })
+			}) : null,
+			enableSorting: !1,
+			enableHiding: !1,
+			size: 50
+		}), A && n.unshift({
+			id: "reorder",
+			header: () => null,
+			cell: () => /* @__PURE__ */ p(e, {
+				variant: "ghost",
+				size: "sm",
+				className: "h-8 w-8 p-0 cursor-move",
+				children: /* @__PURE__ */ p(ae, { className: "h-4 w-4" })
+			}),
+			enableSorting: !1,
+			enableHiding: !1,
+			size: 50
+		}), n;
+	}, [
+		_,
+		S,
+		E,
+		A,
+		R
+	]), { table: G, sorting: Ne, setSorting: Pe, columnFilters: Fe, setColumnFilters: Ie, columnVisibility: Le, setColumnVisibility: Re, columnOrder: ze, setColumnOrder: Be, expanded: Ve, setExpanded: He, grouping: Ue, setGrouping: We, rowSelection: Ge, setRowSelection: Ke, globalFilter: K, setGlobalFilter: q, pagination: qe, setPagination: Je, selectedRows: Ye, resetFilters: Xe, resetSelection: Ze, resetAll: Qe, exportData: $e, getGroupedData: et, getExpandedData: tt, toggleGrouping: nt, clearGrouping: rt, toggleRowExpansion: it, expandAll: at, collapseAll: ot } = l({
+		data: g,
+		columns: W,
+		pagination: x,
+		tableId: I,
+		onSortingChange: N,
+		onFiltersChange: P,
+		onSelectionChange: F,
+		onColumnOrderChange: be,
+		onExpandedChange: xe,
+		onGroupingChange: Se,
+		grouping: T,
+		virtualization: D,
+		sortMode: ve,
+		performance: Te
+	}), { isVirtualized: st, virtualItems: ct, totalSize: lt, scrollToIndex: ut, scrollToOffset: dt } = u({
+		data: g,
+		virtualization: D,
+		containerRef: z
+	}), { exportData: J, exportAll: ft, exportSelected: pt } = ee({
+		data: g,
+		columns: W,
+		exportConfig: typeof O == "object" ? O : void 0
+	}), { importWithUI: Y, supportedFormats: mt } = te({ importConfig: typeof k == "object" ? k : void 0 }), [X, Z] = i(G, {
+		onSave: L?.onSave,
+		onCancel: L?.onCancel,
+		autoSave: L?.autoSave,
+		autoSaveDelay: L?.autoSaveDelay
+	});
+	L?.editableColumns && L.editableColumns.length > 0 && W.push({
+		id: "edit-actions",
+		header: () => R("datatable.actions", { defaultValue: "Actions" }),
+		cell: ({ row: t }) => X.editingRowId === t.id ? /* @__PURE__ */ m("div", {
+			className: "flex gap-1",
+			children: [/* @__PURE__ */ p(e, {
+				size: "sm",
+				variant: "ghost",
+				onClick: () => Z.saveEdit(),
+				disabled: !X.hasChanges,
+				children: R("datatable.save", { defaultValue: "Save" })
+			}), /* @__PURE__ */ p(e, {
+				size: "sm",
+				variant: "ghost",
+				onClick: () => Z.cancelEdit(),
+				children: R("datatable.cancel", { defaultValue: "Cancel" })
+			})]
+		}) : /* @__PURE__ */ p(e, {
+			size: "sm",
+			variant: "ghost",
+			onClick: () => Z.startEdit(t.id, t.original),
+			children: R("datatable.edit", { defaultValue: "Edit" })
+		}),
+		enableSorting: !1,
+		enableHiding: !1
+	});
+	let Q = d.useCallback(async (e) => {
+		try {
+			await J(e);
+		} catch (e) {
+			console.error("Erreur lors de l'export:", e);
+		}
+	}, [J]), $ = d.useCallback(async () => {
+		try {
+			await Y();
+		} catch (e) {
+			console.error("Erreur lors de l'import:", e);
+		}
+	}, [Y]);
+	return pe ? /* @__PURE__ */ p("div", {
+		className: "flex items-center justify-center h-64 border rounded-lg",
+		children: /* @__PURE__ */ m("div", {
+			className: "flex flex-col items-center gap-2",
+			children: [/* @__PURE__ */ p(oe, { className: "h-8 w-8 animate-spin text-muted-foreground" }), /* @__PURE__ */ p("p", {
+				className: "text-sm text-muted-foreground",
+				children: R("datatable.loading", { defaultValue: "Loading..." })
+			})]
+		})
+	}) : C ? /* @__PURE__ */ p("div", {
+		className: "flex items-center justify-center h-64 border rounded-lg bg-destructive/10",
+		children: /* @__PURE__ */ m("div", {
+			className: "flex flex-col items-center gap-2 text-destructive",
+			children: [/* @__PURE__ */ p(re, { className: "h-8 w-8" }), /* @__PURE__ */ p("p", {
+				className: "text-sm font-medium",
+				children: C
+			})]
+		})
+	}) : !g || g.length === 0 ? /* @__PURE__ */ m("div", {
+		className: "flex flex-col",
+		children: [b && /* @__PURE__ */ p(a, {
+			table: G,
+			config: b,
+			globalFilter: K,
+			onGlobalFilterChange: q,
+			density: B,
+			onDensityChange: V,
+			onExport: O ? Q : void 0,
+			onImport: k ? $ : void 0
+		}), /* @__PURE__ */ p("div", {
+			className: "flex items-center justify-center h-64 border rounded-lg",
+			children: me || /* @__PURE__ */ m("div", {
+				className: "flex flex-col items-center gap-2 text-muted-foreground",
+				children: [/* @__PURE__ */ p("p", {
+					className: "text-lg font-medium",
+					children: R("datatable.noData", { defaultValue: "No data" })
+				}), /* @__PURE__ */ p("p", {
+					className: "text-sm",
+					children: R("datatable.noDataDescription", { defaultValue: "There are no results to display" })
+				})]
+			})
+		})]
+	}) : /* @__PURE__ */ m("div", {
+		className: n("w-full", Ce),
+		style: U(),
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [b && /* @__PURE__ */ p("div", {
+					className: "flex-1",
+					children: /* @__PURE__ */ p(a, {
+						table: G,
+						config: b,
+						globalFilter: K,
+						onGlobalFilterChange: q,
+						density: B,
+						onDensityChange: V,
+						onExport: O ? Q : void 0,
+						onImport: k ? $ : void 0
+					})
+				}), v && /* @__PURE__ */ p(s, {
+					table: G,
+					filters: v,
+					position: y,
+					onFiltersChange: P
+				})]
+			}),
+			st ? /* @__PURE__ */ p("div", {
+				ref: z,
+				className: "h-full overflow-auto",
+				style: { height: D?.containerHeight || 600 },
+				children: /* @__PURE__ */ m("table", {
+					className: n("w-full caption-bottom text-sm", H.table),
+					style: U(),
+					children: [/* @__PURE__ */ p("thead", {
+						className: n(w && "sticky top-0 bg-background z-10"),
+						children: G.getHeaderGroups().map((e) => /* @__PURE__ */ p("tr", {
+							className: "border-b",
+							children: e.headers.map((e) => /* @__PURE__ */ m("th", {
+								className: n("text-left font-medium text-muted-foreground", H.header, e.column.getCanSort() && "cursor-pointer select-none hover:text-foreground"),
+								onClick: e.column.getToggleSortingHandler(),
+								style: {
+									width: e.getSize(),
+									minWidth: e.column.columnDef.minSize,
+									maxWidth: e.column.columnDef.maxSize
+								},
+								children: [e.isPlaceholder ? null : h(e.column.columnDef.header, e.getContext()), e.column.getIsSorted() && /* @__PURE__ */ p("span", {
+									className: "ml-2",
+									children: e.column.getIsSorted() === "asc" ? "↑" : "↓"
+								})]
+							}, e.id))
+						}, e.id))
+					}), /* @__PURE__ */ p("tbody", { children: ct.map((e) => {
+						let t = (T?.columns?.length ? G.getGroupedRowModel().rows : E?.enabled ? G.getExpandedRowModel().rows : G.getRowModel().rows)[e.index];
+						return t ? /* @__PURE__ */ p("tr", {
+							className: n("border-b transition-colors", j && "cursor-pointer hover:bg-muted/50", t.getIsSelected() && "bg-muted"),
+							onClick: () => j?.(t.original),
+							onDoubleClick: () => M?.(t.original),
+							style: {
+								position: "absolute",
+								top: e.start,
+								left: 0,
+								width: "100%",
+								height: e.size
+							},
+							children: t.getVisibleCells().map((e) => {
+								let r = e.getValue(), i = e.column.id, a = t.id, o = X.editingRowId === a, s = L?.editableColumns?.find((e) => e.field === i);
+								return s && o ? /* @__PURE__ */ p("td", {
+									className: n("align-middle", H.cell),
+									children: /* @__PURE__ */ p(c, {
+										value: r,
+										field: i,
+										config: s.config,
+										isEditing: o,
+										onChange: (e) => Z.updateField(i, e),
+										onStartEdit: () => Z.startEdit(a, t.original),
+										onSave: () => Z.saveEdit(),
+										onCancel: () => Z.cancelEdit()
+									})
+								}, e.id) : /* @__PURE__ */ p("td", {
+									className: n("align-middle", H.cell),
+									children: h(e.column.columnDef.cell, e.getContext())
+								}, e.id);
+							})
+						}, t.id) : null;
+					}) })]
+				})
+			}) : /* @__PURE__ */ p("div", {
+				className: n("w-full overflow-auto", Ae),
+				children: /* @__PURE__ */ m("table", {
+					className: n("w-full caption-bottom text-sm", H.table),
+					style: U(),
+					children: [/* @__PURE__ */ p("thead", {
+						className: n(w && "sticky top-0 bg-background z-10"),
+						children: G.getHeaderGroups().map((e) => /* @__PURE__ */ p("tr", {
+							className: "border-b",
+							children: e.headers.map((e) => /* @__PURE__ */ m("th", {
+								className: n("text-left font-medium text-muted-foreground", H.header, e.column.getCanSort() && "cursor-pointer select-none hover:text-foreground"),
+								onClick: e.column.getToggleSortingHandler(),
+								style: {
+									width: e.getSize(),
+									minWidth: e.column.columnDef.minSize,
+									maxWidth: e.column.columnDef.maxSize
+								},
+								children: [e.isPlaceholder ? null : h(e.column.columnDef.header, e.getContext()), e.column.getIsSorted() && /* @__PURE__ */ p("span", {
+									className: "ml-2",
+									children: e.column.getIsSorted() === "asc" ? "↑" : "↓"
+								})]
+							}, e.id))
+						}, e.id))
+					}), /* @__PURE__ */ p("tbody", { children: (T?.columns?.length ? G.getGroupedRowModel().rows : E?.enabled ? G.getExpandedRowModel().rows : G.getRowModel().rows).map((e, t) => {
+						let r = e.getIsGrouped(), i = e.getIsExpanded();
+						return /* @__PURE__ */ m(d.Fragment, { children: [/* @__PURE__ */ p("tr", {
+							className: n("border-b transition-colors", j && "cursor-pointer hover:bg-muted/50", e.getIsSelected() && "bg-muted", r && "bg-muted/30 font-medium"),
+							onClick: () => j?.(e.original),
+							onDoubleClick: () => M?.(e.original),
+							children: e.getVisibleCells().map((t) => {
+								let a = t.getValue(), o = t.column.id, s = e.id, l = X.editingRowId === s, u = L?.editableColumns?.find((e) => e.field === o);
+								return u && l ? /* @__PURE__ */ p("td", {
+									className: n("align-middle", H.cell),
+									children: /* @__PURE__ */ p(c, {
+										value: a,
+										field: o,
+										config: u.config,
+										isEditing: l,
+										onChange: (e) => Z.updateField(o, e),
+										onStartEdit: () => Z.startEdit(s, e.original),
+										onSave: () => Z.saveEdit(),
+										onCancel: () => Z.cancelEdit()
+									})
+								}, t.id) : /* @__PURE__ */ p("td", {
+									className: n("align-middle", H.cell),
+									children: r ? /* @__PURE__ */ m("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ p("button", {
+											onClick: (t) => {
+												t.stopPropagation(), e.toggleExpanded();
+											},
+											className: "p-1 hover:bg-muted rounded",
+											children: i ? "▼" : "▶"
+										}), /* @__PURE__ */ m("span", {
+											className: "font-medium",
+											children: [
+												t.getValue(),
+												" (",
+												e.subRows.length,
+												" éléments)"
+											]
+										})]
+									}) : h(t.column.columnDef.cell, t.getContext())
+								}, t.id);
+							})
+						}), E?.enabled && i && /* @__PURE__ */ p("tr", { children: /* @__PURE__ */ p("td", {
+							colSpan: W.length,
+							className: "p-0",
+							children: /* @__PURE__ */ p("div", {
+								className: "border-b",
+								children: E.renderExpanded?.(e.original)
+							})
+						}) }, `${e.id}-expanded-${t}`)] }, `${e.id}-${t}`);
+					}) })]
+				})
+			}),
+			x && /* @__PURE__ */ p(o, {
+				table: G,
+				pageSizeOptions: x.pageSizeOptions
+			})
+		]
+	});
+}
+//#endregion
+export { g as DataTableAdvanced };

package/dist/components/DataTable/DataTableColumnResizer.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs.js`),t=require(`./utils.cjs.js`);let n=require(`react`);n=e.__toESM(n);let r=require(`react/jsx-runtime`);function i({header:e,column:i,className:a}){let[o,s]=n.useState(!1),c=n.useCallback(e=>{e.preventDefault(),e.stopPropagation(),s(!0);let t=e.clientX,n=i.getSize(),r=e=>{let r=e.clientX-t,a=Math.max(50,n+r);i.setSize(a)},a=()=>{s(!1),document.removeEventListener(`mousemove`,r),document.removeEventListener(`mouseup`,a)};document.addEventListener(`mousemove`,r),document.addEventListener(`mouseup`,a)},[i]);return i.getCanResize()?(0,r.jsx)(`div`,{className:t.cn(`absolute right-0 top-0 h-full w-1 cursor-col-resize bg-border opacity-0 hover:opacity-100 transition-opacity`,o&&`opacity-100 bg-primary`,a),onMouseDown:c,style:{width:`4px`,marginRight:`-2px`}}):null}exports.DataTableColumnResizer=i;

package/dist/components/DataTable/DataTableColumnResizer.d.ts

@@ -1,8 +1,9 @@
+import { Header, Column } from "@tanstack/react-table";
 /**
  * Composant pour le redimensionnement des colonnes
  */
 export declare function DataTableColumnResizer<TData>({ header, column, className, }: {
-    header: any;
-    column: any;
+    header: Header<TData, unknown>;
+    column: Column<TData, unknown>;
     className?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/DataTable/DataTableColumnResizer.es.js

@@ -0,0 +1,28 @@
+"use client";
+"use client";
+import { cn as e } from "./utils.es.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/DataTable/DataTableColumnResizer.tsx
+function r({ header: r, column: i, className: a }) {
+	let [o, s] = t.useState(!1), c = t.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), s(!0);
+		let t = e.clientX, n = i.getSize(), r = (e) => {
+			let r = e.clientX - t, a = Math.max(50, n + r);
+			i.setSize(a);
+		}, a = () => {
+			s(!1), document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", a);
+		};
+		document.addEventListener("mousemove", r), document.addEventListener("mouseup", a);
+	}, [i]);
+	return i.getCanResize() ? /* @__PURE__ */ n("div", {
+		className: e("absolute right-0 top-0 h-full w-1 cursor-col-resize bg-border opacity-0 hover:opacity-100 transition-opacity", o && "opacity-100 bg-primary", a),
+		onMouseDown: c,
+		style: {
+			width: "4px",
+			marginRight: "-2px"
+		}
+	}) : null;
+}
+//#endregion
+export { r as DataTableColumnResizer };