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 |