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) • 9.9 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as a from"react";import{c as s}from"./utils-49e5594d.js";import{Slot as o}from"@radix-ui/react-slot";import{cva as r}from"class-variance-authority";import*as n from"@radix-ui/react-dropdown-menu";import{ChevronRight as d,Check as i,Circle as l,ChevronDown as c,ChevronUp as m}from"lucide-react";import*as f from"@radix-ui/react-select";const u=a.forwardRef(({className:t,type:a,...o},r)=>e("input",{type:a,className:s("flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",t),ref:r,...o}));u.displayName="Input";const p=a.forwardRef(({className:t,...a},o)=>e("div",{className:"relative w-full overflow-auto",children:e("table",{ref:o,className:s("w-full caption-bottom text-sm",t),...a})}));p.displayName="Table";const h=a.forwardRef(({className:t,...a},o)=>e("thead",{ref:o,className:s("[&_tr]:border-b",t),...a}));h.displayName="TableHeader";const b=a.forwardRef(({className:t,...a},o)=>e("tbody",{ref:o,className:s("[&_tr:last-child]:border-0",t),...a}));b.displayName="TableBody";const g=a.forwardRef(({className:t,...a},o)=>e("tfoot",{ref:o,className:s("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",t),...a}));g.displayName="TableFooter";const x=a.forwardRef(({className:t,...a},o)=>e("tr",{ref:o,className:s("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",t),...a}));x.displayName="TableRow";const N=a.forwardRef(({className:t,...a},o)=>e("th",{ref:o,className:s("h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",t),...a}));N.displayName="TableHead";const v=a.forwardRef(({className:t,...a},o)=>e("td",{ref:o,className:s("p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",t),...a}));v.displayName="TableCell",a.forwardRef(({className:t,...a},o)=>e("caption",{ref:o,className:s("mt-4 text-sm text-muted-foreground",t),...a})).displayName="TableCaption";const w=r("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",{variants:{variant:{default:"bg-primary text-primary-foreground shadow hover:bg-primary/90",destructive:"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",outline:"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",secondary:"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",ghost:"hover:bg-accent hover:text-accent-foreground",link:"text-primary underline-offset-4 hover:underline"},size:{default:"h-9 px-4 py-2",sm:"h-8 rounded-md px-3 text-xs",lg:"h-10 rounded-md px-8",icon:"h-9 w-9"}},defaultVariants:{variant:"default",size:"default"}}),y=a.forwardRef(({className:t,variant:a,size:r,asChild:n=!1,...d},i)=>e(n?o:"button",{className:s(w({variant:a,size:r,className:t})),ref:i,...d}));y.displayName="Button";const z=n.Root,k=n.Trigger;a.forwardRef(({className:a,inset:o,children:r,...i},l)=>t(n.SubTrigger,{ref:l,className:s("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",o&&"pl-8",a),...i,children:[r,e(d,{className:"ml-auto"})]})).displayName=n.SubTrigger.displayName,a.forwardRef(({className:t,...a},o)=>e(n.SubContent,{ref:o,className:s("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",t),...a})).displayName=n.SubContent.displayName;const j=a.forwardRef(({className:t,sideOffset:a=4,...o},r)=>e(n.Portal,{children:e(n.Content,{ref:r,sideOffset:a,className:s("z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md","data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",t),...o})}));j.displayName=n.Content.displayName,a.forwardRef(({className:t,inset:a,...o},r)=>e(n.Item,{ref:r,className:s("relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",a&&"pl-8",t),...o})).displayName=n.Item.displayName;const T=a.forwardRef(({className:a,children:o,checked:r,...d},l)=>t(n.CheckboxItem,{ref:l,className:s("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",a),checked:r,...d,children:[e("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:e(n.ItemIndicator,{children:e(i,{className:"h-4 w-4"})})}),o]}));T.displayName=n.CheckboxItem.displayName,a.forwardRef(({className:a,children:o,...r},d)=>t(n.RadioItem,{ref:d,className:s("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",a),...r,children:[e("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:e(n.ItemIndicator,{children:e(l,{className:"h-2 w-2 fill-current"})})}),o]})).displayName=n.RadioItem.displayName,a.forwardRef(({className:t,inset:a,...o},r)=>e(n.Label,{ref:r,className:s("px-2 py-1.5 text-sm font-semibold",a&&"pl-8",t),...o})).displayName=n.Label.displayName,a.forwardRef(({className:t,...a},o)=>e(n.Separator,{ref:o,className:s("-mx-1 my-1 h-px bg-muted",t),...a})).displayName=n.Separator.displayName;const _=f.Root,C=f.Value,B=a.forwardRef(({className:a,children:o,...r},n)=>t(f.Trigger,{ref:n,className:s("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",a),...r,children:[o,e(f.Icon,{asChild:!0,children:e(c,{className:"h-4 w-4 opacity-50"})})]}));B.displayName=f.Trigger.displayName;const H=a.forwardRef(({className:t,...a},o)=>e(f.ScrollUpButton,{ref:o,className:s("flex cursor-default items-center justify-center py-1",t),...a,children:e(m,{className:"h-4 w-4"})}));H.displayName=f.ScrollUpButton.displayName;const I=a.forwardRef(({className:t,...a},o)=>e(f.ScrollDownButton,{ref:o,className:s("flex cursor-default items-center justify-center py-1",t),...a,children:e(c,{className:"h-4 w-4"})}));I.displayName=f.ScrollDownButton.displayName;const O=a.forwardRef(({className:a,children:o,position:r="popper",...n},d)=>e(f.Portal,{children:t(f.Content,{ref:d,className:s("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2","popper"===r&&"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",a),position:r,...n,children:[e(H,{}),e(f.Viewport,{className:s("p-1","popper"===r&&"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"),children:o}),e(I,{})]})}));O.displayName=f.Content.displayName,a.forwardRef(({className:t,...a},o)=>e(f.Label,{ref:o,className:s("px-2 py-1.5 text-sm font-semibold",t),...a})).displayName=f.Label.displayName;const D=a.forwardRef(({className:a,children:o,...r},n)=>t(f.Item,{ref:n,className:s("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",a),...r,children:[e("span",{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:e(f.ItemIndicator,{children:e(i,{className:"h-4 w-4"})})}),e(f.ItemText,{children:o})]}));D.displayName=f.Item.displayName,a.forwardRef(({className:t,...a},o)=>e(f.Separator,{ref:o,className:s("-mx-1 my-1 h-px bg-muted",t),...a})).displayName=f.Separator.displayName;export{y as B,z as D,u as I,_ as S,v as T,N as a,B as b,C as c,O as d,D as e,p as f,h as g,x as h,b as i,g as j,k,j as l,T as m};