vincjo / datatables

A toolkit for creating datatable components with Svelte
https://vincjo.fr/datatables
MIT License
372 stars 15 forks source link

minor improvement: css-classes on Components #14

Closed michapixel closed 1 year ago

michapixel commented 1 year ago

eg. the Pagination Component has no class whatsoever. Would be cool if Components could be written in this way too:

<Pagination 
   class="dt_pagination"
   handler={ dataTable }  
/>

Inside of the Component it can be done in this way:

<section class="{ if $$props.class !== undefined ? $$props.class : '' }">

Don't know if this is the official way, but i found it on the webs and it was very useful for me.

michapixel commented 1 year ago

urghs the "if" will trigger an error, just delete it.

vincjo commented 1 year ago

I would recommend creating your own paging component The handler provides all pagination features :

const pages = handler.getPages({ ellipsis: true }) 
console.log($pages)

result :

[ 1, 2, 3, 4, 5, null, 24 ]

Svelte template :

{#each $pages as page}
    <button on:click={() => handler.setPage(page)}>
        {page ?? '...'}
    </button>
{/each}

Then you have complete control over styling in a minimal logic imlementation.

That being said, let me know if you still prefer that I implement a class property

michapixel commented 1 year ago

Ahhh, i just recently updated to the latest version, so i wasn't aware of that approach. That's totally fine with me. <3

vincjo commented 1 year ago

Great thx for your message :duck: :duck: