https://github.com/leabs/jekyll-product-table
Converts markdown frontmatter into a sortable searchable DataTables table.
https://github.com/leabs/jekyll-product-table
datatables frontmatter jekyll markdown
Last synced: 4 months ago
JSON representation
Converts markdown frontmatter into a sortable searchable DataTables table.
- Host: GitHub
- URL: https://github.com/leabs/jekyll-product-table
- Owner: leabs
- Created: 2017-12-02T16:53:33.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-08-01T23:51:03.000Z (almost 2 years ago)
- Last Synced: 2025-12-20T00:06:34.662Z (6 months ago)
- Topics: datatables, frontmatter, jekyll, markdown
- Language: HTML
- Homepage: https://jekyll-product-table.vercel.app/
- Size: 85.9 KB
- Stars: 2
- Watchers: 0
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# jekyll-product-catalog
This [Jekyll](https://jekyllrb.com/) site uses Jekyll collections to iterate over markdown file frontmatter and populates those properties into a sortable searchable table using the DataTables plug-in. This is a good set up for a light weight store of information for items such as parts with specs. It is a static site, so loading thousands of parts is as fast as possible, secure since there is no back end, and can be organized as the owner sees fit using the `_skus` folder as the repository for parts data. It also uses [bulma css framework](https://bulma.io/) for some basic styling (container, typography, table).
### Requirements
To build and run this site locally, you will need
- [Ruby](https://www.ruby-lang.org/en/)
- [Bundler](https://bundler.io/)
- [Jekyll](https://jekyllrb.com/)
### Install Locally
- Download, clone, or fork the repository.
- Navigate to the repository directory.
- Run `bundle install` in the repository directory.
- Run `bundle exec jekyll serve`.
- Open [http://127.0.0.1:4000/](http://127.0.0.1:4000/).
### Deploy
There are many options for deploying Jekyll sites. My current favorite option is [Vercel](https://vercel.com/) which can build and host your site. You can additionally set up domains in their dashboard.
Other options include:
- GitHub pages
- AWS S3
- Netlify
- GitLab pages
More info on deployment methods (including automated options) can be found [here.](https://jekyllrb.com/docs/deployment/)
### Adding additional parts
Add parts into the `_skus` directory, using the exisiting parts as a guide. Any of the information within these markdown files can be pulled into the DataTable.
### Adding additional properties
Adding any new property to the sku's frontmatter requires the addition of the `{{sku.propName}}` to the **tbody** as well as the **thead** found at `_layouts/home.html`.
Here is what the FOR loop looks like using Jekyll's Liquid engine:
```
{% for sku in site.skus %}
{{ sku.Name }}
{{ sku.Sku }}
{{ sku.Price }}
{{ sku.content | markdownify }}
{% endfor %}
```
### Additional options
Site title, description, and more can be edited in the `_config.yml` file. Any changes to this file will require a server reboot if you are building locally.
### Sorting the table
By default the table sorts by Sku number. To change sorting, go to `_layouts/home.html` line 717 and adjust `order: [[1, "asc"]],` to your liking.