zaravand-ui 7.0.0 → 7.0.2

package/dist/components/Table/Table.cjs

@@ -1 +1 @@
-"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../services/localizeDigits/localizeDigits.cjs`),r=require(`../../lib/utils.cjs`),i=require(`../shared/responsiveScale.cjs`),a=require(`../Button/Button.cjs`),o=require(`../shared/ActionSheet.cjs`),s=require(`../shared/FieldClearButton.cjs`),c=require(`../shared/IconActionButton.cjs`),ee=require(`../shared/useExclusiveAction.cjs`),te=require(`../shared/useStickyToolbar.cjs`),ne=require(`../shared/viewport.cjs`),re=require(`../Select/Select.cjs`),ie=require(`./Table.variant.cjs`),ae=require(`./TableEmptyState.cjs`),oe=require(`./TablePaginationControls.cjs`),l=require(`./Table.constants.cjs`),u=require(`./TableParts.cjs`),d=require(`./Table.utils.cjs`),se=require(`./TableSkeletonRows.cjs`),ce=require(`./TableSortToggle.cjs`),le=require(`./hooks/useTablePagination.cjs`),ue=require(`./hooks/useTableCardLabels.cjs`),de=require(`./hooks/useTableSearch.cjs`),fe=require(`./hooks/useTableSort.cjs`);let f=require(`react`);f=e.__toESM(f,1);let p=require(`react/jsx-runtime`),m=require(`lucide-react`);var pe=f.forwardRef(function({className:e,containerClassName:pe,loading:h=!1,isMutating:g=!1,stickyHeaderOnScroll:me=!0,maxVisibleRowsBeforeScroll:he,allowInfiniteMode:ge=!0,stickyToolbar:_e=!0,schema:_,data:v,setData:ve,onAdd:y,onImportExcel:b,onEdit:x,onDelete:S,onPrint:C,onPreviewPrint:w,actions:ye,onCellSelectChange:T,getRowId:E,showNumberRow:be=!1,showColumnBorder:xe=!1,showRowBorder:Se=!1,toolbarExtra:Ce,children:we},Te){let{messages:D,digits:O,dir:Ee}=t.useZuiConfig(),De=f.useMemo(()=>({digits:O,messages:D}),[O,D]),k=f.Children.count(we)>0,A=ne.useIsMobileViewport(),Oe=f.useRef(null),ke=f.useMemo(()=>r.mergeRefs(Te,Oe),[Te]);ue.useTableCardLabels(Oe,k);let j=f.useMemo(()=>_.columns.filter(e=>e.view),[_.columns]),Ae=f.useMemo(()=>j.filter(e=>e.sortable),[j]),M=typeof y==`function`,N=typeof b==`function`,P=typeof x==`function`,F=typeof S==`function`,I=typeof C==`function`,L=typeof w==`function`,R=ye??[],je=R.length>0,z=_.searchable??!1,B=be&&!k,Me=Ce!=null&&Ce!==!1,Ne=_.pagination,Pe=Ne?.onSearchChange,Fe=typeof Pe==`function`,V=P||F||je,{rowNumberColumnStyle:Ie,columnStyleByKey:Le,actionsColumnStyle:Re}=f.useMemo(()=>d.resolveColumnWidthPercentages(j,B,V),[V,B,j]),ze=f.useMemo(()=>{let e=_.columns.map(e=>{if(e.type!==`select`&&e.type!==`radio`)return[e.key,[]];if(Array.isArray(e.options)&&e.options.length>0)return[e.key,e.options];if(e.optionsSource)return[e.key,[]];let t=new Set;return v.forEach(n=>{let r=n[e.key];if(typeof r==`string`||typeof r==`number`){let e=String(r).trim();e.length>0&&t.add(e)}}),[e.key,Array.from(t).map(e=>({value:e,label:e}))]});return Object.fromEntries(e)},[v,_.columns]),[Be,H]=ee.useExclusiveAction(),[Ve,He]=f.useState(!1),[Ue,We]=f.useState(!1),[Ge,Ke]=f.useState({open:!1,actions:[]}),U=g||Be,qe=f.useCallback(async()=>{g||!y||await H(y)},[g,y,H]),Je=f.useCallback(async()=>{g||!b||await H(b)},[g,b,H]),W=f.useCallback(async(e,t,n,r)=>{g||await H(()=>e({row:t,rowIndex:n,rowId:r??d.resolveSafeRowId(t,n,E)}))},[E,g,H]),Ye=f.useCallback(async(e,t,n)=>{x&&await W(x,e,t,n)},[x,W]),Xe=f.useCallback(async(e,t,n)=>{S&&await W(S,e,t,n)},[S,W]),Ze=f.useCallback(async(e,t,n,r)=>{await W(e.onClick,t,n,r)},[W]),Qe=f.useCallback(async(e,t,n,r,i)=>{if(g)return;let a=i.trim(),o=a.length>0?a:null;if(e[r]===o)return;let s=n??d.resolveSafeRowId(e,t,E),c={...e,[r]:o};await H(async()=>{try{if(T&&await T({row:c,previousRow:e,rowIndex:t,rowId:s,columnKey:r,value:a})===!1)return;ve(e=>d.replaceRowByIdentifier(e,t,s,E,c))}catch{return}})},[E,g,T,H,ve]),$e=f.useCallback((e,t,n)=>{let i=e=>(0,p.jsx)(`span`,{className:r.cn(`zui:inline-flex`,s.CLEAR_ICON_CLASS,`zui:[&>svg]:size-full`),children:e}),a=[];P&&a.push({key:`edit`,label:D.common.edit,icon:i((0,p.jsx)(m.Pencil,{"aria-hidden":`true`})),onSelect:()=>void Ye(e,t,n)}),R.forEach((r,o)=>{a.push({key:`custom-${o}`,label:r.tooltip,icon:i(r.icon),onSelect:()=>void Ze(r,e,t,n)})}),F&&a.push({key:`delete`,label:D.common.delete,icon:i((0,p.jsx)(m.Trash2,{"aria-hidden":`true`})),danger:!0,onSelect:()=>void Xe(e,t,n)}),Ke({open:!0,actions:a})},[Ze,Xe,Ye,D.common.delete,D.common.edit,R,F,P]),{searchTerm:et,normalizedSearchTerm:tt,filteredRows:nt,handleSearchInputChange:rt}=de.useTableSearch({data:v,visibleColumns:j,showSearchInput:z,hasRemoteSearchHandler:Fe,onSearchChange:Pe,getRowId:E,cellFormatOptions:De}),{sortedRows:G,activeSort:K,handleSortToggle:it,handleSortClear:at}=fe.useTableSort({rows:nt,columns:_.columns,sortConfig:_.sort}),ot=f.useCallback(async()=>{C&&await C({rows:G.map(({row:e})=>e),columns:j})},[C,G,j]),st=f.useCallback(async()=>{w&&await w({rows:G.map(({row:e})=>e),columns:j})},[w,G,j]),{pagingMode:q,currentPage:ct,totalPages:lt,resolvedPageSize:ut,visibleRows:J,showPagingModeToggle:Y,shouldRenderPagination:dt,shouldRenderInfiniteMode:ft,canLoadMoreInInfiniteMode:pt,shouldUseRemotePaging:mt,shouldUseScrollableRows:ht,tableScrollViewportRef:gt,tableScrollViewportStyle:_t,handlePageChange:vt,handlePagingModeToggle:yt,handleTableScrollViewport:bt,isInfiniteRequestPending:xt}=le.useTablePagination({hasChildren:k,filteredRows:G,paginationConfig:Ne,loading:h,isRowActionBusy:U,searchKey:tt,sortKey:K?`${K.sortKey}:${K.direction}`:``,maxVisibleRowsBeforeScroll:he,allowInfiniteMode:ge}),X=ht&&me,St=f.useMemo(()=>d.resolveLoadingRowsCount(_.pagination?.pageSize,v.length),[v.length,_.pagination?.pageSize]),Ct=h&&(J.length===0||mt&&q===`pagination`),wt=ft&&h&&J.length>0,Tt=ft&&J.length>0,Et=Tt&&(h||xt),Dt=Tt&&pt&&!h&&!xt,Ot=Tt&&!pt&&!h&&!xt,kt=Math.min(St,Math.max(1,Math.min(ut,3))),Z=h||U,At=+!!P+R.length+ +!!F,jt=q===`pagination`?D.table.switchToInfinite:D.table.switchToPagination,Mt=M||N||Y||I||L,Q=A&&!k&&Ae.length>0,$=!k&&(z||Mt||Q),Nt=f.useRef(null),Pt=f.useRef(null);te.useStickyToolbar(Nt,Pt,A&&_e&&$);let Ft=f.useMemo(()=>{let e=e=>(0,p.jsx)(e,{className:s.CLEAR_ICON_CLASS,"aria-hidden":`true`}),t=Ae.map(t=>{let r=K?.sortKey===t.key?K.direction:void 0,i=n.localizeDigits(t.label,O);return{key:t.key,label:r===void 0?i:`${i} (${r===`asc`?D.table.sortAscending:D.table.sortDescending})`,icon:e(r===`asc`?m.ArrowUp:r===`desc`?m.ArrowDown:m.ArrowUpDown),active:r!==void 0,onSelect:()=>it(t.key)}});return K&&t.push({key:`clear-sort`,label:D.table.sortDefault,icon:e(m.RotateCcw),onSelect:at}),t},[K,O,at,it,D.table.sortAscending,D.table.sortDefault,D.table.sortDescending,Ae]),It=f.useMemo(()=>{let e=e=>(0,p.jsx)(e,{className:s.CLEAR_ICON_CLASS,"aria-hidden":`true`});return[M?{key:`add`,label:D.common.add,icon:e(m.Plus),onSelect:()=>void qe()}:null,N?{key:`import`,label:D.table.importExcel,icon:e(m.FileSpreadsheet),onSelect:()=>void Je()}:null,I?{key:`print`,label:D.table.print,icon:e(m.Printer),onSelect:()=>void ot()}:null,L?{key:`preview-print`,label:D.table.printPreview,icon:e(m.Eye),onSelect:()=>void st()}:null,Y?{key:`paging-mode`,label:jt,icon:e(q===`pagination`?m.Infinity:m.Rows3),onSelect:yt}:null].filter(e=>e!==null)},[qe,Je,yt,st,ot,D.common.add,D.table.importExcel,D.table.print,D.table.printPreview,q,jt,M,N,Y,L,I]),Lt=A&&(It.length>0||Q),Rt=A&&It.length>1,zt=Me&&$&&z,Bt=Me&&$&&!z,Vt=Me&&!$,Ht=(0,p.jsx)(`div`,{"data-slot":`table-toolbar-extra`,className:r.cn(`zui:flex zui:w-full zui:items-center`,i.CONTROL_HEIGHT_SM),children:Ce});return(0,p.jsxs)(`div`,{"data-slot":`table-container`,dir:Ee,className:r.cn(ie.tableContainerVariants(),pe),children:[Vt?(0,p.jsx)(`div`,{"data-slot":`table-toolbar-extra-row`,className:`zui:mb-3`,children:Ht}):null,$?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(`div`,{ref:Pt,"aria-hidden":`true`,"data-slot":`table-sticky-sentinel`}),(0,p.jsxs)(`div`,{ref:Nt,"data-slot":`table-sticky-toolbar`,"data-sticky-toolbar":A&&_e?`true`:void 0,className:`zui:mb-3`,children:[zt?(0,p.jsx)(`div`,{"data-slot":`table-toolbar-extra-row`,className:`zui:mb-2`,children:Ht}):null,(0,p.jsx)(c.ListToolbar,{"data-slot":`table-controls`,searchSlot:`table-search-input`,actionsSlot:`table-add-action`,inlineActionsOnMobile:Lt,search:z?{value:et,onChange:rt,placeholder:D.common.searchPlaceholder,ariaLabel:D.table.searchAriaLabel,disabled:U}:void 0,leading:Bt?Ht:void 0,actions:Q||Rt||Mt?(0,p.jsxs)(p.Fragment,{children:[Q?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-sort-button`,label:D.table.sortBy,disabled:Z,onClick:()=>We(!0),icon:(0,p.jsx)(m.ArrowUpDown,{"aria-hidden":`true`})}):null,Rt?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-toolbar-menu-button`,label:D.table.actions,disabled:Z,onClick:()=>He(!0),icon:(0,p.jsx)(m.EllipsisVertical,{"aria-hidden":`true`})}):Mt?(0,p.jsxs)(p.Fragment,{children:[Y?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-paging-mode-toggle-button`,label:jt,disabled:Z,onClick:yt,icon:q===`pagination`?(0,p.jsx)(m.Infinity,{className:l.pagingToggleIconClassName,"aria-hidden":`true`}):(0,p.jsx)(m.Rows3,{className:l.pagingToggleIconClassName,"aria-hidden":`true`})}):null,L?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-preview-print-button`,label:D.table.printPreview,disabled:Z,onClick:()=>void st(),icon:(0,p.jsx)(m.Eye,{})}):null,I?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-print-button`,label:D.table.print,disabled:Z,onClick:()=>void ot(),icon:(0,p.jsx)(m.Printer,{})}):null,N?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-import-excel-button`,label:D.table.importExcel,disabled:Z,onClick:()=>void Je(),icon:(0,p.jsx)(m.FileSpreadsheet,{})}):null,M?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-add-button`,label:D.common.add,disabled:Z,onClick:()=>void qe(),icon:(0,p.jsx)(m.Plus,{})}):null]}):null]}):void 0})]}),Q?(0,p.jsx)(o.default,{open:Ue,onOpenChange:We,actions:Ft,label:D.table.sortBy}):null,Rt?(0,p.jsx)(o.default,{open:Ve,onOpenChange:He,actions:It.map(e=>({...e,disabled:Z})),label:D.table.actions}):null]}):null,(0,p.jsx)(`div`,{ref:gt,"data-slot":`table-scroll-viewport`,className:r.cn(`zui:relative zui:w-full zui:min-w-0 zui:overflow-x-auto zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:shadow-[0_4px_14px_-12px_var(--zui-effect-shadow-ink-35)]`,ht?`zui:overflow-y-auto`:void 0),style:_t,onScroll:bt,children:(0,p.jsx)(`table`,{ref:ke,"data-slot":`table`,className:r.cn(ie.tableVariants({showColumnBorder:xe,showRowBorder:Se}),e),dir:Ee,children:k?we:j.length===0?(0,p.jsx)(u.TableBody,{children:(0,p.jsx)(u.TableRow,{children:(0,p.jsx)(u.TableCell,{className:`zui:py-7 zui:text-center zui:text-[var(--zui-color-text)]`,children:D.table.noColumns})})}):(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(`colgroup`,{children:[B?(0,p.jsx)(`col`,{style:Ie}):null,j.map(e=>(0,p.jsx)(`col`,{style:Le[e.key]},`col-${e.key}`)),V?(0,p.jsx)(`col`,{style:Re}):null]}),(0,p.jsx)(u.TableHeader,{children:(0,p.jsxs)(u.TableRow,{children:[B?(0,p.jsx)(u.TableHead,{align:`center`,className:r.cn(l.rowNumberColumnClassName,X?l.stickyHeaderCellClassName:void 0),children:D.table.rowNumber}):null,j.map(e=>{if(!e.sortable)return(0,p.jsx)(u.TableHead,{align:e.align,className:X?l.stickyHeaderCellClassName:void 0,children:n.localizeDigits(e.label,O)},`head-${e.key}`);let t=K?.sortKey===e.key?K.direction:void 0;return(0,p.jsx)(u.TableHead,{align:e.align,className:X?l.stickyHeaderCellClassName:void 0,"aria-sort":d.resolveAriaSort(t),children:(0,p.jsxs)(`span`,{className:`zui:inline-flex zui:items-center zui:gap-2`,children:[n.localizeDigits(e.label,O),(0,p.jsx)(ce.default,{columnLabel:e.label,direction:t,onToggle:()=>it(e.key)})]})},`head-${e.key}`)}),V?(0,p.jsx)(u.TableHead,{align:`center`,className:r.cn(l.actionsColumnClassName,l.actionsColumnStickyClassName,X?l.stickyHeaderCellClassName:void 0),children:D.table.actions}):null]})}),(0,p.jsx)(u.TableBody,{children:Ct?(0,p.jsx)(se.default,{count:St,keyPrefix:`loading`,showRowNumbers:B,columns:j,actionsCount:At}):J.length===0?(0,p.jsx)(ae.default,{colSpan:j.length+ +!!V+ +!!B,showSearchInput:z,normalizedSearchTerm:tt}):(0,p.jsxs)(p.Fragment,{children:[J.map(({row:e,rowIndex:t,rowId:i},o)=>{let s=i===void 0?`row-${t}`:`row-id-${String(i)}`,ee=dt?(ct-1)*ut+o+1:o+1;return(0,p.jsxs)(u.TableRow,{children:[B?(0,p.jsx)(u.TableCell,{align:`center`,className:l.rowNumberColumnClassName,"data-label":D.table.rowNumber,children:n.localizeDigits(String(ee),O)}):null,j.map(r=>{let a=`cell-${r.key}-${s}`;if(r.viewType===`select`){let o=ze[r.key]??[],s=e[r.key],c=typeof s==`string`||typeof s==`number`?String(s):``;return(0,p.jsx)(u.TableCell,{align:r.align,"data-label":n.localizeDigits(r.label,O),children:(0,p.jsx)(re.default,{disabled:U||o.length===0&&!r.optionsSource,placeholder:d.resolvePlaceholder(r),options:o,remoteOptions:r.optionsSource,value:c,onValueChange:n=>{let a=Array.isArray(n)?n[0]??``:n;Qe(e,t,i,r.key,a)}})},a)}return(0,p.jsx)(u.TableCell,{align:r.align,"data-label":n.localizeDigits(r.label,O),children:d.formatCellValue(e[r.key],r,De)},a)}),V?(0,p.jsx)(u.TableCell,{align:`center`,"data-cell":`actions`,className:r.cn(l.actionsColumnClassName,l.actionsColumnStickyClassName),children:A?(0,p.jsx)(a.default,{"data-slot":`table-row-actions-button`,kind:`cancel`,fullWidth:!0,label:D.table.actions,disabled:U,onClick:()=>$e(e,t,i)}):(0,p.jsxs)(`div`,{"data-slot":`table-row-actions`,className:`zui:flex zui:items-center zui:justify-center zui:gap-0.5`,children:[P?(0,p.jsx)(c.IconActionButton,{"data-slot":`table-action-edit-button`,label:D.common.edit,icon:(0,p.jsx)(m.Pencil,{className:l.actionIconClassName,"aria-hidden":`true`}),disabled:U,className:r.cn(l.rowActionButtonClassName,`zui:text-[var(--zui-theme-text-primary)]`),onClick:()=>void Ye(e,t,i)}):null,R.map((n,a)=>(0,p.jsx)(c.IconActionButton,{"data-slot":`table-action-custom-button`,label:n.tooltip,icon:n.icon,disabled:U,className:r.cn(l.rowActionButtonClassName,`zui:text-[var(--zui-theme-text-primary)]`),onClick:()=>void Ze(n,e,t,i)},`${n.tooltip}-${a}`)),F?(0,p.jsx)(c.IconActionButton,{"data-slot":`table-action-delete-button`,label:D.common.delete,icon:(0,p.jsx)(m.Trash2,{className:l.actionIconClassName,"aria-hidden":`true`}),disabled:U,className:r.cn(l.rowActionButtonClassName,`zui:text-[var(--zui-theme-status-danger)]`),onClick:()=>void Xe(e,t,i)}):null]})}):null]},s)}),wt?(0,p.jsx)(se.default,{count:kt,keyPrefix:`infinite-loading`,showRowNumbers:B,columns:j,actionsCount:At}):null]})})]})})}),A&&V?(0,p.jsx)(o.default,{open:Ge.open,onOpenChange:e=>Ke(t=>({...t,open:e})),actions:Ge.actions,label:D.table.actions}):null,(0,p.jsx)(oe.default,{shouldRenderInfiniteMode:ft,shouldShowInfiniteLoadingStatus:Et,shouldShowInfiniteReadyStatus:Dt,shouldShowInfiniteCompletedStatus:Ot,shouldRenderPagination:dt,loading:h,isRowActionBusy:U,currentPage:ct,totalPages:lt,onPageChange:vt})]})});pe.displayName=`Table`,exports.default=pe;
+"use client";const e=require(`../../_virtual/_rolldown/runtime.cjs`),t=require(`../../config/useZuiConfig.cjs`),n=require(`../../services/localizeDigits/localizeDigits.cjs`),r=require(`../../lib/utils.cjs`),i=require(`../shared/responsiveScale.cjs`),a=require(`../Button/Button.cjs`),o=require(`../shared/ActionSheet.cjs`),s=require(`../shared/FieldClearButton.cjs`),c=require(`../shared/IconActionButton.cjs`),ee=require(`../shared/useExclusiveAction.cjs`),te=require(`../shared/useStickyToolbar.cjs`),ne=require(`../shared/viewport.cjs`),re=require(`../Select/Select.cjs`),l=require(`./Table.constants.cjs`),u=require(`./Table.utils.cjs`),ie=require(`./Table.variant.cjs`),ae=require(`./TableActiveFilters.cjs`),oe=require(`./TableColumnFilter.cjs`),se=require(`./TableEmptyState.cjs`),ce=require(`./TablePaginationControls.cjs`),d=require(`./TableParts.cjs`),le=require(`./TableSkeletonRows.cjs`),ue=require(`./TableSortToggle.cjs`),de=require(`./hooks/useTablePagination.cjs`),fe=require(`./hooks/useTableCardLabels.cjs`),pe=require(`./hooks/useTableFilter.cjs`),me=require(`./hooks/useTableSearch.cjs`),he=require(`./hooks/useTableSort.cjs`);let f=require(`react`);f=e.__toESM(f,1);let p=require(`react/jsx-runtime`),m=require(`lucide-react`);var ge=f.forwardRef(function({className:e,containerClassName:ge,loading:h=!1,isMutating:g=!1,stickyHeaderOnScroll:_e=!0,maxVisibleRowsBeforeScroll:ve,allowInfiniteMode:ye=!0,stickyToolbar:be=!0,schema:_,data:v,setData:xe,onAdd:Se,onImportExcel:Ce,onEdit:we,onDelete:y,onPrint:b,onPreviewPrint:x,actions:Te,onCellSelectChange:Ee,getRowId:S,showNumberRow:De=!1,showColumnBorder:Oe=!1,showRowBorder:ke=!1,toolbarExtra:Ae,children:je},Me){let{messages:C,digits:w,dir:T}=t.useZuiConfig(),E=f.useMemo(()=>({digits:w,messages:C}),[w,C]),D=f.Children.count(je)>0,O=ne.useIsMobileViewport(),Ne=f.useRef(null),Pe=f.useMemo(()=>r.mergeRefs(Me,Ne),[Me]);fe.useTableCardLabels(Ne,D);let k=f.useMemo(()=>_.columns.filter(e=>e.view),[_.columns]),Fe=f.useMemo(()=>k.filter(e=>e.sortable),[k]),A=f.useMemo(()=>k.filter(e=>e.filterable),[k]),j=typeof Se==`function`,Ie=typeof Ce==`function`,M=typeof we==`function`,N=typeof y==`function`,P=typeof b==`function`,F=typeof x==`function`,I=Te??[],Le=I.length>0,L=_.searchable??!1,R=De&&!D,Re=Ae!=null&&Ae!==!1,ze=_.pagination,Be=ze?.onSearchChange,Ve=typeof Be==`function`,z=M||N||Le,{rowNumberColumnStyle:He,columnStyleByKey:Ue,actionsColumnStyle:We}=f.useMemo(()=>u.resolveColumnWidthPercentages(k,R,z),[z,R,k]),Ge=f.useMemo(()=>{let e=_.columns.map(e=>{if(e.type!==`select`&&e.type!==`radio`)return[e.key,[]];if(Array.isArray(e.options)&&e.options.length>0)return[e.key,e.options];if(e.optionsSource)return[e.key,[]];let t=new Set;return v.forEach(n=>{let r=n[e.key];if(typeof r==`string`||typeof r==`number`){let e=String(r).trim();e.length>0&&t.add(e)}}),[e.key,Array.from(t).map(e=>({value:e,label:e}))]});return Object.fromEntries(e)},[v,_.columns]),[Ke,B]=ee.useExclusiveAction(),[qe,Je]=f.useState(!1),[Ye,Xe]=f.useState(!1),[Ze,Qe]=f.useState(!1),[$e,et]=f.useState(null),[tt,nt]=f.useState(!1),[rt,it]=f.useState({open:!1,actions:[]}),V=g||Ke,at=f.useCallback(async()=>{g||!Se||await B(Se)},[g,Se,B]),ot=f.useCallback(async()=>{g||!Ce||await B(Ce)},[g,Ce,B]),H=f.useCallback(async(e,t,n,r)=>{g||await B(()=>e({row:t,rowIndex:n,rowId:r??u.resolveSafeRowId(t,n,S)}))},[S,g,B]),st=f.useCallback(async(e,t,n)=>{we&&await H(we,e,t,n)},[we,H]),ct=f.useCallback(async(e,t,n)=>{y&&await H(y,e,t,n)},[y,H]),lt=f.useCallback(async(e,t,n,r)=>{await H(e.onClick,t,n,r)},[H]),ut=f.useCallback(async(e,t,n,r,i)=>{if(g)return;let a=i.trim(),o=a.length>0?a:null;if(e[r]===o)return;let s=n??u.resolveSafeRowId(e,t,S),c={...e,[r]:o};await B(async()=>{try{if(Ee&&await Ee({row:c,previousRow:e,rowIndex:t,rowId:s,columnKey:r,value:a})===!1)return;xe(e=>u.replaceRowByIdentifier(e,t,s,S,c))}catch{return}})},[S,g,Ee,B,xe]),dt=f.useCallback((e,t,n)=>{let i=e=>(0,p.jsx)(`span`,{className:r.cn(`zui:inline-flex`,s.CLEAR_ICON_CLASS,`zui:[&>svg]:size-full`),children:e}),a=[];M&&a.push({key:`edit`,label:C.common.edit,icon:i((0,p.jsx)(m.Pencil,{"aria-hidden":`true`})),onSelect:()=>void st(e,t,n)}),I.forEach((r,o)=>{a.push({key:`custom-${o}`,label:r.tooltip,icon:i(r.icon),onSelect:()=>void lt(r,e,t,n)})}),N&&a.push({key:`delete`,label:C.common.delete,icon:i((0,p.jsx)(m.Trash2,{"aria-hidden":`true`})),danger:!0,onSelect:()=>void ct(e,t,n)}),it({open:!0,actions:a})},[lt,ct,st,C.common.delete,C.common.edit,I,N,M]),{searchTerm:ft,normalizedSearchTerm:pt,filteredRows:mt,handleSearchInputChange:ht}=me.useTableSearch({data:v,visibleColumns:k,showSearchInput:L,hasRemoteSearchHandler:Ve,onSearchChange:Be,getRowId:S,cellFormatOptions:E}),{filteredRows:gt,filterValues:U,activeFilterCount:_t,filterKey:vt,handleFilterChange:yt,handleFilterClear:bt}=pe.useTableFilter({rows:mt,columns:_.columns,filterConfig:_.filter}),W=f.useMemo(()=>Object.fromEntries(A.map(e=>[e.key,u.resolveFilterOptions(e,v,E)])),[E,v,A]),{sortedRows:G,activeSort:K,handleSortToggle:xt,handleSortClear:St}=he.useTableSort({rows:gt,columns:_.columns,sortConfig:_.sort}),Ct=f.useCallback(async()=>{b&&await b({rows:G.map(({row:e})=>e),columns:k})},[b,G,k]),wt=f.useCallback(async()=>{x&&await x({rows:G.map(({row:e})=>e),columns:k})},[x,G,k]),{pagingMode:q,currentPage:Tt,totalPages:Et,resolvedPageSize:Dt,visibleRows:J,showPagingModeToggle:Ot,shouldRenderPagination:kt,shouldRenderInfiniteMode:At,canLoadMoreInInfiniteMode:jt,shouldUseRemotePaging:Mt,shouldUseScrollableRows:Nt,tableScrollViewportRef:Pt,tableScrollViewportStyle:Ft,handlePageChange:It,handlePagingModeToggle:Lt,handleTableScrollViewport:Rt,isInfiniteRequestPending:zt}=de.useTablePagination({hasChildren:D,filteredRows:G,paginationConfig:ze,loading:h,isRowActionBusy:V,searchKey:`${pt}|${vt}`,sortKey:K?`${K.sortKey}:${K.direction}`:``,maxVisibleRowsBeforeScroll:ve,allowInfiniteMode:ye}),Bt=Nt&&_e,Vt=f.useMemo(()=>u.resolveLoadingRowsCount(_.pagination?.pageSize,v.length),[v.length,_.pagination?.pageSize]),Ht=h&&(J.length===0||Mt&&q===`pagination`),Ut=At&&h&&J.length>0,Wt=At&&J.length>0,Gt=Wt&&(h||zt),Kt=Wt&&jt&&!h&&!zt,qt=Wt&&!jt&&!h&&!zt,Jt=Math.min(Vt,Math.max(1,Math.min(Dt,3))),Y=h||V,Yt=+!!M+I.length+ +!!N,Xt=q===`pagination`?C.table.switchToInfinite:C.table.switchToPagination,Zt=j||Ie||Ot||P||F,X=O&&!D&&Fe.length>0,Z=O&&!D&&A.length>0,Q=!D&&(L||Zt||X||Z),Qt=f.useRef(null),$t=f.useRef(null);te.useStickyToolbar(Qt,$t,O&&be&&Q);let en=f.useMemo(()=>{let e=e=>(0,p.jsx)(e,{className:s.CLEAR_ICON_CLASS,"aria-hidden":`true`}),t=Fe.map(t=>{let r=K?.sortKey===t.key?K.direction:void 0,i=n.localizeDigits(t.label,w);return{key:t.key,label:r===void 0?i:`${i} (${r===`asc`?C.table.sortAscending:C.table.sortDescending})`,icon:e(r===`asc`?m.ArrowUp:r===`desc`?m.ArrowDown:m.ArrowUpDown),active:r!==void 0,onSelect:()=>xt(t.key)}});return K&&t.push({key:`clear-sort`,label:C.table.sortDefault,icon:e(m.RotateCcw),onSelect:St}),t},[K,w,St,xt,C.table.sortAscending,C.table.sortDefault,C.table.sortDescending,Fe]),tn=f.useCallback(e=>{et(e),nt(!0)},[]),nn=f.useMemo(()=>A.map(e=>{let t=U[e.key],r=t!==void 0&&!u.isEmptyFilterValue(t),i=n.localizeDigits(e.label,w),a=r?n.localizeDigits(u.resolveFilterText(t,W[e.key]??[]),w):``;return{key:e.key,label:r?`${i}: ${a}`:i,icon:(0,p.jsx)(m.Funnel,{className:s.CLEAR_ICON_CLASS,fill:r?`currentColor`:`none`,"aria-hidden":`true`}),active:r,onSelect:()=>tn(e.key)}}),[w,W,U,A,tn]),$=A.find(e=>e.key===$e),rn=f.useMemo(()=>{let e=e=>(0,p.jsx)(e,{className:s.CLEAR_ICON_CLASS,"aria-hidden":`true`});return[j?{key:`add`,label:C.common.add,icon:e(m.Plus),onSelect:()=>void at()}:null,Ie?{key:`import`,label:C.table.importExcel,icon:e(m.FileSpreadsheet),onSelect:()=>void ot()}:null,P?{key:`print`,label:C.table.print,icon:e(m.Printer),onSelect:()=>void Ct()}:null,F?{key:`preview-print`,label:C.table.printPreview,icon:e(m.Eye),onSelect:()=>void wt()}:null,Ot?{key:`paging-mode`,label:Xt,icon:e(q===`pagination`?m.Infinity:m.Rows3),onSelect:Lt}:null].filter(e=>e!==null)},[at,ot,Lt,wt,Ct,C.common.add,C.table.importExcel,C.table.print,C.table.printPreview,q,Xt,j,Ie,Ot,F,P]),an=O&&(rn.length>0||X||Z),on=O&&rn.length>1,sn=Re&&Q&&L,cn=Re&&Q&&!L,ln=Re&&!Q,un=(0,p.jsx)(`div`,{"data-slot":`table-toolbar-extra`,className:r.cn(`zui:flex zui:w-full zui:items-center`,i.CONTROL_HEIGHT_SM),children:Ae});return(0,p.jsxs)(`div`,{"data-slot":`table-container`,dir:T,className:r.cn(ie.tableContainerVariants(),ge),children:[ln?(0,p.jsx)(`div`,{"data-slot":`table-toolbar-extra-row`,className:`zui:mb-3`,children:un}):null,Q?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(`div`,{ref:$t,"aria-hidden":`true`,"data-slot":`table-sticky-sentinel`}),(0,p.jsxs)(`div`,{ref:Qt,"data-slot":`table-sticky-toolbar`,"data-sticky-toolbar":O&&be?`true`:void 0,className:`zui:mb-3`,children:[sn?(0,p.jsx)(`div`,{"data-slot":`table-toolbar-extra-row`,className:`zui:mb-2`,children:un}):null,(0,p.jsx)(c.ListToolbar,{"data-slot":`table-controls`,searchSlot:`table-search-input`,actionsSlot:`table-add-action`,inlineActionsOnMobile:an,search:L?{value:ft,onChange:ht,placeholder:C.common.searchPlaceholder,ariaLabel:C.table.searchAriaLabel,disabled:V}:void 0,leading:cn?un:void 0,actions:X||Z||on||Zt?(0,p.jsxs)(p.Fragment,{children:[X?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-sort-button`,label:C.table.sortBy,disabled:Y,onClick:()=>Xe(!0),icon:(0,p.jsx)(m.ArrowUpDown,{"aria-hidden":`true`})}):null,Z?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-filter-button`,label:C.table.filterBy,disabled:Y,onClick:()=>Qe(!0),icon:(0,p.jsxs)(`span`,{className:`zui:relative zui:inline-flex`,children:[(0,p.jsx)(m.Funnel,{fill:_t>0?`currentColor`:`none`,"aria-hidden":`true`}),_t>0?(0,p.jsx)(`span`,{"aria-hidden":`true`,"data-slot":`table-filter-active-dot`,className:`zui:absolute zui:-end-1 zui:-top-1 zui:size-2 zui:rounded-full zui:bg-[var(--zui-theme-action-primary)] zui:ring-2 zui:ring-[var(--zui-color-surface)]`}):null]})}):null,on?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-toolbar-menu-button`,label:C.table.actions,disabled:Y,onClick:()=>Je(!0),icon:(0,p.jsx)(m.EllipsisVertical,{"aria-hidden":`true`})}):Zt?(0,p.jsxs)(p.Fragment,{children:[Ot?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-paging-mode-toggle-button`,label:Xt,disabled:Y,onClick:Lt,icon:q===`pagination`?(0,p.jsx)(m.Infinity,{className:l.pagingToggleIconClassName,"aria-hidden":`true`}):(0,p.jsx)(m.Rows3,{className:l.pagingToggleIconClassName,"aria-hidden":`true`})}):null,F?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-preview-print-button`,label:C.table.printPreview,disabled:Y,onClick:()=>void wt(),icon:(0,p.jsx)(m.Eye,{})}):null,P?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-print-button`,label:C.table.print,disabled:Y,onClick:()=>void Ct(),icon:(0,p.jsx)(m.Printer,{})}):null,Ie?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-import-excel-button`,label:C.table.importExcel,disabled:Y,onClick:()=>void ot(),icon:(0,p.jsx)(m.FileSpreadsheet,{})}):null,j?(0,p.jsx)(c.ToolbarIconButton,{"data-slot":`table-action-add-button`,label:C.common.add,disabled:Y,onClick:()=>void at(),icon:(0,p.jsx)(m.Plus,{})}):null]}):null]}):void 0})]}),X?(0,p.jsx)(o.default,{open:Ye,onOpenChange:Xe,actions:en,label:C.table.sortBy}):null,Z?(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(o.default,{open:Ze,onOpenChange:Qe,actions:nn,label:C.table.filterBy}),$?(0,p.jsx)(oe.TableColumnFilterSheet,{column:$,value:U[$.key],onChange:e=>yt($.key,e),options:W[$.key]??[],open:tt,onOpenChange:nt},$.key):null]}):null,on?(0,p.jsx)(o.default,{open:qe,onOpenChange:Je,actions:rn.map(e=>({...e,disabled:Y})),label:C.table.actions}):null]}):null,D?null:(0,p.jsx)(ae.default,{columns:k,values:U,optionsByColumn:W,onRemove:e=>yt(e,void 0),onSelect:O?tn:void 0}),(0,p.jsx)(`div`,{ref:Pt,"data-slot":`table-scroll-viewport`,className:r.cn(`zui:relative zui:w-full zui:min-w-0 zui:overflow-x-auto zui-radius-xs zui:bg-[var(--zui-color-surface)] zui:shadow-[0_4px_14px_-12px_var(--zui-effect-shadow-ink-35)]`,Nt?`zui:overflow-y-auto`:void 0),style:Ft,onScroll:Rt,children:(0,p.jsx)(`table`,{ref:Pe,"data-slot":`table`,className:r.cn(ie.tableVariants({showColumnBorder:Oe,showRowBorder:ke}),e),dir:T,children:D?je:k.length===0?(0,p.jsx)(d.TableBody,{children:(0,p.jsx)(d.TableRow,{children:(0,p.jsx)(d.TableCell,{className:`zui:py-7 zui:text-center zui:text-[var(--zui-color-text)]`,children:C.table.noColumns})})}):(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(`colgroup`,{children:[R?(0,p.jsx)(`col`,{style:He}):null,k.map(e=>(0,p.jsx)(`col`,{style:Ue[e.key]},`col-${e.key}`)),z?(0,p.jsx)(`col`,{style:We}):null]}),(0,p.jsx)(d.TableHeader,{children:(0,p.jsxs)(d.TableRow,{children:[R?(0,p.jsx)(d.TableHead,{align:`center`,className:r.cn(l.rowNumberColumnClassName,Bt?l.stickyHeaderCellClassName:void 0),children:C.table.rowNumber}):null,k.map(e=>{let t=e.sortable&&K?.sortKey===e.key?K.direction:void 0,r=e.sortable?(0,p.jsx)(ue.default,{columnLabel:e.label,direction:t,onToggle:()=>xt(e.key)}):null,i=e.filterable?(0,p.jsx)(oe.default,{column:e,value:U[e.key],onChange:t=>yt(e.key,t),options:W[e.key]??[]}):null;return(0,p.jsx)(d.TableHead,{align:e.align,className:Bt?l.stickyHeaderCellClassName:void 0,"aria-sort":e.sortable?u.resolveAriaSort(t):void 0,children:e.sortable||e.filterable?(0,p.jsxs)(`span`,{className:`zui:inline-flex zui:items-center zui:gap-2`,children:[n.localizeDigits(e.label,w),(0,p.jsxs)(`span`,{className:`zui:inline-flex zui:items-center`,children:[T===`rtl`?r:i,T===`rtl`?i:r]})]}):n.localizeDigits(e.label,w)},`head-${e.key}`)}),z?(0,p.jsx)(d.TableHead,{align:`center`,className:r.cn(l.actionsColumnClassName,l.actionsColumnStickyClassName,Bt?l.stickyHeaderCellClassName:void 0),children:C.table.actions}):null]})}),(0,p.jsx)(d.TableBody,{children:Ht?(0,p.jsx)(le.default,{count:Vt,keyPrefix:`loading`,showRowNumbers:R,columns:k,actionsCount:Yt}):J.length===0?(0,p.jsx)(se.default,{colSpan:k.length+ +!!z+ +!!R,showSearchInput:L,normalizedSearchTerm:pt,hasActiveFilters:_t>0,onClearFilters:bt}):(0,p.jsxs)(p.Fragment,{children:[J.map(({row:e,rowIndex:t,rowId:i},o)=>{let s=i===void 0?`row-${t}`:`row-id-${String(i)}`,ee=kt?(Tt-1)*Dt+o+1:o+1;return(0,p.jsxs)(d.TableRow,{children:[R?(0,p.jsx)(d.TableCell,{align:`center`,className:l.rowNumberColumnClassName,"data-label":C.table.rowNumber,children:n.localizeDigits(String(ee),w)}):null,k.map(r=>{let a=`cell-${r.key}-${s}`;if(r.viewType===`select`){let o=Ge[r.key]??[],s=e[r.key],c=typeof s==`string`||typeof s==`number`?String(s):``;return(0,p.jsx)(d.TableCell,{align:r.align,"data-label":n.localizeDigits(r.label,w),children:(0,p.jsx)(re.default,{disabled:V||o.length===0&&!r.optionsSource,placeholder:u.resolvePlaceholder(r),options:o,remoteOptions:r.optionsSource,value:c,onValueChange:n=>{let a=Array.isArray(n)?n[0]??``:n;ut(e,t,i,r.key,a)}})},a)}return(0,p.jsx)(d.TableCell,{align:r.align,"data-label":n.localizeDigits(r.label,w),children:u.formatCellValue(e[r.key],r,E)},a)}),z?(0,p.jsx)(d.TableCell,{align:`center`,"data-cell":`actions`,className:r.cn(l.actionsColumnClassName,l.actionsColumnStickyClassName),children:O?(0,p.jsx)(a.default,{"data-slot":`table-row-actions-button`,kind:`cancel`,fullWidth:!0,label:C.table.actions,disabled:V,onClick:()=>dt(e,t,i)}):(0,p.jsxs)(`div`,{"data-slot":`table-row-actions`,className:`zui:flex zui:items-center zui:justify-center zui:gap-0.5`,children:[M?(0,p.jsx)(c.IconActionButton,{"data-slot":`table-action-edit-button`,label:C.common.edit,icon:(0,p.jsx)(m.Pencil,{className:l.actionIconClassName,"aria-hidden":`true`}),disabled:V,className:r.cn(l.rowActionButtonClassName,`zui:text-[var(--zui-theme-text-primary)]`),onClick:()=>void st(e,t,i)}):null,I.map((n,a)=>(0,p.jsx)(c.IconActionButton,{"data-slot":`table-action-custom-button`,label:n.tooltip,icon:n.icon,disabled:V,className:r.cn(l.rowActionButtonClassName,`zui:text-[var(--zui-theme-text-primary)]`),onClick:()=>void lt(n,e,t,i)},`${n.tooltip}-${a}`)),N?(0,p.jsx)(c.IconActionButton,{"data-slot":`table-action-delete-button`,label:C.common.delete,icon:(0,p.jsx)(m.Trash2,{className:l.actionIconClassName,"aria-hidden":`true`}),disabled:V,className:r.cn(l.rowActionButtonClassName,`zui:text-[var(--zui-theme-status-danger)]`),onClick:()=>void ct(e,t,i)}):null]})}):null]},s)}),Ut?(0,p.jsx)(le.default,{count:Jt,keyPrefix:`infinite-loading`,showRowNumbers:R,columns:k,actionsCount:Yt}):null]})})]})})}),O&&z?(0,p.jsx)(o.default,{open:rt.open,onOpenChange:e=>it(t=>({...t,open:e})),actions:rt.actions,label:C.table.actions}):null,(0,p.jsx)(ce.default,{shouldRenderInfiniteMode:At,shouldShowInfiniteLoadingStatus:Gt,shouldShowInfiniteReadyStatus:Kt,shouldShowInfiniteCompletedStatus:qt,shouldRenderPagination:kt,loading:h,isRowActionBusy:V,currentPage:Tt,totalPages:Et,onPageChange:It})]})});ge.displayName=`Table`,exports.default=ge;

package/dist/components/Table/Table.constants.cjs

@@ -1 +1 @@
-var e=`zui:size-4`,t=`zui:size-6`,n=`zui:inline-flex zui:size-9 zui:items-center zui:justify-center zui:rounded-md zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-transparent zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-45 zui:cursor-pointer zui:border-0 zui:bg-transparent zui:shadow-none zui:hover:bg-transparent zui:hover:shadow-none zui:active:bg-transparent zui:focus-visible:ring-0 zui:disabled:cursor-not-allowed`,r=`zui:px-3`,i=`zui:sticky zui:end-0 zui:z-10`,a=`zui:px-3`,o=`zui:sticky zui:top-0 zui:z-20 zui:bg-[var(--zui-color-primary)]`,s=`zui:h-4 zui:w-2.5`;exports.actionIconClassName=e,exports.actionsColumnClassName=r,exports.actionsColumnStickyClassName=i,exports.pagingToggleIconClassName=t,exports.rowActionButtonClassName=n,exports.rowNumberColumnClassName=a,exports.sortIconClassName=s,exports.stickyHeaderCellClassName=o;
+var e=`zui:size-4`,t=`zui:size-6`,n=`zui:inline-flex zui:size-9 zui:items-center zui:justify-center zui:rounded-md zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-transparent zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-45 zui:cursor-pointer zui:border-0 zui:bg-transparent zui:shadow-none zui:hover:bg-transparent zui:hover:shadow-none zui:active:bg-transparent zui:focus-visible:ring-0 zui:disabled:cursor-not-allowed`,r=`zui:px-3`,i=`zui:sticky zui:end-0 zui:z-10`,a=`zui:px-3`,o=`zui:sticky zui:top-0 zui:z-20 zui:bg-[var(--zui-color-primary)]`,s=`zui:h-4 zui:w-2.5`,c=`zui:size-4`;exports.actionIconClassName=e,exports.actionsColumnClassName=r,exports.actionsColumnStickyClassName=i,exports.filterIconClassName=c,exports.pagingToggleIconClassName=t,exports.rowActionButtonClassName=n,exports.rowNumberColumnClassName=a,exports.sortIconClassName=s,exports.stickyHeaderCellClassName=o;

package/dist/components/Table/Table.constants.d.cts

@@ -16,3 +16,4 @@ export declare const infiniteScrollViewportPrefetchDistancePx: number;
 export declare const defaultLoadingRowsCount = 6;
 export declare const maxLoadingRowsCount = 12;
 export declare const sortIconClassName = "zui:h-4 zui:w-2.5";
+export declare const filterIconClassName = "zui:size-4";

package/dist/components/Table/Table.constants.d.ts

@@ -16,3 +16,4 @@ export declare const infiniteScrollViewportPrefetchDistancePx: number;
 export declare const defaultLoadingRowsCount = 6;
 export declare const maxLoadingRowsCount = 12;
 export declare const sortIconClassName = "zui:h-4 zui:w-2.5";
+export declare const filterIconClassName = "zui:size-4";

package/dist/components/Table/Table.constants.js

@@ -1,4 +1,4 @@
 //#region src/components/Table/Table.constants.ts
-var e = "zui:size-4", t = "zui:size-6", n = "zui:inline-flex zui:size-9 zui:items-center zui:justify-center zui:rounded-md zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-transparent zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-45 zui:cursor-pointer zui:border-0 zui:bg-transparent zui:shadow-none zui:hover:bg-transparent zui:hover:shadow-none zui:active:bg-transparent zui:focus-visible:ring-0 zui:disabled:cursor-not-allowed", r = "zui:px-3", i = "zui:sticky zui:end-0 zui:z-10", a = "zui:px-3", o = "zui:sticky zui:top-0 zui:z-20 zui:bg-[var(--zui-color-primary)]", s = "zui:h-4 zui:w-2.5";
+var e = "zui:size-4", t = "zui:size-6", n = "zui:inline-flex zui:size-9 zui:items-center zui:justify-center zui:rounded-md zui:border zui:border-[var(--zui-theme-border-default)] zui:bg-transparent zui:transition zui:hover:bg-[var(--zui-theme-bg-surface)] zui:disabled:pointer-events-none zui:disabled:opacity-45 zui:cursor-pointer zui:border-0 zui:bg-transparent zui:shadow-none zui:hover:bg-transparent zui:hover:shadow-none zui:active:bg-transparent zui:focus-visible:ring-0 zui:disabled:cursor-not-allowed", r = "zui:px-3", i = "zui:sticky zui:end-0 zui:z-10", a = "zui:px-3", o = "zui:sticky zui:top-0 zui:z-20 zui:bg-[var(--zui-color-primary)]", s = "zui:h-4 zui:w-2.5", c = "zui:size-4";
 //#endregion
-export { e as actionIconClassName, r as actionsColumnClassName, i as actionsColumnStickyClassName, t as pagingToggleIconClassName, n as rowActionButtonClassName, a as rowNumberColumnClassName, s as sortIconClassName, o as stickyHeaderCellClassName };
+export { e as actionIconClassName, r as actionsColumnClassName, i as actionsColumnStickyClassName, c as filterIconClassName, t as pagingToggleIconClassName, n as rowActionButtonClassName, a as rowNumberColumnClassName, s as sortIconClassName, o as stickyHeaderCellClassName };

package/dist/components/Table/Table.interface.d.cts

@@ -106,6 +106,36 @@ export type TableSchemaColumn = {
      * for controlling/observing the active sort key and direction.
      */
     sortable?: boolean;
+    /**
+     * When true, renders a filter button in this column's header that opens the
+     * same dropdown as `Select` (multi-select, with search for long lists) to
+     * pick the values the column may have. The options are `options` /
+     * `optionsSource` of the column, or else the distinct values found in `data`.
+     * See `TableSchema.filter` for controlling/observing the filters.
+     */
+    filterable?: boolean;
+};
+/** The chosen values of a column; a row stays when its value is one of them. */
+export type TableFilterValue = string[];
+/** Active filters by column key. A column without a filter has no entry. */
+export type TableFilterValues = Record<string, TableFilterValue>;
+export type TableSchemaFilter = {
+    /**
+     * The active filters. Only meaningful for remote filtering (when
+     * `onFilterChange` is provided), where it makes the filters controlled —
+     * for example to keep them in the URL. In local filtering the table tracks
+     * them itself.
+     */
+    values?: TableFilterValues;
+    /**
+     * Provided for remote filtering: called with all active filters whenever one
+     * changes. When provided, the table stops filtering rows itself and expects
+     * the parent to fetch `data` accordingly (same contract as
+     * `TableSchemaSort.onSortChange`). Give the column `options` or
+     * `optionsSource` too: the options found in `data` are only those of the
+     * rows loaded so far.
+     */
+    onFilterChange?: (values: TableFilterValues) => void;
 };
 export type TableSchemaSort = {
     /**
@@ -152,6 +182,7 @@ export type TableSchema = {
     searchable?: boolean;
     pagination?: TableSchemaPagination;
     sort?: TableSchemaSort;
+    filter?: TableSchemaFilter;
 };
 export type TableVisibleRow = {
     row: DynamicTableRow;
@@ -274,5 +305,13 @@ export type TableEmptyStateProps = {
     colSpan: number;
     showSearchInput: boolean;
     normalizedSearchTerm: string;
+    hasActiveFilters?: boolean;
+    onClearFilters?: () => void;
+};
+export type TableColumnFilterProps = {
+    column: TableSchemaColumn;
+    value: TableFilterValue | undefined;
+    onChange: (value: TableFilterValue | undefined) => void;
+    options: TableSelectOption[];
 };
 export {};

package/dist/components/Table/Table.interface.d.ts

@@ -106,6 +106,36 @@ export type TableSchemaColumn = {
      * for controlling/observing the active sort key and direction.
      */
     sortable?: boolean;
+    /**
+     * When true, renders a filter button in this column's header that opens the
+     * same dropdown as `Select` (multi-select, with search for long lists) to
+     * pick the values the column may have. The options are `options` /
+     * `optionsSource` of the column, or else the distinct values found in `data`.
+     * See `TableSchema.filter` for controlling/observing the filters.
+     */
+    filterable?: boolean;
+};
+/** The chosen values of a column; a row stays when its value is one of them. */
+export type TableFilterValue = string[];
+/** Active filters by column key. A column without a filter has no entry. */
+export type TableFilterValues = Record<string, TableFilterValue>;
+export type TableSchemaFilter = {
+    /**
+     * The active filters. Only meaningful for remote filtering (when
+     * `onFilterChange` is provided), where it makes the filters controlled —
+     * for example to keep them in the URL. In local filtering the table tracks
+     * them itself.
+     */
+    values?: TableFilterValues;
+    /**
+     * Provided for remote filtering: called with all active filters whenever one
+     * changes. When provided, the table stops filtering rows itself and expects
+     * the parent to fetch `data` accordingly (same contract as
+     * `TableSchemaSort.onSortChange`). Give the column `options` or
+     * `optionsSource` too: the options found in `data` are only those of the
+     * rows loaded so far.
+     */
+    onFilterChange?: (values: TableFilterValues) => void;
 };
 export type TableSchemaSort = {
     /**
@@ -152,6 +182,7 @@ export type TableSchema = {
     searchable?: boolean;
     pagination?: TableSchemaPagination;
     sort?: TableSchemaSort;
+    filter?: TableSchemaFilter;
 };
 export type TableVisibleRow = {
     row: DynamicTableRow;
@@ -274,5 +305,13 @@ export type TableEmptyStateProps = {
     colSpan: number;
     showSearchInput: boolean;
     normalizedSearchTerm: string;
+    hasActiveFilters?: boolean;
+    onClearFilters?: () => void;
+};
+export type TableColumnFilterProps = {
+    column: TableSchemaColumn;
+    value: TableFilterValue | undefined;
+    onChange: (value: TableFilterValue | undefined) => void;
+    options: TableSelectOption[];
 };
 export {};