{"_id":"@arcwp/gateway-grids","_rev":"3-11063690739d156fec7a3773acbe3488","name":"@arcwp/gateway-grids","dist-tags":{"latest":"1.2.4"},"versions":{"1.2.2":{"name":"@arcwp/gateway-grids","version":"1.2.2","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grids@1.2.2","maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"homepage":"https://github.com/arcwordpress/gateway-grid#readme","bugs":{"url":"https://github.com/arcwordpress/gateway-grid/issues"},"dist":{"shasum":"1e3e947a193a808d72eb9f6e008f1b9cbb0110a7","tarball":"https://registry.npmjs.org/@arcwp/gateway-grids/-/gateway-grids-1.2.2.tgz","fileCount":27,"integrity":"sha512-PxG+f0fQM3l+eENhjbm910eg7w2TgUV/8gIeEpgP0abXUF123aj1DgU96iVMHUrYTJYlqznxLlaN4wHl0VhcSA==","signatures":[{"sig":"MEQCIHn404Ctt+HKS6IMIn4wn3t497iU85OpBwa66jCABnynAiB0sSAFZkQhe/JSAnhWqh6XvLyWMElhmVNg2Ixpby6yAQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":113470},"main":"dist/index.js","style":"dist/style.css","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./style.css":"./dist/style.css","./board-styles.css":"./dist/board-styles.css"},"gitHead":"b37d00eb55c6e2e010eee697d8241caf325158a9","scripts":{"build":"babel src --out-dir dist --copy-files --ignore '**/*.test.js','**/*.spec.js' && cp node_modules/@asseinfo/react-kanban/dist/styles.css dist/board-styles.css","prepublishOnly":"npm run build"},"_npmUser":{"name":"arcwp","email":"support@arcwp.ca"},"repository":{"url":"git+https://github.com/arcwordpress/gateway-grid.git","type":"git"},"_npmVersion":"10.9.2","description":"Gateway Grid React component library with TanStack Table","directories":{},"_nodeVersion":"23.5.0","dependencies":{"axios":"^1.6.2","@arcwp/gateway-forms":"^1.2.5","@tanstack/react-table":"^8.20.5","@asseinfo/react-kanban":"^2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.24.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gateway-grids_1.2.2_1762769965989_0.15985600850522674","host":"s3://npm-registry-packages-npm-production"}},"1.2.3":{"name":"@arcwp/gateway-grids","version":"1.2.3","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grids@1.2.3","maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"homepage":"https://github.com/arcwordpress/gateway-grid#readme","bugs":{"url":"https://github.com/arcwordpress/gateway-grid/issues"},"dist":{"shasum":"a574d932fbd8b24283cc23a6c1828a3504abf319","tarball":"https://registry.npmjs.org/@arcwp/gateway-grids/-/gateway-grids-1.2.3.tgz","fileCount":27,"integrity":"sha512-U+DxIC2dAD9uO4mOVN7r7RJED39ONTxXICmm7hWcxqMLiVo7hSb+MF83gEfE7pgZaLThJ8UQqcoAAwtgs1seqA==","signatures":[{"sig":"MEUCIFMHAt/oBru6VQM/FBu/wmUrIZGM9UB+MCF0G+x0YyHpAiEAlEWHSdluscVJXmIKXyUGkfVqqkhYmpi7fNs0YrTgB9Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":113503},"main":"dist/index.js","style":"dist/style.css","module":"dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./style.css":"./dist/style.css","./board-styles.css":"./dist/board-styles.css"},"gitHead":"dc784141db2e29778b31ace5542cc36c7d61020a","scripts":{"build":"babel src --out-dir dist --copy-files --ignore '**/*.test.js','**/*.spec.js'","prepublishOnly":"npm run build"},"_npmUser":{"name":"arcwp","email":"support@arcwp.ca"},"repository":{"url":"git+https://github.com/arcwordpress/gateway-grid.git","type":"git"},"_npmVersion":"10.9.2","description":"Gateway Grid React component library with TanStack Table","directories":{},"_nodeVersion":"23.5.0","dependencies":{"axios":"^1.6.2","@arcwp/gateway-forms":"^1.2.5","@tanstack/react-table":"^8.20.5","@asseinfo/react-kanban":"^2.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.24.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gateway-grids_1.2.3_1762783107735_0.9972763017608619","host":"s3://npm-registry-packages-npm-production"}},"1.2.4":{"name":"@arcwp/gateway-grids","version":"1.2.4","description":"Gateway Grid React component library with TanStack Table","main":"dist/index.js","module":"dist/index.js","style":"dist/style.css","exports":{".":{"import":"./dist/index.js","require":"./dist/index.js"},"./style.css":"./dist/style.css","./board-styles.css":"./dist/board-styles.css"},"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","scripts":{"build":"babel src --out-dir dist --copy-files --ignore '**/*.test.js','**/*.spec.js'","prepublishOnly":"npm run build"},"keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"publishConfig":{"access":"public"},"devDependencies":{"@babel/cli":"^7.24.0","@babel/core":"^7.24.0","@babel/preset-env":"^7.24.0","@babel/preset-react":"^7.24.0"},"dependencies":{"@arcwp/gateway-forms":"^1.2.5","@tanstack/react-table":"^8.20.5","@asseinfo/react-kanban":"^2.2.0","axios":"^1.6.2"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_id":"@arcwp/gateway-grids@1.2.4","gitHead":"38171ddbe5cebe82ebac9bc1723bb3c8434dafb8","_nodeVersion":"23.5.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-2Mf838t/SNcDPvaFBPFQ+Ql9tVBrSvfgCJectktFdAmDslCz0Az/81G2p/DQ4cOFR/VS+jSripGfZXj4Cb+aBw==","shasum":"c52a88de532260c56f97cba7e851d6889761521c","tarball":"https://registry.npmjs.org/@arcwp/gateway-grids/-/gateway-grids-1.2.4.tgz","fileCount":30,"unpackedSize":116213,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCHUzw2q8NZUdaQzkYqjvfbUJ00ami1M8sSnuqFNYIulgIhAM7C3drjxTD3ZCvcTJn2FyKfr5lsW9Wgdbmp2TFqTM/N"}]},"_npmUser":{"name":"arcwp","email":"support@arcwp.ca"},"directories":{},"maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gateway-grids_1.2.4_1762886218312_0.22815241988284884"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-10T10:19:25.914Z","modified":"2025-11-11T18:36:58.719Z","1.2.2":"2025-11-10T10:19:26.175Z","1.2.3":"2025-11-10T13:58:27.934Z","1.2.4":"2025-11-11T18:36:58.545Z"},"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"description":"Gateway Grid React component library with TanStack Table","maintainers":[{"name":"arcwp","email":"support@arcwp.ca"}],"readme":"# @gateway/grid\r\n\r\nA reusable React Grid component library built with TanStack Table for WordPress Gateway collections.\r\n\r\n## Features\r\n\r\n- **TanStack Table Integration**: Powerful data table with built-in sorting, filtering, and pagination\r\n- **Tailwind 4 Styling**: Modern, responsive UI with Tailwind CSS\r\n- **Client-side Operations**: All sorting, filtering, and pagination handled client-side for fast interactions\r\n- **WordPress Integration**: Seamlessly integrates with WordPress via wp-scripts\r\n- **REST API**: Fetches data from Gateway collections via REST API endpoints\r\n- **Axios**: HTTP requests using axios with automatic nonce authentication\r\n- **Package Ready**: Can be used as a local npm package in other apps\r\n\r\n## Installation\r\n\r\n### As a Local NPM Package\r\n\r\nIn your admin app, install the grid package:\r\n\r\n```bash\r\nnpm install file:../grid\r\n```\r\n\r\nOr add to your `package.json`:\r\n\r\n```json\r\n{\r\n  \"dependencies\": {\r\n    \"@gateway/grid\": \"file:../grid\"\r\n  }\r\n}\r\n```\r\n\r\n### Standalone Development\r\n\r\n1. Navigate to the grid app directory:\r\n```bash\r\ncd react/apps/grid\r\n```\r\n\r\n2. Install dependencies:\r\n```bash\r\nnpm install\r\n```\r\n\r\n3. Build for library use:\r\n```bash\r\nnpm run build\r\n```\r\n\r\nOr build standalone version:\r\n```bash\r\nnpm run build:standalone\r\n```\r\n\r\n## Development\r\n\r\n### Library Mode (for use in other apps)\r\n```bash\r\nnpm start\r\n```\r\n\r\n### Standalone Mode (for WordPress plugin)\r\n```bash\r\nnpm run start:standalone\r\n```\r\n\r\n## Usage\r\n\r\n### As a Package in Your React App\r\n\r\n#### Basic Grid Component\r\n\r\n```jsx\r\nimport { Grid } from '@gateway/grid';\r\n\r\nfunction MyAdminPage() {\r\n  return (\r\n    <Grid collectionKey=\"tickets\" />\r\n  );\r\n}\r\n```\r\n\r\n#### Using DataTable Directly\r\n\r\nIf you want more control and fetch your own data:\r\n\r\n```jsx\r\nimport { DataTable } from '@gateway/grid';\r\nimport { useState, useEffect } from 'react';\r\n\r\nfunction CustomGrid() {\r\n  const [data, setData] = useState([]);\r\n  const [columns, setColumns] = useState([]);\r\n\r\n  // ... fetch your data\r\n\r\n  return (\r\n    <DataTable\r\n      data={data}\r\n      columns={columns}\r\n      loading={false}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n#### Using Collection Services\r\n\r\nAccess the API service functions directly:\r\n\r\n```jsx\r\nimport {\r\n  fetchCollection,\r\n  fetchCollectionData,\r\n  createRecord,\r\n  updateRecord,\r\n  deleteRecord\r\n} from '@gateway/grid';\r\n\r\n// Fetch collection metadata\r\nconst collection = await fetchCollection('tickets');\r\n\r\n// Fetch collection data\r\nconst data = await fetchCollectionData('gateway/v1', 'tickets');\r\n\r\n// Create a record\r\nconst newRecord = await createRecord('gateway/v1', 'tickets', {\r\n  title: 'New Ticket',\r\n  status: 'open'\r\n});\r\n\r\n// Update a record\r\nconst updated = await updateRecord('gateway/v1', 'tickets', 123, {\r\n  status: 'closed'\r\n});\r\n\r\n// Delete a record\r\nawait deleteRecord('gateway/v1', 'tickets', 123);\r\n```\r\n\r\n### Standalone Usage (WordPress Plugin)\r\n\r\n#### In PHP Templates or Shortcodes\r\n\r\nUse the helper function to render a grid:\r\n\r\n```php\r\n<?php\r\n// Render a grid for the 'tickets' collection\r\necho gateway_grid('tickets');\r\n\r\n// With additional attributes\r\necho gateway_grid('tickets', [\r\n    'class' => 'my-custom-class',\r\n    'theme' => 'dark'\r\n]);\r\n?>\r\n```\r\n\r\n#### Using the Grid Class Directly\r\n\r\n```php\r\n<?php\r\nuse Gateway\\Grid;\r\n\r\n// Render a grid\r\necho Grid::render('tickets');\r\n?>\r\n```\r\n\r\n#### In HTML (Manual)\r\n\r\n```html\r\n<div data-gateway-grid data-collection=\"tickets\"></div>\r\n```\r\n\r\nThe React app will automatically find all elements with `data-gateway-grid` attribute and initialize the grid.\r\n\r\n## Collection Requirements\r\n\r\nFor the grid to work, you need:\r\n\r\n1. A registered Gateway collection with a unique key\r\n2. The collection must be accessible via the REST API endpoint: `gateway/v1/collections/{key}`\r\n3. The collection's data endpoint (e.g., `gateway/v1/tickets`) must be available\r\n\r\n### Example Collection\r\n\r\n```php\r\n<?php\r\nnamespace Gateway\\Collections;\r\n\r\nuse Gateway\\Collection;\r\n\r\nclass TicketCollection extends Collection\r\n{\r\n    protected $key = 'tickets';\r\n    protected $table = 'gateway_tickets';\r\n\r\n    protected $fillable = ['title', 'description', 'status', 'priority'];\r\n\r\n    protected $fields = [\r\n        'title' => [\r\n            'label' => 'Title',\r\n            'type' => 'text',\r\n        ],\r\n        'description' => [\r\n            'label' => 'Description',\r\n            'type' => 'textarea',\r\n        ],\r\n        'status' => [\r\n            'label' => 'Status',\r\n            'type' => 'select',\r\n        ],\r\n        'priority' => [\r\n            'label' => 'Priority',\r\n            'type' => 'select',\r\n        ],\r\n    ];\r\n\r\n    protected $routes = [\r\n        'enabled' => true,\r\n        'namespace' => 'gateway',\r\n        'version' => 'v1',\r\n        'route' => 'tickets',\r\n    ];\r\n}\r\n\r\n// Register the collection\r\nTicketCollection::register();\r\n?>\r\n```\r\n\r\n## API Reference\r\n\r\n### Components\r\n\r\n#### `<Grid>`\r\n\r\nMain grid component that handles fetching collection metadata and data.\r\n\r\n**Props:**\r\n- `collectionKey` (string, required): The key of the collection to display\r\n\r\n#### `<DataTable>`\r\n\r\nLow-level table component using TanStack Table.\r\n\r\n**Props:**\r\n- `data` (array, required): Array of data objects to display\r\n- `columns` (array, required): TanStack Table column definitions\r\n- `loading` (boolean): Show loading state\r\n\r\n### Services\r\n\r\n#### Collection Services\r\n\r\nAll services are exported from `@gateway/grid`:\r\n\r\n- `fetchCollections()`: Get all registered collections\r\n- `fetchCollection(key)`: Get a single collection by key\r\n- `fetchCollectionData(namespace, route, params)`: Fetch collection records\r\n- `fetchRecord(namespace, route, id)`: Fetch a single record\r\n- `createRecord(namespace, route, data)`: Create a new record\r\n- `updateRecord(namespace, route, id, data)`: Update a record\r\n- `deleteRecord(namespace, route, id)`: Delete a record\r\n\r\n## API Integration\r\n\r\nThe grid uses the following endpoints:\r\n\r\n### Get Collection Metadata\r\n```\r\nGET /wp-json/gateway/v1/collections/{key}\r\n```\r\n\r\nReturns collection configuration including fields, routes, and settings.\r\n\r\n### Get Collection Data\r\n```\r\nGET /wp-json/gateway/v1/{route}\r\n```\r\n\r\nReturns all records from the collection. The grid handles pagination, sorting, and filtering client-side.\r\n\r\n## Features in Detail\r\n\r\n### Global Search\r\nType in the search box to filter across all columns simultaneously.\r\n\r\n### Column Filters\r\nEach column header has an individual filter input for precise filtering.\r\n\r\n### Sorting\r\nClick column headers to toggle sorting (ascending/descending/none).\r\n\r\n### Pagination\r\n- Navigate between pages with first/previous/next/last buttons\r\n- Adjust page size (10, 20, 30, 40, 50 rows per page)\r\n- See current page and total pages\r\n\r\n### Client-side Processing\r\nAll data operations (filtering, sorting, pagination) happen in the browser for instant response.\r\n\r\n## Project Structure\r\n\r\n```\r\ngrid/\r\n├── build/                  # Compiled output (generated)\r\n├── node_modules/          # Dependencies (generated)\r\n├── src/\r\n│   ├── components/\r\n│   │   └── DataTable.js   # TanStack Table component\r\n│   ├── services/\r\n│   │   └── collectionService.js  # API service with axios\r\n│   ├── App.js            # Main app component\r\n│   ├── index.js          # Entry point\r\n│   └── index.css         # Tailwind imports\r\n├── package.json          # Dependencies\r\n├── webpack.config.js     # Webpack configuration\r\n└── README.md            # This file\r\n```\r\n\r\n## Dependencies\r\n\r\n### Production\r\n- `@tanstack/react-table` - Table management\r\n- `axios` - HTTP requests\r\n- `tailwindcss` & `@tailwindcss/postcss` - Styling\r\n\r\n### Development\r\n- `@wordpress/scripts` - Build tools\r\n- `autoprefixer` - CSS vendor prefixing\r\n- `postcss` - CSS processing\r\n\r\n### Peer Dependencies\r\n\r\nWhen using as a package, your app must provide:\r\n- `@wordpress/element` (^5.0.0 || ^6.0.0)\r\n- `react` (^18.0.0)\r\n- `react-dom` (^18.0.0)\r\n\r\n## WordPress Integration\r\n\r\nThe grid app uses WordPress externals to avoid bundling React twice:\r\n\r\n```javascript\r\nexternals: {\r\n  react: 'React',\r\n  'react-dom': 'ReactDOM',\r\n  '@wordpress/element': 'wp.element'\r\n}\r\n```\r\n\r\nWordPress provides these libraries globally, keeping bundle size small.\r\n\r\n## REST API Authentication\r\n\r\nThe app automatically includes the WordPress REST API nonce in all requests for authentication:\r\n\r\n```javascript\r\nconfig.headers['X-WP-Nonce'] = wpApiSettings.nonce;\r\n```\r\n\r\n## Customization\r\n\r\n### Styling\r\nModify `src/index.css` or component classes. Tailwind 4 is configured via CSS imports.\r\n\r\n### Table Behavior\r\nEdit `src/components/DataTable.js` to customize:\r\n- Column definitions\r\n- Filter behavior\r\n- Pagination options\r\n- Sorting logic\r\n\r\n### API Calls\r\nModify `src/services/collectionService.js` to:\r\n- Add new endpoints\r\n- Change request/response handling\r\n- Add error handling\r\n\r\n## Building for Production\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nThis creates optimized files in the `build/` directory:\r\n- `index.js` - Minified JavaScript\r\n- `index.css` - Processed CSS\r\n- `index-rtl.css` - RTL version\r\n- `index.asset.php` - WordPress asset metadata\r\n\r\n## Troubleshooting\r\n\r\n### Grid not appearing\r\n1. Check that the collection key is correct\r\n2. Verify the build files exist in `build/`\r\n3. Check browser console for errors\r\n4. Ensure REST API is accessible\r\n\r\n### Data not loading\r\n1. Verify collection is registered\r\n2. Check REST API endpoint exists: `/wp-json/gateway/v1/collections/{key}`\r\n3. Check collection data endpoint: `/wp-json/gateway/v1/{route}`\r\n4. Look for authentication issues (nonce)\r\n\r\n### Build errors\r\n1. Delete `node_modules/` and `package-lock.json`\r\n2. Run `npm install` again\r\n3. Check Node.js version compatibility\r\n","readmeFilename":"README.md"}