Auto Tables

My personal JavaScript library for sorting and searching tables.

View Demo

Table of Contents

1. About the Project
   1. Built With
2. Getting Started
   1. Prerequisites
3. Usage
4. Contributing
5. Contact

About The Project

For some time, I have been using other people's libraries to sort and search an html table. So I decided to make my own library for myself and others.

This library allows you to:

• Sort an html table by clicking on the table header row
• Search an html table by typing in a keyword into a text input

Built With

• JQuery

Getting Started

Prerequisites

Before you include the script in your project, you must include jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then, after downloading the auto-tables.js script, include it in your html file.

<script src="js/auto-tables.js"></script>

Usage

There are 2 modules that are included in the script: tablesort and tablesearch.

Tablesort

To use the tablesort, add the class tablesort to your desired table. And for earch table header, add data-tablesort-type attribute.

Example

<table class="tablesort">
  <thead><tr>
    <th data-tablesort-type="int">Index</th>
    <th data-tablesort-type="string">First name</th>
    <th data-tablesort-type="string">Last name</th>
    <th data-tablesort-type="string">Email</th>
    <th data-tablesort-type="string">Country</th>
    <th data-tablesort-type="date">Dob</th>
  </tr></thead>
</table>

As of now, the only accepted data-tablesort-type types are:

• int or decimal - data-tablesort-type="int"
• string - data-tablesort-type="string"
• date - data-tablesort-type="date"

Dates require a further step that you can read about in our docs.

Default sort column can be specified by adding the class name tablesort-default to the desired table header.

Tablesearch

To use the table search feature, you need to have a table and an input[type="text"].

For the table, add the class tablesearch-table.

For the text input:

• add the class tablesearch-input
• add the attribute data-tablesearch-table
  • set the value to the id or classname of the table you want searched

To limit the columns that are searchable, add the class tablesearch-source to each table cell that should be searchable. If no cells are specified, all cells are searchable.

Example

<input type="text" class="tablesearch-input" data-tablesearch-table="#data-table">

<table id="data-table" class="tablesearch-table"></table>

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated 🙏

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contact

Written by Ryan Rickgauer