Napoleonic Political Magnificence

    @forter/table

    2.35.8 • Public • Published

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

    Install

    npm i @forter/table

    DownloadsWeekly Downloads

    13

    Version

    2.35.8

    License

    Apache-2.0

    Unpacked Size

    533 kB

    Total Files

    99

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart