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 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
`columnIndex`	`column-index`	`number`	The index of the column this control is sorting
`desc`		`HTMLInputElement`	The descending control
`direction`	`direction`	`"asc" \| "desc"`

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

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	Description
`backendSort`	`backend-sort`	`boolean`	Whether to defer sorting of rows to the backend. When true, sorting will fire a `sort-table` event instead of actually sorting the rows. Consuming apps must handle that event by fetching a newly-sorted `rows` array from the backend.
`cellLoadingTemplate`		`any`	Template to display when loading row content
`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" }]`
`loading`	`loading`	`TemplateResult`
`multi`	`multi`	`boolean`	Whether selecting multiple rows is enabled.
`renderers`	`renderers`	`any`	Custom renderer class. Used in custom columns
`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

Events

Event	Description
`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`