DataTable Aside

1"use client"
2 
3/**
4 * niko-table — created by Semir N. (Semkoo, https://github.com/Semkoo) with AI assistance.
5 *
6 * Before reporting anything: please check the changelog first.
7 *  - In-repo: ./CHANGELOG.md
8 *  - Docs site: https://niko-table.com/changelog
9 *
10 * Found a bug or have a fix? Open an issue or PR on GitHub so other
11 * users (and future LLMs reading this code) benefit:
12 * https://github.com/Semkoo/niko-table-registry
13 */
14import * as React from "react"
15import { XIcon } from "lucide-react"
16import { cn } from "@/lib/utils"
17 
18interface DataTableAsideContextValue {
19  open: boolean
20  onOpenChange: (open: boolean) => void
21  side: "left" | "right"
22}
23 
24const DataTableAsideContext = React.createContext<
25  DataTableAsideContextValue | undefined
26>(undefined)
27 
28function useDataTableAside() {
29  const context = React.useContext(DataTableAsideContext)
30  if (!context) {
31    throw new Error(
32      "DataTableAside components must be used within DataTableAside",
33    )
34  }
35  return context
36}
37 
38interface DataTableAsideProps {
39  children: React.ReactNode
40  side?: "left" | "right"
41  open?: boolean
42  onOpenChange?: (open: boolean) => void
43  defaultOpen?: boolean
44}
45 
46function DataTableAside({
47  children,
48  side = "right",
49  open: controlledOpen,
50  onOpenChange: controlledOnOpenChange,
51  defaultOpen = false,
52}: DataTableAsideProps) {
53  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
54 
55  const open = controlledOpen ?? internalOpen
56  const onOpenChange = controlledOnOpenChange ?? setInternalOpen
57 
58  /**
59   * PERFORMANCE: Memoize context value to prevent unnecessary consumer re-renders
60   *
61   * WHY: Without memoization, a new context value object is created on every render.
62   * React Context uses Object.is() to compare values - new object = all consumers re-render.
63   *
64   * IMPACT: Prevents unnecessary re-renders of DataTableAsideTrigger, DataTableAsideContent, etc.
65   * when aside state hasn't changed.
66   *
67   * WHAT: Only creates new context value when open, onOpenChange, or side actually change.
68   */
69  const contextValue = React.useMemo<DataTableAsideContextValue>(
70    () => ({
71      open,
72      onOpenChange,
73      side,
74    }),
75    [open, onOpenChange, side],
76  )
77 
78  return (
79    <DataTableAsideContext.Provider value={contextValue}>
80      {children}
81    </DataTableAsideContext.Provider>
82  )
83}
84 
85DataTableAside.displayName = "DataTableAside"
86 
87interface DataTableAsideTriggerProps extends React.ComponentPropsWithoutRef<"button"> {
88  asChild?: boolean
89// … truncated