{"id":19512567,"url":"https://github.com/chunkangwong/grid-query-features","last_synced_at":"2026-04-27T18:33:51.633Z","repository":{"id":200100707,"uuid":"704820053","full_name":"chunkangwong/grid-query-features","owner":"chunkangwong","description":"A React hook library for querying ArcGIS service features from MUI DataGrid v6 with server mode pagination, filtering, and sorting.","archived":false,"fork":false,"pushed_at":"2023-10-14T17:32:09.000Z","size":123,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-03T06:48:40.756Z","etag":null,"topics":["arcgis-js-api","mui-data-grid","react","react-hook","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chunkangwong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-14T07:28:46.000Z","updated_at":"2023-10-14T17:03:05.000Z","dependencies_parsed_at":"2023-10-15T18:57:29.977Z","dependency_job_id":null,"html_url":"https://github.com/chunkangwong/grid-query-features","commit_stats":null,"previous_names":["chunkangwong/usegridqueryfeatures"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chunkangwong%2Fgrid-query-features","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chunkangwong%2Fgrid-query-features/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chunkangwong%2Fgrid-query-features/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chunkangwong%2Fgrid-query-features/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chunkangwong","download_url":"https://codeload.github.com/chunkangwong/grid-query-features/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chunkangwong%2Fgrid-query-features/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259110353,"owners_count":22806696,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["arcgis-js-api","mui-data-grid","react","react-hook","typescript"],"created_at":"2024-11-10T23:26:42.453Z","updated_at":"2026-04-27T18:33:46.607Z","avatar_url":"https://github.com/chunkangwong.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grid-query-features\n\nA React hook library for querying ArcGIS service features from MUI DataGrid **v6** with server mode pagination, filtering, and sorting.\n\n## Installation\n\n```bash\nnpm install @chunkangwong/grid-query-features\n```\n\n## Basic Usage\n\n```tsx\nimport FeatureLayer from \"@arcgis/core/layers/FeatureLayer\";\nimport {\n  DataGrid,\n  GridFilterModel,\n  GridInputRowSelectionModel,\n  GridPaginationModel,\n  GridSortModel,\n} from \"@mui/x-data-grid\"; // MUI DataGrid v6 ONLY\nimport useGridQueryFeatures from \"@chunkangwong/grid-query-features\";\nimport { useState } from \"react\";\n\nconst featureLayer = new FeatureLayer({\n  url: \"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0\",\n  outFields: [\"*\"],\n});\n\nconst App = () =\u003e {\n  const [paginationModel, setPaginationModel] = useState\u003cGridPaginationModel\u003e({\n    page: 0,\n    pageSize: 10,\n  });\n  const [sortModel, setSortModel] = useState\u003cGridSortModel\u003e([]);\n  const [filterModel, setFilterModel] = useState\u003cGridFilterModel\u003e();\n  const { isLoading, featureSet, objectIds } = useGridQueryFeatures({\n    featureLayer,\n    paginationModel,\n    sortModel,\n    filterModel,\n  });\n\n  return (\n    \u003cDataGrid\n      rows={featureSet?.features.map((feature) =\u003e feature.attributes) || []}\n      rowCount={objectIds?.length || 0}\n      getRowId={(row) =\u003e row[featureLayer.objectIdField]}\n      pagination\n      paginationMode=\"server\"\n      paginationModel={paginationModel}\n      onPaginationModelChange={(newPaginationModel) =\u003e\n        setPaginationModel(newPaginationModel)\n      }\n      sortingMode=\"server\"\n      sortModel={sortModel}\n      onSortModelChange={(newSortModel) =\u003e setSortModel(newSortModel)}\n      filterMode=\"server\"\n      filterModel={filterModel}\n      onFilterModelChange={(newFilterModel) =\u003e setFilterModel(newFilterModel)}\n      loading={isLoading}\n      columns={[\n        {\n          field: \"FID\",\n          headerName: \"FID\",\n          type: \"number\",\n          width: 150,\n        },\n        {\n          field: \"Tree_ID\",\n          headerName: \"Tree_ID\",\n          type: \"number\",\n          width: 150,\n        },\n        {\n          field: \"Status\",\n          headerName: \"Status\",\n          width: 150,\n        },\n        {\n          field: \"Collected\",\n          headerName: \"Collected\",\n          width: 300,\n          type: \"date\",\n          valueFormatter: ({ value }) =\u003e {\n            return new Date(value).toLocaleDateString();\n          },\n        },\n      ]}\n    /\u003e\n  );\n};\n```\n\n## API\n\n```ts\nconst { featureSet, objectIds, error, isLoading, refetch } =\n  useGridQueryFeatures({\n    featureLayer,\n    paginationModel,\n    sortModel,\n    filterModel,\n  });\n```\n\n### Parameters\n\nQuery will be triggered when any of the following parameters change.\n\n- `featureLayer:` [`FeatureLayer`](https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html)\n\n  - **Required**\n  - The feature layer to query features from.\n\n- `paginationModel:` [`GridPaginationModel`](https://mui.com/x/api/data-grid/data-grid/#DataGrid-prop-paginationModel)\n\n  - **Required**\n  - The pagination model from MUI DataGrid. It will be converted to a `start` and `num` query props and passed to the feature layer query.\n\n- `sortModel:` [`GridSortModel`](https://mui.com/x/api/data-grid/data-grid/#DataGrid-prop-sortModel)\n\n  - **Required**\n  - The sort model from MUI DataGrid. It will be converted to a `orderByFields` query prop and passed to the feature layer query.\n\n- `filterModel:` [`GridFilterModel`](https://mui.com/x/api/data-grid/data-grid/#DataGrid-prop-filterModel)\n\n  - Optional\n  - The filter model from MUI DataGrid. It will be converted to a SQL where clause and passed to the feature layer query.\n  - If not provided, `\"1=1\"` will be used as the where clause to query all features.\n  - _Note: For now, Quick Filter is not covered._\n\n### Returns\n\n- `featureSet: FeatureSet | null`\n\n  - Default to `null`.\n  - The feature set returned from the feature layer query.\n\n- `objectIds: number[] | null`\n\n  - Default to `null`.\n  - The object ids returned from the feature layer query. It is used to calculate the total row count for the MUI DataGrid.\n\n- `error: unknown`\n\n  - The error returned from the feature layer query.\n\n- `isLoading: boolean`\n\n  - Default to `false`.\n  - Whether the feature layer query is loading.\n\n- `refetch: () =\u003e Promise\u003c{ objectIds: number[]; featureSet: FeatureSet } | undefined\u003e`\n\n  - A function to refetch the feature layer query with the current pagination, sorting, and filtering models. It returns object ids and feature set if the query is successful, otherwise `undefined`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchunkangwong%2Fgrid-query-features","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchunkangwong%2Fgrid-query-features","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchunkangwong%2Fgrid-query-features/lists"}