# <DisplayItems /> Component

## Description

A module for displaying and filtering data with tools for hooking actions into the resulting records

## Checklist

This component should...

- -- Actions --
- Should perform filter on local data if onChange prop does not return false
- Should display total pages in pagination set based on the rowsPerPage property in the paginationSettings prop
- Should start record list on the designated page as specified by the 'page' property in the paginationSettings prop
- -- Rendering --
- Should render component in the dom
- Should render the same number of records as the amount of items found in the data prop
- Should render a custom row card in the dom (instead of the default) when one is specified in dataItemComponent prop
- Should render the default filter component in dom
- Should render a custom filter component in dom when specified in filterComponent prop
- Should not render any filter components when showFilterControls prop is false
- Should render alphabet strip in dom when specified
- Should render default bulk selected action component in dom when buttons are selected
- Should render a custom bulk selected action component in dom when one is provided in the bulkActionsComponent prop
- Should not render any bulk action components when showBulkActions prop is false
- Should render a list of saved filter tags if the showTags prop is true and there is data in the tags prop
- Should not render any header components when showHeaders prop is false
- Should not render any sort icons when enableSorting prop is false
- Should not render any checkboxes (in cards or table) when the showCheckboxes prop is false
- Should not render any pagination controls when showPagination prop is false
- Should render the AlphabetFilter component when showAlphabetFilter prop is true
- Should render the loading component found in the loadingComponent prop in the dom if the loading prop is true
- Should render a default loading image if loading prop is true and no loadingComponent is provided
- -- Props --
- Should show a list of cards if type prop is CARD
- Should show a table if type prop is TABLE
- Should show a list of columns in the table that match the columns provided in the components prop
- Should render the text in title prop as an h2
- Should show a menu of items when bulk action button is clicked that matches the items found in the bulkActions object provided in the props
- Should show a menu of items when the 'actions' button on each row/record is clicked that matches items found in the dataItemActions prop
- -- Events --
- Should trigger onCreate() with appropriate payload when a new record is to be created
- Should trigger onUpdate() with appropriate payload when an existing record is updated
- Should trigger onDelete() with appropriate payload when the delete option on a record is selected
- Should trigger onFilterSave() when the current filter is to be saved
- Should trigger onSelect() when an individual record is selected (e.g. clicked)
- Should trigger onRowActionSelect() when one of the row action items are selected
- Should trigger onFilterChange() when the filter is to be changed
- Should trigger onSort() when a sort is supposed to happen
- Should trigger onExport() when an export is supposed to happen
- Should trigger onImport() when an import is supposed to happen
- Should trigger onBulkActionSelect(action) when one of the bulk actions are selected
- Should trigger onPaginationChange() when the page is supposed to change
- -- Methods --
- Should trigger goToPage() method when page change occurs
- Should trigger setRowsPerPage() method when pagination rows per page option changes
- Should trigger exportData() method when csv download/export option is selected
- Should select all visible items when selectAll(visible) method is triggered
- Should select all items that match the existing filter when selectAll(filter) method is triggered

## Usage

To install it...

> npm install @sandcastle/components

Add it to your project...

```
import * as React from 'react'
import * as DisplayItems from '@sandcastle/components/DisplayItems`

export default () => (
  <DisplayItems
    name=""
    type={0}
    data=""
    columns=""
    loading=""
    loadingComponent={<div />}
    title=""
    bulkActions=""
    bulkActionsComponent={<div />}
    showbulkActions=""
    dataItemActions=""
    dataItemComponent={<div />}
    showCheckboxes=""
    filterComponent={<div />}
    showFilterControls=""
    showAlphabetFilter=""
    emptyStateComponent={<div />}
    tags=""
    showTags=""
    showHeaders=""
    showPagination=""
    paginationSettings=""
    enableSorting=""
    onCreate=""
    onUpdate=""
    onDelete=""
    onSelect=""
    onSelectAll=""
    onRowActionSelect=""
    onFilterChange=""
    onFilterSave=""
    onSort=""
    onExport=""
    onImport=""
    onBulkActionSelect=""
    onPaginationChange=""
  />
)
```

## Best Practices

To do: Add any Best Practices here

## Lifecycle Hooks

To do: Add any Lifecycle Hooks here

## Related Components

To do: Add any Related Components here