# Table

[component-header:sl-table]

Tables are used to organize data in rows and columns.

## Examples

```html preview
<sl-table id="table_1" class="mb-3">
    <sl-column>Name</sl-column>
    <sl-column>Role</sl-column>
    <sl-column>Amount</sl-column>
    <sl-column align="right">Enabled</sl-column>
    <sl-row>
        <sl-cell><sl-label color="blue" weight="semibold">John Doe</sl-label></sl-cell>
        <sl-cell>Admin</sl-cell>
        <sl-cell  >250,00</sl-cell>
        <sl-cell >true</sl-cell>
    </sl-row>
    <sl-row>
        <sl-cell><sl-label color="blue" weight="semibold">Jane Doe</sl-label></sl-cell>
        <sl-cell>Admin</sl-cell>
        <sl-cell id="test-string">John Doe</sl-label></sl-cell>
        <sl-cell id="test-bool">true</sl-cell>
    </sl-row>
    <sl-row>
        <sl-cell><sl-label color="blue" weight="semibold">Don Joe</sl-label></sl-cell>
        <sl-cell>Admin</sl-cell>
        <sl-cell nowrap>Johnsadasdasdasdasdasdasdsadadassdfdsfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsasdasdasdadadad</sl-cell>
        <sl-cell >false</sl-cell>
    </sl-row>
</sl-table>
<sl-button id="btn_1" class="mr-2">Add 1 row</sl-button><sl-button id="btn_2" class="mr-2">Add 10 rows</sl-button><sl-button id="btn_3" class="mr-2">Add 100 rows</sl-button>
<script>
    const table = document.getElementById('table_1');
    const btn1 = document.getElementById('btn_1');
    const btn2 = document.getElementById('btn_2');
    const btn3 = document.getElementById('btn_3');

    function addRows(rows) {
        for(let i=0;i<rows;i++){
            const row = document.createElement('sl-row');
            const cell1 = document.createElement('sl-cell');
            const cell2 = document.createElement('sl-cell');
            const cell3 = document.createElement('sl-cell');
            const cell4 = document.createElement('sl-cell');
            cell1.innerText = 'New user';
            cell2.innerText = 'Admin';
            cell3. = true;
            cell4.setAttribute('type', 'boolean');
            cell4.innerText = 'true';
            cell4. = true;
            row.appendChild(cell1);
            row.appendChild(cell2);
            row.appendChild(cell3);
            row.appendChild(cell4);
            table.appendChild(row);
        }
    }

    btn1.addEventListener('click', () => addRows(1));
    btn2.addEventListener('click', () => addRows(10));
    btn3.addEventListener('click', () => addRows(100));
    

    var el = document.getElementById('test-string');
    el.addEventListener('valueChange', (ev) => {
        console.log(ev.detail);
        console.log(el.value);
    })

    var el2 = document.getElementById('test-bool');
    el2.addEventListener('valueChange', (ev) => {
        console.log(ev.detail);
        console.log(el2.value);
    })
</script>

```

### Use markup in columns
```html preview
<sl-table>
    <sl-column><div>Name&nbsp;->&nbsp;<sl-select size="small" style="display:inline-block">
        <sl-menu-item>Name</sl-menu-item>
    </sl-select></div></sl-column>
    <sl-column><div>Street&nbsp;->&nbsp;<sl-select size="small" style="display:inline-block">
        <sl-menu-item>Address</sl-menu-item>
    </sl-select></div></sl-column>
    <sl-column><div>City&nbsp;->&nbsp;<sl-select size="small" style="display:inline-block">
        <sl-menu-item>City</sl-menu-item>
    </sl-select></div></sl-column>
    <sl-row>
        <sl-cell>John Doe</sl-cell>
        <sl-cell>Jørgensgade 23</sl-cell>
        <sl-cell>Aalborg</sl-cell>
    </sl-row>
    <sl-row>
        <sl-cell>Jane Doe</sl-cell>
        <sl-cell>Admin</sl-cell>
        <sl-cell>John Doe</sl-cell>
    </sl-row>
    <sl-row>
        <sl-cell>Don Joe</sl-cell>
        <sl-cell>Admin</sl-cell>
        <sl-cell>John Doe</sl-cell>
    </sl-row>
</sl-table>
```

### Enable scrolling
<sl-table scroll-behaviour="horizontal">
    <sl-column>Name</sl-column>
    <sl-column>Role</sl-column>
    <sl-column>Street</sl-column>
    <sl-column>Postal</sl-column>
    <sl-column>City</sl-column>
    <sl-column>Country</sl-column>
    <sl-column>Amount</sl-column>
    <sl-column align="right">Enabled</sl-column>
    <sl-row>
        <sl-cell  >John Doe</sl-cell>
        <sl-cell  >Admin</sl-cell>
        <sl-cell  >Downing Street 23432</sl-cell>
        <sl-cell  >13123</sl-cell>
        <sl-cell  >London</sl-cell>
        <sl-cell  >Great Britain</sl-cell>
        <sl-cell  >250,00</sl-cell>
        <sl-cell >true</sl-cell>
    </sl-row>
    <sl-row>
        <sl-cell  >Jane Doe</sl-cell>
        <sl-cell  >Admin</sl-cell>
        <sl-cell  >Downing Street 23432</sl-cell>
        <sl-cell  >13123</sl-cell>
        <sl-cell  >London</sl-cell>
        <sl-cell  >Great Britain</sl-cell>
        <sl-cell   id="test-string">John Doe</sl-cell>
        <sl-cell  id="test-bool">true</sl-cell>
    </sl-row>
    <sl-row>
        <sl-cell  >Don Joe</sl-cell>
        <sl-cell  >Admin</sl-cell>
        <sl-cell  >Downing Street 23432</sl-cell>
        <sl-cell  >13123</sl-cell>
        <sl-cell  >London</sl-cell>
        <sl-cell  >Great Britain</sl-cell>
        <sl-cell  >John Doe</sl-cell>
        <sl-cell >false</sl-cell>
    </sl-row>
</sl-table>

[component-metadata:sl-table]