Table Search & Sort

This component transforms any table into sortable and/or searchable element.

Users can use properties that define sort & search functionality, define own column names (in case table does not have thead part). 

Examples (1)
Example Code
Property IDOwnerAddress
P001John Smith12 Oak St
P002Mary Johnson45 Maple Ave
P003James Lee78 Pine Rd
P004Linda Brown34 Cedar St
P005Michael Davis89 Elm St
P006Patricia Wilson23 Birch Ln
P007Robert Miller56 Willow Dr
P008Jennifer Taylor101 Cherry Blvd
P009William Moore67 Poplar Ct
P010Elizabeth Anderson22 Spruce Way
 <as-table-sort sort filter columns="PropID,Tenant,Street" omit="2">[table HTML Element]</as-table-sort>
Properties (4)
Property name Description Type
sort Optional: If present sorting functionality is enabled. string
filter Optional: If present filtering functionality is enabled. string
columns Optional: Coma separated list of column names to replace existing table <THEAD> cell labels, in the order written. If there are no <THEAD> on the table this parameter must be provided. string
omit Optional: Coma separated list of column indexes to be omitted when enabling sorting & filtering functionality. Starts from 0 string
Events (6)
Event name Description Example value
as-table-sort:created Fired when component is created. Has detail object. {id: "ba6fdbe1-f6c0-4af9-baef-af9aa4fa6a5c", action: "created"}
as-table-sort:created Fired when component detects that there's no table to work with within component. Has detail object. {id: "ba6fdbe1-f6c0-4af9-baef-af9aa4fa6a5c", action: "not-created"}
as-table-sort:sorted Fired when any of the columns is being sorted. Has detail object. {id: "ba6fdbe1-f6c0-4af9-baef-af9aa4fa6a5c", action: "sorted", column: "PropID", direction: "desc"}
as-table-sort:sorted Fired when sorting is being reset to default. Has detail object. {id: "ba6fdbe1-f6c0-4af9-baef-af9aa4fa6a5c", action: "delete"}
as-table-sort:filtered Fired when any of the columns is being filtered. Has detail object. {id: "ba6fdbe1-f6c0-4af9-baef-af9aa4fa6a5c", action: "filtered", column: "PropID", searchword: "p00"}
as-table-sort:filtered Fired when filters are being set to default. Has detail object. {id: "ba6fdbe1-f6c0-4af9-baef-af9aa4fa6a5c", action: "delete"}
Files