# javve/list.js

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/javve-list-js).**

11,222 stars · 883 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/javve/list.js
- Homepage: https://listjs.com
- awesome-repositories: https://awesome-repositories.com/repository/javve-list-js.md

## Topics

`easy-to-use` `filters` `flexibility` `fuzzy-search` `javascript` `pagination` `search` `sort`

## Description

list.js is a JavaScript search and sort library used to add real-time filtering, sorting, and pagination to HTML lists and tables without backend dependencies. It functions as a DOM data indexer and template-driven HTML renderer, allowing developers to manage how data is displayed and discovered on the client side.

The library distinguishes itself through a fuzzy string matching engine that handles approximate matches and typos, and a DOM data indexer that extracts values directly from HTML data attributes to build a searchable internal index. It uses a template-driven rendering system to generate list item layouts from JavaScript objects using configurable strings or functions.

The project covers a broad range of frontend capabilities, including locale-aware sorting with custom comparators, client-side pagination for managing large datasets, and condition-based filtering. It also provides tools for asynchronous item management, search input debouncing, and JSON data export.

## Tags

### Data & Databases

- [DOM Data Indexing](https://awesome-repositories.com/f/data-databases/search-indexing-technologies/search-indexing/search-and-indexing/dom-data-indexing.md) — Extracts data from HTML attributes and classes to build the primary internal index used for search and sort. ([source](https://listjs.com/docs/options))
- [Pagination Controls](https://awesome-repositories.com/f/data-databases/data-table-components/pagination-controls.md) — Provides UI components for splitting large datasets into manageable, numbered pages. ([source](https://listjs.com/examples/pagination))
- [Fuzzy Matching](https://awesome-repositories.com/f/data-databases/fuzzy-matching.md) — Implements algorithms for calculating string similarity and highlighting matches in search interfaces.
- [Pagination](https://awesome-repositories.com/f/data-databases/pagination.md) — Splits large datasets into manageable visual pages to improve browser performance.
- [Text Search](https://awesome-repositories.com/f/data-databases/text-search.md) — Provides text-based search using AND logic and exact phrase matching. ([source](https://listjs.com/docs/options))
- [Conditional Data Filters](https://awesome-repositories.com/f/data-databases/conditional-data-filters.md) — Provides logic for filtering list items based on user-defined predicate conditions. ([source](https://cdn.jsdelivr.net/gh/javve/list.js@master/README.md))
- [Asynchronous Index Building](https://awesome-repositories.com/f/data-databases/search-indexing-technologies/search-indexing/asynchronous-index-building.md) — Implements background index construction to ensure the user interface remains responsive during data processing. ([source](https://github.com/javve/list.js/blob/master/CHANGELOG.md))
- [List Configuration](https://awesome-repositories.com/f/data-databases/search-indexing-technologies/search-indexing/search-and-indexing/index-initialization/list-configuration.md) — Allows setting initial options for templates, search columns, and pagination during list initialization. ([source](https://listjs.com/docs/list-api))
- [Category-Based Filters](https://awesome-repositories.com/f/data-databases/search-result-filtering/category-based-filters.md) — Hides or shows list items based on category selections or range-based rules. ([source](https://cdn.jsdelivr.net/gh/javve/list.js@master/README.md))

### Web Development

- [JavaScript Search and Sort Libraries](https://awesome-repositories.com/f/web-development/javascript-search-and-sort-libraries.md) — Provides real-time filtering, sorting, and pagination for HTML elements without backend requirements.
- [Client-Side Pagination Utilities](https://awesome-repositories.com/f/web-development/client-side-pagination-utilities.md) — Provides JavaScript utilities for splitting large datasets into sequential pages within the browser.
- [DOM-Based Data Indexing](https://awesome-repositories.com/f/web-development/dom-based-data-indexing.md) — Maps HTML elements and data attributes to an internal structure for efficient client-side querying.
- [DOM Data Indexers](https://awesome-repositories.com/f/web-development/dom-data-indexers.md) — Extracts data from HTML attributes to create a searchable internal representation of the DOM.
- [Fuzzy Search Libraries](https://awesome-repositories.com/f/web-development/fuzzy-search-libraries.md) — Provides approximate string matching and relevance ranking for JavaScript datasets to handle typos.
- [HTML Data Attribute Extraction](https://awesome-repositories.com/f/web-development/html-data-attribute-extraction.md) — Extracts values from custom HTML data attributes to build a searchable internal index of list items.
- [Data Attribute Mappings](https://awesome-repositories.com/f/web-development/standard-html-attribute-mapping/custom-callback-attribute-mapping/data-attribute-mappings.md) — Links HTML data attributes to internal fields to enable seamless searching and sorting of DOM elements. ([source](https://listjs.com/docs))
- [State-Preserving Item Insertion](https://awesome-repositories.com/f/web-development/content-insertion-utilities/state-preserving-item-insertion.md) — Inserts new data elements into HTML lists or tables while preserving the active search, sort, and filter state. ([source](https://cdn.jsdelivr.net/gh/javve/list.js@master/README.md))
- [DOM Index Rebuilding](https://awesome-repositories.com/f/web-development/dom-index-rebuilding.md) — Synchronizes the internal data index by re-scanning the current state of the document object model. ([source](https://listjs.com/docs/list-api))

### Software Engineering & Architecture

- [Approximate String Searching](https://awesome-repositories.com/f/software-engineering-architecture/string-matching-algorithms/approximate-string-searching.md) — Implements an approximate string matching algorithm to find the closest textual matches for search queries.

### User Interface & Experience

- [Client-Side List Reordering](https://awesome-repositories.com/f/user-interface-experience/client-side-list-reordering.md) — Enables dynamic rearrangement of HTML list items or table rows based on custom criteria.
- [Client-Side Search Filtering](https://awesome-repositories.com/f/user-interface-experience/client-side-search-filtering.md) — Implements real-time filtering and matching of items against search queries within the user interface.
- [CSS Selector-Based Search Attachments](https://awesome-repositories.com/f/user-interface-experience/css-selector-based-search-attachments.md) — Attaches search and filter behavior to specific HTML elements by targeting their CSS classes. ([source](https://listjs.com/docs))
- [List Item Renderers](https://awesome-repositories.com/f/user-interface-experience/dynamic-component-rendering/floating-completion-menus/customizable-completion-item-renderers/list-item-renderers.md) — Uses customizable template functions to define the HTML structure of individual list entries. ([source](https://github.com/javve/list.js/blob/master/CHANGELOG.md))
- [Dynamic HTML Generators](https://awesome-repositories.com/f/user-interface-experience/dynamic-html-generators.md) — Programmatically creates and updates HTML elements to render data views from JavaScript objects.
- [Data-Driven List Population](https://awesome-repositories.com/f/user-interface-experience/dynamic-list-rendering/dynamic-action-list-population/data-driven-list-population.md) — Generates HTML list elements from arrays of JavaScript objects using property-matching templates. ([source](https://listjs.com/docs))
- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Provides customizable string templates to generate the internal HTML structure of list items.
- [HTML Template Renderers](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/template-engines/server-side-rendering-engines/html-template-renderers.md) — Generates list item HTML by merging JavaScript data objects with configurable string or function templates.
- [Table Sorting Logic](https://awesome-repositories.com/f/user-interface-experience/tables/column-reorderers/table-sorting-logic.md) — Reorders table rows or list items based on user interaction with column headers. ([source](https://cdn.jsdelivr.net/gh/javve/list.js@master/README.md))
- [DOM-State Mapping Layers](https://awesome-repositories.com/f/user-interface-experience/dom-state-mapping-layers.md) — Synchronizes an internal data model with HTML elements by reading custom attributes from the document object model.
- [Custom Sort Comparators](https://awesome-repositories.com/f/user-interface-experience/interactive-element-sorting/custom-sort-comparators.md) — Uses custom comparator functions and native internationalization to provide locale-aware alphabetical sorting of list items.
- [Search Input Debouncing](https://awesome-repositories.com/f/user-interface-experience/search-input-debouncing.md) — Delays search execution until the user stops typing to reduce processing overhead. ([source](https://github.com/javve/list.js/blob/master/CHANGELOG.md))
- [Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/visibility-toggles.md) — Toggles the visibility of list items using CSS classes to hide non-matching elements without removing them from the DOM.