@djangocfg/widget-data 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Reforms.ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,55 @@
+# @djangocfg/widget-data
+
+The surfaces that put rows, nodes and cards on screen: a file tree, a JSON
+viewer, a data grid and table, a kanban, a listbox, a masonry and a timeline.
+
+## Install
+
+```bash
+pnpm add @djangocfg/widget-data @djangocfg/ui-core
+```
+
+```tsx
+import { FinderTree } from '@djangocfg/widget-data/tree';
+import '@djangocfg/widget-data/styles';
+```
+
+The styles import is not optional: Tailwind v4 does not scan `node_modules`,
+so without it every surface here renders unstyled.
+
+## Subpaths
+
+| Subpath | What | Own docs |
+|---|---|---|
+| `./tree` | `TreeRoot`, `FinderTree` — generic, slot-driven, async, with Finder CRUD | [`src/Tree/README.md`](src/Tree/README.md) |
+| `./file-icon` | `FileIcon`, `getFileIcon`, `createFileIconSlot` | — |
+| `./json-tree` | `JsonTree` — collapsible JSON with search and copy | [`src/JsonTree/README.md`](src/JsonTree/README.md) |
+| `./data-grid` | `DataGrid` — sorting, filtering, pagination, selection | [`src/DataGrid/README.md`](src/DataGrid/README.md) |
+| `./data-table` | `DataTable` — the same, as a semantic `<table>` | [`src/DataTable/README.md`](src/DataTable/README.md) |
+| `./kanban` | `Kanban` — columns and cards, drag included | — |
+| `./listbox` | `Listbox` — a composable selection primitive | — |
+| `./masonry` | `Masonry` — a column layout | [`src/Masonry/README.md`](src/Masonry/README.md) |
+| `./timeline` | `Timeline` — an ordered event column | — |
+
+Each subpath also exports its `Lazy*` wrapper (`LazyTree`, `LazyDataGrid`, …)
+for a surface that should not be in the entry chunk.
+
+**Prefer a subpath to the root.** The root barrel exists and works, but pulls
+all nine trees; an app that wants a tree should ask for the tree.
+
+## Grouping
+
+One package rather than nine, because these share a shape rather than a
+library: none of them carries a heavy dependency the others would pay for. The
+whole external surface is `@dnd-kit/core` (Tree only), three small Radix and
+`cva` utilities, and `lucide-react`.
+
+`FileIcon` lives here rather than with the visual widgets because it is a Tree
+slot — `createFileIconSlot` types against `TreeRowSlot`, and separating them
+would put a package boundary through one component's two halves.
+
+## Verify
+
+```bash
+pnpm --filter @djangocfg/widget-data check-types test
+```

package/package.json

@@ -0,0 +1,122 @@
+{
+  "name": "@djangocfg/widget-data",
+  "version": "0.1.1",
+  "description": "Data surfaces: file tree, JSON viewer, data grid and table, kanban, listbox, masonry and timeline",
+  "keywords": [
+    "tree",
+    "data-grid",
+    "data-table",
+    "kanban",
+    "json-viewer",
+    "timeline",
+    "react",
+    "typescript"
+  ],
+  "author": {
+    "name": "DjangoCFG",
+    "url": "https://djangocfg.com"
+  },
+  "homepage": "https://djangocfg.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/markolofsen/django-cfg.git",
+    "directory": "widgets/data"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "default": "./src/index.ts"
+    },
+    "./tree": {
+      "types": "./src/Tree/index.tsx",
+      "default": "./src/Tree/index.tsx"
+    },
+    "./file-icon": {
+      "types": "./src/FileIcon/index.ts",
+      "default": "./src/FileIcon/index.ts"
+    },
+    "./file-icon/get-file-icon": {
+      "types": "./src/FileIcon/get-file-icon.ts",
+      "default": "./src/FileIcon/get-file-icon.ts"
+    },
+    "./json-tree": {
+      "types": "./src/JsonTree/index.tsx",
+      "default": "./src/JsonTree/index.tsx"
+    },
+    "./data-grid": {
+      "types": "./src/DataGrid/index.ts",
+      "default": "./src/DataGrid/index.ts"
+    },
+    "./data-table": {
+      "types": "./src/DataTable/index.ts",
+      "default": "./src/DataTable/index.ts"
+    },
+    "./kanban": {
+      "types": "./src/Kanban/index.ts",
+      "default": "./src/Kanban/index.ts"
+    },
+    "./listbox": {
+      "types": "./src/Listbox/index.ts",
+      "default": "./src/Listbox/index.ts"
+    },
+    "./masonry": {
+      "types": "./src/Masonry/index.ts",
+      "default": "./src/Masonry/index.ts"
+    },
+    "./timeline": {
+      "types": "./src/Timeline/index.ts",
+      "default": "./src/Timeline/index.ts"
+    },
+    "./styles": "./src/styles/index.css"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/__tests__",
+    "!src/**/*.stories.tsx",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@djangocfg/widget-kit": "^0.1.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@radix-ui/react-direction": "^1.1.2",
+    "@radix-ui/react-slot": "^1.3.0",
+    "class-variance-authority": "^0.7.1"
+  },
+  "peerDependencies": {
+    "@djangocfg/ui-core": "^2.1.542",
+    "lucide-react": "^0.545.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@djangocfg/typescript-config": "^2.1.542",
+    "@djangocfg/ui-core": "^2.1.542",
+    "@storybook/react-vite": "^10.5.0",
+    "@types/node": "^25.9.5",
+    "@types/react": "19.2.15",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "^29.1.1",
+    "lucide-react": "0.545.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "storybook": "^10.5.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DataGrid/README.md

@@ -0,0 +1,48 @@
+# DataGrid
+
+Headless data grid with built-in sort / filter / pagination / selection and column resizing. Composable: `<DataGrid>` is the all-in-one entry point, while `DataGridProvider` + `DataGridHeader` / `DataGridRow` / `DataGridCell` / `DataGridPagination` let you swap individual parts. Pure React, no `@tanstack/react-table` dependency.
+
+```tsx
+import { DataGrid } from '@djangocfg/ui-tools/data-grid';
+
+<DataGrid
+  data={users}
+  columns={[
+    { key: 'name',  header: 'Name',  sortable: true, filterable: true },
+    { key: 'email', header: 'Email', sortable: true },
+    { key: 'role',  header: 'Role',  align: 'right' },
+  ]}
+  getRowId={(u) => u.id}
+  selectionMode="multiple"
+  onSelectionChange={setSelected}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `data` | `T[]` | — | Row data. |
+| `columns` | `DataGridColumn<T>[]` | — | Column defs (`key`, `header`, `cell?`, `sortable?`, `filterable?`, `width?`, `align?`, `filterFn?`). |
+| `getRowId` | `(row: T) => string \| number` | — | Stable row id. |
+| `selectionMode` | `'none' \| 'single' \| 'multiple'` | `'none'` | Selection behaviour. |
+| `initialSelectedIds` / `onSelectionChange` | `RowId[]` / `(ids) => void` | — | Uncontrolled selection. |
+| `sort` / `onSortChange` / `initialSort` | `DataGridSortState` | — | Controlled or uncontrolled sort. |
+| `filters` / `onFilterChange` / `initialFilters` | `DataGridFilterState` | — | Per-column text filters. |
+| `pagination` / `onPaginationChange` / `initialPagination` | `DataGridPaginationState` | — | Controlled or uncontrolled pagination. |
+| `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Page-size choices. |
+| `resizable` | `boolean` | `false` | Enable column resizing. |
+| `stickyHeader` | `boolean` | `true` | Sticky header row. |
+| `loading` | `boolean` | `false` | Loading state. |
+| `emptyMessage` | `ReactNode` | — | Rendered when `data` is empty. |
+| `getRowClassName` | `(row, i) => string` | — | Per-row class hook. |
+| `onRowClick` / `onRowDoubleClick` | `(row) => void` | — | Row event handlers. |
+
+## Notes
+
+- No virtualization — for >10k rows pair with pagination or use a virtualized list above the grid.
+- All state slots support both controlled (`sort` + `onSortChange`) and uncontrolled (`initialSort`) usage.
+
+---
+
+Adapted from jalcoui (MIT).

package/src/DataGrid/context/DataGridContext.tsx

@@ -0,0 +1,442 @@
+'use client';
+
+import * as React from 'react';
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
+
+import type {
+  DataGridColumn,
+  DataGridFilterState,
+  DataGridPaginationState,
+  DataGridProps,
+  DataGridRowId,
+  DataGridSelectionMode,
+  DataGridSortState,
+  SortDirection,
+} from '../types';
+
+// =====================================================================
+// Reducer
+// =====================================================================
+
+interface State<T> {
+  sort: DataGridSortState;
+  filters: DataGridFilterState;
+  pagination: DataGridPaginationState;
+  selected: Set<DataGridRowId>;
+}
+
+type Action<T> =
+  | { type: 'set-sort'; sort: DataGridSortState }
+  | { type: 'set-filter'; key: string; value: string }
+  | { type: 'clear-filters' }
+  | { type: 'set-page'; page: number }
+  | { type: 'set-page-size'; pageSize: number }
+  | { type: 'select'; id: DataGridRowId; mode: DataGridSelectionMode }
+  | { type: 'select-many'; ids: DataGridRowId[] }
+  | { type: 'clear-selection' }
+  | { type: 'select-all'; ids: DataGridRowId[] }
+  | { type: 'reset-pagination' };
+
+const reducer = <T,>(state: State<T>, action: Action<T>): State<T> => {
+  switch (action.type) {
+    case 'set-sort':
+      return { ...state, sort: action.sort };
+    case 'set-filter': {
+      const next = { ...state.filters, [action.key]: action.value };
+      if (action.value === '') delete next[action.key];
+      return { ...state, filters: next, pagination: { ...state.pagination, page: 1 } };
+    }
+    case 'clear-filters':
+      return { ...state, filters: {}, pagination: { ...state.pagination, page: 1 } };
+    case 'set-page':
+      return { ...state, pagination: { ...state.pagination, page: action.page } };
+    case 'set-page-size':
+      return {
+        ...state,
+        pagination: { page: 1, pageSize: action.pageSize },
+      };
+    case 'select': {
+      if (action.mode === 'none') return state;
+      if (action.mode === 'single') {
+        return { ...state, selected: new Set([action.id]) };
+      }
+      const next = new Set(state.selected);
+      if (next.has(action.id)) next.delete(action.id);
+      else next.add(action.id);
+      return { ...state, selected: next };
+    }
+    case 'select-many':
+      return { ...state, selected: new Set(action.ids) };
+    case 'clear-selection':
+      return { ...state, selected: new Set() };
+    case 'select-all':
+      return { ...state, selected: new Set(action.ids) };
+    case 'reset-pagination':
+      return { ...state, pagination: { ...state.pagination, page: 1 } };
+    default:
+      return state;
+  }
+};
+
+// =====================================================================
+// Context value
+// =====================================================================
+
+export interface DataGridContextValue<T = unknown> {
+  // State
+  sort: DataGridSortState;
+  filters: DataGridFilterState;
+  pagination: DataGridPaginationState;
+  selected: ReadonlySet<DataGridRowId>;
+
+  // Processed data
+  rows: T[];
+  totalRows: number;
+  pageCount: number;
+
+  // Actions
+  setSort: (key: string) => void;
+  setFilter: (key: string, value: string) => void;
+  clearFilters: () => void;
+  setPage: (page: number) => void;
+  setPageSize: (pageSize: number) => void;
+  select: (id: DataGridRowId) => void;
+  selectMany: (ids: DataGridRowId[]) => void;
+  clearSelection: () => void;
+  selectAllVisible: () => void;
+  isSelected: (id: DataGridRowId) => boolean;
+
+  // Config
+  columns: DataGridColumn<T>[];
+  getRowId: (row: T) => DataGridRowId;
+  selectionMode: DataGridSelectionMode;
+  pageSizeOptions: number[];
+  loading: boolean;
+  emptyMessage: React.ReactNode;
+  getRowClassName?: (row: T, index: number) => string;
+  onRowClick?: (row: T) => void;
+  onRowDoubleClick?: (row: T) => void;
+  stickyHeader: boolean;
+}
+
+const DataGridContext = createContext<DataGridContextValue<unknown> | null>(null);
+
+export function useDataGridContext<T>(): DataGridContextValue<T> {
+  const ctx = React.useContext(DataGridContext);
+  if (!ctx) {
+    throw new Error('useDataGridContext must be used inside <DataGridProvider>');
+  }
+  return ctx as DataGridContextValue<T>;
+}
+
+// =====================================================================
+// Provider
+// =====================================================================
+
+export interface DataGridProviderProps<T>
+  extends Pick<
+    DataGridProps<T>,
+    | 'data'
+    | 'columns'
+    | 'getRowId'
+    | 'selectionMode'
+    | 'initialSelectedIds'
+    | 'onSelectionChange'
+    | 'sort'
+    | 'onSortChange'
+    | 'initialSort'
+    | 'filters'
+    | 'onFilterChange'
+    | 'initialFilters'
+    | 'pagination'
+    | 'onPaginationChange'
+    | 'initialPagination'
+    | 'pageSizeOptions'
+    | 'loading'
+    | 'emptyMessage'
+    | 'getRowClassName'
+    | 'onRowClick'
+    | 'onRowDoubleClick'
+    | 'stickyHeader'
+  > {
+  children: React.ReactNode;
+}
+
+const defaultSort: DataGridSortState = { key: null, direction: null };
+const defaultPagination: DataGridPaginationState = { page: 1, pageSize: 25 };
+
+export function DataGridProvider<T>(props: DataGridProviderProps<T>) {
+  const {
+    data,
+    columns,
+    getRowId,
+    selectionMode = 'none',
+    initialSelectedIds,
+    onSelectionChange,
+    sort: controlledSort,
+    onSortChange,
+    initialSort,
+    filters: controlledFilters,
+    onFilterChange,
+    initialFilters,
+    pagination: controlledPagination,
+    onPaginationChange,
+    initialPagination,
+    pageSizeOptions = [10, 25, 50, 100],
+    loading = false,
+    emptyMessage = 'No data',
+    getRowClassName,
+    onRowClick,
+    onRowDoubleClick,
+    stickyHeader = true,
+    children,
+  } = props;
+
+  const isControlledSort = controlledSort !== undefined;
+  const isControlledFilters = controlledFilters !== undefined;
+  const isControlledPagination = controlledPagination !== undefined;
+
+  const [state, dispatch] = useReducer(reducer<T>, undefined, () => ({
+    sort: initialSort ?? defaultSort,
+    filters: initialFilters ?? {},
+    pagination: initialPagination ?? defaultPagination,
+    selected: new Set(initialSelectedIds ?? []),
+  }));
+
+  const effectiveSort = isControlledSort ? controlledSort : state.sort;
+  const effectiveFilters = isControlledFilters ? controlledFilters : state.filters;
+  const effectivePagination = isControlledPagination
+    ? controlledPagination
+    : state.pagination;
+
+  // Sorting
+  const sortedData = useMemo(() => {
+    if (!effectiveSort.key || !effectiveSort.direction) return data;
+    const col = columns.find((c) => c.key === effectiveSort.key);
+    if (!col || !col.sortable) return data;
+
+    const dir = effectiveSort.direction === 'asc' ? 1 : -1;
+    return [...data].sort((a, b) => {
+      const aVal = (a as Record<string, unknown>)[effectiveSort.key!];
+      const bVal = (b as Record<string, unknown>)[effectiveSort.key!];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1 * dir;
+      if (bVal == null) return -1 * dir;
+      if (typeof aVal === 'string' && typeof bVal === 'string') {
+        return aVal.localeCompare(bVal) * dir;
+      }
+      if (typeof aVal === 'number' && typeof bVal === 'number') {
+        return (aVal - bVal) * dir;
+      }
+      return String(aVal).localeCompare(String(bVal)) * dir;
+    });
+  }, [data, effectiveSort, columns]);
+
+  // Filtering
+  const filteredData = useMemo(() => {
+    const entries = Object.entries(effectiveFilters);
+    if (entries.length === 0) return sortedData;
+    return sortedData.filter((row) => {
+      for (const [key, value] of entries) {
+        if (!value) continue;
+        const col = columns.find((c) => c.key === key);
+        if (col?.filterFn) {
+          if (!col.filterFn(row, value)) return false;
+          continue;
+        }
+        const cellValue = (row as Record<string, unknown>)[key];
+        if (cellValue == null) return false;
+        if (!String(cellValue).toLowerCase().includes(value.toLowerCase())) return false;
+      }
+      return true;
+    });
+  }, [sortedData, effectiveFilters, columns]);
+
+  // Pagination
+  const totalRows = filteredData.length;
+  const pageCount = Math.max(1, Math.ceil(totalRows / effectivePagination.pageSize));
+  const safePage = Math.min(effectivePagination.page, pageCount);
+
+  const paginatedData = useMemo(() => {
+    const start = (safePage - 1) * effectivePagination.pageSize;
+    return filteredData.slice(start, start + effectivePagination.pageSize);
+  }, [filteredData, safePage, effectivePagination.pageSize]);
+
+  // External callbacks via stable refs
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  const onSortChangeRef = useRef(onSortChange);
+  const onFilterChangeRef = useRef(onFilterChange);
+  const onPaginationChangeRef = useRef(onPaginationChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  onSortChangeRef.current = onSortChange;
+  onFilterChangeRef.current = onFilterChange;
+  onPaginationChangeRef.current = onPaginationChange;
+
+  useEffect(() => {
+    onSelectionChangeRef.current?.([...state.selected]);
+  }, [state.selected]);
+
+  // Actions
+  const setSort = useCallback(
+    (key: string) => {
+      let nextSort: DataGridSortState;
+      if (effectiveSort.key === key) {
+        const cycle: SortDirection[] = ['asc', 'desc', null];
+        const idx = cycle.indexOf(effectiveSort.direction);
+        const nextDirection = cycle[(idx + 1) % cycle.length] ?? 'asc';
+        nextSort = { key, direction: nextDirection };
+      } else {
+        nextSort = { key, direction: 'asc' };
+      }
+      if (isControlledSort) {
+        onSortChangeRef.current?.(nextSort);
+      } else {
+        dispatch({ type: 'set-sort', sort: nextSort });
+      }
+    },
+    [effectiveSort, isControlledSort],
+  );
+
+  const setFilter = useCallback(
+    (key: string, value: string) => {
+      if (isControlledFilters) {
+        const next = { ...effectiveFilters, [key]: value };
+        if (value === '') delete next[key];
+        onFilterChangeRef.current?.(next);
+      } else {
+        dispatch({ type: 'set-filter', key, value });
+      }
+    },
+    [isControlledFilters, effectiveFilters],
+  );
+
+  const clearFilters = useCallback(() => {
+    if (isControlledFilters) {
+      onFilterChangeRef.current?.({});
+    } else {
+      dispatch({ type: 'clear-filters' });
+    }
+  }, [isControlledFilters]);
+
+  const setPage = useCallback(
+    (page: number) => {
+      const safe = Math.max(1, Math.min(page, pageCount));
+      if (isControlledPagination) {
+        onPaginationChangeRef.current?.({ ...effectivePagination, page: safe });
+      } else {
+        dispatch({ type: 'set-page', page: safe });
+      }
+    },
+    [isControlledPagination, effectivePagination, pageCount],
+  );
+
+  const setPageSize = useCallback(
+    (pageSize: number) => {
+      if (isControlledPagination) {
+        onPaginationChangeRef.current?.({ page: 1, pageSize });
+      } else {
+        dispatch({ type: 'set-page-size', pageSize });
+      }
+    },
+    [isControlledPagination],
+  );
+
+  const select = useCallback(
+    (id: DataGridRowId) => dispatch({ type: 'select', id, mode: selectionMode }),
+    [selectionMode],
+  );
+
+  const selectMany = useCallback((ids: DataGridRowId[]) => {
+    dispatch({ type: 'select-many', ids });
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    dispatch({ type: 'clear-selection' });
+  }, []);
+
+  const selectAllVisible = useCallback(() => {
+    if (selectionMode !== 'multiple') return;
+    const ids = paginatedData.map(getRowId);
+    dispatch({ type: 'select-all', ids });
+  }, [paginatedData, getRowId, selectionMode]);
+
+  const isSelected = useCallback(
+    (id: DataGridRowId) => state.selected.has(id),
+    [state.selected],
+  );
+
+  const value = useMemo<DataGridContextValue<T>>(
+    () => ({
+      sort: effectiveSort,
+      filters: effectiveFilters,
+      pagination: { ...effectivePagination, page: safePage },
+      selected: state.selected,
+      rows: paginatedData,
+      totalRows,
+      pageCount,
+      setSort,
+      setFilter,
+      clearFilters,
+      setPage,
+      setPageSize,
+      select,
+      selectMany,
+      clearSelection,
+      selectAllVisible,
+      isSelected,
+      columns,
+      getRowId,
+      selectionMode,
+      pageSizeOptions,
+      loading,
+      emptyMessage,
+      getRowClassName,
+      onRowClick,
+      onRowDoubleClick,
+      stickyHeader,
+    }),
+    [
+      effectiveSort,
+      effectiveFilters,
+      effectivePagination,
+      safePage,
+      state.selected,
+      paginatedData,
+      totalRows,
+      pageCount,
+      setSort,
+      setFilter,
+      clearFilters,
+      setPage,
+      setPageSize,
+      select,
+      selectMany,
+      clearSelection,
+      selectAllVisible,
+      isSelected,
+      columns,
+      getRowId,
+      selectionMode,
+      pageSizeOptions,
+      loading,
+      emptyMessage,
+      getRowClassName,
+      onRowClick,
+      onRowDoubleClick,
+      stickyHeader,
+    ],
+  );
+
+  return (
+    <DataGridContext.Provider value={value as DataGridContextValue<unknown>}>
+      {children}
+    </DataGridContext.Provider>
+  );
+}

package/src/DataGrid/context/index.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export { DataGridProvider, useDataGridContext } from './DataGridContext';
+export type { DataGridContextValue, DataGridProviderProps } from './DataGridContext';