Skip to content

Super simple, completely configurable, sortable tables.

License

Notifications You must be signed in to change notification settings

signified/sortable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Sortable

Super simple, completely configurable, sortable tables.

Installation

  1. Add the JavaScript before the </body> (required)

    <script src="sortable.js"></script>

    or via jsDeliver:

    <script src="https://cdn.jsdelivr.net/gh/signified/[email protected]/sortable.min.js"></script>
  2. Add the stylesheet in the <head> (optional)

    <link rel="stylesheet" href="sortable.css">

    or via jsDeliver:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/signified/[email protected]/sortable.min.css">

Note: The supplied stylesheet applies default styling rules. Feel free to use it as a starting point or, if you're using a framework like Bootstrap or Tailwind CSS, make use of the options to take full advantage of the component and utility classes these frameworks provide.

Usage

Usage examples can be found at https://signified.github.io/sortable.

sortable(selectors, options);

selectors (string | required)

A string containing one or more selectors to match against. For example, 'table' will match every <table> element.

options (object | optional)

An object representing optional configuration options.

{
  // An array of class attribute values to apply to the <button> element that Sortable adds to each <th> element.
  buttonClasses: ['sortable-button'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column.
  sortClasses: ['sortable-sort'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column that has been sorted as a string (alphabetically).
  sortStringClasses: ['sortable-sort-string'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column that has been sorted as a number (numerically).
  sortNumberClasses: ['sortable-sort-number'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column that has been sorted as a date.
  sortDateClasses: ['sortable-sort-date'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column that has been sorted as a dot decimal.
  sortDotDecimalClasses: ['sortable-sort-dot-decimal'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column that has been sorted in ascending order.
  sortAscendingClasses: ['sortable-sort-ascending'],

  // An array of class attribute values to apply to the <th> and each <td> of the currently sorted column that has been sorted in descending order.
  sortDescendingClasses: ['sortable-sort-descending']
}

Contributing

See Contributing.

Credits

See Contributors.

License

See LICENSE.