table-sort-filter.js

Sort, filter and paginate any HTML table. 2 lines of code. Zero dependency, < 3kb gzip.

The problem: Every project has tables that need sorting, filtering and pagination — and every solution is either too heavy (DataTables, AG Grid) or incomplete (sort-only, filter-only).

The solution: 2 lines of code.

Install

npm install table-sort-filter

Or via CDN:

<script type="module">
  import TableSF from 'https://cdn.jsdelivr.net/npm/table-sort-filter/src/table-sort-filter.js'
</script>

Quick start

<table id="my-table">
  <thead>
    <tr><th>Name</th><th>Age</th><th>City</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>28</td><td>Paris</td></tr>
    <tr><td>Bob</td><td>34</td><td>Lyon</td></tr>
  </tbody>
</table>

<script type="module">
  import TableSF from 'table-sort-filter'
  TableSF.init('#my-table')
</script>

That's it. Your table now has:

• Clickable headers to sort columns (text and numeric)
• Search input to filter rows instantly
• Pagination (optional)
• No results message when nothing matches

Options

TableSF.init('#my-table', {
  sortable:    true,              // clickable column headers (default: true)
  filterable:  true,              // search input above table (default: true)
  paginate:    10,                // rows per page, 0 = disabled (default: 0)
  searchCols:  [0, 1],            // columns to search (default: all)
  placeholder: 'Search...',      // search input placeholder
  onSort:   (col, dir) => {},    // callback after sort
  onFilter: (query) => {},       // callback after filter
  onPage:   (page) => {},        // callback after page change
})

Methods

// Remove table-sort-filter from a table
TableSF.destroy('#my-table')

// Reset sort, filter and page to defaults
TableSF.reset('#my-table')

// Get all active tables and their state
TableSF.getAll()
// → [{ table, state: { sortCol, sortDir, query, page }, opts }]

Framework usage

React

import TableSF from 'table-sort-filter'
import { useEffect } from 'react'

function DataTable() {
  useEffect(() => {
    TableSF.init('#data-table', { paginate: 10 })
    return () => TableSF.destroy('#data-table')
  }, [])

  return (
    <table id="data-table">...</table>
  )
}

Vue

<script setup>
import TableSF from 'table-sort-filter'
import { onMounted, onUnmounted } from 'vue'

onMounted(() => TableSF.init('#my-table'))
onUnmounted(() => TableSF.destroy('#my-table'))
</script>

Comparison

| | table-sort-filter | DataTables | tablesort | tablefilter | |---|---|---|---|---| | Sort | ✅ | ✅ | ✅ | ❌ | | Filter | ✅ | ✅ | ❌ | ✅ | | Paginate | ✅ | ✅ | ❌ | ❌ | | Zero dep | ✅ | ❌ jQuery | ✅ | ❌ | | ES module | ✅ | ❌ | ❌ | ❌ | | Size | ~3kb | 500kb+ | 2kb | 400kb+ |

Browser support

| Chrome | Firefox | Safari | Edge | |---|---|---|---| | ✅ 61+ | ✅ 60+ | ✅ 10.1+ | ✅ 16+ |

License

MIT © TwinMi Studio