Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cityssm/bulma-sticky-table
A Bulma-friendly way to stick a table header, table footer, first column, or all three!
https://github.com/cityssm/bulma-sticky-table
bulma css hacktoberfest scss sticky table
Last synced: 3 months ago
JSON representation
A Bulma-friendly way to stick a table header, table footer, first column, or all three!
- Host: GitHub
- URL: https://github.com/cityssm/bulma-sticky-table
- Owner: cityssm
- License: mit
- Created: 2021-07-02T15:03:51.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T15:54:18.000Z (8 months ago)
- Last Synced: 2024-10-31T09:50:17.418Z (3 months ago)
- Topics: bulma, css, hacktoberfest, scss, sticky, table
- Language: HTML
- Homepage: https://cityssm.github.io/bulma-sticky-table/
- Size: 668 KB
- Stars: 25
- Watchers: 4
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bulma-sticky-table
[](https://www.npmjs.com/package/@cityssm/bulma-sticky-table)
[](https://app.codacy.com/gh/cityssm/bulma-sticky-table/dashboard)
A Bulma-friendly way to stick a table header, table footer, first column, or all three!
**[See It In Action](https://cityssm.github.io/bulma-sticky-table)**
## Installation
Download a release, or grab the code from npm.
### Bulma v1 or newer
```sh
npm install @cityssm/bulma-sticky-table
```
### Bulma v0.9.4 or older
```sh
npm install @cityssm/[email protected]
```
## Usage
When building your stylesheet, import `_sticky-table.scss` AFTER you import Bulma.
This will ensure your colour customizations are used.
```scss
@import 'bulma/bulma';
@import '@cityssm/bulma-sticky-table/sticky-table';
```
Alternatively, if you are using Bulma without any customizations,
you can replace your Bulma stylesheet with `bulma-with-sticky-tables.css`.
```html
```
Need a CDN? Check out [JS Deliver](https://www.jsdelivr.com/package/npm/@cityssm/bulma-sticky-table).
Build your Bulma table as per usual, using the [Bulma Table Documentation](https://bulma.io/documentation/elements/table/) as your guide.
Then, add any combination of the following classes to your `` tag.
Use `.has-sticky-header` to stick the header.
- Note that the header should be inside of a `` tag, and each cell should use a `` tag.
Use `.has-sticky-footer` to stick the footer.
- Note that the footer should be inside of a `` tag, and each cell should use a `` tag.
Use `.has-sticky-column` to stick the first column.
- Note that the first cells in each table row should use the `` tag.
### Note about `.table-container`
The Bulma `.table-container` wraps around a `.table` to assist with scrolling
around large tables. The basic idea is that the container changes the `overflow`
CSS rules on the container. This can affect the `.table`'s ability to stick
as you'd expect.
While `.has-sticky-column` will likely work as expected,
`.has-sticky-header` and `.has-sticky-footer` may not. There are two options:
1. **Remove the `.table-container` altogether**, and just use the `.table` as is with the
desired sticky classes.
2. Add some additional styles to the `.table-container` to change the vertical overflow rule
and set a specific height on the container. The example below uses the screen height.
Something smaller may be better, depending on your application.
```html
...
...
```
## Thanks
[](https://bulma.io)
Heavily inspired by [code found on CSS-Tricks](https://css-tricks.com/a-table-with-both-a-sticky-header-and-a-sticky-first-column/).