Feature request: svelte-select for drop-down styling.

[zadamg]

I'm thinking for the "items per page" selector, which sticks out a bit.

https://github.com/rob-balfre/svelte-select

[vincjo]

I agree RowsPerPage component is not terrible. However the lib is not intended to deal with the UI, it only provides showcase components to give an example of presentation.

If you use these components anyway, you can hide the select button by adding a rowsPerPage={false} param:

<Datatable {handler} rowsPerPage={false}>
    [...]
</Datatable>

https://vincjo.fr/datatables/examples/blocks

Otherwise you'll need to create your own Datatable and RowsPerPage components. I think it's pretty simple in terms of markup. Example for Datatable :

<header>
   <Search {handler}/>
   <RowsPerPage {handler}/>
</header>

<section class="table">
    <slot/>
</section>

<footer>
    <RowCount {handler}/>
    <Pagination {handler}/>
</footer>

<style>
    header, footer {
        height: 48px;
        display: flex;
        justify-content: space-between;
       align-items: center;
    }
</style>

[ghost]

You can actually implemented this yourself pretty easily, here's how I've done it:

RowsPerPage Components:

<script>
    export let handler;

    const rowsPerPage = handler.getRowsPerPage();
    const options = [10, 20, 50, 100];
</script>

<div class="fw-semi-bold select-anchor">
    <span>Show</span>
    <select class="fw-semi-bold" bind:value={$rowsPerPage}>
        {#each options as option}
            <option class="fw-normal" value="{option}" style="color: var(--phoenix-body-color);">{option}</option>
        {/each}
    </select>
    <span>entries</span>
</div>

Then in your page:

<TableRowsPerPage {handler} />

This is how it will looks like (minus my styling):

Hope this helps!

[vincjo]

nice one! I didn't know <select/option> was stylizable oO

thx for sharing