# fc-sort-control

Provides a box with a search input and a scrollable div
with checkboxes derived from the given objects

## Properties

| Property     | Attribute    | Type     | Default | Description                    |
|--------------|--------------|----------|---------|--------------------------------|
| `objects`    | `objects`    | `any[]`  |         | The objects to display         |
| `searchText` | `searchText` | `string` | ""      | The text inside the search box |

## Events

| Event    |
|----------|
| `change` |
| `sort`   |


# fc-sort-control

Provides a binary "Ascending/Descending"  control for sortable tables.

## Properties

| Property               | Attribute                | Type                        | Default | Description                                      |
|------------------------|--------------------------|-----------------------------|---------|--------------------------------------------------|
| `asc`                  |                          | `HTMLInputElement`          |         | The ascending control                            |
| `checked`              |                          | `HTMLInputElement`          |         | The control for the selected direction           |
| `desc`                 |                          | `HTMLInputElement`          |         | The descending control                           |
| `direction`            | `direction`              | `"asc" \| "desc" \| "none"` |         | The current sort direction                       |
| `level`                | `level`                  | `number`                    |         | The sort level that will be displayed in a label |
| `preventSecondarySort` | `prevent-secondary-sort` | `boolean`                   | false   | Whether or not multiple column sort is enabled. example: `true` |

## Events

| Event  |
|--------|
| `sort` |


# fc-table

A table accepting rows and columns. Rows represent actual data, columns describe the data types in the table.
<!-- Author: Ori Weingart <oriweingart@forter.com> -->

## Usage

```html
<script>
   import '@forter/table';
</script>

<fc-table
      multi
      row-actions
      columns-draggable
      columns-removable
      columns=[{"insertable":true,"label":"First Name","fromKey":"firstName","pinned":true,"removable":false,"sortable":true,"sort":"asc","sortLevel":1,"type":"TEXT","filterable":true,"defaultVisibility":false,"defaultIndex":2,"filter":{"operator":"Matches","searchValues":["lala","abcdefghijklmnopqrstuvwxyz"]}},{"insertable":true,"editable":true,"required":true,"label":"Last Name","fromKey":"lastName","type":"TEXT","sort":"desc","sortLevel":2,"sortable":true,"defaultVisibility":true,"filterable":true,"filter":{"values":[{"label":"Yosef","checked":false,"color":"blue"},{"label":"Anati","checked":false,"color":"green"},{"label":"Weingart","checked":false,"color":"purple"},{"label":"Feder","checked":false,"color":"blue"}]}},{"label":"Payment Method","fromKey":"paymentMethod","type":"CUSTOM","renderer":"moneyRenderer","sortable":true,"defaultIndex":4,"visible":true,"filterable":true,"filter":{"values":[{"label":"PayPal","checked":true},{"label":"Amex","checked":false},{"label":"MasterCard","checked":false},{"label":"Visa","checked":true},{"label":"Bank Transfer","checked":true},{"label":"ApplePay","checked":true},{"label":"Google Pay","checked":false},{"label":"Android Pay","checked":false},{"label":"Amazon Pay","checked":false}],"valuesRenderer":"baba"}},{"label":"Text Column","fromKey":"textData","type":"TEXT","defaultIndex":3,"sortable":true,"visible":false,"filterable":true,"defaultVisibility":true},{"insertable":true,"multipleEditable":true,"editable":true,"required":true,"maskType":"number","label":"Order Amount","fromKey":"orderAmount","type":"TEXT","custom":"moneyRenderer","visible":true,"filterable":true,"defaultVisibility":true,"filter":{"type":"NUMBER","operator":"Greater Than","searchValues":["1"]}},{"maskType":"date","mask":"DD MMM YYYY HH:mm","required":true,"insertable":true,"editable":true,"label":"Date Column","fromKey":"dateData","type":"DATE","defaultVisibility":false},{"label":"Icon Column","fromKey":"iconData","type":"ICON","visible":true,"defaultIndex":5,"sortable":true,"filterable":true,"defaultVisibility":true}]
      rows=[{"firstName":false,"selected":true,"lastName":"Yosef","orderAmount":"12","rowActions":["claims","feedback"],"dateData":1557834321099,"paymentMethod":"Amex","iconData":{"icon":"copy"}},{"firstName":true,"selected":false,"lastName":"Anati","orderAmount":"132.5","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Paypal","rowActions":["claims","feedback"]},{"firstName":"Ori","lastName":"Weingart","orderAmount":"17","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Visa","rowActions":["claims","feedback"]},{"firstName":"Gilad","lastName":"Feder","orderAmount":"987.6","dateData":1557834321099,"iconData":{"icon":"copy"},"paymentMethod":"MasterCard"},{"firstName":false,"lastName":"Yosef","orderAmount":"12","dateData":1557834321099,"paymentMethod":"Amex","iconData":{"icon":"copy"}},{"firstName":true,"lastName":"Anati","orderAmount":"132.5","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Paypal","rowActions":["claims","feedback"]},{"firstName":"Ori","lastName":"Weingart","orderAmount":"17","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Visa","rowActions":["claims","feedback"]},{"firstName":"Gilad","lastName":"Feder","orderAmount":"987.6","dateData":1557834321099,"iconData":{"icon":"copy"},"paymentMethod":"MasterCard"},{"firstName":false,"lastName":"Yosef","orderAmount":"12","dateData":1557834321099,"paymentMethod":"Amex","iconData":{"icon":"copy"}},{"firstName":true,"lastName":"Anati","orderAmount":"132.5","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Paypal","rowActions":["claims","feedback"]}]>
      <div slot="footer"><fc-button>Export</fc-button></div>
</fc-table>
```

## Examples

```html
<!-- empty -->
<fc-table></fc-table>

<!-- simpleTable -->
<fc-table
      columns=[{"label":"Text_Column","fromKey":"textData","type":"TEXT"},{"label":"Date_Column","fromKey":"dateData","type":"DATE"},{"label":"Icon_Column","fromKey":"iconData","type":"ICON"}]
      rows=[{"textData":"Some_Long_Text_Data","dateData":1557834321063,"iconData":{"icon":"edit"}},{"textData":"more_data","dateData":1557834321099,"iconData":{"icon":"copy"}}]>
</fc-table>

<!-- noRows -->
<fc-table
      columns=[{"label":"Text_Column","fromKey":"textData","type":"TEXT"},{"label":"Date_Column","fromKey":"dateData","type":"DATE"},{"label":"Icon_Column","fromKey":"iconData","type":"ICON"}]>
</fc-table>

<!-- row color -->
<fc-table
      multi
      row-actions
      columns-draggable
      columns-removable
      columns=[{"label":"First Name","fromKey":"firstName","pinned":true,"removable":false,"sortable":true,"sort":"asc","sortLevel":1,"type":"TEXT","filterable":true,"defaultVisibility":false,"defaultIndex":2,"filter":{"operator":"Matches","searchValues":["lala","abcdefghijklmnopqrstuvwxyz"]}},{"label":"Last Name","fromKey":"lastName","type":"TEXT","sort":"desc","sortLevel":2,"sortable":true,"defaultVisibility":true,"filterable":true,"filter":{"values":[{"label":"Yosef","checked":false,"color":"blue"},{"label":"Anati","checked":false,"color":"green"},{"label":"Weingart","checked":false,"color":"purple"},{"label":"Feder","checked":false,"color":"blue"}]}},{"label":"Payment Method","fromKey":"paymentMethod","type":"CUSTOM","renderer":"moneyRenderer","sortable":true,"defaultIndex":4,"visible":true,"filterable":true,"filter":{"values":[{"label":"PayPal","checked":true},{"label":"Amex","checked":false},{"label":"MasterCard","checked":false},{"label":"Visa","checked":true},{"label":"Bank Transfer","checked":true},{"label":"ApplePay","checked":true},{"label":"Google Pay","checked":false},{"label":"Android Pay","checked":false},{"label":"Amazon Pay","checked":false}],"valuesRenderer":"baba"}},{"label":"Text Column","fromKey":"textData","type":"TEXT","defaultIndex":3,"sortable":true,"visible":false,"filterable":true,"defaultVisibility":true},{"label":"Order Amount","fromKey":"orderAmount","type":"TEXT","custom":"moneyRenderer","visible":true,"filterable":true,"defaultVisibility":true,"filter":{"type":"NUMBER","operator":"Greater Than","searchValues":["1"]}},{"label":"Date Column","fromKey":"dateData","type":"DATE","defaultVisibility":false},{"label":"Icon Column","fromKey":"iconData","type":"ICON","visible":true,"defaultIndex":5,"sortable":true,"filterable":true,"defaultVisibility":true}]
      rows=[{"firstName":false,"color":"#cde5f3","selected":true,"lastName":"Yosef","orderAmount":"12","rowActions":["claims","feedback"],"dateData":1557834321099,"paymentMethod":"Amex","iconData":{"icon":"copy"}},{"firstName":true,"selected":false,"lastName":"Anati","orderAmount":"132.5","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Paypal","rowActions":["claims","feedback"]},{"firstName":"Ori","lastName":"Weingart","orderAmount":"17","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Visa","rowActions":["claims","feedback"]},{"firstName":"Gilad","lastName":"Feder","orderAmount":"987.6","dateData":1557834321099,"iconData":{"icon":"copy"},"paymentMethod":"MasterCard"},{"firstName":false,"lastName":"Yosef","orderAmount":"12","dateData":1557834321099,"paymentMethod":"Amex","iconData":{"icon":"copy"}},{"firstName":true,"lastName":"Anati","orderAmount":"132.5","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Paypal","rowActions":["claims","feedback"]},{"firstName":"Ori","lastName":"Weingart","orderAmount":"17","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Visa","rowActions":["claims","feedback"]},{"firstName":"Gilad","lastName":"Feder","orderAmount":"987.6","dateData":1557834321099,"iconData":{"icon":"copy"},"paymentMethod":"MasterCard"},{"firstName":false,"lastName":"Yosef","orderAmount":"12","dateData":1557834321099,"paymentMethod":"Amex","iconData":{"icon":"copy"}},{"firstName":true,"lastName":"Anati","orderAmount":"132.5","dateData":1557834321063,"iconData":{"icon":"edit"},"paymentMethod":"Paypal","rowActions":["claims","feedback"]}]>
      <div slot="footer"><fc-button>Export</fc-button></div>
</fc-table>

<!-- loading -->
<fc-table loading
columns=[{"label":"Text_Column","fromKey":"textData","type":"TEXT"},{"label":"Date_Column","fromKey":"dateData","type":"DATE"},{"label":"Icon_Column","fromKey":"iconData","type":"ICON"}]
      rows=[{"textData":"Some_Long_Text_Data","dateData":1557834321063,"iconData":{"icon":"edit"}},{"textData":"more_data","dateData":1557834321099,"iconData":{"icon":"copy"}}]>
</fc-table>

<!-- rowSingleSelect -->
<fc-table select
columns=[{"label":"Text_Column","fromKey":"textData","type":"TEXT"},{"label":"Date_Column","fromKey":"dateData","type":"DATE"},{"label":"Icon_Column","fromKey":"iconData","type":"ICON"}]
      rows=[{"textData":"Some_Long_Text_Data","dateData":1557834321063,"iconData":{"icon":"edit"}},{"textData":"more_data","dateData":1557834321099,"iconData":{"icon":"copy"}}]>
</fc-table>

  * <!-- rowMultiSelect -->
<fc-table
    select
    multi
   columns=[{"label":"Text_Column","fromKey":"textData","type":"TEXT"},{"label":"Date_Column","fromKey":"dateData","type":"DATE"},{"label":"Icon_Column","fromKey":"iconData","type":"ICON"}]
      rows=[{"textData":"Some_Long_Text_Data","dateData":1557834321063,"iconData":{"icon":"edit"}},{"textData":"more_data","dateData":1557834321099,"iconData":{"icon":"copy"}}]>
</fc-table>
```

## Properties

| Property                  | Attribute                  | Type                                             | Default | Description                                      |
|---------------------------|----------------------------|--------------------------------------------------|---------|--------------------------------------------------|
| `checked`                 |                            | `any[]`                                          |         |                                                  |
| `columns`                 | `columns`                  | `any[]`                                          |         | Column descriptors. example: `[{ "label": "Text Column", "fromKey": "textData", "type": "TEXT" }, { "label": "Date Column", "fromKey": "dateData", "type": "DATE" },{ "label": "Icon Column", "fromKey": "iconData", "type": "ICON" }]` |
| `columnsDraggable`        | `columns-draggable`        | `boolean`                                        |         | Whether or not dragging columns is enabled       |
| `columnsRemovable`        | `columns-removable`        | `"" \| TemplateResult`                           |         |                                                  |
| `compactCells`            | `compact-cells`            | `boolean`                                        | false   | Whether or not to make the cells of the table compact (with white space wrapping). example: `true` |
| `displayNoData`           |                            | `({ loading, rows }: { loading: any; rows: any; }) => TemplateResult` |         |                                                  |
| `editable`                | `editable`                 | `boolean`                                        | false   | Whether or not to show create button for editing. example: `true` |
| `editing`                 | `editing`                  | `boolean`                                        | false   | Whether or not grid support editing of a selected row. example: `true` |
| `escapeNoLocalize`        | `escapeNoLocalize`         | `boolean`                                        | false   | Whether to translate cells                       |
| `fetching`                | `fetching`                 | `boolean`                                        |         | Whether the table is fetching new data           |
| `filterable`              |                            | `"" \| TemplateResult`                           |         |                                                  |
| `filters`                 |                            | `never[]`                                        |         |                                                  |
| `hideColumnOptions`       | `hide-column-options`      | `boolean`                                        | false   | Whether or not to display the column options button. example: `true` |
| `hideColumnSaveButtons`   | `hide-column-save-buttons` | `boolean`                                        | false   | Whether or not to display the column save buttons. example: `true` |
| `hideFooter`              | `hide-footer`              | `boolean`                                        | false   | Whether or not to show the footer. example: `true` |
| `loading`                 | `loading`                  | `"" \| TemplateResult`                           |         |                                                  |
| `multi`                   | `multi`                    | `boolean`                                        |         | Whether selecting multiple rows is enabled.      |
| `noRows`                  |                            | `string`                                         |         |                                                  |
| `preventSecondarySort`    | `prevent-secondary-sort`   | `boolean`                                        | false   | Whether or not multiple column sort is enabled. example: `true` |
| `removable`               | `removable`                | `boolean`                                        | false   | Whether or not to show delete button. example: `true` |
| `renderNoDataPlaceHolder` |                            | `({ loading, rows, totalColumnsNum }: { loading: any; rows: any; totalColumnsNum: any; }) => TemplateResult` |         |                                                  |
| `renderers`               | `renderers`                | `any`                                            |         | Custom renderer class. Used in custom columns    |
| `result`                  |                            | `TemplateResult \| null`                         |         |                                                  |
| `rowActions`              | `row-actions`              | `boolean`                                        |         | Whether or not the row actions button is enabled |
| `rowLimit`                | `row-limit`                | `number`                                         | 10      | Whether or not to show create button for editing. example: `10` |
| `rows`                    | `rows`                     | `any[]`                                          |         | Row Descriptors. example: `[{"textData": "Some Long Text Data","dateData": 1557834321063,"iconData": { "icon": "3dots" }}]`; |
| `select`                  | `select`                   | `boolean`                                        |         | Whether selecting rows is enabled.               |
| `translate`               | `translate`                | `boolean`                                        |         | Whether to translate cells                       |
| `wrap`                    | `wrap`                     | `boolean`                                        | false   | If table should fit in it's area or should have a scrollbar |
| `zebra`                   | `zebra`                    | `boolean`                                        |         | Whether or not the row table has a striped pattern on the rows |

## Events

| Event             | Description                                      |
|-------------------|--------------------------------------------------|
| `column-change`   | `{ actionType: String }`                         |
| `reset-column`    |                                                  |
| `row-action`      | `{ rowIndex: Number, actionName: String }`       |
| `row-selected`    | `{ selected: Row }`                              |
| `sort-table`      | `{ column: Number, direction: 'asc'\|'desc' }`   |
| `table-action`    | `{ columnIndex: Number, rowIndex: Number, index: Number }` |
| `table-row-click` |                                                  |

## CSS Custom Properties

| Property                         | Description          |
|----------------------------------|----------------------|
| `--fc-table-background`          | default: `white`     |
| `--fc-table-cell-padding`        | default: `15px 25px` |
| `--fc-table-header-cell-padding` | default: `10px 25px` |
| `--fc-table-min-col-width`       | default: `100px`     |
| `--fc-table-padding`             | default: `0`         |
| `--fc-table-zebra-color`         | default: `#f8f9fa`   |