https://github.com/derek46518/tablesort
@derek46518/table-sort is a lightweight and efficient library for sorting HTML table content. It supports sorting by text, numbers, and dates and provides a customizable and interactive user experience.
https://github.com/derek46518/tablesort
pnpm rollup table-sorting typescript
Last synced: 7 months ago
JSON representation
@derek46518/table-sort is a lightweight and efficient library for sorting HTML table content. It supports sorting by text, numbers, and dates and provides a customizable and interactive user experience.
- Host: GitHub
- URL: https://github.com/derek46518/tablesort
- Owner: Derek46518
- Created: 2024-10-27T09:31:49.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-07T09:12:23.000Z (about 1 year ago)
- Last Synced: 2025-06-16T15:45:08.893Z (8 months ago)
- Topics: pnpm, rollup, table-sorting, typescript
- Language: TypeScript
- Homepage:
- Size: 145 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @derek46518/table-sort
`@derek46518/table-sort` is a lightweight and efficient library for sorting HTML table content. It supports sorting by text, numbers, and dates and provides a customizable and interactive user experience.
## Features
- **Easy Integration**: Quickly integrate sorting functionality into your HTML tables.
- **Customizable Sorting**: Supports sorting by text, numbers, and dates.
- **Interactive User Experience**: Includes indicators for sorting directions.
- **Cross-Browser Compatibility**: Works seamlessly on all modern browsers.
## Installation
Install the package via npm:
```bash
npm i install @derek46518/table-sort -D
```
## Usage
1. **Include the script in your HTML**
```bash
```
2. **Create an HTML table**
Design your HTML table and assign the class `table-sortable`. This enables sorting functionality for the table. You can also add `data-sort-method` attributes to customize the sorting behavior for each column (e.g., `string`, `number`, or `date`).
```bash
Name
Age
Date of Birth
John Doe
25
15 Jan 2023
Jane Smith
30
10 May 2022
```
3. **Initialize the sorting functionality**
Use the `TableSort` class to enable sorting on the table. Add this script after the table or ensure it runs once the DOM is loaded.
```
document.addEventListener("DOMContentLoaded", function() {
// Initialize TableSort for the sortable table
const tableElement = document.querySelector(".table-sortable");
const tableSortInstance = new tableSortjs.TableSort(tableElement);
});
```
4. **Optional: Add custom sorting buttons**
You can add buttons to trigger sorting programmatically using the `sortTable` method. Here's an example:
```
Sort by Age
Sort by Date of Birth
document.addEventListener("DOMContentLoaded", function() {
const tableElement = document.querySelector(".table-sortable");
const tableSortInstance = new tableSortjs.TableSort(tableElement);
// Sort by Age
document.getElementById("sortByAge").addEventListener("click", function() {
const ageHeader = tableElement.querySelector("th:nth-child(2)");
tableSortInstance.sortTable(ageHeader);
});
// Sort by Date of Birth
document.getElementById("sortByDate").addEventListener("click", function() {
const dateHeader = tableElement.querySelector("th:nth-child(3)");
tableSortInstance.sortTable(dateHeader);
});
});
```
## API
### `TableSort`
- **Constructor**: `new TableSort(tableElement)`
- Accepts an HTML `` element to initialize sorting.
- **Methods**:
- `sortTable(headerElement)`: Sorts the table by the specified header element.
## Contribution
Contributions are welcome! Please open an issue or submit a pull request on GitHub.
## License
This project is licensed under the MIT License.