# ItemTable

The ItemTable 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 ItemTable */

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

  return (
    <StyledApp>
      <StyledItemFilterWrapper>
        <ItemFilter userSession={userSession} {...itemBrowserProps} />
        <ItemTableWrapper>
          <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}
          />
          <ItemTable
            queryResults={queryResults}
            onItemClicked={(item) => console.log(item)}
            userSession={userSession}
            {...itemBrowserProps}
          />
        </ItemTableWrapper>
      </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 ItemTable column to sort by                                                                 | `string`                                                                            | `modified` | True     |
| `sortOrder`         | Direction indicating whether to sort ItemTable columns in ascending or descending order                            | `"desc"                                                                             | "asc"`     | `asc`    | True |

## Action and MultiSelectAction Types

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