@allakando/allakando-web-ui/dist/storybook/assets/tables.stories-4cbc8db1.js

Allakando's web component library

import"./DialogManager-abca015e.js";import{i as d}from"./StyleInjection-7d750a8d.js";const l=`# Tables

Allakando's design system tables can be imported using tables.css.

This will apply changes to native table elements, but also allow access to utility css classes as such:

- .hoverable can be set on \\<table> elements to give rows a background hover color.
- .sticky-headers can be set on \\<table> elements to give sticky headers.
`,o={title:"Style Injection/Tables",component:"Tables",tags:["autodocs"],parameters:{docs:{description:{component:l}}}},t=()=>(window.AllakandoWebUI={injectStyle:d},`
        <script>
            AllakandoWebUI.injectStyle({
                tables: true
            })
        <\/script>
        <style>
            #table-container {
                margin: 2rem;
                height: 400px;
                overflow: auto;
            }
        </style>
        <div id="table-container">
            <table class="hoverable sticky-headers">
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                </tbody>
            </table>
        </div>
    `);var e,a,n;t.parameters={...t.parameters,docs:{...(e=t.parameters)==null?void 0:e.docs,source:{originalSource:`() => {
  window.AllakandoWebUI = {
    injectStyle
  };
  return \`
        <script>
            AllakandoWebUI.injectStyle({
                tables: true
            })
        <\/script>
        <style>
            #table-container {
                margin: 2rem;
                height: 400px;
                overflow: auto;
            }
        </style>
        <div id="table-container">
            <table class="hoverable sticky-headers">
                <thead>
                    <tr>
                        <th>Header 1</th>
                        <th>Header 2</th>
                        <th>Header 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                    <tr>
                        <td><h2>Value 1</h2></td>
                        <td>Value 2</td>
                        <td>Value 3</td>
                    </tr>
                </tbody>
            </table>
        </div>
    \`;
}`,...(n=(a=t.parameters)==null?void 0:a.docs)==null?void 0:n.source}}};const h=["Template"];export{t as Template,h as __namedExportsOrder,o as default};