@forter/card-list

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