{"_id":"@arcwp/gateway-grid","_rev":"8-4f33f7cb6e3c58f7d260cac815c977ff","name":"@arcwp/gateway-grid","dist-tags":{"latest":"1.2.2"},"versions":{"1.1.1":{"name":"@arcwp/gateway-grid","version":"1.1.1","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.1.1","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":"41fbee2729e58e4e24a2cb446187d5309ebd7dac","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.1.1.tgz","fileCount":6,"integrity":"sha512-cHMOJ2RVuTl6aLGjkM8bCBRY6ZFJuchZbV7rW0oS01Nlc8xUlww8XPPRNpG0vKSBlfn410uAwfKPv9PUia2kFg==","signatures":[{"sig":"MEQCICF0k7JVwEijIHnfk2pGri8XOAC+jT9CrS6zq7/p3ssyAiAh1YG3bDS9D3jPLqC97yjcfRfqTCguWA4QmNY6IKOa6Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":37369},"main":"src/index.js","module":"src/index.js","gitHead":"0374c8df48e43ea43b54e9b854406df98331a67a","_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","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/gateway-grid_1.1.1_1761923266753_0.2469984794350193","host":"s3://npm-registry-packages-npm-production"}},"1.1.2":{"name":"@arcwp/gateway-grid","version":"1.1.2","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.1.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":"b96ad81b4fb47abdf145d8956943d6dd56848fa2","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.1.2.tgz","fileCount":7,"integrity":"sha512-e16vkFtzdJ1pVD84v1oQuYmulw9wXAI80a8bLeF9U2axDMwtnXMG+QkjB/KeTnWH7mIl6xNOMlbsAtcqsAetNw==","signatures":[{"sig":"MEUCIGOi2u9Cm55vcTH0j7mcLv4oHKkkRrxfLISW6pNHYpF5AiEAuTeUhwUIypP2BPD29/scKDZy/3vvjzsKoJLQ5JlMUtA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42602},"main":"dist/index.js","module":"dist/index.js","gitHead":"9fc97ee74ba0e5e08ac096ae0d0c1e3cce6c5be5","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","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.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-grid_1.1.2_1762002720357_0.860758306606481","host":"s3://npm-registry-packages-npm-production"}},"1.1.3":{"name":"@arcwp/gateway-grid","version":"1.1.3","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.1.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":"df07835d654b2d5b75bf1f2c51390ecfef280d88","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.1.3.tgz","fileCount":7,"integrity":"sha512-bag3Fiul5CQlbVzxgyQMflnplCYCr5g4nV0hB4TTsh+LtBAEwoS18SnVJaQogOam6FS09e2Z/wdk/tL+d0AE3A==","signatures":[{"sig":"MEUCIQCoKh8JH9Owm3M7hiHQj7gZ8+swY3QuRK4YrcDBfKBAnQIgFe4GMynZrIYZayMFg6/dJlXb6JZpar336rTRzjzYOdg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42608},"main":"dist/index.js","module":"dist/index.js","gitHead":"9fc97ee74ba0e5e08ac096ae0d0c1e3cce6c5be5","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","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.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-grid_1.1.3_1762004144700_0.5461693784634298","host":"s3://npm-registry-packages-npm-production"}},"1.1.4":{"name":"@arcwp/gateway-grid","version":"1.1.4","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.1.4","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":"262d0340aec04471e3337c6365ae13cf0b5a4c91","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.1.4.tgz","fileCount":7,"integrity":"sha512-pNvy2laa5vE9rpsRUxH+RPMiziKRKZ3TrbgsKoSrvelAMkoAKTWtD6VX2XL9NC08VZkYlRB67R7Zrn/7VOf0rA==","signatures":[{"sig":"MEUCIQDcZLkGkIjOvZUJrIdV2AtgMsDYdMcz9OLe+dMQg+ZFQgIgecYH8fx7u6OE/QH2mPuIXACoZ93C9Nd5JskCZFSf7Bo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42574},"main":"dist/index.js","module":"dist/index.js","gitHead":"9fc97ee74ba0e5e08ac096ae0d0c1e3cce6c5be5","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","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.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-grid_1.1.4_1762004625322_0.2647197793854861","host":"s3://npm-registry-packages-npm-production"}},"1.1.5":{"name":"@arcwp/gateway-grid","version":"1.1.5","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.1.5","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":"f5e83e9e7f3b3006656b7fef22328bf7a94b5b1f","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.1.5.tgz","fileCount":7,"integrity":"sha512-pEofb3zhqNYcyy2iLWgchW1UentK41by2SKROHAwAzNizoTq4gRHlLBMIjft+ufDEGqFDpATFoCvjKgVLwfdBw==","signatures":[{"sig":"MEUCIQDoINIJs72f2dd8pyGgRHbXuwvPZeRqwR0xRu8u++l8CgIgBYlXlmyZN7Bon6GjzscKDdLZHaFFLccgswzcGGxsKo0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":42574},"main":"dist/index.js","module":"dist/index.js","gitHead":"9fc97ee74ba0e5e08ac096ae0d0c1e3cce6c5be5","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","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.2"},"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-grid_1.1.5_1762004876318_0.8654099300383009","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@arcwp/gateway-grid","version":"1.2.0","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.2.0","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":"e3896f4fd6cf543c10e5005ff9a9ef409050d31a","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.2.0.tgz","fileCount":7,"integrity":"sha512-eVNYqp6r2u64Yff3Qbck/fzo4qBbgKLvOq9/+FvS+nheKzMfwBcT9xYKmNeayI0nstBTpPVKHlMTdaOfwnG/zw==","signatures":[{"sig":"MEUCIH/U6DElfGwGM0W1TVWZ4aieSXkryILElBh1JxuzrwZyAiEAuWXotZuBrNoUc9rID7jy2ipeeZ8dPto9/8q5SRlBN+Y=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43497},"main":"dist/index.js","module":"dist/index.js","gitHead":"23f9486109d2eedc903b08a3109d02d55ab19215","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-fields":"^1.1.0","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.2"},"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-grid_1.2.0_1762014777480_0.2521403248595129","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@arcwp/gateway-grid","version":"1.2.1","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","_id":"@arcwp/gateway-grid@1.2.1","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":"ac2abae944e4a3b791b9bccdc947de048529bbe0","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.2.1.tgz","fileCount":7,"integrity":"sha512-7W1QGDp9GAM7fCivkeuCNNUZwJR1BwnV8JyNy5Z1bfWGhdNCbKplMdqTcpa5OtTW6poAHHqFRQnG3v+6hnfhHQ==","signatures":[{"sig":"MEQCIC7YTVna1rIEcIz3srb1ezZGhGVMw+haecm2NIGL4/kZAiAuuVQ986NRbMa67u9JtAUsne/8ZDnPnN/6PsHznUagng==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44217},"main":"dist/index.js","module":"dist/index.js","gitHead":"23f9486109d2eedc903b08a3109d02d55ab19215","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-fields":"^1.1.0","@tanstack/react-table":"^8.20.5","@arcwp/gateway-filters":"^1.0.2"},"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-grid_1.2.1_1762015150493_0.25764384323037337","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@arcwp/gateway-grid","version":"1.2.2","description":"Gateway Grid React component library with TanStack Table","main":"dist/index.js","module":"dist/index.js","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"],"repository":{"type":"git","url":"git+https://github.com/arcwordpress/gateway-grid.git"},"bugs":{"url":"https://github.com/arcwordpress/gateway-grid/issues"},"homepage":"https://github.com/arcwordpress/gateway-grid#readme","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-fields":"^1.1.0","@arcwp/gateway-filters":"^1.0.2","@tanstack/react-table":"^8.20.5","axios":"^1.6.2"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"_id":"@arcwp/gateway-grid@1.2.2","gitHead":"23f9486109d2eedc903b08a3109d02d55ab19215","_nodeVersion":"23.5.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-mCRAvWxhewEwQH5bbyuBZ2Tej7CboVG3qZvD6/NKGqazHFpWRyQtHdG7kRweHFrIrEOuhCeXpVe2sfmgaHUBJg==","shasum":"3f46f67005c7bed8438bffa5002c579e8df4c1ff","tarball":"https://registry.npmjs.org/@arcwp/gateway-grid/-/gateway-grid-1.2.2.tgz","fileCount":7,"unpackedSize":45223,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDab0cGGmk1inpo21p9peJNNhLDFqT+wUgG1D9/PKQX6gIgPq7mk4EDa3RZG6yaMSysHGKSd/SlHyVJt1tT0IPPgIQ="}]},"_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-grid_1.2.2_1762018021440_0.1913888195336806"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-31T15:07:46.696Z","modified":"2025-11-01T17:27:02.184Z","1.1.1":"2025-10-31T15:07:46.935Z","1.1.2":"2025-11-01T13:12:00.553Z","1.1.3":"2025-11-01T13:35:44.927Z","1.1.4":"2025-11-01T13:43:45.526Z","1.1.5":"2025-11-01T13:47:56.537Z","1.2.0":"2025-11-01T16:32:57.698Z","1.2.1":"2025-11-01T16:39:10.687Z","1.2.2":"2025-11-01T17:27:01.639Z"},"bugs":{"url":"https://github.com/arcwordpress/gateway-grid/issues"},"author":{"name":"ARCWP","email":"hello@arcwp.ca"},"license":"MIT","homepage":"https://github.com/arcwordpress/gateway-grid#readme","keywords":["gateway","grid","react","wordpress","components","tanstack-table"],"repository":{"type":"git","url":"git+https://github.com/arcwordpress/gateway-grid.git"},"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"}