Skip to content

Commit

Permalink
Merge pull request #6 from jpchip/update
Browse files Browse the repository at this point in the history
Update
  • Loading branch information
Jared Chapiewsky authored May 8, 2019
2 parents 9ea222e + ff46724 commit eebda79
Show file tree
Hide file tree
Showing 16 changed files with 6,085 additions and 662 deletions.
7 changes: 4 additions & 3 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
bower_components/

\.idea/
bower_components/

\.idea/
node_modules/
11 changes: 9 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
Changelog
=========

## Version 3.0.0 - May 8 2019

* Fix script to support newer versions of jquery
* Bundle script to dist folder, create esm version
* Increase debounce time
* Update readme and examples

## Version 2.0.0 - June 6 2017

* Published to NPM
Expand All @@ -9,7 +16,7 @@ Changelog

## Version 1.1.2 - January 19 2015

* Updated jquery version dependecy in bower.json
* Updated jquery version dependency in bower.json

## Version 1.1.1 - December 31 2014

Expand All @@ -25,4 +32,4 @@ Changelog

## Version 1.0 - October 22 2014

* First release
* First release
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License (MIT)

Copyright (c) 2014 jpchip
Copyright (c) 2019 Jared Chapiewsky

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
76 changes: 50 additions & 26 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,39 +1,53 @@
jQuery Sticky Table Headers
===========
# jQuery Sticky Table Headers
> Make your table headers sticky
This is a version of the sticky table code originally written by Terry Munn, wrapped in a jquery plugin to make it more reusable. I also added some new options and functions.

* [JSFiddle Demo](http://jsfiddle.net/jchip/07ryyn0c/)
* [Example](http://htmlpreview.github.io/?https://github.com/jpchip/stickytable/blob/publish-to-npm/example/index.html)
* [Example](http://jpchip.github.io/stickytable/example/)
* [Example ES Module](http://jpchip.github.io/stickytable/example/module.html)

## External Dependencies
## Installing / Getting started

* jQuery >= 1.12.4
* [jQuery throttle / debounce - v1.1 - 3/7/2010](http://benalman.com/projects/jquery-throttle-debounce-plugin/)

## Install
Install via NPM:

```npm
npm install --save jquery-stickytable
```

## Usage
Include jQuery(>=1.12.4) and jquery-stickytable in your head:

```html
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-stickytable.min.js"></script>
```

Include Jquery, jquery-throttle-debounce, and jquery-stickytable in your head:
and the css:

```html
<script src="jquery.js"></script>
<script src="jquery.ba-throttle-debounce.min.js"></script>
<script src="jquery-stickytable.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/jquery-stickytable.css">
```

Files can be found in dist folder:

```text
dist/
├── jquery-stickytable.css
├── jquery-stickytable.js (UMD)
├── jquery-stickytable.min.js (UMD, compressed)
└── jquery-stickytable.esm.js (ES Module, includes css)
```

## Usage

Load stickyTable on your table:

```javascript
$('#myTable').stickyTable(options);
```

By default just the header of the table (eg. the thead) is sticky. Biaxial headers are possible — this is for situations where both horizontal and vertical headers are needed. To enable, just wrap the first element in each tbody row in a th instead of a td:
By default just the header of the table (eg. the thead) is sticky. Biaxial headers are
possible — this is for situations where both horizontal and vertical headers are needed.
To enable, just wrap the first element in each tbody row in a th instead of a td:

```html
<tbody>
Expand All @@ -49,17 +63,11 @@ By default just the header of the table (eg. the thead) is sticky. Biaxial heade

## Options

### copyTableClass

A boolean which when true copies any classes on the target table to the sticky table. Default is true.

### copyEvents

A boolean which when true copies any events on the target table to the sticky table. An example would be if there was a click event on a th element in the thead to do sorting, this would carry over to the sticky column header th. Default is false.

### overflowy

A boolean which when true adds an overflow-y class to the sticky table wrapper (ie. sticky-wrap class). This means the table will scroll vertically and only be as tall as it's parent div (see .sticky-wrap.overflow-y in css). Default is false.
| Option | Description |
| ------------- | ------------- |
| copyTableClass | When true copies any classes on the target table to the sticky table. Default is true. |
| copyEvents | When true copies any events on the target table to the sticky table. An example would be if there was a click event on a th element in the thead to do sorting, this would carry over to the sticky column header th. Default is false. |
| overflowy | When true adds an overflow-y class to the sticky table wrapper (ie. sticky-wrap class). This means the table will scroll vertically and only be as tall as it's parent div (see .sticky-wrap.overflow-y in css). Default is false.|

## Methods

Expand All @@ -73,6 +81,22 @@ Completely removes sticky table classes and elements and destroys the instance.
$('#myTable').stickyTable('destroy');
```

## Styles

The sticky headers have default colors set, but you can override this css:

```bash
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
}

.sticky-wrap th {
background-color: #666;
color: #eee;
}
```

## Exceptions

* If target element is not a table.
Expand Down
4 changes: 2 additions & 2 deletions jquery-stickytable.css → dist/jquery-stickytable.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* jQuery Sticky Table Headers - v2.0.0
/**
* jQuery Sticky Table Headers - v3.0.0
* https://github.com/jpchip/stickytable
*/
.sticky-wrap {
Expand Down
Loading

0 comments on commit eebda79

Please sign in to comment.