@alaarab/ogrid 1.2.0

package/dist/esm/PaginationControls/PaginationControls.module.css

@@ -0,0 +1,112 @@
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px 24px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 14px 0;
+  margin-top: 16px;
+  border-top: 1px solid var(--ogrid-border, #e5e5e5);
+}
+
+.paginationInfo {
+  font-size: 13px;
+  color: var(--ogrid-muted, #606060);
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.paginationControls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  justify-content: center;
+  min-width: 0;
+}
+
+.navBtn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 50%;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, #333);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.navBtn:hover:not(:disabled) {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  border-color: var(--ogrid-border-hover, #999);
+}
+.navBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pageNumbers {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 8px;
+}
+
+.pageBtn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px 8px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, #333);
+  cursor: pointer;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+.pageBtn:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+.pageBtn.active {
+  background: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-primary, #0066cc);
+  color: var(--ogrid-primary-fg, #fff);
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  font-size: 12px;
+  color: var(--ogrid-muted, #888);
+  user-select: none;
+}
+
+.pageSizeSelector {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.pageSizeSelector .pageSizeLabel {
+  font-size: 13px;
+  color: var(--ogrid-muted, #606060);
+  user-select: none;
+  white-space: nowrap;
+}
+.pageSizeSelector .pageSizeSelect {
+  min-width: 72px;
+  padding: 4px 8px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  font-size: 13px;
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+// Components
+export { OGrid } from './OGrid/OGrid';
+export { DataGridTable } from './DataGridTable/DataGridTable';
+export { ColumnChooser } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls } from './PaginationControls/PaginationControls';
+// Re-export from core
+export { toUserLike, isInSelectionRange, normalizeSelectionRange, toDataGridFilterProps, useFilterOptions, getCellValue, flattenColumns, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, } from '@alaarab/ogrid-core';

package/dist/types/ColumnChooser/ColumnChooser.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { IColumnDefinition } from '@alaarab/ogrid-core';
+export type { IColumnDefinition };
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    className?: string;
+}
+export declare const ColumnChooser: React.FC<IColumnChooserProps>;

package/dist/types/ColumnHeaderFilter/ColumnHeaderFilter.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { UserLike, ColumnFilterType } from '@alaarab/ogrid-core';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+}
+export declare const ColumnHeaderFilter: React.FC<IColumnHeaderFilterProps>;

package/dist/types/ColumnHeaderFilter/MultiSelectFilterPopover.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface MultiSelectFilterPopoverProps {
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    options: string[];
+    filteredOptions: string[];
+    selected: Set<string>;
+    onOptionToggle: (option: string, checked: boolean) => void;
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onApply: () => void;
+    isLoading: boolean;
+}
+export declare const MultiSelectFilterPopover: React.FC<MultiSelectFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/PeopleFilterPopover.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { UserLike } from '@alaarab/ogrid-core';
+export interface PeopleFilterPopoverProps {
+    selectedUser: UserLike | undefined;
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    suggestions: UserLike[];
+    isLoading: boolean;
+    onUserSelect: (user: UserLike) => void;
+    onClearUser: () => void;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+export declare const PeopleFilterPopover: React.FC<PeopleFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/TextFilterPopover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface TextFilterPopoverProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+export declare const TextFilterPopover: React.FC<TextFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/index.d.ts

@@ -0,0 +1 @@
+export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter';

package/dist/types/DataGridTable/DataGridTable.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { IOGridDataGridProps } from '@alaarab/ogrid-core';
+/** @deprecated Use IOGridDataGridProps from @alaarab/ogrid-core for new code. */
+export type IDataGridTableProps<T> = IOGridDataGridProps<T>;
+declare function DataGridTableInner<T>(props: IOGridDataGridProps<T>): React.ReactElement;
+export declare const DataGridTable: typeof DataGridTableInner;
+export {};

package/dist/types/DataGridTable/GridContextMenu.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { GridContextMenuHandlerProps } from '@alaarab/ogrid-core';
+export interface GridContextMenuProps extends GridContextMenuHandlerProps {
+    x: number;
+    y: number;
+    hasSelection: boolean;
+}
+export declare function GridContextMenu(props: GridContextMenuProps): React.ReactElement;

package/dist/types/DataGridTable/InlineCellEditor.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { IColumnDef } from '@alaarab/ogrid-core';
+export interface InlineCellEditorProps<T> {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox';
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+export declare function InlineCellEditor<T>(props: InlineCellEditorProps<T>): React.ReactElement;

package/dist/types/DataGridTable/StatusBar.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface StatusBarProps {
+    totalCount: number;
+    filteredCount?: number;
+    selectedCount?: number;
+    selectedCellCount?: number;
+}
+export declare function StatusBar(props: StatusBarProps): React.ReactElement;

package/dist/types/OGrid/OGrid.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { type IOGridProps, type IOGridApi } from '@alaarab/ogrid-core';
+export type { IOGridProps } from '@alaarab/ogrid-core';
+declare const OGridInner: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;
+export declare const OGrid: typeof OGridInner;

package/dist/types/PaginationControls/PaginationControls.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface IPaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    entityLabelPlural?: string;
+    className?: string;
+}
+export declare const PaginationControls: React.FC<IPaginationControlsProps>;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { OGrid, type IOGridProps } from './OGrid/OGrid';
+export { DataGridTable, type IDataGridTableProps } from './DataGridTable/DataGridTable';
+export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
+export { type ColumnFilterType, type IColumnFilterDef, type IColumnMeta, type IColumnDef, type IColumnGroupDef, type IColumnDefinition, type ICellValueChangedEvent, type ICellEditorProps, type UserLike, type IFilters, type IFetchParams, type IPageResult, type IDataSource, type IGridColumnState, type IOGridApi, type RowSelectionMode, type IRowSelectionChangeEvent, type StatusBarPanel, type IStatusBarProps, type IActiveCell, type ISelectionRange, toUserLike, isInSelectionRange, normalizeSelectionRange, toDataGridFilterProps, useFilterOptions, type UseFilterOptionsResult, getCellValue, flattenColumns, escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, type CsvColumn, } from '@alaarab/ogrid-core';

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@alaarab/ogrid",
+  "version": "1.2.0",
+  "description": "OGrid default (Radix) – Data grid with sorting, filtering, pagination, column chooser, and CSV export. Packed with Radix UI; no Fluent or Material required.",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/compile-styles.js",
+    "test": "jest",
+    "storybook": "storybook dev -p 6008 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "keywords": ["ogrid", "radix", "datatable", "react", "typescript", "grid", "headless"],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": ["dist", "README.md", "LICENSE"],
+  "sideEffects": ["**/*.css"],
+  "engines": { "node": ">=18" },
+  "dependencies": {
+    "@alaarab/ogrid-core": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "identity-obj-proxy": "^3.0.0",
+    "ts-jest": "^29.2.5",
+    "sass": "^1.83.4",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-vite": "^8.5.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "storybook": "^8.5.3",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0"
+  },
+  "publishConfig": { "access": "public" }
+}