# jquery-freeze-table-items

> jQuery plugin for freeze table header and first column

Latest version **1.3.0** (published 2017-06-01) · 0 weekly downloads

## Install

```sh
npm install jquery-freeze-table-items
pnpm add jquery-freeze-table-items
yarn add jquery-freeze-table-items
bun add jquery-freeze-table-items
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2017-06-01 |
| First published | 2017-04-26 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | vadim.maltsev |
| Maintainers | vadim.maltsev |
| Keywords | jQuery, sticky, table, fixed, header, column, html |

## Links

- npm: https://www.npmjs.com/package/jquery-freeze-table-items
- npm.io page: https://npm.io/package/jquery-freeze-table-items

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2017-06-01
- 1.2.0 — 2017-05-24
- 1.1.1 — 2017-05-20
- 1.1.0 — 2017-05-20
- 1.0.0 — 2017-05-20
- 0.0.3 — 2017-04-26
- 0.0.2 — 2017-04-26
- 0.0.1 — 2017-04-26

## README

# jQuery plugin for freeze table header and first column

### How to use it:

1. Place the main JavaScript file index.js after jQuery library and the plugin is ready for use.
```html
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="index.js"></script>
```

2. If you want to make the table header and first column sticky on page scroll, you should call the plugin as following.
```javascript
$('#my-table').freezeTableItems();
```
Or
```javascript
$('#my-table').freezeTableItems({freezeHeader: true, freezeFirstColumn: true});
```

Use html structure which contains wrapper, scrollable area and table as a child.
```html
<style>
    #example1-block {
        width: 500px;
    }
    #my-table td,
    #my-table th {
        width: 200px;
        min-width: 200px;
    }
</style>
<div id="example1-block">
    <div class="wrapper">
        <div class="scrollable-area">
            <table id="my-table">
                <thead>
                    <tr>
                        <th>One</th>
                        <th>Two</th>
                        <th>Three</th>
                        <th>Four</th>
                        <th>Five</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
```

If you want more, you can show the example.html from "example" folder.

---
_Source: https://npm.io/package/jquery-freeze-table-items · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._