@forter/table

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