Background:

I have contributed code to ngx-bulma project once again and this time we're adding native Angular support for Bulma's HTML table element. This post documents my journey.

The GitHub issue can be found here which was created a year ago and my PR for this can be found here.

We are currently exploring ways for providing documentation on advanced HTML table use cases like searching, filtering, pagination via a third-party plugin to the project.

The documentation for styling tables in Bulma is pretty straightforward. We add "table" class to <table> element and additional properties can be appended to it as CSS classes.

Theory:

The idea is to create a BulmaTableModule and use BulmaTableDirective as the Angular directive to drive its necessary features. In HTML context we use it via buTable. This directive uses Input() variables to enable/disable CSS attributes. For example, is-bordered CSS class can be enabled to table when bordered flag is enabled to table like:

<table class="table" buTable bordered="true">
...
</table>

Implementation:

I started by duplicating an existing library module as projects/ngx-bulma/table/table.module.ts, renaming it to BulmaTableModule and updating references accordingly to match project structure.

When you don't know how project directory structure works, just play it safe and go along with existing elements, you'll understand how it'll all click into place given some time.

The final directory structure looked like this. We export BulmaTableModule, BulmaTableDirective classes in projects/ngx-bulma/table/public-api.ts to make them publicly available from ngx-bulma.

Also, the documentation for this is rendered from Markdown (.md) files at projects/bulma-app/src/assets/docs.

Finally, we update CONTRIBUTING.md and append table as allowed Git commit message components when committing code to project.

Conclusion

It is always educational contributing to open-source projects. I learned a lot working on this feature and I'm grateful to Santosh for his guidance.

Feel free to @ me on Twitter on your thoughts on this. Bye :)