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.
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.
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.
is-bordered CSS class can be enabled to table when
bordered flag is enabled to table like:
<table class="table" buTable bordered="true"> ... </table>
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
BulmaTableDirective classes in
projects/ngx-bulma/table/public-api.ts to make them publicly available from
Also, the documentation for this is rendered from Markdown (.md) files at
Finally, we update
CONTRIBUTING.md and append
table as allowed Git commit message components when committing code to project.
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 :)