@codefast/ui 0.0.50 → 0.0.52

package/src/react/context-menu.tsx

@@ -2,11 +2,7 @@
 
 import * as React from 'react';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  DotFilledIcon,
-} from '@radix-ui/react-icons';
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
 import { cn } from '../lib/utils';
 
 /* -----------------------------------------------------------------------------
@@ -20,70 +16,56 @@ const ContextMenu = ContextMenuPrimitive.Root;
  * Component: ContextMenuTrigger
  * -------------------------------------------------------------------------- */
 
-type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Trigger
->;
+type ContextMenuTriggerProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuGroup
  * -------------------------------------------------------------------------- */
 
-type ContextMenuGroupProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Group
->;
+type ContextMenuGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>;
 const ContextMenuGroup = ContextMenuPrimitive.Group;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSub
  * -------------------------------------------------------------------------- */
 
-type ContextMenuSubProps = React.ComponentProps<
-  typeof ContextMenuPrimitive.Sub
->;
+type ContextMenuSubProps = React.ComponentProps<typeof ContextMenuPrimitive.Sub>;
 const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuRadioGroup
  * -------------------------------------------------------------------------- */
 
-type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.RadioGroup
->;
+type ContextMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioGroup>;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuSubTrigger
  * -------------------------------------------------------------------------- */
 
-type ContextMenuSubTriggerElement = React.ElementRef<
-  typeof ContextMenuPrimitive.SubTrigger
->;
+type ContextMenuSubTriggerElement = React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>;
 
-interface ContextMenuSubTriggerProps
-  extends React.ComponentPropsWithoutRef<
-    typeof ContextMenuPrimitive.SubTrigger
-  > {
+interface ContextMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> {
   inset?: boolean;
 }
 
-const ContextMenuSubTrigger = React.forwardRef<
-  ContextMenuSubTriggerElement,
-  ContextMenuSubTriggerProps
->(({ children, className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRightIcon className="ml-auto size-4" />
-  </ContextMenuPrimitive.SubTrigger>
-));
+const ContextMenuSubTrigger = React.forwardRef<ContextMenuSubTriggerElement, ContextMenuSubTriggerProps>(
+  ({ children, className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.SubTrigger
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </ContextMenuPrimitive.SubTrigger>
+  ),
+);
 
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
@@ -91,28 +73,23 @@ ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
  * Component: ContextMenuSubContent
  * -------------------------------------------------------------------------- */
 
-type ContextMenuSubContentElement = React.ElementRef<
-  typeof ContextMenuPrimitive.SubContent
->;
-type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.SubContent
->;
-
-const ContextMenuSubContent = React.forwardRef<
-  ContextMenuSubContentElement,
-  ContextMenuSubContentProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.SubContent
-      ref={ref}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
-        className,
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
+type ContextMenuSubContentElement = React.ElementRef<typeof ContextMenuPrimitive.SubContent>;
+type ContextMenuSubContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>;
+
+const ContextMenuSubContent = React.forwardRef<ContextMenuSubContentElement, ContextMenuSubContentProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.SubContent
+        ref={ref}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  ),
+);
 
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
@@ -120,28 +97,23 @@ ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
  * Component: ContextMenuContent
  * -------------------------------------------------------------------------- */
 
-type ContextMenuContentElement = React.ElementRef<
-  typeof ContextMenuPrimitive.Content
->;
-type ContextMenuContentProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Content
->;
-
-const ContextMenuContent = React.forwardRef<
-  ContextMenuContentElement,
-  ContextMenuContentProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
-        className,
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
-));
+type ContextMenuContentElement = React.ElementRef<typeof ContextMenuPrimitive.Content>;
+type ContextMenuContentProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
+
+const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMenuContentProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 z-50 min-w-32 rounded-md border p-1 shadow-md',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  ),
+);
 
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
@@ -149,29 +121,25 @@ ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
  * Component: ContextMenuItem
  * -------------------------------------------------------------------------- */
 
-type ContextMenuItemElement = React.ElementRef<
-  typeof ContextMenuPrimitive.Item
->;
+type ContextMenuItemElement = React.ElementRef<typeof ContextMenuPrimitive.Item>;
 
-interface ContextMenuItemProps
-  extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
+interface ContextMenuItemProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> {
   inset?: boolean;
 }
 
-const ContextMenuItem = React.forwardRef<
-  ContextMenuItemElement,
-  ContextMenuItemProps
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
+const ContextMenuItem = React.forwardRef<ContextMenuItemElement, ContextMenuItemProps>(
+  ({ className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.Item
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+        inset && 'pl-8',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
 
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
@@ -179,69 +147,58 @@ ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
  * Component: ContextMenuCheckboxItem
  * -------------------------------------------------------------------------- */
 
-type ContextMenuCheckboxItemElement = React.ElementRef<
-  typeof ContextMenuPrimitive.CheckboxItem
->;
-type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.CheckboxItem
->;
-
-const ContextMenuCheckboxItem = React.forwardRef<
-  ContextMenuCheckboxItemElement,
-  ContextMenuCheckboxItemProps
->(({ children, className, checked, ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
-));
-
-ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+type ContextMenuCheckboxItemElement = React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>;
+type ContextMenuCheckboxItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>;
+
+const ContextMenuCheckboxItem = React.forwardRef<ContextMenuCheckboxItemElement, ContextMenuCheckboxItemProps>(
+  ({ children, className, checked, ...props }, ref) => (
+    <ContextMenuPrimitive.CheckboxItem
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  ),
+);
+
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuRadioItem
  * -------------------------------------------------------------------------- */
 
-type ContextMenuRadioItemElement = React.ElementRef<
-  typeof ContextMenuPrimitive.RadioItem
->;
-type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.RadioItem
->;
-
-const ContextMenuRadioItem = React.forwardRef<
-  ContextMenuRadioItemElement,
-  ContextMenuRadioItemProps
->(({ children, className, ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
-));
+type ContextMenuRadioItemElement = React.ElementRef<typeof ContextMenuPrimitive.RadioItem>;
+type ContextMenuRadioItemProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>;
+
+const ContextMenuRadioItem = React.forwardRef<ContextMenuRadioItemElement, ContextMenuRadioItemProps>(
+  ({ children, className, ...props }, ref) => (
+    <ContextMenuPrimitive.RadioItem
+      ref={ref}
+      className={cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm focus:outline-none aria-disabled:pointer-events-none aria-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <DotFilledIcon className="size-4 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  ),
+);
 
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
@@ -249,29 +206,21 @@ ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
  * Component: ContextMenuLabel
  * -------------------------------------------------------------------------- */
 
-type ContextMenuLabelElement = React.ElementRef<
-  typeof ContextMenuPrimitive.Label
->;
+type ContextMenuLabelElement = React.ElementRef<typeof ContextMenuPrimitive.Label>;
 
-interface ContextMenuLabelProps
-  extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> {
+interface ContextMenuLabelProps extends React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> {
   inset?: boolean;
 }
 
-const ContextMenuLabel = React.forwardRef<
-  ContextMenuLabelElement,
-  ContextMenuLabelProps
->(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      'text-foreground px-2 py-1.5 text-sm font-semibold',
-      inset && 'pl-8',
-      className,
-    )}
-    {...props}
-  />
-));
+const ContextMenuLabel = React.forwardRef<ContextMenuLabelElement, ContextMenuLabelProps>(
+  ({ className, inset, ...props }, ref) => (
+    <ContextMenuPrimitive.Label
+      ref={ref}
+      className={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      {...props}
+    />
+  ),
+);
 
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
@@ -279,23 +228,14 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
  * Component: ContextMenuSeparator
  * -------------------------------------------------------------------------- */
 
-type ContextMenuSeparatorElement = React.ElementRef<
-  typeof ContextMenuPrimitive.Separator
->;
-type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<
-  typeof ContextMenuPrimitive.Separator
->;
-
-const ContextMenuSeparator = React.forwardRef<
-  ContextMenuSeparatorElement,
-  ContextMenuSeparatorProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn('bg-border -mx-1 my-1 h-px', className)}
-    {...props}
-  />
-));
+type ContextMenuSeparatorElement = React.ElementRef<typeof ContextMenuPrimitive.Separator>;
+type ContextMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>;
+
+const ContextMenuSeparator = React.forwardRef<ContextMenuSeparatorElement, ContextMenuSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Separator ref={ref} className={cn('bg-border -mx-1 my-1 h-px', className)} {...props} />
+  ),
+);
 
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
@@ -305,40 +245,22 @@ ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 type ContextMenuShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
 
-function ContextMenuShortcut({
-  className,
-  ...props
-}: ContextMenuShortcutProps): React.JSX.Element {
-  return (
-    <span
-      className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className,
-      )}
-      {...props}
-    />
-  );
+function ContextMenuShortcut({ className, ...props }: ContextMenuShortcutProps): React.JSX.Element {
+  return <span className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Component: ContextMenuArrow
  * -------------------------------------------------------------------------- */
 
-type ContextMenuArrowElement = React.ElementRef<
-  typeof ContextMenuPrimitive.Arrow
->;
+type ContextMenuArrowElement = React.ElementRef<typeof ContextMenuPrimitive.Arrow>;
 type ContextMenuArrowProps = ContextMenuPrimitive.ContextMenuArrowProps;
 
-const ContextMenuArrow = React.forwardRef<
-  ContextMenuArrowElement,
-  ContextMenuArrowProps
->(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Arrow
-    ref={ref}
-    className={cn('fill-popover', className)}
-    {...props}
-  />
-));
+const ContextMenuArrow = React.forwardRef<ContextMenuArrowElement, ContextMenuArrowProps>(
+  ({ className, ...props }, ref) => (
+    <ContextMenuPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
+  ),
+);
 
 ContextMenuArrow.displayName = ContextMenuPrimitive.Arrow.displayName;
 

package/src/react/data-table.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import type * as ReactTable from '@tanstack/react-table';
 import {
   ArrowDownIcon,
   ArrowUpIcon,
@@ -24,13 +23,8 @@ import {
   DropdownMenuTrigger,
 } from './dropdown-menu';
 import { Button } from './button';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from './select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './select';
+import type * as ReactTable from '@tanstack/react-table';
 
 /* -----------------------------------------------------------------------------
  * Component: DataTableViewOptions
@@ -40,17 +34,11 @@ interface DataTableViewOptionsProps<TData> {
   table: ReactTable.Table<TData>;
 }
 
-function DataTableViewOptions<TData>({
-  table,
-}: DataTableViewOptionsProps<TData>): React.JSX.Element {
+function DataTableViewOptions<TData>({ table }: DataTableViewOptionsProps<TData>): React.JSX.Element {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="ml-auto hidden h-8 lg:flex"
-        >
+        <Button variant="outline" size="sm" className="ml-auto hidden h-8 lg:flex">
           <MixerHorizontalIcon className="mr-2 size-4" />
           View
         </Button>
@@ -60,10 +48,7 @@ function DataTableViewOptions<TData>({
         <DropdownMenuSeparator />
         {table
           .getAllColumns()
-          .filter(
-            (column) =>
-              typeof column.accessorFn !== 'undefined' && column.getCanHide(),
-          )
+          .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
           .map((column) => {
             return (
               <DropdownMenuCheckboxItem
@@ -87,8 +72,7 @@ function DataTableViewOptions<TData>({
  * Component: DataTablePagination
  * -------------------------------------------------------------------------- */
 
-interface DataTablePaginationProps<TData>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTablePaginationProps<TData> extends React.HTMLAttributes<HTMLDivElement> {
   table: ReactTable.Table<TData>;
 }
 
@@ -98,13 +82,9 @@ function DataTablePagination<TData>({
   ...props
 }: DataTablePaginationProps<TData>): React.JSX.Element {
   return (
-    <div
-      className={cn('flex items-center justify-between px-2', className)}
-      {...props}
-    >
+    <div className={cn('flex items-center justify-between px-2', className)} {...props}>
       <div className="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} of{' '}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
+        {table.getFilteredSelectedRowModel().rows.length} of {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
       <div className="flex items-center space-x-6 lg:space-x-8">
         <div className="flex items-center space-x-2">
@@ -128,14 +108,13 @@ function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex w-28 items-center justify-center text-sm font-medium">
-          Page {table.getState().pagination.pageIndex + 1} of{' '}
-          {table.getPageCount()}
+          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
         </div>
         <div className="flex items-center space-x-2">
           <Button
             variant="outline"
             size="icon-xs"
-            className="hidden  lg:flex"
+            className="hidden lg:flex"
             onClick={() => {
               table.setPageIndex(0);
             }}
@@ -169,7 +148,7 @@ function DataTablePagination<TData>({
           <Button
             variant="outline"
             size="icon-xs"
-            className="hidden  lg:flex"
+            className="hidden lg:flex"
             onClick={() => {
               table.setPageIndex(table.getPageCount() - 1);
             }}
@@ -188,8 +167,7 @@ function DataTablePagination<TData>({
  * Component: DataTableColumnHeader
  * -------------------------------------------------------------------------- */
 
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
   column: ReactTable.Column<TData, TValue>;
   title: string;
 }
@@ -207,11 +185,7 @@ function DataTableColumnHeader<TData, TValue>({
     <div className={cn('flex items-center space-x-2', className)}>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button
-            variant="ghost"
-            size="xs"
-            className="data-[state=open]:bg-accent -ml-3"
-          >
+          <Button variant="ghost" size="xs" className="data-[state=open]:bg-accent -ml-3">
             <span>{title}</span>
             <SortIcon sorted={column.getIsSorted()} />
           </Button>
@@ -248,16 +222,14 @@ function DataTableColumnHeader<TData, TValue>({
   );
 }
 
-function SortIcon({
-  sorted,
-}: {
-  sorted: false | ReactTable.SortDirection;
-}): React.JSX.Element {
+function SortIcon({ sorted }: { sorted: false | ReactTable.SortDirection }): React.JSX.Element {
   switch (sorted) {
     case 'desc':
       return <ArrowDownIcon className="ml-2 size-4" />;
+
     case 'asc':
       return <ArrowUpIcon className="ml-2 size-4" />;
+
     default:
       return <CaretSortIcon className="ml-2 size-4" />;
   }