@eggspot/ui 0.0.0

package/src/components/DataTable/DataTable.tsx

@@ -0,0 +1,557 @@
+import { memo, RefObject, useEffect, useMemo, useRef } from "react"
+import { Checkbox } from "@eggspot/ui/components/Checkbox"
+import { DataTableProps } from "@eggspot/ui/components/DataTable/types/data-table"
+import { cn } from "@eggspot/ui/lib/utils"
+import {
+  Cell,
+  ColumnDef,
+  ColumnPinningState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  Header,
+  Table,
+  useReactTable,
+} from "@tanstack/react-table"
+import { useVirtualizer } from "@tanstack/react-virtual"
+
+import { FilterValue } from "../Filter"
+import { DataTableDisplaySettings } from "./DataTableDisplaySettings"
+import { DataTableFloatingBar } from "./DataTableFloatingBar"
+import { DataTablePagination } from "./DataTablePagination"
+import {
+  DataTableEmpty,
+  DataTableError,
+  DataTableLoading,
+} from "./DataTableStates"
+import { DataTableToolbarContainer } from "./DataTableToolbarContainer"
+import { useDataTableSettings } from "./hooks/use-data-table-settings"
+
+function HeaderCell({
+  header,
+  isPinned,
+}: {
+  header: Header<any, any>
+  isPinned?: "left" | "right"
+}) {
+  const isResizing = header.column.getIsResizing()
+  return (
+    <th
+      key={header.id}
+      className={cn(
+        "text-gray-11 bg-gray-4 relative h-11 px-4 text-left align-middle font-semibold",
+        isPinned === "left" &&
+          "sticky left-0 z-20 shadow-[-6px_0_2px_-6px_var(--gray-6)_inset]",
+        isPinned === "right" &&
+          "sticky right-0 z-20 shadow-[6px_0_2px_-6px_var(--gray-6)_inset]",
+        header.column.getCanResize() && "group"
+      )}
+      style={{
+        width: header.getSize(),
+        minWidth: header.column.columnDef.minSize,
+        maxWidth: header.column.columnDef.maxSize,
+        ...(isPinned === "left" && {
+          left: header.column.getStart("left"),
+        }),
+        ...(isPinned === "right" && {
+          right: header.column.getAfter("right"),
+        }),
+      }}
+    >
+      {header.isPlaceholder
+        ? null
+        : flexRender(header.column.columnDef.header, header.getContext())}
+      {header.column.getCanResize() && (
+        <div
+          data-slot="data-table-resize-handle"
+          onMouseDown={header.getResizeHandler()}
+          onTouchStart={header.getResizeHandler()}
+          className={cn(
+            "group/resize-handle absolute top-0 right-0 z-10 flex h-full w-2 cursor-col-resize touch-none items-center justify-center select-none"
+          )}
+        >
+          <div
+            className={cn(
+              "bg-gray-7 group-hover/resize-handle:bg-gray-11 h-6 w-px transition-colors duration-150",
+              isResizing && "bg-accent-9!"
+            )}
+          />
+        </div>
+      )}
+    </th>
+  )
+}
+
+function TableCell({
+  cell,
+  isPinned,
+}: {
+  cell: Cell<any, any>
+  isPinned?: "left" | "right"
+}) {
+  return (
+    <td
+      key={cell.id}
+      title={cell.getValue()}
+      className={cn(
+        "group-hover:bg-gray-3 truncate px-4 py-1 align-middle text-sm",
+        "group-data-[state=selected]:bg-gray-4",
+        isPinned === "left" &&
+          "bg-gray-2 group-data-[state=selected]:bg-gray-5 sticky left-0 z-10 shadow-[-6px_0_2px_-6px_var(--gray-6)_inset]",
+        isPinned === "right" &&
+          "bg-gray-2 group-data-[state=selected]:bg-gray-5 sticky right-0 z-10 shadow-[6px_0_2px_-6px_var(--gray-6)_inset]"
+      )}
+      style={{
+        width: cell.column.getSize(),
+        minWidth: cell.column.columnDef.minSize,
+        maxWidth: cell.column.columnDef.maxSize,
+        ...(isPinned === "left" && {
+          left: cell.column.getStart("left"),
+        }),
+        ...(isPinned === "right" && {
+          right: cell.column.getAfter("right"),
+        }),
+      }}
+    >
+      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+    </td>
+  )
+}
+
+function TableBody({
+  table,
+  tableContainerRef,
+  estimatedRowHeight,
+}: {
+  table: Table<any>
+  tableContainerRef: RefObject<HTMLDivElement | null>
+  estimatedRowHeight: number
+}) {
+  const { rows } = table.getRowModel()
+  const rowVirtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => tableContainerRef.current,
+    estimateSize: () => estimatedRowHeight,
+    overscan: 10,
+  })
+
+  const virtualRows = rowVirtualizer.getVirtualItems()
+  const totalSize = rowVirtualizer.getTotalSize()
+
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0]?.start || 0 : 0
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalSize - (virtualRows[virtualRows.length - 1]?.end || 0)
+      : 0
+
+  const leftPinnedColumns = table.getLeftVisibleLeafColumns()
+  const rightPinnedColumns = table.getRightVisibleLeafColumns()
+  const centerColumns = table.getCenterVisibleLeafColumns()
+
+  return (
+    <tbody>
+      {paddingTop > 0 && (
+        <tr>
+          <td style={{ height: `${paddingTop}px` }} />
+        </tr>
+      )}
+      {virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index]
+
+        if (!row) return null
+
+        const isSelected = row.getIsSelected()
+
+        return (
+          <tr
+            key={row.id}
+            data-state={isSelected ? "selected" : undefined}
+            className={cn(
+              "group border-gray-3 h-11 border-b transition-colors"
+            )}
+          >
+            {leftPinnedColumns.map((column) => {
+              const cell = row
+                .getVisibleCells()
+                .find((c) => c.column.id === column.id)
+              return cell ? (
+                <TableCell key={cell.id} cell={cell} isPinned="left" />
+              ) : null
+            })}
+            {centerColumns.map((column) => {
+              const cell = row
+                .getVisibleCells()
+                .find((c) => c.column.id === column.id)
+              return cell ? <TableCell key={cell.id} cell={cell} /> : null
+            })}
+            {rightPinnedColumns.map((column) => {
+              const cell = row
+                .getVisibleCells()
+                .find((c) => c.column.id === column.id)
+              return cell ? (
+                <TableCell key={cell.id} cell={cell} isPinned="right" />
+              ) : null
+            })}
+          </tr>
+        )
+      })}
+      {paddingBottom > 0 && (
+        <tr>
+          <td style={{ height: `${paddingBottom}px` }} />
+        </tr>
+      )}
+    </tbody>
+  )
+}
+
+const MemoizedTableBody = memo(
+  TableBody,
+  (prev, next) => prev.table.options.data === next.table.options.data
+) as typeof TableBody
+
+export function DataTable<TData extends { id: string | number }>({
+  // Core data
+  columns,
+  data,
+  dataSource = "server",
+
+  // Loading/error states
+  isLoading = false,
+  isFetching,
+  isError = false,
+  errorMessage,
+
+  // Components
+  filterBar,
+  actionBar,
+
+  // State for server-side operations
+  initialState,
+  onStateChange,
+  rowCount,
+
+  // Selection
+  enableRowSelection = true,
+
+  // Display settings
+  storageKey = "default-table",
+  defaultColumnVisibility = {},
+  defaultColumnSizing = {},
+  defaultColumnPinning = { left: [], right: [] },
+  defaultColumnOrder,
+
+  // Virtualization
+  estimatedRowHeight = 44,
+
+  // Custom empty state
+  emptyStateTitle,
+  emptyStateDescription,
+}: DataTableProps<TData>) {
+  const rendered = useRef(false)
+  const tableContainerRef = useRef<HTMLDivElement>(null)
+
+  // Calculate default column order from columns if not provided
+  const calculatedDefaultOrder = useMemo(() => {
+    if (defaultColumnOrder) return defaultColumnOrder
+    return [
+      "select",
+      ...(columns
+        .map(
+          (col) =>
+            (col as { accessorKey?: string }).accessorKey ||
+            (col as { id?: string }).id
+        )
+        .filter(Boolean) as string[]),
+    ]
+  }, [columns, defaultColumnOrder])
+
+  const {
+    settings,
+    updateColumnVisibility,
+    updateColumnSizing,
+    updateColumnPinning,
+    updateColumnOrder,
+    resetToDefaults,
+  } = useDataTableSettings({
+    storageKey,
+    defaultColumnVisibility,
+    defaultColumnSizing,
+    defaultColumnPinning,
+    defaultColumnOrder: calculatedDefaultOrder,
+  })
+
+  // Selection column
+  const selectionColumn: ColumnDef<TData> = {
+    id: "select",
+    size: 48,
+    minSize: 48,
+    maxSize: 48,
+    enableResizing: false,
+    enableSorting: false,
+    enableHiding: false,
+    header: ({ table }) => {
+      return (
+        <div className="flex items-center justify-center">
+          <Checkbox
+            isSelected={table.getIsAllPageRowsSelected()}
+            isIndeterminate={table.getIsSomePageRowsSelected()}
+            onChange={(isSelected) => {
+              table.toggleAllPageRowsSelected(isSelected)
+            }}
+            aria-label="Select all"
+            className="translate-y-[2px]"
+          />
+        </div>
+      )
+    },
+    cell: ({ row }) => (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          isSelected={row.getIsSelected()}
+          isDisabled={!row.getCanSelect()}
+          isIndeterminate={row.getIsSomeSelected()}
+          onChange={row.getToggleSelectedHandler()}
+          aria-label="Select row"
+          className="translate-y-[2px]"
+        />
+      </div>
+    ),
+  }
+
+  const allColumns = useMemo(() => {
+    if (enableRowSelection) {
+      return [selectionColumn, ...columns]
+    }
+    return columns
+  }, [columns, enableRowSelection])
+
+  // Always pin selection column to the left
+  const columnPinning = useMemo((): ColumnPinningState => {
+    const left = settings.columnPinning.left || []
+    const right = settings.columnPinning.right || []
+
+    // Ensure "select" is always first in left pinned columns when row selection is enabled
+    if (enableRowSelection && !left.includes("select")) {
+      return { left: ["select", ...left], right }
+    }
+    return { left, right }
+  }, [settings.columnPinning, enableRowSelection])
+
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    initialState: {
+      pagination: {
+        pageSize: 20,
+      },
+      ...initialState,
+    },
+    rowCount: rowCount,
+    state: {
+      columnVisibility: settings.columnVisibility,
+      columnSizing: settings.columnSizing,
+      columnPinning,
+      columnOrder:
+        settings.columnOrder.length > 0
+          ? settings.columnOrder
+          : calculatedDefaultOrder,
+    },
+    enableColumnResizing: true,
+    columnResizeMode: "onChange",
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    globalFilterFn: "auto",
+    onColumnVisibilityChange: (updater) => {
+      const newVisibility =
+        typeof updater === "function"
+          ? updater(settings.columnVisibility)
+          : updater
+      updateColumnVisibility(newVisibility)
+    },
+    onColumnSizingChange: (updater) => {
+      const newSizing =
+        typeof updater === "function" ? updater(settings.columnSizing) : updater
+      updateColumnSizing(newSizing)
+    },
+    onColumnPinningChange: (updater) => {
+      const newPinning =
+        typeof updater === "function"
+          ? updater(settings.columnPinning)
+          : updater
+      updateColumnPinning(newPinning)
+    },
+    onColumnOrderChange: (updater) => {
+      const newOrder =
+        typeof updater === "function" ? updater(settings.columnOrder) : updater
+      updateColumnOrder(newOrder)
+    },
+    getRowId: (row) => String(row.id),
+    manualPagination: dataSource === "server",
+    manualFiltering: dataSource === "server",
+    manualSorting: dataSource === "server",
+  })
+
+  const { rows } = table.getRowModel()
+
+  // Get pinned and center columns
+  const leftPinnedColumns = table.getLeftVisibleLeafColumns()
+  const rightPinnedColumns = table.getRightVisibleLeafColumns()
+  const centerColumns = table.getCenterVisibleLeafColumns()
+
+  const state = table.getState()
+
+  // column filters props (client side)
+  const columnFilters: FilterValue = useMemo(
+    () =>
+      state.columnFilters.reduce((acc, filter) => {
+        try {
+          acc[filter.id] = filter.value as any
+          return acc
+        } catch (error) {
+          return acc
+        }
+      }, {} as FilterValue),
+    [state.columnFilters]
+  )
+  const setColumnFilters = (filters: FilterValue) => {
+    table.setColumnFilters(
+      Object.entries(filters).map(([id, value]) => ({ id, value }))
+    )
+  }
+
+  // Notify parent of filters change
+  useEffect(() => {
+    onStateChange?.(state)
+
+    setTimeout(() => {
+      rendered.current = true
+    }, 200)
+
+    if (rendered.current) {
+      table.setPageIndex(0)
+    }
+  }, [
+    state.pagination.pageSize,
+    state.sorting,
+    state.globalFilter,
+    state.columnFilters,
+  ])
+
+  // Notify parent of page index change
+  useEffect(() => {
+    onStateChange?.(state)
+  }, [state.pagination.pageIndex])
+
+  const clearSelection = () => {
+    table.resetRowSelection()
+  }
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {/* Toolbar */}
+      <DataTableToolbarContainer table={table}>
+        <div>
+          {filterBar?.({ value: columnFilters, onChange: setColumnFilters })}
+        </div>
+        <DataTableDisplaySettings
+          table={table}
+          onResetToDefaults={resetToDefaults}
+        />
+      </DataTableToolbarContainer>
+
+      {/* Table Container */}
+      <div ref={tableContainerRef} className="relative flex-1 overflow-auto">
+        <table
+          data-fetching={isFetching ? "true" : undefined}
+          className="w-full table-fixed border-collapse data-[fetching=true]:opacity-60"
+        >
+          <thead className="sticky top-0 z-30">
+            {table.getHeaderGroups().map((headerGroup) => (
+              <tr key={headerGroup.id}>
+                {leftPinnedColumns.map((column) => {
+                  const header = headerGroup.headers.find(
+                    (h) => h.column.id === column.id
+                  )
+                  return header ? (
+                    <HeaderCell
+                      key={header.id}
+                      header={header}
+                      isPinned="left"
+                    />
+                  ) : null
+                })}
+                {centerColumns.map((column) => {
+                  const header = headerGroup.headers.find(
+                    (h) => h.column.id === column.id
+                  )
+                  return header ? (
+                    <HeaderCell key={header.id} header={header} />
+                  ) : null
+                })}
+                {rightPinnedColumns.map((column) => {
+                  const header = headerGroup.headers.find(
+                    (h) => h.column.id === column.id
+                  )
+                  return header ? (
+                    <HeaderCell
+                      key={header.id}
+                      header={header}
+                      isPinned="right"
+                    />
+                  ) : null
+                })}
+              </tr>
+            ))}
+          </thead>
+          {isLoading ? (
+            <DataTableLoading />
+          ) : isError ? (
+            <DataTableError message={errorMessage} />
+          ) : rows.length === 0 ? (
+            <DataTableEmpty
+              title={emptyStateTitle}
+              description={emptyStateDescription}
+            />
+          ) : (
+            <>
+              {table.getState().columnSizingInfo.isResizingColumn ? (
+                <MemoizedTableBody
+                  table={table}
+                  tableContainerRef={tableContainerRef}
+                  estimatedRowHeight={estimatedRowHeight}
+                />
+              ) : (
+                <TableBody
+                  table={table}
+                  tableContainerRef={tableContainerRef}
+                  estimatedRowHeight={estimatedRowHeight}
+                />
+              )}
+            </>
+          )}
+        </table>
+      </div>
+
+      <DataTablePagination
+        pageIndex={table.getState().pagination.pageIndex}
+        pageSize={table.getState().pagination.pageSize}
+        totalRows={table.getRowCount()}
+        onPageChange={table.setPageIndex}
+        onPageSizeChange={table.setPageSize}
+      />
+
+      {actionBar && enableRowSelection && (
+        <DataTableFloatingBar
+          selectedCount={Object.keys(table.getState().rowSelection).length}
+          onClearSelection={clearSelection}
+        >
+          {actionBar?.({ table, clearSelection })}
+        </DataTableFloatingBar>
+      )}
+    </div>
+  )
+}

package/src/components/DataTable/DataTableColumnHeader.tsx

@@ -0,0 +1,122 @@
+import { Button } from "@eggspot/ui/components/Button"
+import { cn } from "@eggspot/ui/lib/utils"
+import { Column } from "@tanstack/react-table"
+import {
+  ArrowDown,
+  ArrowUp,
+  ArrowUpDown,
+  EyeOff,
+  Pin,
+  PinOff,
+} from "lucide-react"
+
+import {
+  Menu,
+  MenuItem,
+  MenuPopover,
+  MenuSeparator,
+  MenuTrigger,
+} from "../Menu"
+
+interface DataTableColumnHeaderProps<TData, TValue>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>
+  title: string
+  enableSorting?: boolean
+  enablePinning?: boolean
+  enableHiding?: boolean
+}
+
+export function DataTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+  enableSorting = true,
+  enablePinning = true,
+  enableHiding = true,
+}: DataTableColumnHeaderProps<TData, TValue>) {
+  const isSorted = column.getIsSorted()
+  const isPinned = column.getIsPinned()
+
+  if (!enableSorting && !enablePinning && !enableHiding) {
+    return <div className={cn("flex items-center", className)}>{title}</div>
+  }
+
+  return (
+    <div className={cn("flex items-center gap-1", className)}>
+      <MenuTrigger>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn(
+            "text-gray-11 hover:bg-gray-5! hover:text-gray-12 aria-expanded:bg-gray-5! aria-expanded:text-gray-12 -ml-2 h-8 transition-colors",
+            isSorted && "text-gray-12 font-semibold"
+          )}
+          rightIcon={
+            isSorted === "desc" ? (
+              <ArrowDown />
+            ) : isSorted === "asc" ? (
+              <ArrowUp />
+            ) : (
+              <ArrowUpDown />
+            )
+          }
+        >
+          {title}
+        </Button>
+        <MenuPopover>
+          <Menu>
+            {enableSorting && (
+              <>
+                <MenuItem onClick={() => column.toggleSorting(false)}>
+                  <ArrowUp className="text-gray-11 mr-2 h-3.5 w-3.5" />
+                  Sort ascending
+                </MenuItem>
+                <MenuItem onClick={() => column.toggleSorting(true)}>
+                  <ArrowDown className="text-gray-11 mr-2 h-3.5 w-3.5" />
+                  Sort descending
+                </MenuItem>
+                {isSorted && (
+                  <MenuItem onClick={() => column.clearSorting()}>
+                    <ArrowUpDown className="text-gray-11 mr-2 h-3.5 w-3.5" />
+                    Clear sorting
+                  </MenuItem>
+                )}
+                {(enablePinning || enableHiding) && <MenuSeparator />}
+              </>
+            )}
+            {enablePinning && (
+              <>
+                {isPinned !== "left" && (
+                  <MenuItem onClick={() => column.pin("left")}>
+                    <Pin className="text-gray-11 mr-2 h-3.5 w-3.5 rotate-45" />
+                    Pin to left
+                  </MenuItem>
+                )}
+                {isPinned !== "right" && (
+                  <MenuItem onClick={() => column.pin("right")}>
+                    <Pin className="text-gray-11 mr-2 h-3.5 w-3.5 -rotate-45" />
+                    Pin to right
+                  </MenuItem>
+                )}
+                {isPinned && (
+                  <MenuItem onClick={() => column.pin(false)}>
+                    <PinOff className="text-gray-11 mr-2 h-3.5 w-3.5" />
+                    Unpin column
+                  </MenuItem>
+                )}
+                {enableHiding && <MenuSeparator />}
+              </>
+            )}
+            {enableHiding && (
+              <MenuItem onClick={() => column.toggleVisibility(false)}>
+                <EyeOff className="text-gray-11 mr-2 h-3.5 w-3.5" />
+                Hide column
+              </MenuItem>
+            )}
+          </Menu>
+        </MenuPopover>
+      </MenuTrigger>
+    </div>
+  )
+}