@chunkangwong/grid-query-features
v0.0.14
Published
A React hook library for querying ArcGIS service features from MUI DataGrid v6 with server mode pagination, filtering, and sorting.
Downloads
2
Readme
grid-query-features
A React hook library for querying ArcGIS service features from MUI DataGrid v6 with server mode pagination, filtering, and sorting.
Installation
npm install @chunkangwong/grid-query-features
Basic Usage
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import {
DataGrid,
GridFilterModel,
GridInputRowSelectionModel,
GridPaginationModel,
GridSortModel,
} from "@mui/x-data-grid"; // MUI DataGrid v6 ONLY
import useGridQueryFeatures from "@chunkangwong/grid-query-features";
import { useState } from "react";
const featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
outFields: ["*"],
});
const App = () => {
const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
page: 0,
pageSize: 10,
});
const [sortModel, setSortModel] = useState<GridSortModel>([]);
const [filterModel, setFilterModel] = useState<GridFilterModel>();
const { isLoading, featureSet, objectIds } = useGridQueryFeatures({
featureLayer,
paginationModel,
sortModel,
filterModel,
});
return (
<DataGrid
rows={featureSet?.features.map((feature) => feature.attributes) || []}
rowCount={objectIds?.length || 0}
getRowId={(row) => row[featureLayer.objectIdField]}
pagination
paginationMode="server"
paginationModel={paginationModel}
onPaginationModelChange={(newPaginationModel) =>
setPaginationModel(newPaginationModel)
}
sortingMode="server"
sortModel={sortModel}
onSortModelChange={(newSortModel) => setSortModel(newSortModel)}
filterMode="server"
filterModel={filterModel}
onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
loading={isLoading}
columns={[
{
field: "FID",
headerName: "FID",
type: "number",
width: 150,
},
{
field: "Tree_ID",
headerName: "Tree_ID",
type: "number",
width: 150,
},
{
field: "Status",
headerName: "Status",
width: 150,
},
{
field: "Collected",
headerName: "Collected",
width: 300,
type: "date",
valueFormatter: ({ value }) => {
return new Date(value).toLocaleDateString();
},
},
]}
/>
);
};
API
const { featureSet, objectIds, error, isLoading, refetch } =
useGridQueryFeatures({
featureLayer,
paginationModel,
sortModel,
filterModel,
});
Parameters
Query will be triggered when any of the following parameters change.
featureLayer:
FeatureLayer
- Required
- The feature layer to query features from.
paginationModel:
GridPaginationModel
- Required
- The pagination model from MUI DataGrid. It will be converted to a
start
andnum
query props and passed to the feature layer query.
sortModel:
GridSortModel
- Required
- The sort model from MUI DataGrid. It will be converted to a
orderByFields
query prop and passed to the feature layer query.
filterModel:
GridFilterModel
- Optional
- The filter model from MUI DataGrid. It will be converted to a SQL where clause and passed to the feature layer query.
- If not provided,
"1=1"
will be used as the where clause to query all features. - Note: For now, Quick Filter is not covered.
Returns
featureSet: FeatureSet | null
- Default to
null
. - The feature set returned from the feature layer query.
- Default to
objectIds: number[] | null
- Default to
null
. - The object ids returned from the feature layer query. It is used to calculate the total row count for the MUI DataGrid.
- Default to
error: unknown
- The error returned from the feature layer query.
isLoading: boolean
- Default to
false
. - Whether the feature layer query is loading.
- Default to
refetch: () => Promise<{ objectIds: number[]; featureSet: FeatureSet } | undefined>
- 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
.
- 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