I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German

Bookstack: Embed local CSV files

3. March 2023




Bookstack: Embed local CSV files

What is Bookstack

BookStack is an open-source, web-based platform for organizing, storing, and sharing knowledge and documentation. It was developed to provide a user-friendly and intuitive interface for creating and managing knowledge bases, wikis, and other types of structured content.

BookStack allows users to create books, chapters, and pages, and to organize them hierarchically. Users can also add images, files, and links to their content, and collaborate with others by assigning roles and permissions. BookStack also supports full-text search, version control, and commenting, making it easy to find and update information.

BookStack is written in PHP and uses the Laravel framework, and it is available for free under the MIT License.

What are you using it for?

This is my internal homelab documentation system, I use it for private and client related content. Bookstack is fast, clean and well documented. It has really elevated the way I store and access important reminders / how-tos and documentation.

The system provides API access and has many ways to tweak it. Bookstack documentation.

Why display CSV files?

CSV stands for “Comma-Separated Values”. It is a simple file format used to store tabular data, such as spreadsheets or databases, in plain text. In a CSV file, each line represents a row of data, and each column is separated by a comma (or sometimes a semicolon or tab).

There are always CSV exports or other data stored in CSV format, that i need quick access to sometimes.

Bookstack allows to add files to pages and insert links to them, but it does not embed or parse those files in any way. There are similar hacks to mine, this example allows to embed PDFs and here the main Hacks page.

Lets get started!

We need something to parse the CSV file and something to display the information in a nice visual & flexible grid.

  1. I am choosing Papa Parse for the CSV parsing, wrote about it a long time ago and still using it actively for many projects.

    Papaparse can handle CSV files with different delimiters, encodings, and line endings, and can also handle complex data formats, such as quoted values, escaped characters, and multi-line cells. The library is widely used in web applications, data analysis tools, and other software that deal with CSV data.
  2. Grid.js is my library of choice to display the parsed information in a nice grid.

    Grid.js is a modern and open-source JavaScript library for building responsive and customizable data tables in web applications.

    It provides a simple and intuitive API for creating, styling, and populating tables with data from various sources, including JSON, CSV, and Excel files.

    Grid.js supports features such as sorting, filtering, pagination, column resizing, and cell formatting, as well as advanced features such as tree grids, custom renderers, and editable cells. The library also includes built-in plugins for exporting data to different formats, such as CSV, Excel, and PDF.

Include the file in Bookstack

Included and linked CSV files look something like that in source.

Tweak the header

The settings allow you to add custom code to your instance. Another option would be to tweak template files, but its easier to do these light tweaks using the header customizer.

This can be found under: https://bookstack.instance/settings/customization

Add required libs

Either link them externally or better use locally stored versions of these.

Papa Parse
Grid.JS

Find CSV links in the page and append to link

  1. This searches the page_content for elements that have “.csv” in their textContent.
  2. Gets textContent and the href of the link.
  3. The link is passed to Papa Parse for processing.
  4. On completion the data result is split into the header row and the rest.
  5. That data is passed to Grid.JS and added to a container element after the link.
    Grid.JS provides a ton of configuration options, I added the most common as a starting point. This includes different ways to style the grid.

Github: Will be adding more hacks, as I clean some of them up :)

A bonus

You can use the title attribute to pass some config data, in JSON format. Currently only to strip columns, but will extend that a bit more for flexible usage ;)

portalZINE NMN | Development meets Creativity | json grid js

The result

Should look something like that …

portalZINE NMN | Development meets Creativity |

Enjoy coding …




Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments



Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs

 

I love programming,  design and know my way around server architecture as well.  I would never feel complete, with one of these missing.

I have a broad range of interests, that’s why I constantly dive into new technologies and expand my knowledge where ever required. Technologies are evolving fast and I enjoy using the latest.

Apart from that, I am a peace loving guy who tries to have people around him that think the same.  I truly believe in the principle: “If you help someone, someone will help you, when you need it."

Previous Next