Fylgja component - Table

The table component is super easy to use, since it is a zero config module that styles the table directly.

Allowing you to focus on the table it self.

Installation

npm install @fylgja/table

Then include the component in to your code via;

@use "@fylgja/table";
// Or via PostCSS import
@import "@fylgja/table";

How to use

No instruction are really needed, the table styles are automatically added when loaded.

That said no site is the same, and if you need more than this basis,

then consider adding you own styles to improve on this basis.

For example, a simple stripped style can be made with just this bit of code;

.table-striped {
    tr:nth-child(even) {
        --table-bg: rgba(0 0 0 / 10%);
    }
}

Single level styled by default

The table styles are unlike other frameworks set on a single level basis.

Making overriding the behavior or adding anything super easy, since there is no styles set to deep, to block your styles.

Overflow

Tables are as responsive as the content, so it is hard to make a responsive behavior that fits all table data types.

Use the @fylgja/utilpack overflow util class, that allows your table not the break the page

and can be scrolled instead, giving a basic user experience.

<div class="overflow-x-auto">
    <table>..</table>
</div>

If you really want your table to shine on mobile devices,

use some custom CSS for collapsing the expected data in the layout you want.

Config

As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles. Here are the following SCSS variables can you modify.

$table-margin: 1rem 0 !default;
$table-padding: 5px 8px !default;

$table-border-collapse: collapse !default;
$table-border-gap: 2px !default;
$table-border-width: 0 0 1px !default;
$table-border-style: solid !default;
$table-border-color: #ccc !default;

$table-bg: transparent !default;
$table-color: inherit !default;

$table-head-border: 2px $table-border-style !default;
$table-head-border-color: $table-color !default;