Data Table

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 React from "react"
15import { cn } from "@/lib/utils"
16import { TableComponent } from "@/components/ui/table"
17 
18import { useColumnResizeInfo, useDataTable } from "./data-table-context"
19 
20/**
21 * Extracts height from Tailwind arbitrary values (e.g., h-[600px], max-h-[400px]).
22 * Converts them to inline styles to ensure scroll events work reliably.
23 * For other height utilities, use the height/maxHeight props directly.
24 */
25function parseHeightFromClassName(className?: string) {
26  if (!className)
27    return { height: undefined, maxHeight: undefined, safeClassName: className }
28 
29  const classes = className.split(/\s+/)
30  let height: string | undefined
31  let maxHeight: string | undefined
32  const remainingClasses: string[] = []
33 
34  for (const cls of classes) {
35    // Match arbitrary values: h-[600px], max-h-[400px]
36    const heightMatch = cls.match(/^h-\[([^\]]+)\]$/)
37    const maxHeightMatch = cls.match(/^max-h-\[([^\]]+)\]$/)
38 
39    if (heightMatch) {
40      height = heightMatch[1]
41    } else if (maxHeightMatch) {
42      maxHeight = maxHeightMatch[1]
43    } else {
44      remainingClasses.push(cls)
45    }
46  }
47 
48  return {
49    height,
50    maxHeight,
51    safeClassName: remainingClasses.join(" "),
52  }
53}
54 
55export interface DataTableContainerProps {
56  children: React.ReactNode
57  /**
58   * Additional CSS classes for the container.
59   * Arbitrary height values (e.g., h-[600px], max-h-[400px]) are automatically extracted
60   * and applied as inline styles to ensure scroll event callbacks work reliably.
61   * For other height utilities, use the height/maxHeight props directly.
62   */
63  className?: string
64  /**
65   * Sets the height of the table container.
66   * When provided, enables vertical scrolling and allows DataTableBody/DataTableVirtualizedBody
67   * to use onScroll, onScrolledTop, and onScrolledBottom callbacks.
68   * Takes precedence over height utilities in className.
69   */
70  height?: number | string
71  /**
72   * Sets the maximum height of the table container.
73   * Defaults to the height value if not specified.
74// … truncated