# ItemGrid

The ItemGrid component can be used to display items in a user's ArcGIS account. It can be used in combination with the ItemFilter to filter items by type, date modified, date created, and by folder.

A basic implementation requires props returned from the `useItemBrowserState()` React hook as well as an [ArcGIS userSession](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/):

```js
import { UserSession } from "@esri/arcgis-rest-auth";

const App = () => {
  /* useItemBrowserState manages ItemBrowser state using useReducer.  
  Returns queryResults from interacting with filters, 
  as well as functions to manage query updates 
  and interactions with ItemGrid */

  const {
    queryResults,
    searchTermProps,
    ...itemBrowserProps
  } = useItemBrowserState(userSession);

  /* User can construct their own customTitleRenderer.
  Overrides how each item's title is displayed,
  and how the title responds to user interaction. 
  Must be a function that accepts (title, item) as arguments */

  // Example implementation of a custom title click handler
  const customTitleRenderer = (title, item) => {
    return <CalciteA onClick={() => someFunction(item.id)}>{title}</CalciteA>;
  };

  return (
    <StyledApp>
      <StyledItemFilterWrapper>
        <ItemFilter userSession={userSession} {...itemBrowserProps} />
        <ItemGridWrapper>
          <input
            name={"folder-search"}
            placeholder="Filter items..."
            type="search"
            /* User can use any type of text input of choice.  
            It is necessary to spread the searchTermProps 
            into the search field component. 
            The searchTermProps is an object consisting 
            of the following properties:

              const searchTermProps = {
                value: string,
                onChange: () => {},
                onRequestClear: () => {},
              };
             */
            {...searchTermProps}
          />
          <ItemGrid
            queryResults={queryResults}
            onItemClicked={(item) => console.log(item)}
            userSession={userSession}
            customTitleRenderer={customTitleRenderer}
            {...itemBrowserProps}
          />
        </ItemGridWrapper>
      </StyledItemFilterWrapper>
    </StyledApp>
  );
};
```

<!-- Auto Generated Below -->

## Properties

| Property            | Description                                                                                                        | Type                                                                                | Default    | Required |
| ------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------- | ---------- | -------- | ---- |
| `itemBrowserState`  | Object containing ItemFilter state. Returned by useItemBrowserState() React hook                                   | `object`                                                                            | N/A        | True     |
| `handleQueryChange` | Function that is called upon updating query                                                                        | `function`                                                                          | N/A        | True     |
| `userSession`       | ArcGIS UserSession                                                                                                 | [`ArcGIS UserSession`](https://esri.github.io/arcgis-rest-js/api/auth/UserSession/) | N/A        | True     |
| `queryResults`      | [Array of objects containing query results ](https://esri.github.io/arcgis-rest-js/api/portal/SearchQueryBuilder/) | `object`                                                                            | N/A        | True     |
| `getUserFolders`    | Func for getting ArcGIS folders for active user                                                                    | `function`                                                                          | N/A        | True     |
| `actions`           | Array of objects specifying icons and functions to be invoked upon specified user interactions.                    | `array<Action (see below)>`                                                         | N/A        | False    |
| `singleItemActions` | Array of objects specifying icons and functions to be invoked upon specified user interactions.                    | `array<Action (see below)>`                                                         | N/A        | False    |
| `sortField`         | Field specifying which ItemGrid column to sort by                                                                 | `string`                                                                            | `modified` | True     |
| `sortOrder`         | Direction indicating whether to sort ItemGrid columns in ascending or descending order                            | `"desc"                                                                             | "asc"`     | `asc`    | True |

## Action and MultiSelectAction Types

```json
{
  icon: <React Component>,
  label: <string>,
  onClick: <function>,
  id: <string>,
}
```