Skip to content

Support UI for sorting & filtering items on a page (client-side) #8368

@ericlindley-g

Description

@ericlindley-g

Initial proposal to use tables:
Broadly support filterable tables that internally can be filtered
Expose a method to communicate with the table to trigger filtering (which can be used by bare components or in conjunction with Bind) — (also should expose a method for sorting in similar fashion)

  • Is used to filter by regex
  • Should accept simple boolean (“-” for exclude, quotes for exact match, parentheses for grouping, AND, OR — can look into best practices here to refine what's needed)
    (V1 can be simple regex)
  • Should respect sorting
  • Table larger than width of screen should scroll left-right (put inside amp-carousel[layout=”container”]?
  • Should have ability to sort or filter by default (on first load)
  • Each column can be filtered (needs more detail in UX, if this means there's an affordance on each item by default, a text input by default, options for filtering on multiple tables, etc)

attributes for filtering:

  • can pick either column number (1-indexed) or text of first item in column: filter_column=”1” OR filter_column=”Breed”
    filter_criteria=”greyhound or pekinese”

attributes for sorting:

  • sort_column=”1” OR sort_column=”Animal”
    sort_order=”ascending”

  • Each column has affordance to sort (click once to sort ascending, click again once sorted to toggle other sort)

/cc @aghassemi @camelburrito (since this may connect with sortable tables work — might make sense to combine into single amp-table component)

ref: #6057

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions