1.2.3 • Published 4 months ago
@forter/card-list v1.2.3
fc-card-list
An element by Forter
Usage
<script>
import '@forter/card-list';
</script>
<fc-card-list>
</fc-card-list>Properties
| Property | Attribute | Type | Description |
|---|---|---|---|
ROW_INTENTS | {} | ||
columns | columns | any[] | Columns titles |
getRowClass | (rowClass: any, intent: any) => any | ||
getSortedRows | () => any | ||
renderColumnsHeaders | () => TemplateResult | ||
renderData | (intent: any, data: any) => TemplateResult | ||
renderDataCell | ({ label, customRenderer }: { label: any; customRenderer: any; }) => any | ||
renderRows | () => TemplateResult | ||
rows | rows | any | Example: {intent: 'disabled',data: {label: '1'}, {label: '2'}} |
sortBy | sortBy | any[] | This is an option to sort rows by a specific key of the rows data.After providing this object the card-list will sort rows depending on it.columnIndex is the index of column you wish to compare. I.e. if we have following columns list ('order', 'name', 'level')and we want to order by 'order' columns, columnIndex should be 0 (as its the first column on the list).sortKey should be the key in the row's data we want to sort by. I.e. if a row's data is:data: {label: '1', value: 1}, {label: '2', value: 2}we can either sort by 'label' or by 'value'. The sortFunction should be accordingly to the key's type (number, string..) as in next example:{ columnIndex: 0, sortKey: 'value', sortFunction: (a,b) => {return a-b}} |
CSS Custom Properties
| Property | Description |
|---|---|
--fc-card-list-disabled-color | disabled color. example: gray |