Package Exports

@forter/table

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@forter/table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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=[{"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,"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"]},{"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"]}]>
</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>

<!-- 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
`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`
`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`
`loading`	`loading`	`"" \| TemplateResult`
`multi`	`multi`	`boolean`		Whether selecting multiple rows is enabled.
`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
`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 }`

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`