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.

Usage

<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

<!-- 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 |