@forter/table v3.2.3

fc-sort-control

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

Properties

Events

fc-sort-control

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

Properties

Events

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

Events

CSS Custom Properties