@orcden/od-smart-list

2.1.0 • Public • Published

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

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Run tests

npm run test

Build for production

npm run build

Dependencies (2)

Dev Dependencies (19)

Package Sidebar

Install

npm i @orcden/od-smart-list

Weekly Downloads

0

Version

2.1.0

License

MIT

Unpacked Size

21.5 kB

Total Files

3

Last publish

Collaborators

  • iliptikal
  • mackw1990