tanstack-shadcn-table
Version:
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.
2 lines (1 loc) • 3.33 kB
JavaScript
import{jsxs as e,jsx as r,Fragment as s}from"react/jsx-runtime";import*as i from"react";import{MoreVertical as t,PlusCircle as a,Check as n}from"lucide-react";import{B as c,D as o,a as l,b as d,c as m,d as u,P as h,e as p,S as f,f as x,g as v,C as g,h as N,i as y,j as b,k,l as w,m as C}from"./chunks/ui-components-77682267.js";import{c as j,d as z,a as S}from"./chunks/utils-c38f99a6.js";import"@radix-ui/react-dropdown-menu";import"@radix-ui/react-slot";import"class-variance-authority";import"cmdk";import"@radix-ui/react-popover";import"@radix-ui/react-separator";import"clsx";import"tailwind-merge";function $({row:s,actions:a,trigger:n,align:h="end",side:p="bottom",className:f,size:x="icon"}){if(!a||0===a.length)return null;const v=e(c,{variant:"ghost",size:x,className:j("h-8 w-8 p-0",f),onClick:e=>e.stopPropagation(),children:[r("span",{className:"sr-only",children:"Open menu"}),r(t,{className:"h-4 w-4"})]});return e(o,{children:[r(l,{asChild:!0,onClick:e=>e.stopPropagation(),children:n||v}),r(d,{align:h,side:p,onClick:e=>e.stopPropagation(),children:a.map((t,a)=>{const n="function"==typeof t.disabled?t.disabled(s):t.disabled,c=t.icon,o=e(m,{disabled:n,onClick:e=>{e.stopPropagation(),n||t.onClick(s)},className:j(t.destructive&&"text-destructive hover:text-destructive hover:bg-destructive/10 focus:text-destructive focus:bg-destructive/10"),children:[c&&r(c,{className:"mr-2 h-4 w-4"}),t.label]},t.id);return t.separator&&a>0?e(i.Fragment,{children:[r(u,{}),o]},t.id):o})})]})}const F=function({column:i,title:t,options:o,translations:l=z}){const d=S(l),m=i?.getFacetedUniqueValues(),u=new Set(i?.getFilterValue());return e(h,{children:[r(p,{asChild:!0,children:e(c,{className:"h-8 border-dashed",size:"sm",variant:"outline",children:[r(a,{}),t,u?.size>0&&e(s,{children:[r(f,{className:"mx-2 h-4",orientation:"vertical"}),r(x,{className:"rounded-sm px-1 font-normal lg:hidden",variant:"secondary",children:u.size}),r("div",{className:"hidden gap-1 lg:flex",children:u.size>2?r(x,{className:"rounded-sm px-1 font-normal",variant:"secondary",children:d("filters.selectedCount",{count:u.size})}):o.filter(e=>u.has(e.value)).map((e,s)=>r(x,{className:"rounded-sm px-1 font-normal",variant:"secondary",children:e.label},`${e.value}-${s}`))})]})]})}),r(v,{align:"start",className:"w-[200px] p-0",children:e(g,{children:[r(N,{placeholder:t}),e(y,{children:[r(b,{children:d("filters.noResultsFound")}),r(k,{children:o.map((s,t)=>{const a=u.has(s.value);return e(w,{onSelect:()=>{a?u.delete(s.value):u.add(s.value);const e=Array.from(u);i?.setFilterValue(e.length?e:void 0)},children:[r("div",{className:j("flex size-4 items-center justify-center rounded-[4px] border",a?"border-primary bg-primary text-primary-foreground":"border-input [&_svg]:invisible"),children:r(n,{className:"size-3.5 text-primary-foreground"})}),s.icon&&r(s.icon,{className:"size-4 text-muted-foreground"}),r("span",{children:s.label}),m?.get(s.value)&&r("span",{className:"ml-auto flex size-4 items-center justify-center font-mono text-muted-foreground text-xs",children:m.get(s.value)})]},`${s.value}-${t}`)})}),u.size>0&&e(s,{children:[r(C,{}),r(k,{children:r(w,{className:"justify-center text-center",onSelect:()=>i?.setFilterValue(void 0),children:d("filters.clearFilters")})})]})]})]})})]})};export{F as FacetedFilter,$ as RowActions};