No Packages Misplaced

    @fylgja/table

    1.0.1 • Public • Published

    Fylgja - Table

    NPM version license

    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;

    Install

    npm i @fylgja/table

    Homepage

    fylgja.dev/

    DownloadsWeekly Downloads

    7

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    5.77 kB

    Total Files

    6

    Last publish

    Collaborators

    • grimlink