tanstack-shadcn-table/dist/index.esm.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 n,jsxs as l,Fragment as o}from"react/jsx-runtime";import r,{useState as m,useCallback as p,lazy as N,useMemo as w,useEffect as S,useRef as x,Suspense as y}from"react";import{sortingFns as k,useReactTable as z,getCoreRowModel as T,getFilteredRowModel as j,getSortedRowModel as P,getPaginationRowModel as H,getFacetedRowModel as M,getFacetedUniqueValues as V,getFacetedMinMaxValues as W,flexRender as I}from"@tanstack/react-table";import{a as A,g as L,c as O,d as E}from"./chunks/utils-49e5594d.js";export{e as availableLanguages,a as createTranslator,b as deTranslations,d as defaultTranslations,d as enTranslations,s as esTranslations,f as frTranslations,f as frenchTranslations,b as germanTranslations,g as getValue,i as interpolate,s as spanishTranslations,h as t,t as trTranslations,t as turkishTranslations}from"./chunks/utils-49e5594d.js";import{D as U}from"./chunks/filtering-47a28203.js";export{D as DebouncedInput,F as FilterInput,u as useDebounce,a as useRateLimit}from"./chunks/filtering-47a28203.js";import{B as _,f as B,g as q,a as G,h as J,T as K,i as Q,j as X,D as Y,k as Z,l as $,m as ee}from"./chunks/ui-components-bd9e2eb9.js";import{rankItem as ae,compareItems as ne}from"@tanstack/match-sorter-utils";import{l as le,S as te,D as ie,a as se,b as oe,c as re}from"./chunks/drag-drop-4f252360.js";import{C as ce}from"./chunks/row-selection-ad0548fe.js";import{R as de,v as ue,s as me,b as he}from"./chunks/security-16060df4.js";export{C as CSP_DIRECTIVES,R as RateLimiter,a as sanitizeFilterValue,c as sanitizeHtml,s as sanitizeSearchInput,d as validateFileUpload,b as validatePaginationParams,v as validateSortingParams}from"./chunks/security-16060df4.js";import{ChevronDown as fe}from"lucide-react";export{C as ColumnResizeHandle}from"./chunks/column-resizing-61ff2f59.js";import"clsx";import"tailwind-merge";import"@radix-ui/react-slot";import"class-variance-authority";import"@radix-ui/react-dropdown-menu";import"@radix-ui/react-select";import"@radix-ui/react-checkbox";const ge=(e,a,n,l)=>{const t=ae(e.getValue(a),n);return l({itemRank:t}),t.passed},pe=(e,a,n)=>{let l=0;return e.columnFiltersMeta[n]&&(l=ne(e.columnFiltersMeta[n]?.itemRank,a.columnFiltersMeta[n]?.itemRank)),0===l?k.alphanumeric(e,a,n):l};function be(e,a,n){const[l,t]=m(n||e),i=void 0!==e,s=i?e:l,o=p(e=>{const n="function"==typeof e?e(s):e;i?a?.(n):t(n)},[i,s,a]);return[s,o]}const Ce=N(()=>import("./chunks/filtering-47a28203.js").then(function(e){return e.f}).then(e=>({default:e.default}))),Ne=N(()=>import("./chunks/column-visibility-7a3a7ca8.js").then(e=>({default:e.default}))),ve=N(()=>import("./chunks/pagination-1646cfbd.js").then(e=>({default:({table:a,pagination:l,translations:t,t:i})=>{const s=e.default,o=e.GoToPage,r=e.PageSize;return n("div",{className:"flex items-center justify-between py-4",children:n("div",{className:"flex flex-wrap items-center justify-between gap-4 px-2 text-sm",children:(l.layout||["total","pageSize","goto","buttons"]).map(e=>{switch(e){case"total":return n("span",{children:(l.totalLabel||i("pagination.totalRecords",{total:a.getFilteredRowModel().rows.length}))?.replace("{total}",a.getFilteredRowModel().rows.length+"")},"total");case"pageSize":return!!l.pageSizeOptions&&n(r,{pagination:l,onSetPageSize:e=>{a.setPageSize(e)},pageSize:a.getState().pagination.pageSize,label:l.pageSizeLabel,translations:t},"pageSize");case"goto":return n(o,{label:l.goToPageLabel,currentPage:a.getState().pagination.pageIndex,onSetPage:e=>a.setPageIndex(e),totalPages:a.getPageCount(),translations:t},"goto");case"buttons":return n(s,{canNextPage:a.getCanNextPage(),canPreviousPage:a.getCanPreviousPage(),currentPage:a.getState().pagination.pageIndex,onNext:()=>a.nextPage(),onPrevious:()=>a.previousPage(),onSetPage:e=>a.setPageIndex(e),totalPages:a.getPageCount(),className:l.className,maxVisiblePages:l.maxVisiblePages,mode:l.mode,translations:t},"buttons");default:return null}})})})}})));function we({header:e,colClassName:a="",TableHeadComponent:l,translations:t,isTableDragging:i=!1,useSortableHook:s,CSSUtil:o}){const{isDragging:r,setNodeRef:c,transform:d}=s({id:e.column.id}),u={opacity:r?.8:1,position:"relative",transform:o.Translate.toString(d),transition:r||i?"none":"transform 0.05s ease-out",zIndex:r?1:0,width:e.getSize(),minWidth:e.column.columnDef.minSize||100,maxWidth:e.column.columnDef.maxSize||"none"};return n(l,{colSpan:e.colSpan,ref:c,style:u,className:O(e.column.columnDef.headerClassName,e.column.columnDef.className,a),children:n("div",{className:"w-full",children:I(!e.isPlaceholder&&e.column.getCanFilter()?n(y,{fallback:n("div",{className:"h-9 w-full"}),children:n(Ce,{column:e.column,translations:t})}):null,e.getContext())})},e.column.id)}function Se({header:e,colClassName:a="",TableHeadComponent:l,translations:t,isTableDragging:i=!1,reorderable:s=!1}){const[o,c]=r.useState(null),[d,u]=r.useState(null),[m,h]=r.useState(!1);return r.useEffect(()=>{s&&!m&&Promise.all([import("@dnd-kit/sortable").then(e=>e.useSortable),import("@dnd-kit/utilities").then(e=>e.CSS)]).then(([e,a])=>{c(()=>e),u(()=>a),h(!0)})},[s,m]),s&&m&&o&&d?n(we,{header:e,colClassName:a,TableHeadComponent:l,translations:t,isTableDragging:i,useSortableHook:o,CSSUtil:d}):n(l,{colSpan:e.colSpan,style:{width:e.getSize(),minWidth:e.column.columnDef.minSize||100,maxWidth:e.column.columnDef.maxSize||"none"},className:O(e.column.columnDef.headerClassName,e.column.columnDef.className,a),children:n("div",{className:"w-full",children:I(!e.isPlaceholder&&e.column.getCanFilter()?n(y,{fallback:n("div",{className:"h-9 w-full"}),children:n(Ce,{column:e.column,translations:t})}):null,e.getContext())})},e.column.id)}function xe({tableOptions:e,className:a="",TableComponent:t=B,TableHeaderComponent:i=q,TableHeadComponent:s=G,TableRowComponent:c=J,TableCellComponent:d=K,TableBodyComponent:u=Q,TableFooterComponent:h=X}){if(!e.data||!Array.isArray(e.data))return void 0,n("div",{children:"No data provided"});if(!e.columns||!Array.isArray(e.columns))return void 0,n("div",{children:"No columns provided"});e.data.length>1e5,0;const f=w(()=>new de(10,1e3),[]),g=w(()=>{const a=e.translations||E;return A(a)},[e.translations]),b=w(()=>[...e.rowSelection?[{id:"selection",header:({table:e})=>n(ce,{checked:e.getIsAllPageRowsSelected()||e.getIsSomePageRowsSelected()&&"indeterminate",onCheckedChange:a=>e.toggleAllPageRowsSelected(!!a),"aria-label":g("selection.selectAll")}),className:"!w-8 flex-none",cell:({row:e})=>n(ce,{checked:e.getIsSelected(),onCheckedChange:a=>{e.toggleSelected(!!a)},"aria-label":g("selection.selectRow")}),enableSorting:!1,enableHiding:!1,enableResizing:!1,reorderable:!1,size:40,minSize:40,maxSize:40}]:[],...e.columns||[]],[e.columns,e.rowSelection,g]),C=w(()=>e.data,[e.data]),N=p((e,a,n)=>{if(!n)return!0;const l=je.getColumn(a),t=l?.columnDef;if(!t)return!0;const i=t.filter;if(!i)return!0;const s=L(e.original,i.field,null);if(null===s)return!0;if(Array.isArray(n)){if(!(2!==n.length||"number"!=typeof n[0]&&null!==n[0]&&""!==n[0]||"number"!=typeof n[1]&&null!==n[1]&&""!==n[1])){const[e,a]=n,l=+s;return!(null!==e&&""!==e&&e>l||null!==a&&""!==a&&l>a)}if(0===n.length)return!0;const e=s+"";return n.includes(e)}return"string"!=typeof n||""===n||("boolean"===i?.type?s+""===n:"select"===i?.type?s===n:(s+"").toLowerCase().includes(n.toLowerCase()))},[]),[v,k]=be(e.columnFilters,e.onColumnFiltersChange,[]),[F,R]=be(e.sorting,e.onSortingChange,[]),[D,Y]=be(e.paginationState,e.onPaginationChange,{pageIndex:0,pageSize:e.pagination?.pageSize||10}),[Z,$]=be(e.columnVisibility,e.onColumnVisibilityChange,{}),[ee,ae]=be(e.columnOrder,e.onColumnOrderChange,e.columns.map(e=>e.id).filter(e=>"selection"!==e)),[ne,fe]=be(e.globalFilter?.globalFilter,e.globalFilter?.onGlobalFilterChange,""),[we,xe]=be(e.rowSelection,e.onRowSelectionChange,{}),[ye,ke]=be(e.columnSizing,e.onColumnSizingChange,{}),[ze,Te]=be(e.showFilter,e.onShowFilterChange,!1),[Fe,Re]=m(!1);S(()=>{if(e.lazy){const{onLazyLoad:a}=e;if(a){if(!f.isAllowed("lazy-load"))return void 0,void 0;const e=he(D.pageIndex,D.pageSize),n=ue(F),l="string"==typeof ne?me(ne):"",t=v.map(e=>({...e,value:"string"==typeof e.value?me(e.value):e.value}));a({first:e.pageIndex*e.pageSize,rows:e.pageSize,filters:t,globalFilter:l,page:e.pageIndex,sorting:n})}}},[v,ne,D,F,e.lazy,f]);const je=z({data:C,columns:b,state:{columnFilters:e.columnFilters??v,globalFilter:ne,sorting:F,columnVisibility:Z,columnOrder:e.rowSelection?["selection",...ee]:ee,pagination:D,rowSelection:we,columnSizing:ye},rowCount:e.pagination?.totalRecords||C.length,manualPagination:!!e.lazy,filterFns:{fuzzy:ge},sortingFns:{fuzzy:pe},manualFiltering:e.lazy,manualSorting:e.lazy,globalFilterFn:"fuzzy",enableRowSelection:a=>e.enableRowSelectionFn?e.enableRowSelectionFn(a):void 0!==e.rowSelection,enableColumnResizing:e.enableColumnResizing??!0,columnResizeMode:e.columnResizeMode??"onEnd",columnResizeDirection:e.columnResizeDirection??"ltr",defaultColumn:{filterFn:N,size:150,minSize:20,maxSize:Number.MAX_SAFE_INTEGER,...e.defaultColumn},onGlobalFilterChange:fe,onColumnFiltersChange:k,onSortingChange:R,onPaginationChange:Y,onColumnVisibilityChange:$,onColumnOrderChange:ae,onRowSelectionChange:xe,onColumnSizingChange:ke,getCoreRowModel:T(),getFilteredRowModel:j(),getSortedRowModel:P(),getPaginationRowModel:H(),getFacetedRowModel:M(),getFacetedUniqueValues:V(),getFacetedMinMaxValues:W(),initialState:{columnVisibility:e.columnVisibility??{},columnFilters:e.columnFilters??[],sorting:e.sorting??[],globalFilter:"",columnSizing:e.columnSizing??{}}}),Pe=e.reorderable??!1,De=w(()=>Pe?(je.getState().columnOrder||[]).filter(e=>"selection"!==e):[],[je.getState().columnOrder,Pe]),[He,Me]=r.useState(null),[Ve,We]=r.useState(!Pe);r.useEffect(()=>{Pe&&!Ve&&le().then(e=>{Me(e),We(!0)})},[Pe,Ve]);const[Ie,Ae]=r.useState([]),Le=p(e=>{Ae(e)},[]),Oe=p(e=>{if(!He)return;const{active:a,over:n}=e;if(Re(!1),a&&n&&a.id!==n.id){if("selection"===a.id)return;const e=(je.getState().columnOrder||[]).filter(e=>"selection"!==e),l=e.indexOf(a.id),t=e.indexOf(n.id);if(-1===l||-1===t)return void 0,void 0;const i=He.arrayMove(e,l,t);ae(i)}},[ae,je,He]),Ee=p(()=>{Re(!0)},[]),Ue=x(null),_e=l("div",{className:"opal-datatable flex flex-col gap-2 "+a,children:[l("div",{className:"flex flex-row gap-2 justify-between",children:[l("div",{className:"flex flex-row gap-2",children:[e.globalFilter?.show&&n(U,{value:ne??"",onChange:e=>{const a="string"==typeof e?me(e):e+"";je.setGlobalFilter(a)},className:"",placeholder:g("filters.searchAllColumns"),maxLength:500,type:"search"}),e.filter&&e.showFilterButton&&n(_,{onClick:()=>Te(!ze),children:g(ze?"filters.hideFilter":"filters.showFilter")})]}),n("div",{className:"flex flex-row gap-2",children:e.columnVisibility&&n(y,{fallback:n("div",{className:"h-9 w-9"}),children:n(Ne,{table:je})})})]}),l("div",{className:"flex flex-col",ref:Ue,children:[Pe&&Ve&&He?n(te,{items:De,strategy:He.horizontalListSortingStrategy,children:l(t,{children:[l(i,{children:[je.getHeaderGroups().map(a=>n(o,{children:n(c,{className:O(e.rowClassName),children:a.headers.map(a=>n(ie,{header:a,colClassName:e.colClassName,TableHeadComponent:s,reorderable:"selection"!==a.column.id&&Pe,enableColumnResizing:e.enableColumnResizing},a.column.id))},"header_"+a.id)})),ze&&n(c,{className:O(e.filterRowClassName,e.rowClassName),children:je.getHeaderGroups().map(a=>a.headers.map(a=>"selection"===a.column.id?n(s,{colSpan:a.colSpan,style:{width:a.getSize(),minWidth:a.column.columnDef.minSize||100,maxWidth:a.column.columnDef.maxSize||"none"},className:O(a.column.columnDef.headerClassName,a.column.columnDef.className,e.colClassName),children:n("div",{className:"w-full",children:I(a.isPlaceholder?null:a.column.getCanFilter()?n(y,{fallback:n("div",{className:"h-9 w-full"}),children:n(Ce,{column:a.column,translations:e.translations})}):null,a.getContext())})},a.column.id):n(Se,{header:a,colClassName:e.colClassName,TableHeadComponent:s,translations:e.translations,isTableDragging:Fe,reorderable:Pe},a.column.id)))})]}),n(u,{children:je.getRowModel().rows.map(a=>n(c,{className:e.filterRowClassName,children:a.getVisibleCells().map(a=>n(se,{cell:a,colClassName:e.colClassName,TableCellComponent:d,reorderable:Pe},a.column.id))},a.id))}),je.getAllLeafColumns().some(e=>void 0!==e.columnDef?.footer)&&n(h,{children:je.getFooterGroups().map(a=>a.headers.some(e=>e.column.columnDef?.footer)?n(c,{children:a.headers.map(a=>n(s,{colSpan:a.colSpan,style:{width:a.getSize()+"px"},className:O(a.column.columnDef?.footerClassName,a.column.columnDef.className,e.colClassName),children:a.isPlaceholder?null:I(a.column.columnDef.footer,a.getContext())},a.id))},a.id):null)})]})}):l(t,{children:[l(i,{children:[je.getHeaderGroups().map(a=>n(o,{children:n(c,{className:O(e.rowClassName),children:a.headers.map(a=>n(ie,{header:a,colClassName:e.colClassName,TableHeadComponent:s,reorderable:!1,enableColumnResizing:e.enableColumnResizing},a.column.id))},"header_"+a.id)})),ze&&n(c,{className:O(e.filterRowClassName,e.rowClassName),children:je.getHeaderGroups().map(a=>a.headers.map(a=>"selection"===a.column.id?n(s,{colSpan:a.colSpan,style:{width:a.getSize(),minWidth:a.column.columnDef.minSize||100,maxWidth:a.column.columnDef.maxSize||"none"},className:O(a.column.columnDef.headerClassName,a.column.columnDef.className,e.colClassName),children:n("div",{className:"w-full",children:I(a.isPlaceholder?null:a.column.getCanFilter()?n(y,{fallback:n("div",{className:"h-9 w-full"}),children:n(Ce,{column:a.column,translations:e.translations})}):null,a.getContext())})},a.column.id):n(Se,{header:a,colClassName:e.colClassName,TableHeadComponent:s,translations:e.translations,isTableDragging:!1,reorderable:!1},a.column.id)))})]}),n(u,{children:je.getRowModel().rows.map(a=>n(c,{className:e.filterRowClassName,children:a.getVisibleCells().map(a=>n(se,{cell:a,colClassName:e.colClassName,TableCellComponent:d,reorderable:!1},a.column.id))},a.id))}),je.getAllLeafColumns().some(e=>void 0!==e.columnDef?.footer)&&n(h,{children:je.getFooterGroups().map(a=>a.headers.some(e=>e.column.columnDef?.footer)?n(c,{children:a.headers.map(a=>n(s,{colSpan:a.colSpan,style:{width:a.getSize()+"px"},className:O(a.column.columnDef?.footerClassName,a.column.columnDef.className,e.colClassName),children:a.isPlaceholder?null:I(a.column.columnDef.footer,a.getContext())},a.id))},a.id):null)})]}),e.pagination&&n(y,{fallback:n("div",{className:"flex items-center justify-between py-4",children:n("div",{className:"h-9 w-full"})}),children:n(ve,{table:je,pagination:e.pagination,translations:e.translations,t:g})})]})]});return Pe&&Ve&&He?l(o,{children:[Ve&&n(y,{fallback:null,children:n(oe,{onSensorsReady:Le})}),Ie.length>0?n(re,{onDragEnd:Oe,onDragStart:Ee,sensors:Ie,collisionDetection:He.closestCenter,modifiers:[He.restrictToHorizontalAxis],children:_e}):_e]}):_e}var ye=({placeholder:e,options:a,selectedOptions:t,setSelectedOptions:i})=>{const s=p(e=>{i(a=>a.includes(e)?a.filter(a=>a!==e):[...a,e])},[i]),o=p(e=>t.includes(e),[t]),r=p(e=>{e.preventDefault()},[]),c=p(e=>{e.preventDefault()},[]);return l(Y,{children:[n(Z,{asChild:!0,className:"w-full",children:l(_,{variant:"outline",className:"w-full flex items-center justify-between",children:[n("div",{children:e}),n(fe,{className:"h-4 w-4 opacity-50"})]})}),n($,{className:"w-56",onCloseAutoFocus:r,children:a.map(e=>n(ee,{onSelect:c,checked:o(e.value),onCheckedChange:()=>s(e.value),children:e.label},e.value))})]})};export{xe as DataTable,ye as MultiSelect,ge as fuzzyFilter,pe as fuzzySort};