pwc-filter live example

by starikcetin

HTML

<head>
  <script type="module" src="https://unpkg.com/@paraboly/pwc-filter@latest/dist/pwc-filter/pwc-filter.esm.js"></script>
  <script nomodule src="https://unpkg.com/@paraboly/pwc-filter@latest/dist/pwc-filter/pwc-filter.js"></script>
</head>

<body>
  <pwc-filter>
    <pwc-dynamic-form>
      <pwc-dynamic-form-content> </pwc-dynamic-form-content>
    </pwc-dynamic-form>
  </pwc-filter>

  <hr />

  <input type="button" id="filter-to-console" value="Filter to console" />
</body>

JavaScript

// An arbitrary dataset to test the filter.
// It has no significance on its own.
const data = [{
    index: 1,
    foo: 41,
    bar: 19.8397,
    baz: "Kristine",
    thud: "Matthews",
    quax: "Randy Zimmerman",
    grunt: "[email protected]",
    bazola: true
  },
  {
    index: 2,
    foo: 18,
    bar: 19.4668,
    baz: "Sheryl",
    thud: "Somebody",
    quax: "Martin Summers",
    grunt: "[email protected]",
    bazola: false
  },
  {
    index: 3,
    foo: 26,
    bar: 15.868,
    baz: "Charlene",
    thud: "Henry",
    quax: "Faye Coble",
    grunt: "[email protected]",
    bazola: false
  },
  {
    index: 4,
    foo: 35,
    bar: 16.9081,
    baz: "Brooke",
    thud: "Cross",
    quax: "Jill Dawson",
    grunt: "[email protected]",
    bazola: true
  },
  {
    index: 5,
    foo: 15,
    bar: 16.0845,
    baz: "Cathy",
    thud: "Tyson",
    quax: "Sherri Teague",
    grunt: "[email protected]",
    bazola: false
  },
  {
    index: 6,
    foo: 18,
    bar: 16.3167,
    baz: "Doris",
    thud: "Kennedy",
    quax: "Pauline Curry",
    grunt: "[email protected]",
    bazola: false
  },
  {
    index: 7,
    foo: 46,
    bar: 10.5112,
    baz: "Joann",
    thud: "Blackwell",
    quax: "Shannon Foster",
    grunt: "[email protected]",
    bazola: false
  },
  {
    index: 8,
    foo: 10,
    bar: 12.8977,
    baz: "Amanda",
    thud: "Houston",
    quax: "Oscar Cannon",
    grunt: "[email protected]",
    bazola: true
  },
  {
    index: 9,
    foo: 40,
    bar: 13.304,
    baz: "Colleen",
    thud: "Gross",
    quax: "Theodore May",
    grunt: "[email protected]",
    bazola: false
  },
  {
    index: 10,
    foo: 38,
    bar: 11.7118,
    baz: "Rita",
    thud: "Bailey",
    quax: "Christopher Baldwin",
    grunt: "[email protected]",
    bazola: true
  }
];

document.addEventListener("DOMContentLoaded", function() {
  const pwcFilter = document.querySelector("pwc-filter");
  const pwcDynamicFormContent = pwcFilter.querySelector(
    "pwc-dynamic-form-content"
  );

 ...