chore: rename package to react-native-grid-table

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Feature Request 💡
-    url: https://github.com/ahmdshrif/react-native-datagrid/discussions/new?category=ideas
+    url: https://github.com/ahmdshrif/react-native-grid-table/discussions/new?category=ideas
     about: If you have a feature request, please create a new discussion on GitHub.
   - name: Discussions on GitHub 💬
-    url: https://github.com/ahmdshrif/react-native-datagrid/discussions
+    url: https://github.com/ahmdshrif/react-native-grid-table/discussions
     about: If this library works as promised but you need help, please ask questions there.

CHANGELOG.md

@@ -21,5 +21,5 @@ First public beta. The API may still change before 0.1.0.
 - Every mounted row renders every column. Rendering only visible columns is planned for wide tables.
 - Sorting, filtering and key generation process the whole dataset in JS.
 - No column resizing or inline editing yet.
-- No native horizontal scrollbar or overscroll bounce: sideways scrolling is driven by a pan gesture so the header and pinned columns stay in sync ([#3](https://github.com/ahmdshrif/react-native-datagrid/issues/3)).
+- No native horizontal scrollbar or overscroll bounce: sideways scrolling is driven by a pan gesture so the header and pinned columns stay in sync ([#3](https://github.com/ahmdshrif/react-native-grid-table/issues/3)).
 - Performance has been measured on the iOS simulator and an Android emulator only. Physical low-end Android devices are not measured yet.

README.md

@@ -1,4 +1,4 @@
-<h1 align="center">react-native-datagrid</h1>
+<h1 align="center">react-native-grid-table</h1>
 
 <p align="center">
   A data grid for React Native with pinned columns that actually stay pinned.
@@ -13,21 +13,21 @@
 </p>
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/react-native-datagrid"><img alt="npm" src="https://img.shields.io/npm/v/react-native-datagrid/beta?label=npm%20beta"></a>
-  <a href="https://github.com/ahmdshrif/react-native-datagrid/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/ahmdshrif/react-native-datagrid/actions/workflows/ci.yml/badge.svg"></a>
-  <img alt="types" src="https://img.shields.io/npm/types/react-native-datagrid">
-  <img alt="license" src="https://img.shields.io/npm/l/react-native-datagrid">
+  <a href="https://www.npmjs.com/package/react-native-grid-table"><img alt="npm" src="https://img.shields.io/npm/v/react-native-grid-table/beta?label=npm%20beta"></a>
+  <a href="https://github.com/ahmdshrif/react-native-grid-table/actions/workflows/ci.yml"><img alt="CI" src="https://github.com/ahmdshrif/react-native-grid-table/actions/workflows/ci.yml/badge.svg"></a>
+  <img alt="types" src="https://img.shields.io/npm/types/react-native-grid-table">
+  <img alt="license" src="https://img.shields.io/npm/l/react-native-grid-table">
 </p>
 
 <p align="center">
   <img src="docs/media/demo.gif" width="300" alt="Scrolling a 10,000-row grid sideways while the first columns and the header stay in place, then sorting, selecting rows, switching to dark mode, and paging from a server">
 </p>
 
-> **Beta.** The API may still change before `0.1.0`. What lands next is decided by feedback from real apps — [open an issue](https://github.com/ahmdshrif/react-native-datagrid/issues).
+> **Beta.** The API may still change before `0.1.0`. What lands next is decided by feedback from real apps — [open an issue](https://github.com/ahmdshrif/react-native-grid-table/issues).
 
 ## Why this grid
 
-**⚡ Pinned columns that don't drift.** Sideways scrolling is driven by one Reanimated value, so rows, header and pinned columns move in the same frame. Feeding a `ScrollView`'s offset into a transform is a frame late on Android, and pinned columns visibly flicker ([#3](https://github.com/ahmdshrif/react-native-datagrid/issues/3)).
+**⚡ Pinned columns that don't drift.** Sideways scrolling is driven by one Reanimated value, so rows, header and pinned columns move in the same frame. Feeding a `ScrollView`'s offset into a transform is a frame late on Android, and pinned columns visibly flicker ([#3](https://github.com/ahmdshrif/react-native-grid-table/issues/3)).
 
 **🚀 Built on FlashList.** Only the rows on screen are mounted, so 10,000 rows scroll like 30.
 
@@ -38,14 +38,14 @@
 ## Quick start
 
 ```sh
-npx expo install react-native-datagrid@beta @shopify/flash-list react-native-reanimated react-native-worklets react-native-gesture-handler
+npx expo install react-native-grid-table@beta @shopify/flash-list react-native-reanimated react-native-worklets react-native-gesture-handler
 ```
 
 <details>
 <summary>Without Expo</summary>
 
 ```sh
-npm install react-native-datagrid@beta @shopify/flash-list react-native-reanimated react-native-worklets react-native-gesture-handler
+npm install react-native-grid-table@beta @shopify/flash-list react-native-reanimated react-native-worklets react-native-gesture-handler
 ```
 
 Follow the [Reanimated setup guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started) to add the worklets Babel plugin. On Expo, install the peers with `expo install` so they match your SDK; installing this library first can pull a Reanimated version that needs a newer React Native than your SDK ships.
@@ -65,8 +65,8 @@ export default function App() {
 Then render a grid. It fills its parent, so give the parent a height.
 
 ```tsx
-import { DataGrid } from 'react-native-datagrid';
-import type { DataGridColumn } from 'react-native-datagrid';
+import { DataGrid } from 'react-native-grid-table';
+import type { DataGridColumn } from 'react-native-grid-table';
 
 type Order = { id: string; customer: string; status: string; amount: number };
 
@@ -171,7 +171,7 @@ Checked on the iOS 26 simulator and an Android API 35 emulator in Release builds
 
 ## How it compares
 
-| | react-native-datagrid | Plain `FlatList` | [TanStack Table](https://tanstack.com/table) |
+| | react-native-grid-table | Plain `FlatList` | [TanStack Table](https://tanstack.com/table) |
 | --- | --- | --- | --- |
 | Pinned columns + sticky header | Built in | You build it | You build it |
 | Row virtualization | FlashList | FlatList | Bring your own list |

RELEASING.md

@@ -9,7 +9,7 @@
 5. `npm publish` — `publishConfig.tag` is `beta`, so it will **not** become `latest`.
 6. `git tag v0.1.0-beta.0 && git push --tags`.
 
-Install instructions for testers: `npm install react-native-datagrid@beta`.
+Install instructions for testers: `npm install react-native-grid-table@beta`.
 
 ## Stable
 

docs/theming.md

@@ -34,7 +34,7 @@ The grid ships light and dark themes and follows the device by default. Override
 `lightTheme` and `darkTheme` are exported, so you can extend one instead of listing every token:
 
 ```tsx
-import { darkTheme } from 'react-native-datagrid';
+import { darkTheme } from 'react-native-grid-table';
 
 const brandDark = { ...darkTheme, accent: '#FFB300', onAccent: '#1A1A1A' };
 

example/app.json

@@ -1,14 +1,14 @@
 {
   "expo": {
-    "name": "Datagrid Example",
-    "slug": "react-native-datagrid-example",
+    "name": "Grid Table Example",
+    "slug": "react-native-grid-table-example",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "automatic",
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "dev.rndatagrid.example"
+      "bundleIdentifier": "dev.rngridtable.example"
     },
     "android": {
       "adaptiveIcon": {
@@ -17,7 +17,7 @@
         "backgroundImage": "./assets/android-icon-background.png",
         "monochromeImage": "./assets/android-icon-monochrome.png"
       },
-      "package": "dev.rndatagrid.example"
+      "package": "dev.rngridtable.example"
     },
     "web": {
       "favicon": "./assets/favicon.png"

example/metro.config.js

@@ -13,7 +13,7 @@ const root = path.resolve(__dirname, '..');
 const config = withMetroConfig(getDefaultConfig(__dirname), {
   root,
   dirname: __dirname,
-  conditions: ['react-native-datagrid-source'],
+  conditions: ['react-native-grid-table-source'],
 });
 
 module.exports = config;

example/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-datagrid-example",
+  "name": "react-native-grid-table-example",
   "version": "1.0.0",
   "main": "index.js",
   "dependencies": {
@@ -21,7 +21,7 @@
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web",
-    "build:ios": "xcodebuild ONLY_ACTIVE_ARCH=YES -workspace ios/DatagridExample.xcworkspace -UseNewBuildSystem=YES -scheme DatagridExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -quiet",
+    "build:ios": "xcodebuild ONLY_ACTIVE_ARCH=YES -workspace ios/GridTableExample.xcworkspace -UseNewBuildSystem=YES -scheme GridTableExample -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build -quiet",
     "build:android": "cd android && ./gradlew assembleDebug -DtestBuildType=debug -Dorg.gradle.jvmargs=-Xmx4g",
     "build:web": "expo export --platform web"
   },

example/src/App.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, Text, View, useColorScheme } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { darkTheme, lightTheme } from 'react-native-datagrid';
-import type { DataGridTheme } from 'react-native-datagrid';
+import { darkTheme, lightTheme } from 'react-native-grid-table';
+import type { DataGridTheme } from 'react-native-grid-table';
 import { Segmented } from './controls';
 import { LocalDemo } from './LocalDemo';
 import { PerfMonitor } from './PerfMonitor';

example/src/LocalDemo.tsx

@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
 import { Text, View } from 'react-native';
-import { DataGrid } from 'react-native-datagrid';
-import type { ColumnFilters, DataGridTheme } from 'react-native-datagrid';
+import { DataGrid } from 'react-native-grid-table';
+import type { ColumnFilters, DataGridTheme } from 'react-native-grid-table';
 import { makeColumns } from './columns';
 import {
   Chip,

example/src/ServerDemo.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Text, View } from 'react-native';
-import { DataGrid } from 'react-native-datagrid';
-import type { DataGridTheme, SortState } from 'react-native-datagrid';
+import { DataGrid } from 'react-native-grid-table';
+import type { DataGridTheme, SortState } from 'react-native-grid-table';
 import { makeColumns } from './columns';
 import { Chip, LinkButton, SearchBox, controlStyles } from './controls';
 import { STATUSES } from './data';

example/src/columns.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, View } from 'react-native';
-import type { DataGridColumn } from 'react-native-datagrid';
+import type { DataGridColumn } from 'react-native-grid-table';
 import type { WorkOrder, WorkOrderStatus } from './data';
 
 const money = new Intl.NumberFormat('en-US', {

example/src/controls.tsx

@@ -1,5 +1,5 @@
 import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import type { DataGridTheme } from 'react-native-datagrid';
+import type { DataGridTheme } from 'react-native-grid-table';
 
 type ChipProps = {
   theme: DataGridTheme;

example/src/fakeServer.ts

@@ -1,5 +1,9 @@
-import { buildSearchIndex, filterRows, sortRows } from 'react-native-datagrid';
-import type { SortState } from 'react-native-datagrid';
+import {
+  buildSearchIndex,
+  filterRows,
+  sortRows,
+} from 'react-native-grid-table';
+import type { SortState } from 'react-native-grid-table';
 import { makeColumns } from './columns';
 import { makeWorkOrders } from './data';
 import type { WorkOrder, WorkOrderStatus } from './data';

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "react-native-datagrid",
+  "name": "react-native-grid-table",
   "version": "0.1.0-beta.0",
   "description": "Fast data grid for React Native: pinned columns, sticky header, virtualized rows, sorting and selection",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
   "exports": {
     ".": {
-      "react-native-datagrid-source": "./src/index.tsx",
+      "react-native-grid-table-source": "./src/index.tsx",
       "types": "./lib/typescript/src/index.d.ts",
       "default": "./lib/module/index.js"
     },
@@ -32,7 +32,7 @@
     "!**/.*"
   ],
   "scripts": {
-    "example": "yarn workspace react-native-datagrid-example",
+    "example": "yarn workspace react-native-grid-table-example",
     "clean": "del-cli lib",
     "prepare": "bob build",
     "typecheck": "tsc",
@@ -56,14 +56,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ahmdshrif/react-native-datagrid.git"
+    "url": "git+https://github.com/ahmdshrif/react-native-grid-table.git"
   },
   "author": "ahmdshrif <a.s1171111@gmail.com> (https://github.com/ahmdshrif)",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/ahmdshrif/react-native-datagrid/issues"
+    "url": "https://github.com/ahmdshrif/react-native-grid-table/issues"
   },
-  "homepage": "https://github.com/ahmdshrif/react-native-datagrid#readme",
+  "homepage": "https://github.com/ahmdshrif/react-native-grid-table#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "tag": "beta",
@@ -142,7 +142,7 @@
       "customExportConditions": [
         "require",
         "react-native",
-        "react-native-datagrid-source"
+        "react-native-grid-table-source"
       ]
     },
     "modulePathIgnorePatterns": [

tsconfig.json

@@ -2,14 +2,14 @@
   "compilerOptions": {
     "rootDir": ".",
     "paths": {
-      "react-native-datagrid": [
+      "react-native-grid-table": [
         "./src/index"
       ]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "customConditions": [
-      "react-native-datagrid-source",
+      "react-native-grid-table-source",
       "react-native-strict-api"
     ],
     "esModuleInterop": true,

yarn.lock

@@ -10323,9 +10323,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-datagrid-example@workspace:example":
+"react-native-gesture-handler@npm:~2.30.0":
+  version: 2.30.1
+  resolution: "react-native-gesture-handler@npm:2.30.1"
+  dependencies:
+    "@egjs/hammerjs": "npm:^2.0.17"
+    hoist-non-react-statics: "npm:^3.3.0"
+    invariant: "npm:^2.2.4"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/6fdace725cfc08a8f2ab4b307d8d7f11438ebe38038443f7057bb1fd10554fcec8ce2816e8da131ae9b850c9be5e3bbef752b90240f5c91595ab20fd03ad6876
+  languageName: node
+  linkType: hard
+
+"react-native-grid-table-example@workspace:example":
   version: 0.0.0-use.local
-  resolution: "react-native-datagrid-example@workspace:example"
+  resolution: "react-native-grid-table-example@workspace:example"
   dependencies:
     "@expo/metro-runtime": "npm:~55.0.0"
     "@shopify/flash-list": "npm:2.0.2"
@@ -10344,9 +10358,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-datagrid@workspace:.":
+"react-native-grid-table@workspace:.":
   version: 0.0.0-use.local
-  resolution: "react-native-datagrid@workspace:."
+  resolution: "react-native-grid-table@workspace:."
   dependencies:
     "@commitlint/config-conventional": "npm:^21.2.0"
     "@eslint/compat": "npm:^2.1.0"
@@ -10386,20 +10400,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-gesture-handler@npm:~2.30.0":
-  version: 2.30.1
-  resolution: "react-native-gesture-handler@npm:2.30.1"
-  dependencies:
-    "@egjs/hammerjs": "npm:^2.0.17"
-    hoist-non-react-statics: "npm:^3.3.0"
-    invariant: "npm:^2.2.4"
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  checksum: 10c0/6fdace725cfc08a8f2ab4b307d8d7f11438ebe38038443f7057bb1fd10554fcec8ce2816e8da131ae9b850c9be5e3bbef752b90240f5c91595ab20fd03ad6876
-  languageName: node
-  linkType: hard
-
 "react-native-is-edge-to-edge@npm:1.2.1":
   version: 1.2.1
   resolution: "react-native-is-edge-to-edge@npm:1.2.1"