tanstack-shadcn-table/dist/chunks/drag-drop-4f252360.js

A powerful, feature-rich React table component built on top of TanStack Table v8 with shadcn/ui styling. Optimized bundle size with 55% reduction through peer dependencies.

import{jsx as e,jsxs as n,Fragment as i}from"react/jsx-runtime";import t,{lazy as s,Suspense as l}from"react";import{flexRender as r}from"@tanstack/react-table";import{T as a,a as o,B as c}from"./ui-components-bd9e2eb9.js";import{SortAsc as d,SortDesc as m,ArrowDownUp as u,MenuIcon as f}from"lucide-react";import{c as h}from"./utils-49e5594d.js";import{C as p}from"./column-resizing-61ff2f59.js";function b({header:t,TableHeadComponent:s=o,colClassName:l="",enableColumnResizing:a=!1}){return e(s,{colSpan:t.colSpan,style:{width:t.getSize(),minWidth:t.column.columnDef.minSize||100,maxWidth:t.column.columnDef.maxSize||"none"},onClick:()=>{t.column.getCanSort()&&t.column.columnDef.enableSorting&&t.column.toggleSorting()},className:h(t.column.columnDef.headerClassName,t.column.columnDef.className,l,!!t.column.columnDef.enableSorting&&"cursor-pointer select-none","relative",a&&"group"),children:t.isPlaceholder?null:n(i,{children:[e("div",{className:"flex items-center justify-between gap-2 w-full",children:n("div",{className:"flex items-center gap-1 flex-1 min-w-0",children:[e("span",{className:"truncate",children:r(t.column.columnDef.header,t.getContext())}),(!!t.column.columnDef.enableSorting&&{asc:e(d,{className:"inline size-4 flex-shrink-0"}),desc:e(m,{className:"inline size-4 flex-shrink-0"})}[t.column.getIsSorted()])??e(u,{className:"inline size-4 flex-shrink-0"})]})}),a&&e(p,{header:t})]})})}function C({header:t,TableHeadComponent:s=o,colClassName:l="",enableColumnResizing:a=!1,useSortableHook:b,CSSUtil:C}){const N="selection"===t.column.id,{attributes:g,isDragging:k,listeners:x,setNodeRef:S,transform:z}=b({id:t.column.id,disabled:N}),v={opacity:k?.8:1,position:"relative",transform:N?void 0:C.Translate.toString(z),transition:N?void 0:k?"none":"transform 0.05s ease-out",zIndex:k?1:0,width:t.getSize(),minWidth:t.column.columnDef.minSize||100,maxWidth:t.column.columnDef.maxSize||"none"};return e(s,{colSpan:t.colSpan,ref:S,style:v,onClick:()=>{t.column.getCanSort()&&t.column.columnDef.enableSorting&&t.column.toggleSorting()},className:h(t.column.columnDef.headerClassName,t.column.columnDef.className,l,!!t.column.columnDef.enableSorting&&"cursor-pointer select-none","relative",a&&"group"),children:t.isPlaceholder?null:n(i,{children:[n("div",{className:"flex items-center justify-between gap-2 w-full",children:[n("div",{className:"flex items-center gap-1 flex-1 min-w-0",children:[e("span",{className:"truncate",children:r(t.column.columnDef.header,t.getContext())}),(!!t.column.columnDef.enableSorting&&{asc:e(d,{className:"inline size-4 flex-shrink-0"}),desc:e(m,{className:"inline size-4 flex-shrink-0"})}[t.column.getIsSorted()])??e(u,{className:"inline size-4 flex-shrink-0"})]}),"selection"!==t.column.id&&(t.column.columnDef.reorderable??!0)&&n(c,{variant:"ghost",className:"size-6 p-0 flex-shrink-0",...g,...x,children:[e("span",{className:"sr-only",children:"Drag to reorder"}),e(f,{className:"size-4"})]})]}),a&&e(p,{header:t})]})})}function N({header:n,TableHeadComponent:i=o,colClassName:s="",reorderable:l=!1,enableColumnResizing:r=!1}){const[a,c]=t.useState(null),[d,m]=t.useState(null),[u,f]=t.useState(!1);t.useEffect(()=>{l&&!u&&Promise.all([import("@dnd-kit/sortable").then(e=>e.useSortable),import("@dnd-kit/utilities").then(e=>e.CSS)]).then(([e,n])=>{c(()=>e),m(()=>n),f(!0)})},[l,u]);const h="selection"===n.column.id;return l&&u&&!h?e(C,{header:n,TableHeadComponent:i,colClassName:s,enableColumnResizing:r,useSortableHook:a,CSSUtil:d,reorderable:l}):e(b,{header:n,TableHeadComponent:i,colClassName:s,enableColumnResizing:r})}function g(n){return n.reorderable?e(l,{fallback:e(b,{...n}),children:e(N,{...n})}):e(b,{...n})}function k({cell:n,colClassName:i="",TableCellComponent:t=a,useSortableHook:s,CSSUtil:l}){const o="selection"===n.column.id,{isDragging:c,setNodeRef:d,transform:m}=s({id:n.column.id,disabled:o}),u={opacity:c?.8:1,position:"relative",transform:o?void 0:l.Translate.toString(m),transition:o?void 0:c?"none":"transform 0.05s ease-out",zIndex:c?1:0,width:n.column.getSize(),minWidth:n.column.columnDef.minSize||100,maxWidth:n.column.columnDef.maxSize||"none"};return e(t,{style:u,ref:d,className:h(n.column.columnDef.className,i),children:e("div",{className:"truncate",children:r(n.column.columnDef.cell,n.getContext())})})}function x({cell:n,colClassName:i="",TableCellComponent:s=a,reorderable:l=!1}){const[o,c]=t.useState(null),[d,m]=t.useState(null),[u,f]=t.useState(!1);t.useEffect(()=>{l&&!u&&Promise.all([import("@dnd-kit/sortable").then(e=>e.useSortable),import("@dnd-kit/utilities").then(e=>e.CSS)]).then(([e,n])=>{c(()=>e),m(()=>n),f(!0)})},[l,u]);const p="selection"===n.column.id;return l&&u&&!p?e(k,{cell:n,colClassName:i,TableCellComponent:s,useSortableHook:o,CSSUtil:d}):e(s,{style:{width:n.column.getSize(),minWidth:n.column.columnDef.minSize||100,maxWidth:n.column.columnDef.maxSize||"none"},className:h(n.column.columnDef.className,i),children:e("div",{className:"truncate",children:r(n.column.columnDef.cell,n.getContext())})})}s(()=>import("@dnd-kit/sortable").then(e=>({default:e.useSortable}))),s(()=>import("@dnd-kit/utilities").then(e=>({default:e.CSS})));const S=s(()=>import("@dnd-kit/core").then(e=>({default:e.DndContext}))),z=s(()=>import("@dnd-kit/sortable").then(e=>({default:e.SortableContext})));function v({children:n,onDragEnd:i,onDragStart:t,sensors:s,collisionDetection:r,modifiers:a}){return e(l,{fallback:e("div",{children:n}),children:e(S,{collisionDetection:r,modifiers:a,onDragEnd:i,onDragStart:t,sensors:s,children:n})})}function y({children:n,items:i,strategy:t}){return e(l,{fallback:e("div",{children:n}),children:e(z,{items:i,strategy:t,children:n})})}const w=s(()=>import("@dnd-kit/core").then(e=>({default:({onSensorsReady:n})=>{const i=e.useSensors(e.useSensor(e.MouseSensor,{}),e.useSensor(e.TouchSensor,{}),e.useSensor(e.KeyboardSensor,{})),s=t.useRef(!1),l=t.useRef(n);return t.useEffect(()=>{l.current=n},[n]),t.useEffect(()=>{!s.current&&i.length>0&&(s.current=!0,l.current(i))},[i.length]),null}}))),H=async()=>{const[{closestCenter:e},{restrictToHorizontalAxis:n},{arrayMove:i,horizontalListSortingStrategy:t}]=await Promise.all([import("@dnd-kit/core"),import("@dnd-kit/modifiers"),import("@dnd-kit/sortable")]);return{closestCenter:e,restrictToHorizontalAxis:n,arrayMove:i,horizontalListSortingStrategy:t}};export{g as D,y as S,x as a,w as b,v as c,H as l};