quick-filter-table

Quick Filter Table Documentation

Overview

The quick-filter-table allows you to easily get a searchable, filterable, sortable data table with minimal boiler plate code.

Installation

Include the library’s CSS and JavaScript files in your HTML file:

<link href="https://cdn.jsdelivr.net/gh/mshafer1/quick-filter-table@1.1.3/quick-filter-table/dist/quick-filter-table.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/mshafer1/quick-filter-table@1.1.3/quick-filter-table/dist/quick-filter-table.js"></script>

See versions list at github.com/mshafer1/quick-filter-table/releases

Usage

Basic Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Quick Filter Table Example</title>
    <link href="https://cdn.jsdelivr.net/gh/mshafer1/quick-filter-table@1.1.3/quick-filter-table/dist/quick-filter-table.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/gh/mshafer1/quick-filter-table@1.1.3/quick-filter-table/dist/quick-filter-table.js"></script>
    <script>
      function init() {
        QuickFilterTable.renderApp("app1", {
          items: [
            { name: "Frank", age: 33, city: "Boston" },
            { name: "Bob", age: 25, city: "Los Angeles" },
            { name: "Laura", age: 24, city: "Philadelphia" },
            { name: "Mallory", age: 32, city: "Dallas" },
            { name: "Niaj", age: 23, city: "Houston" },
            { name: "Olivia", age: 28, city: "San Diego" },
            { name: "David", age: 28, city: "Miami" },
            { name: "Judy", age: 26, city: "Portland" },
            { name: "Hannah", age: 29, city: "Austin" },
            { name: "Alice", age: 30, city: "New York" },
            { name: "Charlie", age: 35, city: "Chicago" },
            { name: "Eve", age: 22, city: "Seattle" },
            { name: "Kevin", age: 34, city: "Atlanta" },
            { name: "Ian", age: 31, city: "Denver" },
            { name: "Grace", age: 27, city: "San Francisco" },
          ],
          headers: [
            { text: "Name", value: "name", filter: "distinct" },
            { text: "Age", value: "age", filter: "numberRange" },
            { text: "City", value: "city", filter: "text" },
          ],
        });
      }

      window.addEventListener("DOMContentLoaded", init);
    </script>
  </head>
  <body>
    <div id="app1"></div>
  </body>
</html>

Click here to expand live playground

Configuring paging

default_rows_per_page can be passed to set the default number of rows per page that the user sees.
rows_per_page_options can be passed to change the default list of numbers of options available (set to null to turn off paging)

Click here to expand live playground

Dynamic Data Loading

Instead of providing the items array directly, you can load data dynamically using the items_url property:

QuickFilterTable.renderApp("app1", {
  items_url: "relative/path/to/data.json",
  headers: [
    { text: "Name", value: "name", filter: "distinct" },
    { text: "Age", value: "age", filter: "numberRange" },
    { text: "City", value: "city", filter: "text" },
  ],
});

To access an array of items nested within the returned data, provide a items_key to specify the location.

QuickFilterTable.renderApp("app1", {
  items_url: "relative/path/to/data.json",
  items_key: "people.search.results.items",
  headers: [
    { text: "Name", value: "name", filter: "distinct" },
    { text: "Age", value: "age", filter: "numberRange" },
    { text: "City", value: "city", filter: "text" },
  ],
});

Data will be fetched on load using a GET request using the axios library.

Click here to expand live playground

Data manipulation

items_map provides a method to create calculated columns.

If items_map is provided, then each item in the array is passed to this function before processing.

QuickFilterTable.renderApp("app1", {
    items: [
    { first_name: "Alice", last_name: "Apple", age: 30, city: "New York" },
    { first_name: "Bob", last_name: "Banana", age: 25, city: "Los Angeles" },
    { first_name: "Charlie", last_name: "Cherry", age: 35, city: "Chicago" },
    { first_name: "David", last_name: "Date", age: 28, city: "Miami" },
    ],
    items_map: function(item) {
        item.name = `${item.last_name}, ${item.first_name}`
        return item
    },
    headers: [
    { text: "Name", value: "name", filter: "distinct" },
    { text: "Age", value: "age", filter: "numberRange" },
    { text: "City", value: "city", filter: "text" },
    ],
});

Click here to expand live playground

Header options

NOTE: The order of items in the headers array specifies the order of the columns displayed.

Name	Required?	Default	Description
`text`	Yes	-	The name to show at the top of the column
`value`	Yes	-	The name of the field in each object to show
`sortable`	No	`true`	Whether or not to allow this headers column to be sorted
`html`	No	`false`	When true, the contents of `item[value]` will be loaded in as raw HTML. Useful for showing links
`filter`	No	`null`	If specified, provide filter options. See #Filters for details

Filters

Distinct Filter

Filters by unique values in a column. Example:

{ text: "Name", value: "name", filter: "distinct" }

DistinctMulti Filter

Filters by unique values in a column, uses check boxes to allow multiple choices. Example:

{ text: "Name", value: "name", filter: "distinctMulti" }

Text Filter

Filters by partial or full text match. Example:

{ text: "City", value: "city", filter: "text" }

Number Range Filter

Provides a number range slider to filter rows.

{ text: "Age", value: "age", filter: "numberRange" }

Note: Values for this filter are parsed using the JavaScript parseFloat, and NaN is considered to not be a match.

This site is open source. Improve this page.