@varialkit/table 0.1.0

package/src/Table.types.ts

@@ -0,0 +1,158 @@
+import type {
+  Cell,
+  ColumnDef,
+  Header,
+  Row,
+  Table as TanStackTable,
+  TableOptions
+} from '@tanstack/react-table';
+import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+
+export type TableDensity = 'compact' | 'standard' | 'spacious';
+export type TableLayoutMode = 'list' | 'grid';
+export type TableGridType = 'grid' | 'masonry';
+export type TableActionMenuSurfaceStyle = 'solid' | 'translucent' | 'glass';
+
+export type TableGridSpacing = {
+  // Base gap fallback when row/column gaps are not specified.
+  gap?: number | string;
+  // Card-to-card spacing between columns.
+  columnGap?: number | string;
+  // Card-to-card spacing between rows/items.
+  rowGap?: number | string;
+  // Gap between detail fields inside each card.
+  detailsGap?: number | string;
+  // Inner padding around the details section inside each card.
+  detailsPadding?: number | string;
+};
+
+export type TablePaginationLabels = {
+  pageLabel?: string;
+  rowsLabel?: string;
+  prevLabel?: string;
+  nextLabel?: string;
+};
+
+export type TableRenderBody<TData> = (
+  table: TanStackTable<TData>,
+  rows: Array<Row<TData>>
+) => ReactNode;
+
+export type TableRenderGridCell<TData> = (
+  cell: Cell<TData, unknown>,
+  row: Row<TData>,
+  table: TanStackTable<TData>
+) => ReactNode;
+
+export type TableGridCellRenderers<TData> = Record<
+  string,
+  TableRenderGridCell<TData>
+>;
+
+export type TableGridCellVariant = 'detail' | 'media';
+
+export type TableGridColumnConfig = {
+  // Media cells render in the card media area (typically images/video).
+  variant?: TableGridCellVariant;
+  // Grid-only default visibility (does not affect list/TanStack column visibility).
+  hiddenByDefault?: boolean;
+  // Controls whether the cell label is shown in grid.
+  showLabel?: boolean;
+  // Removes internal grid cell padding (useful for full-bleed media).
+  unpadded?: boolean;
+  // Optional className for this grid column's cell wrapper.
+  className?: string;
+};
+
+export type TableGridColumnConfigMap = Record<string, TableGridColumnConfig>;
+
+export type TableProps<TData> = {
+  data: Array<TData>;
+  columns: Array<ColumnDef<TData, unknown>>;
+  // Passthrough for TanStack options (sorting, pinning, column visibility, etc.).
+  tableOptions?: Omit<TableOptions<TData>, 'data' | 'columns'>;
+  // Optional custom row id resolver used by TanStack.
+  getRowId?: TableOptions<TData>['getRowId'];
+  className?: string;
+  tableClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  // Custom content to render inside the header actions cell.
+  headerActions?: ReactNode;
+  // Toggle the built-in column controls menu (visibility + ordering).
+  enableColumnControls?: boolean;
+  // Accessible label for the built-in column controls trigger button.
+  columnControlsLabel?: string;
+  // Optional surface treatment override for the built-in gear action menu.
+  // When omitted, the menu resolves from root surface attributes.
+  actionMenuSurfaceStyle?: TableActionMenuSurfaceStyle;
+  // Optional density options for the built-in controls menu.
+  densityOptions?: TableDensity[];
+  // Optional list/grid options for the built-in controls menu.
+  layoutModeOptions?: TableLayoutMode[];
+  // Optional grid type options for the built-in controls menu (shown in grid layout).
+  gridTypeOptions?: TableGridType[];
+  // Callback invoked when a user picks a density from the controls menu.
+  // If omitted, the menu will manage density locally.
+  onDensityChange?: (density: TableDensity) => void;
+  // Enables the built-in layout switcher (list/grid) in the action menu.
+  enableLayoutToggle?: boolean;
+  // Callback invoked when a user picks a layout mode from the controls menu.
+  // If omitted, the menu will manage layout locally.
+  onLayoutModeChange?: (mode: TableLayoutMode) => void;
+  // Preferred layout mode. Defaults to list.
+  layoutMode?: TableLayoutMode;
+  rowClassName?: (row: Row<TData>) => string;
+  cellClassName?: (cell: Cell<TData, unknown>) => string;
+  headerCellClassName?: (header: Header<TData, unknown>) => string;
+  renderHeaderCell?: (header: Header<TData, unknown>) => ReactNode;
+  renderCell?: (cell: Cell<TData, unknown>) => ReactNode;
+  // Optional default renderer for grid cell values.
+  renderGridCell?: TableRenderGridCell<TData>;
+  // Optional per-column renderers for grid cell values (keyed by column id).
+  gridCellRenderers?: TableGridCellRenderers<TData>;
+  // Grid-only column presentation config keyed by column id.
+  gridColumnConfig?: TableGridColumnConfigMap;
+  // Controlled set of grid-visible column ids (grid-only, does not affect list mode).
+  gridVisibleColumnIds?: string[];
+  // Callback for grid-only visible column ids.
+  onGridVisibleColumnIdsChange?: (columnIds: string[]) => void;
+  // Optional custom grid row renderer.
+  renderGridRow?: (
+    row: Row<TData>,
+    cells: Array<ReactNode>,
+    table: TanStackTable<TData>
+  ) => ReactNode;
+  // Grid presentation type used when layoutMode resolves to "grid".
+  gridType?: TableGridType;
+  // Callback invoked when a user picks a grid type from the controls menu.
+  // If omitted, the menu will manage grid type locally.
+  onGridTypeChange?: (gridType: TableGridType) => void;
+  // Optional granular spacing overrides for grid mode.
+  gridSpacing?: TableGridSpacing;
+  renderRow?: (row: Row<TData>, cells: Array<ReactNode>) => ReactNode;
+  renderBody?: TableRenderBody<TData>;
+  emptyState?: ReactNode;
+  onRowClick?: (row: Row<TData>, event: MouseEvent<HTMLElement>) => void;
+  stickyHeader?: boolean;
+  // Forces sticky header + pinned column backgrounds to be transparent.
+  transparentSticky?: boolean;
+  // Forces table/thead/tbody backgrounds to be transparent.
+  transparentBackground?: boolean;
+  showHeader?: boolean;
+  density?: TableDensity;
+  wrapperProps?: HTMLAttributes<HTMLDivElement>;
+  tableProps?: HTMLAttributes<HTMLTableElement>;
+  getRowProps?: (row: Row<TData>) => HTMLAttributes<HTMLTableRowElement>;
+  getCellProps?: (cell: Cell<TData, unknown>) => HTMLAttributes<HTMLTableCellElement>;
+  getHeaderProps?: (header: Header<TData, unknown>) => HTMLAttributes<HTMLTableCellElement>;
+  enableSorting?: boolean;
+  // Renders the built-in pagination footer (TanStack state + Solara UI).
+  showPagination?: boolean;
+  // Overrides for pagination footer labels.
+  paginationLabels?: TablePaginationLabels;
+  // Page size options for the pagination footer dropdown.
+  paginationPageSizes?: number[];
+  // CSS grid min width used by the default grid layout.
+  gridMinColumnWidth?: number | string;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './Table';
+export * from './Table.types';