gridular 2.2.0 → 3.0.0

package/dist/lib/utils.d.ts

@@ -0,0 +1,21 @@
+import { ClassValue } from 'clsx';
+import { CSSObject } from 'tss-react';
+/**
+ * Merges Tailwind classes using clsx and tailwind-merge
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Merges TSS-React style objects with Tailwind classes
+ * Accepts both stringified TSS objects and regular Tailwind class strings
+ */
+export declare function mergeStyles(tssStyles?: CSSObject | string, tailwindClasses?: string): string;
+/**
+ * Convert TSS-React CSSObject to inline styles
+ * Useful when you need to apply TSS styles directly
+ */
+export declare function tssToInlineStyles(cssObject?: CSSObject): React.CSSProperties;
+/**
+ * Spacing helper (Material-UI style)
+ * spacing(1) => 4px, spacing(2) => 8px, etc.
+ */
+export declare function spacing(...values: number[]): string;

package/dist/logo.svg

@@ -0,0 +1,26 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<defs>
+<linearGradient id="paint0_linear" x1="74" y1="74" x2="438" y2="438" gradientUnits="userSpaceOnUse">
+<stop stop-color="#292E49"/>
+<stop offset="0.5" stop-color="#536976"/>
+<stop offset="1" stop-color="#BBD2C5"/>
+</linearGradient>
+</defs>
+<g fill="url(#paint0_linear)">
+<!-- Top Row -->
+<rect x="154" y="74" width="90" height="90" rx="12"/>
+<rect x="256" y="74" width="90" height="90" rx="12"/>
+<rect x="358" y="74" width="90" height="90" rx="12"/>
+<!-- Middle Row Left -->
+<rect x="74" y="176" width="90" height="90" rx="12"/>
+<!-- Middle Row Right (The G crossbar part) -->
+<rect x="256" y="256" width="90" height="90" rx="12"/>
+<rect x="358" y="256" width="90" height="90" rx="12"/>
+<!-- Bottom Row Left -->
+<rect x="74" y="278" width="90" height="90" rx="12"/>
+<!-- Bottom Row -->
+<rect x="154" y="358" width="90" height="90" rx="12"/>
+<rect x="256" y="358" width="90" height="90" rx="12"/>
+<rect x="358" y="358" width="90" height="90" rx="12"/>
+</g>
+</svg>

package/dist/stories/customization/CustomRendering.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const CustomCells: Story;
+export declare const CustomHeaders: Story;
+export declare const CustomRowStyling: Story;

package/dist/stories/customization/Themes.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const DarkTheme: Story;
+export declare const MinimalTheme: Story;
+export declare const PlayfulTheme: Story;

package/dist/stories/examples/BasicExample.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const MinimalSetup: Story;
+export declare const SmallDataset: Story;
+export declare const VirtualizedDataset: Story;
+export declare const LargeDataset: Story;

package/dist/stories/examples/ComprehensiveDemo.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const AllFeatures: Story;

package/dist/stories/examples/Pagination.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const WithPagination: Story;

package/dist/stories/examples/ServerPagination.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const PotterDBPagination: Story;
+export declare const PotterDBWithGrouping: Story;
+export declare const PotterDBInfiniteScroll: Story;

package/dist/stories/examples/Sorting.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const BasicSorting: Story;
+export declare const DefaultSorted: Story;

package/dist/stories/features/CellSelection.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const CellSelection: Story;

package/dist/stories/features/ColumnFiltering.stories.d.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+/**
+ * Basic column filtering with text inputs.
+ * Click the filter icon in any column header to filter data.
+ */
+export declare const BasicFiltering: Story;
+/**
+ * Column filtering with custom filter functions.
+ * Different columns can have custom filtering logic.
+ */
+export declare const CustomFilterFunctions: Story;
+/**
+ * Column filtering with pagination.
+ * Filters are applied before pagination.
+ */
+export declare const FilteringWithPagination: Story;
+/**
+ * Disable filtering on specific columns.
+ * Set `enableFiltering: false` on individual columns to disable filtering for that column.
+ */
+export declare const SelectiveFiltering: Story;

package/dist/stories/features/ColumnManagement.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const ColumnResize: Story;
+export declare const ColumnReorder: Story;
+export declare const ShowHideColumns: Story;
+export declare const AllColumnFeatures: Story;

package/dist/stories/features/ColumnMenu.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+/**
+ * Basic overflow menu with filter and hide column options.
+ */
+export declare const BasicOverflowMenu: Story;
+/**
+ * Custom menu items per column and globally.
+ */
+export declare const CustomMenuItems: Story;
+/**
+ * Global default menu items that appear on all columns.
+ */
+export declare const GlobalMenuItems: Story;
+/**
+ * Custom filter menu rendering per column.
+ */
+export declare const CustomFilterMenu: Story;
+/**
+ * Menu items with nested submenus and keyboard shortcuts.
+ */
+export declare const SubMenusAndShortcuts: Story;
+/**
+ * Fully custom column menu rendering per column.
+ */
+export declare const FullyCustomMenu: Story;
+/**
+ * Custom trigger button for the column menu.
+ */
+export declare const CustomTrigger: Story;

package/dist/stories/features/ContextMenu.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: {
+    title: string;
+    component: typeof DataGrid;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BasicContextMenu: Story;
+export declare const ConditionalContextMenu: Story;
+export declare const WithoutContextMenu: Story;

package/dist/stories/features/ExpandableRows.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const BasicExpanded: Story;
+export declare const ExpandedWithVirtualization: Story;

package/dist/stories/features/Grouping.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const BasicGrouping: Story;
+export declare const MultiLevelGrouping: Story;
+export declare const GroupingWithVirtualization: Story;

package/dist/stories/features/RowSelection.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { DataGrid } from '../../DataGrid';
+declare const meta: Meta<typeof DataGrid>;
+export default meta;
+type Story = StoryObj<typeof DataGrid>;
+export declare const SingleRowSelection: Story;
+export declare const MultiRowSelection: Story;
+export declare const MultiRowWithModifier: Story;
+export declare const PreselectedRows: Story;

package/dist/types.d.ts

@@ -0,0 +1,278 @@
+import { ReactNode } from 'react';
+import { CSSObject } from 'tss-react';
+export type SortDirection = 'asc' | 'desc' | null;
+export interface ColumnDef<T = any> {
+    id: string;
+    header: string;
+    key: string;
+    width?: number;
+    enableSorting?: boolean;
+    enableFiltering?: boolean;
+    enableResize?: boolean;
+    enableGrouping?: boolean;
+    enableColumnMenu?: boolean;
+    filterFn?: (row: T, columnId: string, filterValue: string) => boolean;
+    sortFn?: (a: T, b: T, columnId: string) => number;
+    headerClassName?: string;
+    cellClassName?: string;
+    headerStyle?: CSSObject;
+    cellStyle?: CSSObject;
+    renderCell?: (row: T) => ReactNode;
+    cell?: (row: T) => ReactNode;
+    render?: (row: T) => ReactNode;
+    groupFormatter?: (value: any) => string;
+    renderFilterMenu?: (props: FilterMenuRenderProps<T>) => ReactNode;
+    columnMenuItems?: ColumnMenuItem[];
+    renderColumnMenu?: (props: ColumnMenuRenderProps<T>) => ReactNode;
+    index?: number;
+}
+export interface FilterMenuRenderProps<T = any> {
+    column: ColumnDef<T>;
+    filterValue: string;
+    onFilterChange: (value: string) => void;
+    onClose: () => void;
+    isFiltered: boolean;
+}
+export interface ColumnMenuItem {
+    id: string;
+    label: string | ReactNode;
+    icon?: ReactNode;
+    onClick: (columnId: string) => void;
+    disabled?: boolean;
+    danger?: boolean;
+    className?: string;
+    shortcut?: string;
+    subMenu?: ColumnMenuItem[];
+    separator?: boolean;
+    render?: (props: ColumnMenuItemRenderProps) => ReactNode;
+}
+export interface ColumnMenuItemRenderProps {
+    item: ColumnMenuItem;
+    columnId: string;
+    isDisabled: boolean;
+    onSelect: () => void;
+}
+export interface ColumnMenuRenderProps<T = any> {
+    column: ColumnDef<T>;
+    items: ColumnMenuItem[];
+    defaultItems: {
+        filter?: ReactNode;
+        hideColumn?: ReactNode;
+    };
+    onClose: () => void;
+}
+export interface SortState {
+    column: string;
+    direction: 'asc' | 'desc';
+}
+export interface FilterState {
+    [columnId: string]: string;
+}
+export interface RowSelectionState {
+    [rowId: string]: boolean;
+}
+export interface PaginationState {
+    pageIndex: number;
+    pageSize: number;
+}
+export interface GroupingState {
+    groupByColumns: string[];
+    expandedGroups: Record<string, boolean>;
+}
+/**
+ * Class overrides for grid styling
+ * Supports both Tailwind classes (string) and TSS-React objects
+ */
+export interface GridClasses {
+    container?: string;
+    containerStyle?: CSSObject;
+    header?: string;
+    headerStyle?: CSSObject;
+    headerCell?: string;
+    headerCellStyle?: CSSObject;
+    body?: string;
+    bodyStyle?: CSSObject;
+    row?: string;
+    rowStyle?: CSSObject;
+    selectedRow?: string;
+    selectedRowStyle?: CSSObject;
+    hoveredRow?: string;
+    hoveredRowStyle?: CSSObject;
+    cell?: string;
+    cellStyle?: CSSObject;
+    selectedCell?: string;
+    selectedCellStyle?: CSSObject;
+    pagination?: string;
+    paginationStyle?: CSSObject;
+    paginationButton?: string;
+    paginationButtonStyle?: CSSObject;
+    pageInfo?: string;
+    pageInfoStyle?: CSSObject;
+    emptyState?: string;
+    emptyStateStyle?: CSSObject;
+    loadingState?: string;
+    loadingStateStyle?: CSSObject;
+    toolbar?: string;
+    toolbarStyle?: CSSObject;
+    columnManager?: string;
+    columnManagerStyle?: CSSObject;
+    columnManagerTrigger?: string;
+    columnManagerTriggerStyle?: CSSObject;
+    columnManagerContent?: string;
+    columnManagerContentStyle?: CSSObject;
+    columnManagerItem?: string;
+    columnManagerItemStyle?: CSSObject;
+    groupManager?: string;
+    groupManagerStyle?: CSSObject;
+    groupManagerTrigger?: string;
+    groupManagerTriggerStyle?: CSSObject;
+    groupManagerContent?: string;
+    groupManagerContentStyle?: CSSObject;
+    groupManagerItem?: string;
+    groupManagerItemStyle?: CSSObject;
+    filterMenu?: string;
+    filterMenuStyle?: CSSObject;
+    filterMenuHeader?: string;
+    filterMenuHeaderStyle?: CSSObject;
+    filterMenuInput?: string;
+    filterMenuInputStyle?: CSSObject;
+    filterMenuActions?: string;
+    filterMenuActionsStyle?: CSSObject;
+    columnMenu?: string;
+    columnMenuStyle?: CSSObject;
+    columnMenuTrigger?: string;
+    columnMenuTriggerStyle?: CSSObject;
+    columnMenuItem?: string;
+    columnMenuItemStyle?: CSSObject;
+    resizeHandle?: string;
+    resizeHandleStyle?: CSSObject;
+    resizeHandleActive?: string;
+    resizeHandleActiveStyle?: CSSObject;
+    sortIcon?: string;
+    sortIconStyle?: CSSObject;
+    sortIconActive?: string;
+    sortIconActiveStyle?: CSSObject;
+    filterIcon?: string;
+    filterIconStyle?: CSSObject;
+    filterIconActive?: string;
+    filterIconActiveStyle?: CSSObject;
+}
+export interface VirtualizedGridProps<T = any> {
+    columns: ColumnDef<T>[];
+    data: T[];
+    pagination?: {
+        pageIndex: number;
+        pageSize: number;
+        totalRows: number;
+        onPageChange?: (page: number) => void;
+        onPageSizeChange?: (size: number) => void;
+        pageSizeOptions?: number[];
+        manualPagination?: boolean;
+    };
+    virtualizationThreshold?: number;
+    rowHeight?: number;
+    overscan?: number;
+    sortState?: SortState | null;
+    onSortChange?: (sortState: SortState | null) => void;
+    enableSorting?: boolean;
+    sortIconVariant?: 'arrows' | 'chevrons';
+    filterState?: FilterState;
+    onFilterChange?: (filterState: FilterState) => void;
+    enableFiltering?: boolean;
+    renderFilterMenu?: (props: FilterMenuRenderProps) => ReactNode;
+    selectedRows?: RowSelectionState;
+    onRowSelectionChange?: (selectedRows: RowSelectionState) => void;
+    enableRowSelection?: boolean;
+    enableCellSelection?: boolean;
+    selectedCell?: {
+        rowId: string;
+        columnId: string;
+    } | null;
+    onCellSelect?: (rowId: string, columnId: string) => void;
+    enableColumnResize?: boolean;
+    columnWidths?: Record<string, number>;
+    onColumnWidthsChange?: (widths: Record<string, number>) => void;
+    enableColumnReorder?: boolean;
+    columnOrder?: string[];
+    onColumnOrderChange?: (order: string[]) => void;
+    enableColumnMenu?: boolean;
+    defaultColumnMenuItems?: ColumnMenuItem[];
+    onColumnAction?: (action: string, columnId: string) => void;
+    renderColumnMenu?: (props: ColumnMenuRenderProps) => ReactNode;
+    renderColumnMenuTrigger?: (props: {
+        column: ColumnDef;
+        onClick: () => void;
+    }) => ReactNode;
+    enableGrouping?: boolean;
+    groupingState?: GroupingState;
+    onGroupingChange?: (groupingState: GroupingState) => void;
+    renderGroupRow?: (props: GroupRowRenderProps) => ReactNode;
+    enableExpandableRows?: boolean;
+    expandedRows?: Record<string, boolean>;
+    onExpandedRowsChange?: (expandedRows: Record<string, boolean>) => void;
+    renderExpandedRow?: (row: T) => ReactNode;
+    isLoading?: boolean;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    className?: string;
+    classes?: GridClasses;
+    renderCell?: (props: {
+        value: any;
+        row: T;
+        column: ColumnDef<T>;
+        rowIndex: number;
+    }) => ReactNode;
+    renderRow?: (props: {
+        row: T;
+        rowIndex: number;
+        cells: ReactNode[];
+        defaultRow: ReactNode;
+    }) => ReactNode;
+    renderHeaderCell?: (props: {
+        column: ColumnDef<T>;
+        columnIndex: number;
+        sortDirection?: SortDirection;
+        defaultHeader: ReactNode;
+    }) => ReactNode;
+    renderHeader?: (props: {
+        column: ColumnDef<T>;
+        sortDirection?: SortDirection;
+    }) => ReactNode;
+    renderSortIcon?: (props: {
+        isSorted: boolean;
+        sortDirection?: SortDirection;
+    }) => ReactNode;
+    renderFilterIcon?: (props: {
+        isFiltered: boolean;
+    }) => ReactNode;
+    onRowClick?: (row: T, index: number, event: React.MouseEvent<HTMLDivElement>) => void;
+    onRowMouseDown?: (row: T, index: number, event: React.MouseEvent<HTMLDivElement>) => void;
+    onRowMouseEnter?: (row: T, index: number, event: React.MouseEvent<HTMLDivElement>) => void;
+    getRowId?: (row: T) => string;
+    onScroll?: (event: {
+        scrollTop: number;
+        scrollHeight: number;
+        clientHeight: number;
+        scrollPercentage: number;
+    }) => void;
+    contextMenuContent?: (row: T, column: ColumnDef<T>) => ReactNode;
+    gridId?: string;
+    hideColumnManager?: boolean;
+    hideGroupControls?: boolean;
+}
+export interface GroupRowRenderProps {
+    groupKey: string;
+    columnId: string;
+    value: any;
+    depth: number;
+    isExpanded: boolean;
+    onToggleExpand: () => void;
+    count: number;
+}
+export interface GridPreferences {
+    columnWidths: Record<string, number>;
+    columnOrder: string[];
+    hiddenColumns: string[];
+    groupByColumns: string[];
+    expandedGroups: Record<string, boolean>;
+}