UNPKG

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.24 kB
import{jsxs as e,jsx as t}from"react/jsx-runtime";import*as a from"react";import*as o from"@radix-ui/react-dropdown-menu";import{ChevronRight as r,Check as s,Circle as n,SearchIcon as i}from"lucide-react";import{c as d}from"./utils-c38f99a6.js";import{Slot as c}from"@radix-ui/react-slot";import{cva as l}from"class-variance-authority";import{Command as m}from"cmdk";import*as u from"@radix-ui/react-popover";import*as f from"@radix-ui/react-separator";const p=o.Root,g=o.Trigger;a.forwardRef(({className:a,inset:s,children:n,...i},c)=>e(o.SubTrigger,{ref:c,className:d("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",s&&"pl-8",a),...i,children:[n,t(r,{className:"ml-auto"})]})).displayName=o.SubTrigger.displayName,a.forwardRef(({className:e,...a},r)=>t(o.SubContent,{ref:r,className:d("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]",e),...a})).displayName=o.SubContent.displayName;const v=a.forwardRef(({className:e,sideOffset:a=4,...r},s)=>t(o.Portal,{children:t(o.Content,{ref:s,sideOffset:a,className:d("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]",e),...r})}));v.displayName=o.Content.displayName;const h=a.forwardRef(({className:e,inset:a,...r},s)=>t(o.Item,{ref:s,className:d("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",e),...r}));h.displayName=o.Item.displayName,a.forwardRef(({className:a,children:r,checked:n,...i},c)=>e(o.CheckboxItem,{ref:c,className:d("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:n,...i,children:[t("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:t(o.ItemIndicator,{children:t(s,{className:"h-4 w-4"})})}),r]})).displayName=o.CheckboxItem.displayName,a.forwardRef(({className:a,children:r,...s},i)=>e(o.RadioItem,{ref:i,className:d("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),...s,children:[t("span",{className:"absolute left-2 flex h-3.5 w-3.5 items-center justify-center",children:t(o.ItemIndicator,{children:t(n,{className:"h-2 w-2 fill-current"})})}),r]})).displayName=o.RadioItem.displayName,a.forwardRef(({className:e,inset:a,...r},s)=>t(o.Label,{ref:s,className:d("px-2 py-1.5 text-sm font-semibold",a&&"pl-8",e),...r})).displayName=o.Label.displayName;const x=a.forwardRef(({className:e,...a},r)=>t(o.Separator,{ref:r,className:d("-mx-1 my-1 h-px bg-muted",e),...a}));x.displayName=o.Separator.displayName;const b=l("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"}}),N=a.forwardRef(({className:e,variant:a,size:o,asChild:r=!1,...s},n)=>t(r?c:"button",{className:d(b({variant:a,size:o,className:e})),ref:n,...s}));N.displayName="Button";const y=l("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",{variants:{variant:{default:"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",secondary:"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",destructive:"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",outline:"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"}},defaultVariants:{variant:"default"}});function w({className:e,variant:a,asChild:o=!1,...r}){return t(o?c:"span",{"data-slot":"badge",className:d(y({variant:a}),e),...r})}function z({className:e,...a}){return t(m,{"data-slot":"command",className:d("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",e),...a})}function k({className:a,...o}){return e("div",{"data-slot":"command-input-wrapper",className:"flex h-9 items-center gap-2 border-b px-3",children:[t(i,{className:"size-4 shrink-0 opacity-50"}),t(m.Input,{"data-slot":"command-input",className:d("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",a),...o})]})}function _({className:e,...a}){return t(m.List,{"data-slot":"command-list",className:d("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",e),...a})}function j({...e}){return t(m.Empty,{"data-slot":"command-empty",className:"py-6 text-center text-sm",...e})}function C({className:e,...a}){return t(m.Group,{"data-slot":"command-group",className:d("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",e),...a})}function O({className:e,...a}){return t(m.Separator,{"data-slot":"command-separator",className:d("bg-border -mx-1 h-px",e),...a})}function B({className:e,...a}){return t(m.Item,{"data-slot":"command-item",className:d("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",e),...a})}function V({...e}){return t(u.Root,{"data-slot":"popover",...e})}function D({...e}){return t(u.Trigger,{"data-slot":"popover-trigger",...e})}function P({className:e,align:a="center",sideOffset:o=4,...r}){return t(u.Portal,{children:t(u.Content,{"data-slot":"popover-content",align:a,sideOffset:o,className:d("bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",e),...r})})}function S({className:e,orientation:a="horizontal",decorative:o=!0,...r}){return t(f.Root,{"data-slot":"separator",decorative:o,orientation:a,className:d("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",e),...r})}export{N as B,z as C,p as D,V as P,S,g as a,v as b,h as c,x as d,D as e,w as f,P as g,k as h,_ as i,j,C as k,B as l,O as m};