@orcden/od-smart-list NPM

A component to quickly define lists with headers based on a given route

<od-smart-list> is a simple component that allows the user to define list headers and a route. The list refreshes whenever the route or given data changes. Easy for tooling routes and integrating search and filtering.

Installation

Install with npm

npm i @orcden/od-smart-list

Usage

import '@orcden/od-smart-list';

<od-smart-list id='smart-list' row-id='id' route='https://example.com/route'>
    <od-smart-list-header name='field1'>Test Head 1</od-smart-list-header>
    <od-smart-list-header name='field2'>Test Head 2</od-smart-list-header>
</od-smart-list>

Attributes

OD-Smart-List

Attribute	Type	Default	Description
`route`	String	undefined	Set this to have the list automatically get data from a route
`row-id`	String	undefined	Will set each row's id to the field value indicated here.

OD-Smart-List-Header

Attribute	Type	Default	Description
`name`	String	undefined	set this value to tell which field of data to pull for each column

Properties

OD-Smart-List

Attribute	Type	Default	Description
`route`	String	undefined	Set this to have the list automatically get data from a route
`rowId`	String	undefined	will set each row's id to the field value indicated here.
`data`	Array	undefined	Can be used to get and set the data displayed in the list

Functions

OD-Smart-List

Name	Parameters	Description
`refresh`	None	Manually refreshes the list. should not need to be called under most circumsatnces
`addRowClickListener`	callback	Adds a click listener to each row. Callback parameters: event, row
`orderBy`	string fieldName, int direction	orders the list based on the given header fieldname and direction ( 1 for ascending, -1 for descending )

Styling

CSS variables are available to alter the default styling provided

OD-Smart-List

Shadow Parts	Description
list-table	The main table used for the list
header-row	The header row
header-cell	The cells in the header
data-row	The rows that hold data
data-cell	The cells that hold data
empty-label	The label that displays the empty message
`fieldName`	maps the 'name' of each header to a column of cells