# SimpleList

## Props
| Name              | Type                                                       | Default       | Required | Description                                                                                                                                                                                                                                                                                                          |
| ----------------- | ---------------------------------------------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name              | string                                                     |               | true     | string that is used as a reference to connect to store `ConnectedSimpleList`<br>of respective project it is  being used in                                                                                                                                                                                           |
| baseClass         | string                                                     | 'simple-list' | false    | css class for root of div of component                                                                                                                                                                                                                                                                               |
| headings          | Array&lt;HeadingType&gt;                                   |               | true     | Headers for list, has following prop shape:<br>--<br>`name`: string (name of Header), [required]<br>`sortable`: boolean (if true, `sort button` is rendered, [required]<br>on click of that button, columns in that column are reordered `[asc, desc]` ),<br>`text: string`, (text that appears in header)[required] |
| addFilter         | Function                                                   | undefined     | false    | returns some JSX to render an additional filter                                                                                                                                                                                                                                                                      |
| bgcAlt            | boolean                                                    | false         | false    | if true, appends `baseClass` with `--bgc-alt`                                                                                                                                                                                                                                                                        |
| clickAct          | Function                                                   | null          | false    | Callback function that is trigger clicking on a row                                                                                                                                                                                                                                                                  |
| filterOpts        | Array&lt;{<br>  text: string,<br>  value: string,<br>}&gt; | []            | false    | Array of object that are mapped to create filter options in the `<FilterComponent />`.<br>Value is placed in `predefined` prop of `<FilterComponent />`<br>When clicking on the `Filter Component` they are appear for selection<br>Clicking on a `Filter Option` will append the value to the search bar            |
| tableTitle        | string                                                     | ''            | false    | String of `SimpleList` table                                                                                                                                                                                                                                                                                         |
| sections          | boolean                                                    | false         | false    | If true `<Sections />` component will be rendered and if false `<Body />`<br> component will be rendered                                                                                                                                                                                                             |
| sectionTarget     | string                                                     | ''            | false    | This is to be used alongside the `sections` prop, it is used to isolate the<br>data for the current inner list, therefore it will be the key of sections<br>where sections is in the shape: `{ string: Array }`                                                                                                      |
| sectionTitleKeys  | string&#91;&#93;                                           | []            | false    | Array of string which are the titles which match the isolated data for<br>the current inner list obtained from `sections`<br>props and `sectionTarget` prop                                                                                                                                                          |
| enableSearch      | boolean                                                    | true          | false    | If true `Filter Component` renders                                                                                                                                                                                                                                                                                   |
| showDatepicker    | boolean                                                    | false         | false    | Passed into `addDatePicker`prop `<FilterComponent />`.<br>If true `DatePicker` renders in  `<FilterComponent />`                                                                                                                                                                                                     |
| children          | any                                                        | false         | false    | If maps out logic that this component has wrapped. Mapping out children                                                                                                                                                                                                                                              |
| allowClick        | boolean                                                    | true          | false    | bool added to context so it can be used by an component wrapped in the provider                                                                                                                                                                                                                                      |
| initialSearch     | string                                                     | ''            | false    | Add initial value to input of `<FilterComponent>` passed into prop `initialText`                                                                                                                                                                                                                                     |
| groupSelection    | Object&#91;&#93;                                           | null          | false    | options for SimpleSelect in `<FilterComponent>` passed into prop `groupSelection`                                                                                                                                                                                                                                    |
| searchValue       | string                                                     | ''            | false    | value of input `<FilterComponent>`                                                                                                                                                                                                                                                                                   |
| filterTitle       | string                                                     | ''            | false    | String acting as Title displayed on top of input for `<FilterComponent>`                                                                                                                                                                                                                                             |
| noPointer         | boolean                                                    | false         | false    | If true appends `--no-pointer` to `baseClass` in root div of this component                                                                                                                                                                                                                                          |
| HeaderComponent   | any                                                        | Header        | false    | jsx to act as `HeaderComponent` right above `<BodyComponent>/<SectionComponent>`                                                                                                                                                                                                                                     |
| FilterComponent   | any                                                        | Filter        | false    | can either be a custom filter component or if not the default `<Filter />`                                                                                                                                                                                                                                           |
| BodyComponent     | any                                                        | Body          | false    | renders `<Body>` by default                                                                                                                                                                                                                                                                                          |
| SectionsComponent | any                                                        | Sections      | false    | renders `<Sections>` by default                                                                                                                                                                                                                                                                                      |
| updateQuery       | Function                                                   |               | true     |                                                                                                                                                                                                                                                                                                                      |
