munza-x-data-grid 1.3.0 → 1.3.3

package/README.md

@@ -1,73 +1,257 @@
-# React + TypeScript + Vite
+# munza-x-data-grid
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A flexible, feature-rich React data grid component built on top of [@tanstack/react-table](https://tanstack.com/table), with Tailwind CSS v4 styling and shadcn/ui primitives.
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## Installation
 
-## React Compiler
+```bash
+npm install munza-x-data-grid
+```
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+Import the stylesheet in your app entry point:
 
-## Expanding the ESLint configuration
+```js
+import 'munza-x-data-grid/style.css';
+```
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+### Peer Dependencies
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+```bash
+npm install react react-dom
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+Requires **React 18 or 19**.
 
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
+---
+
+## Basic Usage
+
+```tsx
+import { Grid, useGridState, type ColumnDef } from 'munza-x-data-grid';
+import 'munza-x-data-grid/style.css';
+
+type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+};
+
+const columns: ColumnDef<Person>[] = [
+  { accessorKey: 'firstName', header: 'First Name' },
+  { accessorKey: 'lastName', header: 'Last Name' },
+  { accessorKey: 'age', header: 'Age' },
+];
+
+const data: Person[] = [{ firstName: 'Alice', lastName: 'Smith', age: 30 }];
+
+export default function App() {
+  const { state, handlers } = useGridState();
+
+  return (
+    <Grid
+      columns={columns}
+      payload={{ data, total: data.length }}
+      state={state}
+      {...handlers}
+    />
+  );
+}
+```
+
+---
+
+## API Reference
+
+### `<Grid />`
+
+The top-level component that renders the full data grid.
+
+| Prop                    | Type                                       | Required | Description                                              |
+| ----------------------- | ------------------------------------------ | -------- | -------------------------------------------------------- |
+| `columns`               | `ColumnDef<T>[]`                           | ✅       | Column definitions (TanStack Table format)               |
+| `payload`               | `{ data: T[], total: number }`             | ✅       | Row data and total count for pagination                  |
+| `state`                 | `Partial<TableState>`                      | ✅       | Controlled table state (from `useGridState`)             |
+| `onColumnFiltersChange` | `OnChangeFn<ColumnFiltersState>`           | —        | Callback for column filter changes                       |
+| `onPaginationChange`    | `OnChangeFn<PaginationState>`              | —        | Callback for pagination changes                          |
+| `onSortingChange`       | `OnChangeFn<SortingState>`                 | —        | Callback for sort changes                                |
+| `setGlobalFilter`       | `Dispatch<SetStateAction<string>>`         | —        | Callback to update the global search filter              |
+| `isLoading`             | `boolean`                                  | —        | Displays a loading state                                 |
+| `isError`               | `boolean`                                  | —        | Displays an error state                                  |
+| `manualPagination`      | `boolean`                                  | —        | Set `true` for server-side pagination (default: `false`) |
+| `getRowCanExpand`       | `(row: Row<T>) => boolean`                 | —        | Controls which rows are expandable                       |
+| `renderSubComponent`    | `(props: { row: Row<T> }) => ReactElement` | —        | Renders expanded row content                             |
+
+---
+
+### `useGridState()`
+
+Hook that provides controlled state and event handlers to pass into `<Grid />`.
+
+```tsx
+const { state, handlers } = useGridState();
+```
+
+**Returns:**
+
+| Key        | Description                                                                                           |
+| ---------- | ----------------------------------------------------------------------------------------------------- |
+| `state`    | Partial `TableState` object (sorting, pagination, filters, etc.)                                      |
+| `handlers` | Object containing `onSortingChange`, `onPaginationChange`, `onColumnFiltersChange`, `setGlobalFilter` |
+
+Spread `handlers` directly onto `<Grid />`:
+
+```tsx
+<Grid state={state} {...handlers} columns={columns} payload={payload} />
+```
+
+---
+
+## Column Definitions
+
+Columns follow the standard [TanStack Table `ColumnDef`](https://tanstack.com/table/latest/docs/api/core/column-def) format with an additional `meta` field for filter configuration.
+
+### Filter Variants
+
+Set `meta.filterVariant` on a column to control its filter UI:
+
+```tsx
+{
+  accessorKey: 'status',
+  header: 'Status',
+  meta: {
+    filterVariant: 'select', // dropdown filter
   },
-])
+}
+
+{
+  accessorKey: 'age',
+  header: 'Age',
+  meta: {
+    filterVariant: 'text', // text input filter
+  },
+}
+```
+
+### Row Number Column
+
+```tsx
+{
+  accessorFn: (_row, index) => index + 1,
+  cell: ({ row }) => row.index + 1,
+  id: 'rowNumber',
+  header: '',
+  size: 54,
+  maxSize: 54,
+  enableColumnFilter: false,
+}
+```
+
+### Checkbox Selection Column
+
+```tsx
+{
+  id: 'select',
+  header: ({ table }) => (
+    <Checkbox
+      checked={
+        table.getIsAllPageRowsSelected() ||
+        (table.getIsSomePageRowsSelected() && 'indeterminate')
+      }
+      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      aria-label="Select all"
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={(value) => row.toggleSelected(!!value)}
+      aria-label="Select row"
+    />
+  ),
+  size: 40,
+  maxSize: 40,
+  enableColumnFilter: false,
+}
+```
+
+---
+
+## Server-Side Pagination
+
+Set `manualPagination` to `true` and pass `payload.total` as the full server-side count.
+
+```tsx
+<Grid
+  columns={columns}
+  payload={{ data: serverData, total: serverTotal }}
+  state={state}
+  {...handlers}
+  manualPagination={true}
+/>
 ```
+
+The built-in pagination UI supports the following page sizes:
+
+```
+20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000
+```
+
+---
+
+## Expandable Rows
+
+```tsx
+<Grid
+  columns={columns}
+  payload={payload}
+  state={state}
+  {...handlers}
+  getRowCanExpand={(row) => !!row.original.subRows?.length}
+  renderSubComponent={({ row }) => (
+    <div className="p-4">
+      <pre>{JSON.stringify(row.original, null, 2)}</pre>
+    </div>
+  )}
+/>
+```
+
+---
+
+## Column Pinning
+
+Column pinning is managed internally by the grid. No additional configuration is required — use the built-in toolbar UI to pin columns left or right.
+
+---
+
+## Default Column Sizing
+
+| Property  | Default |
+| --------- | ------- |
+| `size`    | `180px` |
+| `minSize` | `180px` |
+| `maxSize` | `180px` |
+
+Override per-column:
+
+```tsx
+{
+  accessorKey: 'id',
+  size: 60,
+  minSize: 60,
+  maxSize: 60,
+}
+```
+
+---
+
+## TypeScript
+
+All props and hooks are fully typed. Import types directly from the package:
+
+```ts
+import type { ColumnDef } from 'munza-x-data-grid';
+```
+
+TanStack Table types (`Row`, `TableState`, `PaginationState`, etc.) are re-exported and available from `@tanstack/react-table`.

package/dist/components/feedback/NoDataFoundMsg.d.ts

@@ -0,0 +1,2 @@
+declare const NoDataFoundMsg: () => import("react/jsx-runtime").JSX.Element;
+export default NoDataFoundMsg;

package/dist/components/feedback/TableError.d.ts

@@ -0,0 +1,2 @@
+declare const TableError: () => import("react/jsx-runtime").JSX.Element;
+export default TableError;

package/dist/components/feedback/TableErrorMsg.d.ts

@@ -0,0 +1,2 @@
+declare const TableErrorMsg: () => import("react/jsx-runtime").JSX.Element;
+export default TableErrorMsg;

package/dist/components/feedback/TableNoData.d.ts

@@ -0,0 +1,2 @@
+declare const TableNoData: () => import("react/jsx-runtime").JSX.Element;
+export default TableNoData;

package/dist/components/feedback/TableRowSkeleton.d.ts

@@ -0,0 +1,7 @@
+import { Column } from '@tanstack/react-table';
+declare const TableRowSkeleton: ({ column, i, j, }: {
+    column: Column<unknown, unknown>;
+    i: number;
+    j: number;
+}) => import("react/jsx-runtime").JSX.Element;
+export default TableRowSkeleton;

package/dist/components/feedback/TableSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare const TableSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export default TableSkeleton;

package/dist/components/header/HeaderFilter.d.ts

@@ -0,0 +1,5 @@
+import { Column } from '@tanstack/react-table';
+declare const HeaderFilter: <T>({ column }: {
+    column: Column<T, unknown>;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default HeaderFilter;

package/dist/components/header/HeaderMenu.d.ts

@@ -0,0 +1,5 @@
+import { Header } from '@tanstack/react-table';
+declare const HeaderMenu: <T>({ header }: {
+    header: Header<T, unknown>;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default HeaderMenu;

package/dist/components/header/HeaderSort.d.ts

@@ -0,0 +1,5 @@
+import { Header } from '@tanstack/react-table';
+declare const HeaderSort: <T>({ header }: {
+    header: Header<T, unknown>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default HeaderSort;

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,4 @@
+declare const Pagination: ({ pagination }: {
+    pagination: number[];
+}) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/table/TBody.d.ts

@@ -0,0 +1,2 @@
+declare const TBody: () => import("react/jsx-runtime").JSX.Element;
+export default TBody;

package/dist/components/table/TCell.d.ts

@@ -0,0 +1,6 @@
+import { Cell } from '@tanstack/react-table';
+interface TCellProps<T> {
+    cell: Cell<T, unknown>;
+}
+declare const TCell: <T>({ cell }: TCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TCell;

package/dist/components/table/THead.d.ts

@@ -0,0 +1,6 @@
+import { Header } from '@tanstack/react-table';
+interface THeadProps<T> {
+    header: Header<T, unknown>;
+}
+declare const THead: <T>({ header }: THeadProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default THead;

package/dist/components/table/THeader.d.ts

@@ -0,0 +1,2 @@
+declare const THeader: () => import("react/jsx-runtime").JSX.Element;
+export default THeader;

package/dist/components/table/TMain.d.ts

@@ -0,0 +1,2 @@
+declare const TMain: () => import("react/jsx-runtime").JSX.Element;
+export default TMain;

package/dist/components/toolbar/ToolbarFilter.d.ts

@@ -0,0 +1,5 @@
+import { Column } from '@tanstack/react-table';
+declare const ToolbarFilter: <T>({ column }: {
+    column: Column<T, unknown>;
+}) => import("react/jsx-runtime").JSX.Element;
+export default ToolbarFilter;

package/dist/components/toolbar/index.d.ts

@@ -0,0 +1,2 @@
+declare const Toolbar: () => import("react/jsx-runtime").JSX.Element;
+export default Toolbar;

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge };

package/dist/components/ui/button.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "outline" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button };

package/dist/components/ui/checkbox.d.ts

@@ -0,0 +1,4 @@
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,5 @@
+import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
+declare function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
+declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/ui/debounced-input.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+declare const DebouncedInput: ({ value: initialValue, onChange, debounce, ...props }: {
+    value: string | number;
+    onChange: (value: string | number) => void;
+    debounce?: number;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange">) => import("react/jsx-runtime").JSX.Element;
+export default DebouncedInput;

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/components/ui/empty.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+declare function Empty({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, };

package/dist/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): import("react/jsx-runtime").JSX.Element;
+export { Input };

package/dist/components/ui/label.d.ts

@@ -0,0 +1,4 @@
+import { Label as LabelPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Label };

package/dist/components/ui/native-select.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type NativeSelectProps = Omit<React.ComponentProps<'select'>, 'size'> & {
+    size?: 'sm' | 'default';
+};
+declare function NativeSelect({ className, size, ...props }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
+declare function NativeSelectOption({ ...props }: React.ComponentProps<'option'>): import("react/jsx-runtime").JSX.Element;
+declare function NativeSelectOptGroup({ className, ...props }: React.ComponentProps<'optgroup'>): import("react/jsx-runtime").JSX.Element;
+export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };

package/dist/components/ui/separator.d.ts

@@ -0,0 +1,4 @@
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Separator };

package/dist/components/ui/skeleton.d.ts

@@ -0,0 +1,2 @@
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Skeleton };

package/dist/components/ui/table.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare function Table({ className, ...props }: React.ComponentProps<'table'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHeader({ className, ...props }: React.ComponentProps<'thead'>): import("react/jsx-runtime").JSX.Element;
+declare function TableBody({ className, ...props }: React.ComponentProps<'tbody'>): import("react/jsx-runtime").JSX.Element;
+declare function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>): import("react/jsx-runtime").JSX.Element;
+declare function TableRow({ className, ...props }: React.ComponentProps<'tr'>): import("react/jsx-runtime").JSX.Element;
+declare function TableHead({ className, ...props }: React.ComponentProps<'th'>): import("react/jsx-runtime").JSX.Element;
+declare function TableCell({ className, ...props }: React.ComponentProps<'td'>): import("react/jsx-runtime").JSX.Element;
+declare function TableCaption({ className, ...props }: React.ComponentProps<'caption'>): import("react/jsx-runtime").JSX.Element;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, };

package/dist/contexts/GridContext.d.ts

@@ -0,0 +1,37 @@
+import { ColumnDef, ColumnFiltersState, OnChangeFn, PaginationState, Row, SortingState, Table, TableState } from '@tanstack/react-table';
+import { default as React } from 'react';
+export interface GridContextProps<T> {
+    table: Table<T>;
+    isLoading?: boolean;
+    isError?: boolean;
+    paneRef1: React.RefObject<HTMLDivElement | null>;
+    paneRef2: React.RefObject<HTMLDivElement | null>;
+    globalFilter?: string;
+    setGlobalFilter?: React.Dispatch<React.SetStateAction<string>>;
+    renderSubComponent?: (props: {
+        row: Row<T>;
+    }) => React.ReactElement;
+}
+declare const GridContext: React.Context<GridContextProps<any> | undefined>;
+interface GridContextProviderProps<T> {
+    children: React.ReactNode;
+    payload?: {
+        data: T[];
+        total: number;
+    };
+    columns: ColumnDef<T>[];
+    state?: Partial<TableState>;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    onSortingChange?: OnChangeFn<SortingState>;
+    manualPagination?: boolean;
+    isLoading?: boolean;
+    isError?: boolean;
+    setGlobalFilter?: React.Dispatch<React.SetStateAction<string>>;
+    renderSubComponent?: (props: {
+        row: Row<T>;
+    }) => React.ReactElement;
+    getRowCanExpand?: (row: Row<T>) => boolean;
+}
+export declare const GridContextProvider: <T>({ children, payload, columns, state, onColumnFiltersChange, onPaginationChange, onSortingChange, setGlobalFilter, manualPagination, isError, isLoading, getRowCanExpand, renderSubComponent, }: GridContextProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default GridContext;

package/dist/core/Grid.d.ts

@@ -0,0 +1,3 @@
+import { GridProps } from '../types';
+declare const Grid: <T>({ columns, payload, state, onColumnFiltersChange, onPaginationChange, onSortingChange, isLoading, isError, setGlobalFilter, getRowCanExpand, renderSubComponent, manualPagination, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export { Grid };