@moloodev/ui 0.6.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moloodev/ui",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "sideEffects": [
     "**/*.css"
@@ -94,6 +94,7 @@
     "@shadcn/react": "^0.2.1",
     "@tabler/icons-react": "^3.46.0",
     "@tanstack/react-table": "^9.2.4",
+    "@tanstack/table-core": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
@@ -122,8 +123,8 @@
     "tailwindcss": "^4.3.3",
     "tsx": "^4.23.13",
     "typescript": "^7.0.2",
-    "@moloodev/platform": "0.6.0",
-    "@moloodev/typescript-config": "0.6.0"
+    "@moloodev/platform": "0.8.0",
+    "@moloodev/typescript-config": "0.8.0"
   },
   "publishConfig": {
     "access": "public"

package/registry/components.ts

@@ -95,7 +95,7 @@ export const components: ComponentMeta[] = [
   { slug: "kind-icon", title: "Kind Icon", description: "Lazily loads any Tabler icon by kebab-case name for asset kinds.", category: "Data Display" },
   { slug: "kind-mark", title: "Kind Mark", description: "Coloured kind tile with a Tabler glyph. Props match platform kind values.", category: "Data Display" },
   { slug: "chart", title: "Chart", description: "Charts built with Recharts in the moloo palette.", category: "Data Display" },
-  { slug: "data-table", title: "Data Table", description: "Headless table from TanStack Table createTableHook, with sorting, row selection, and pagination.", category: "Data Display" },
+  { slug: "data-table", title: "Data Table", description: "Headless table from TanStack Table createTableHook, with sorting, row selection, pagination, and per-column size and class names.", category: "Data Display" },
   { slug: "bubble", title: "Bubble", description: "Chat bubble content with variants for messages.", category: "Data Display" },
   { slug: "message", title: "Message", description: "Compose chat messages with alignment and metadata.", category: "Data Display" },
   { slug: "message-scroller", title: "Message Scroller", description: "Scroll container helpers for chat threads.", category: "Data Display" },

package/src/components/ui/data-table.tsx

@@ -28,11 +28,14 @@ import {
   sortFn_text,
   Subscribe,
   tableFeatures,
+  type CellData,
   type ColumnFiltersState,
   type PaginationState,
   type RowData,
   type RowSelectionState,
   type SortingState,
+  type TableFeature,
+  type TableFeatures,
   type TableState,
 } from "@tanstack/react-table"
 
@@ -65,6 +68,7 @@ import {
 } from "./table"
 import { toast } from "./toast"
 import { cn } from "../../lib/utils"
+import { formatRelativeTime } from "../../lib/format-relative-time"
 
 export type EnumFilterOption = {
   value: string
@@ -83,7 +87,39 @@ export type ColumnMetaWithCopyable = {
   copyable?: boolean
 }
 
-type DataTableColumnMeta = ColumnMetaWithEnumFilter & ColumnMetaWithCopyable
+export interface ColumnMetaWithLayout {
+  className?: string
+  headerClassName?: string
+  cellClassName?: string
+}
+
+declare module "@tanstack/table-core" {
+  interface ColumnMeta<
+    in out TFeatures extends TableFeatures,
+    in out TData extends RowData,
+    TValue extends CellData = CellData,
+  > extends ColumnMetaWithLayout {}
+
+  interface Plugins {
+    explicitColumnSizeFeature?: TableFeature
+  }
+
+  interface ColumnDef_FeatureMap<
+    in out TFeatures extends TableFeatures,
+    in out TData extends RowData,
+    TValue extends CellData,
+  > {
+    explicitColumnSizeFeature: { size?: number }
+  }
+}
+
+type DataTableColumnMeta = ColumnMetaWithEnumFilter &
+  ColumnMetaWithCopyable &
+  ColumnMetaWithLayout
+
+const explicitColumnSizeFeature = {
+  getDefaultColumnDef: () => ({}),
+} satisfies TableFeature
 
 export function compareValues(av: unknown, bv: unknown): number {
   if (av == null && bv == null) return 0
@@ -297,19 +333,26 @@ function BadgeCell({
   return <Badge variant={variant}>{String(value)}</Badge>
 }
 
-function formatDate(value: unknown, locale?: string) {
-  if (value == null || value === "") return "—"
-  const date = value instanceof Date ? value : new Date(String(value))
-  if (Number.isNaN(date.getTime())) return "—"
-  return date.toLocaleString(locale)
-}
-
-function DateTime({ locale }: { locale?: string } = {}) {
+function DateTime({
+  locale,
+  relative = false,
+}: { locale?: string; relative?: boolean } = {}) {
   const cell = useCellContext()
+  const value = cell.getValue()
+  const date = value instanceof Date ? value : new Date(String(value))
+  if (value == null || value === "" || Number.isNaN(date.getTime())) {
+    return <span className="text-muted-foreground tabular-nums">—</span>
+  }
+  const exact = date.toLocaleString(locale)
   return (
-    <span className="text-muted-foreground tabular-nums">
-      {formatDate(cell.getValue(), locale)}
-    </span>
+    <time
+      dateTime={date.toISOString()}
+      title={exact}
+      suppressHydrationWarning
+      className="text-muted-foreground tabular-nums"
+    >
+      {relative ? formatRelativeTime(date, Date.now(), locale) : exact}
+    </time>
   )
 }
 
@@ -550,6 +593,7 @@ function SelectHeader({
 
 const features = tableFeatures({
   columnMeta: metaHelper<DataTableColumnMeta>(),
+  explicitColumnSizeFeature,
   columnFilteringFeature,
   rowPaginationFeature,
   rowSelectionFeature,
@@ -593,6 +637,8 @@ const {
 
 export const useTable = useAppTable
 export const createColumnHelper = createAppColumnHelper
+export type ColumnDef<TData extends RowData> =
+  Parameters<typeof useTable<TData>>[0]["columns"][number]
 export { useTableContext, useCellContext, useHeaderContext, appFeatures, features }
 
 export type Table<
@@ -609,6 +655,7 @@ type RootProps<TData extends RowData, TSelected> = {
   loading?: boolean
   loadingFallback?: React.ReactNode
   empty?: React.ReactNode
+  onRowActivate?: (record: TData, element: HTMLTableRowElement) => void
   selector?: (state: TableState<typeof features>) => ViewState
 }
 
@@ -630,6 +677,30 @@ function reorderManualSortPage<TData extends RowData, TSelected>(
   })
 }
 
+function explicitColumnSize(column: {
+  columnDef: { size?: number }
+}): number | undefined {
+  const size = column.columnDef.size
+  if (typeof size !== "number" || !Number.isFinite(size) || size < 0) return undefined
+  return size
+}
+
+function columnClassName(
+  meta: ColumnMetaWithLayout | undefined,
+  part: "header" | "cell",
+): string | undefined {
+  const classes = cn(
+    meta?.className,
+    part === "header" ? meta?.headerClassName : meta?.cellClassName,
+  )
+  return classes === "" ? undefined : classes
+}
+
+function columnSizeStyle(size: number | undefined): React.CSSProperties | undefined {
+  if (size == null) return undefined
+  return { width: size, minWidth: size, maxWidth: size }
+}
+
 function columnAriaSort(
   sorting: SortingState | undefined,
   columnId: string,
@@ -647,6 +718,7 @@ export function Root<TData extends RowData, TSelected>({
   loading,
   loadingFallback,
   empty = "No results.",
+  onRowActivate,
   selector = (state) => state,
 }: RootProps<TData, TSelected>) {
   return (
@@ -654,30 +726,51 @@ export function Root<TData extends RowData, TSelected>({
       {(state) => {
         const rows = reorderManualSortPage(table, state.sorting)
         const showEmpty = !loading && rows.length === 0
+        const leaves = table.getAllLeafColumns()
+        const sized = leaves.some((column) => explicitColumnSize(column) != null)
 
         return (
           <div data-slot="data-table" className="flex w-full flex-col gap-3">
             {toolbar}
             <div className="overflow-hidden rounded-md border-2 border-border">
-              <Table>
+              <Table className={sized ? "table-fixed" : undefined}>
+                {sized ? (
+                  <colgroup>
+                    {leaves.map((column) => (
+                      <col
+                        key={column.id}
+                        style={columnSizeStyle(explicitColumnSize(column))}
+                      />
+                    ))}
+                  </colgroup>
+                ) : null}
                 <TableHeader>
                   {table.getHeaderGroups().map((headerGroup) => (
                     <TableRow key={headerGroup.id}>
-                      {headerGroup.headers.map((header) => (
-                        <table.AppHeader key={header.id} header={header}>
-                          {(bound) => (
-                            <TableHead
-                              aria-sort={
-                                header.column.getCanSort()
-                                  ? columnAriaSort(state.sorting, header.column.id)
-                                  : undefined
-                              }
-                            >
-                              {header.isPlaceholder ? null : <bound.FlexRender />}
-                            </TableHead>
-                          )}
-                        </table.AppHeader>
-                      ))}
+                      {headerGroup.headers.map((header) => {
+                        const leaf = header.column.columns.length === 0
+                        const size = leaf ? explicitColumnSize(header.column) : undefined
+                        return (
+                          <table.AppHeader key={header.id} header={header}>
+                            {(bound) => (
+                              <TableHead
+                                aria-sort={
+                                  header.column.getCanSort()
+                                    ? columnAriaSort(state.sorting, header.column.id)
+                                    : undefined
+                                }
+                                className={cn(
+                                  size != null && "overflow-hidden",
+                                  columnClassName(header.column.columnDef.meta, "header"),
+                                )}
+                                style={columnSizeStyle(size)}
+                              >
+                                {header.isPlaceholder ? null : <bound.FlexRender />}
+                              </TableHead>
+                            )}
+                          </table.AppHeader>
+                        )
+                      })}
                     </TableRow>
                   ))}
                 </TableHeader>
@@ -699,16 +792,36 @@ export function Root<TData extends RowData, TSelected>({
                       <TableRow
                         key={row.id}
                         data-state={row.getIsSelected() ? "selected" : undefined}
+                        tabIndex={onRowActivate ? 0 : undefined}
+                        className={onRowActivate ? "cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring" : undefined}
+                        onClick={onRowActivate ? (event) => {
+                          if ((event.target as Element).closest("button, a, input, select, textarea, label, [role=button], [role=checkbox], [role=menuitem], [data-row-control]")) return
+                          onRowActivate(row.original, event.currentTarget)
+                        } : undefined}
+                        onKeyDown={onRowActivate ? (event) => {
+                          if (event.target !== event.currentTarget || !["Enter", " "].includes(event.key)) return
+                          event.preventDefault()
+                          onRowActivate(row.original, event.currentTarget)
+                        } : undefined}
                       >
-                        {row.getAllCells().map((cell) => (
-                          <table.AppCell key={cell.id} cell={cell}>
-                            {(bound) => (
-                              <TableCell>
-                                <bound.FlexRender />
-                              </TableCell>
-                            )}
-                          </table.AppCell>
-                        ))}
+                        {row.getAllCells().map((cell) => {
+                          const size = explicitColumnSize(cell.column)
+                          return (
+                            <table.AppCell key={cell.id} cell={cell}>
+                              {(bound) => (
+                                <TableCell
+                                  className={cn(
+                                    size != null && "overflow-hidden",
+                                    columnClassName(cell.column.columnDef.meta, "cell"),
+                                  )}
+                                  style={columnSizeStyle(size)}
+                                >
+                                  <bound.FlexRender />
+                                </TableCell>
+                              )}
+                            </table.AppCell>
+                          )
+                        })}
                       </TableRow>
                     ))
                   )}

package/src/index.ts

@@ -91,6 +91,7 @@ export type {
   ColumnFiltersState,
   ColumnMetaWithCopyable,
   ColumnMetaWithEnumFilter,
+  ColumnMetaWithLayout,
   EnumFilterMeta,
   EnumFilterOption,
   PaginationState,