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.

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.
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.

<p id="bkmrk-samplecsvfile_2kb.cs">
<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>
</p>

<a href="https://bookstack.instance/attachments/12" target="_blank" rel="noopener">SampleCSVFile_2kb.csv</a>

</p>

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

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/papaparse@5.4.0/papaparse.min.js"></script> 
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />

Find CSV links in the page and append to link

This searches the page_content for elements that have „.csv“ in their textContent.
Gets textContent and the href of the link.
The link is passed to Papa Parse for processing.
On completion the data result is split into the header row and the rest.
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.

<script>
function init() {
    document.querySelectorAll('.page-content  a').forEach((node, i) => {
        let parent = node;
        let unique = i;
        let text = node.textContent
        let link = node.href

        if (text.search(".csv") !== -1) {            
            let header;
            let rows = [];
            let json = JSON.parse(node.getAttribute("title"));

            Papa.parse(link, {
                download: true,
                header: false,
                complete: function(results) {
                    results.data.map(function(data, index) {
                      if(!!json){                         
                        let removeValFrom = json.remove_cols;
                      	data = data.filter(function(value, index) {
     			  return removeValFrom.indexOf(index) == -1;
			})
                      }
                        if (index == 0) {
                            header = data;
                        } else {
                            rows.push(data);
                        }
                    });
                    const csv_wrapper = document.createElement("div");
                    csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);
                    parent.after(csv_wrapper);

                    new gridjs.Grid({
                        search: true,
                        columns: header,
                        data: rows,
                        fixedHeader: true,
                        sort: true,
                        pagination: {
                            limit: 6
                        }
                    }).render(document.getElementById("csv_wrapper_" + unique_id));

                }
            });
        }
    });
}
window.addEventListener('DOMContentLoaded', init);
</script>

function init() {

document.querySelectorAll('.page-content a').forEach((node, i) => {

let parent = node;

let unique = i;

let text = node.textContent

let link = node.href

if (text.search(".csv") !== -1) {

let header;

let rows = [];

let json = JSON.parse(node.getAttribute("title"));

Papa.parse(link, {

download: true,

header: false,

complete: function(results) {

results.data.map(function(data, index) {

if(!!json){

let removeValFrom = json.remove_cols;

data = data.filter(function(value, index) {

return removeValFrom.indexOf(index) == -1;

})

}

if (index == 0) {

header = data;

} else {

rows.push(data);

}

});

const csv_wrapper = document.createElement("div");

csv_wrapper.setAttribute("id", "csv_wrapper_" + unique_id);

parent.after(csv_wrapper);

new gridjs.Grid({

search: true,

columns: header,

data: rows,

fixedHeader: true,

sort: true,

pagination: {

limit: 6

}

}).render(document.getElementById("csv_wrapper_" + unique_id));

}

});

}

});

}

window.addEventListener('DOMContentLoaded', init);

</script>

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

{"remove_cols":[0,1,2,3,6,7,8,9,10]}

1	{"remove_cols":[0,1,2,3,6,7,8,9,10]}

The result

Should look something like that …

portalZINE NMN | Development meets Creativity |

Enjoy coding …

Bookstack: Embed local CSV files