Makes any table with class="searchable" searchable. Click the search button to filter table rows in real-time as you type.

Just include the JavaScript+CSS and it works automatically. No function calls needed.

sortable - makes tables sortable with similar simplicity.

https://tofsjonas.github.io/searchable/

• Features
• Installation
  • npm
  • CDN jsDelivr
  • Local files
• Languages
  • Supported Languages
  • Using a Specific Language
• Usage
• Configuration
  • Button Position
    • Left vs Right Per table
    • Globally using CSS
  • Custom Button Icon
    • Per table
    • Globally
  • Input Styling
    • Per table
    • Globally
  • Placeholder
    • Per table
    • Globally
  • Empty State Message
    • Per table
    • Globally
  • Table Background
• How It Works

Features

• 1.41K minified (786 bytes gzipped)
• Real-time search - filter as you type (case-insensitive)
• Works with dynamic tables - JavaScript generated content supported
• Lightning fast - handles large tables smoothly
• Zero dependencies - vanilla JavaScript only
• Auto-initialization - just add the class
• Multi-language support - 29 languages available
• Customizable - button position, icons, styling
• Modern browsers - requires CSS :has() support (Chrome 105+, Firefox 121+, Safari 15.4+)

Installation

npm

npm install @tofsjonas/searchable

Import in your JavaScript/TypeScript:

import '@tofsjonas/searchable' // default = english version
import '@tofsjonas/searchable/dist/searchable.css'

Or for a specific language (e.g., Swedish):

import '@tofsjonas/searchable/dist/sv/searchable.min.js'
import '@tofsjonas/searchable/dist/sv/searchable.min.css'

CDN (jsDelivr)

Default (English):

<link href="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/searchable.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/searchable.min.js"></script>

Or use a specific language (e.g., Swedish):

<link href="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/sv/searchable.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/sv/searchable.min.js"></script>

Local files

Copy files from dist/ (or dist/[language]/ for specific languages) and link locally:

<link href="/assets/searchable.css" rel="stylesheet" />
<script src="/assets/searchable.min.js"></script>

Languages

searchable comes with built-in support for 29 languages. Each language version includes localized text for the search placeholder, empty state message, and search icon.

Supported Languages

• ar - Arabic (العربية)
• cs - Czech (Čeština)
• da - Danish (Dansk)
• de - German (Deutsch)
• el - Greek (Ελληνικά)
• en - English (default)
• es - Spanish (Español)
• fi - Finnish (Suomi)
• fr - French (Français)
• he - Hebrew (עברית)
• hi - Hindi (हिन्दी)
• hu - Hungarian (Magyar)
• id - Indonesian (Bahasa Indonesia)
• it - Italian (Italiano)
• ja - Japanese (日本語)
• ko - Korean (한국어)
• nl - Dutch (Nederlands)
• no - Norwegian (Norsk)
• pl - Polish (Polski)
• pt - Portuguese (Português)
• ro - Romanian (Română)
• ru - Russian (Русский)
• sv - Swedish (Svenska)
• th - Thai (ไทย)
• tr - Turkish (Türkçe)
• uk - Ukrainian (Українська)
• vi - Vietnamese (Tiếng Việt)
• zh - Chinese (中文)

Using a Specific Language

To use a specific language, include the language-specific files from the dist/[language]/ folder:

<!-- German example -->
<link href="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/de/searchable.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/de/searchable.min.js"></script>

The default files in the root dist/ folder use English. You can still override any text using the data attributes described in the Configuration section.

Usage

Add class="searchable" to any table with <thead> and <tbody>:

<table class="searchable">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Coffee Mug</td>
      <td>$12</td>
      <td>Kitchen</td>
    </tr>
  </tbody>
</table>

A search button appears automatically. Click it to show/hide the search input.

Configuration

Button Position

Left vs Right Per table

<table class="searchable sb-left"></table>
<!-- left -->
<table class="searchable"></table>
<!-- right (default) -->

Globally using CSS

.searchable::before {
  top: 9px;
  left: 80px;
}

Custom Button Icon

Per table

<table class="searchable" data-sb-icon="🔍"></table>
<table class="searchable" data-sb-icon="Search"></table>

Globally

.searchable::before {
  content: 'anything you want' !important;
}

Input Styling

Per table

<table class="searchable" data-sb-input-class="form-control"></table>

Globally

Using HTML

<script
  data-sb-input-class="form-control bg-warning etc"
  src="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/searchable.min.js"
></script>

Using CSS

.searchable thead input {
  background: purple;
  font-family: 'Comic Sans MS', 'Comic Sans', cursive;
}

Placeholder

Per table

<table class="searchable" data-sb-placeholder="Search..."></table>

Globally

<script
  data-sb-placeholder="Placeholder for all searchable inputs"
  src="https://cdn.jsdelivr.net/gh/tofsjonas/searchable@latest/dist/searchable.min.js"
></script>

Empty State Message

Per table

<table class="searchable" data-sb-empty="No matches found"></table>

Globally

.searchable thead::after {
  content: 'Nothing here, move along' !important;
}

Table Background

Set a background so the empty-state pseudo-element is not visible through transparent table areas.

.searchable,
.searchable td {
  background: white;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .searchable,
  .searchable td {
    background: #333;
    color: #fff;
  }
}

How It Works

Uses event delegation and CSS :has() pseudo-class. The search input is created dynamically and filters rows by hiding non-matching content in real-time.