diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 5b20b75..13373b3 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.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. diff --git a/CHANGELOG.md b/CHANGELOG.md index 5fb946b..153f452 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/README.md b/README.md index bdd71d8..028e43f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -

react-native-datagrid

+

react-native-grid-table

A data grid for React Native with pinned columns that actually stay pinned. @@ -13,21 +13,21 @@

- npm - CI - types - license + npm + CI + types + license

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

-> **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 ```
Without Expo ```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 | diff --git a/RELEASING.md b/RELEASING.md index 4cbd646..85dfc4b 100644 --- a/RELEASING.md +++ b/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 diff --git a/docs/theming.md b/docs/theming.md index fec8f7d..b4537b5 100644 --- a/docs/theming.md +++ b/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' }; diff --git a/example/app.json b/example/app.json index 0f9ce14..e499cec 100644 --- a/example/app.json +++ b/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" diff --git a/example/metro.config.js b/example/metro.config.js index 027026e..50e62b4 100644 --- a/example/metro.config.js +++ b/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; diff --git a/example/package.json b/example/package.json index 3932155..28b7bc1 100644 --- a/example/package.json +++ b/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" }, diff --git a/example/src/App.tsx b/example/src/App.tsx index b78ac82..2f469ad 100644 --- a/example/src/App.tsx +++ b/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'; diff --git a/example/src/LocalDemo.tsx b/example/src/LocalDemo.tsx index bcfdc32..451fb06 100644 --- a/example/src/LocalDemo.tsx +++ b/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, diff --git a/example/src/ServerDemo.tsx b/example/src/ServerDemo.tsx index a10abd6..5ec3350 100644 --- a/example/src/ServerDemo.tsx +++ b/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'; diff --git a/example/src/columns.tsx b/example/src/columns.tsx index a7b814c..9b048ee 100644 --- a/example/src/columns.tsx +++ b/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', { diff --git a/example/src/controls.tsx b/example/src/controls.tsx index fdaa1b5..3f42d31 100644 --- a/example/src/controls.tsx +++ b/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; diff --git a/example/src/fakeServer.ts b/example/src/fakeServer.ts index d7700c5..d74c436 100644 --- a/example/src/fakeServer.ts +++ b/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'; diff --git a/package.json b/package.json index f8a26bd..1755feb 100644 --- a/package.json +++ b/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 (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": [ diff --git a/tsconfig.json b/tsconfig.json index 953a226..f0cf477 100644 --- a/tsconfig.json +++ b/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, diff --git a/yarn.lock b/yarn.lock index 347c7e8..584969d 100644 --- a/yarn.lock +++ b/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"