Components style

[vincjo]

#67 #36

If I remove all styles, tables look like:

Really not sure if this allows components to be styled with classes or :global()

In the previous (old) version, I implemented a system to make the style optional. https://vincjo.fr/svelte-simple-datatables/#/demo/css This had the effect of adding a ton of code and accidental complexity

[DougInAMug]

I wonder if it makes sense to hold off working on this til Svelte 5 is released?

[vincjo]

Svelte 5 / Runes support will be a major version upgrade for S-S-D. Until then, whatever the developments, there's no planned breaking changes

[yayza]

What about removing the styling and creating their equivalents in tailwind. Then allowing the use of $$props.class or $$props.style to override the defaults, eg:

<script lang="ts">
    import type { DataHandler, Row } from "@vincjo/datatables";

    type T = $$Generic<Row>;

    export let handler: DataHandler<T>;
    let value = "";

    handler.on("clearSearch", () => (value = ""));

    let defaultStyle = `border border-gray-300 rounded outline-none leading-6 m-0 h-6 w-2/5 max-w-[176px]
                        min-w-[96px] transition-all duration-100 focus:border-gray-400 placeholder-gray-400`;

    let useDefaultStyle = !($$props.class || $$props.style);
</script>

<input
    class={useDefaultStyle ? defaultStyle : $$props.class}
    style={$$props.style}
    bind:value
    placeholder={handler.i18n.search}
    spellcheck="false"
    on:input={() => handler.search(value)}
/>

This would keep the current styles on svelte-simple-datatables as is for those who just want a quick presentable table and don't want to have to worry about styling, would allow those who want to use tailwind to override the defaults, and those who want to use to CSS to pass an inline style tag instead of using :global. It'll also prevent having to copy the components and we can just use the library directly.

[DougInAMug]

... this would introduce tailwind as a dependency though. Why not add default styling with vanilla CSS that can be overwritten?

[vincjo]

Thank you for your feedbacks which i'm taking into account for the next version.

At the moment, my feeling is that the <Datatable> component is pretty complex and must be usable everywhere without any opinion about style. Since the <table> markup is not part of the component, it seems possible without much difficulty.

The other components (RowCount, Pagination, Search etc.) are just basic and easy to craft. The main problem for them is that they have lots of embed markup such as buttons, text, svg, select/option etc., which makes their customization non-trivial. That said, they still have their place in the lib to provide simple templates and to facilitate the "Hello World!".

So I thought i would propose a basic option for the Datatable, integrating the search bar, row counting, pagination buttons etc. as a starting point, like this:

<Datatable default {handler}>
     <table>
        [...]
    </table>
</Datatable>

...And more specific options to integrate custom header and footer:

<Datatable {handler} header={MyHeaderComponent} footer={MyFooterComponent}>
     <table>
        [...]
    </table>
</Datatable>

These components passed as parameters will automatically inherit handler instance, and other useful variables (HTMLElement, table size...).

Finally, it might be relevant to test the integration of S-S-D into a third-party component library in order to be able to provide ready-to-use templates compatible with Tailwind.

[robertompf]

Finally, it might be relevant to test the integration of S-S-D into a third-party component library in order to be able to provide ready-to-use templates compatible with Tailwind.

I made few tests for my new project and decided to use Datatable and just stumble about Tailwind with the datatable, i´m using skeleton.dev which is all Tailwind based. Will be awesome!

[kmalloy24]

@vincjo wasn't sure where to put this, but I'm working with the Skeleton UI team to write an integration guide for the two libraries. I setup a demo at this link 👇

https://simple-datatables-skeleton.vercel.app/

Let me know if there is anything I can do to help on the SSD side!

[vincjo]

It looks really great :raised_hands:

I'd like to add a link from the SSD home page.

Can I link back to your github repo for now? I don't realize the progress

[kmalloy24]

yeah of course!

I just submitted a draft PR to the Skeleton team for their docs, you can follow the status here,

https://github.com/skeletonlabs/skeleton/pull/2443

[riziles]

@kmalloy24 , this looks amazing. FYI: I get a 404 for the diagram under "3. Add Accessory Components".

[riziles]

... looks like the Skeleton team has almost no images hosted on Vercel. They appear to be hosted on GitHub: https://github.com/kmalloy24/skeleton/blob/575992244c01b6d1f524ef17e3ee155a13db8eda/sites/skeleton.dev/src/routes/(inner)/docs/tokens/%2Bpage.svelte#L133

Apparently this is a common trick? https://haacked.com/archive/2013/12/02/dr-jekyll-and-mr-haack/#dsq-1148987401

[kmalloy24]

ahhh that makes sense, thanks! I wasn't sure how to handle images.

[riziles]

@vincjo , fyi: https://github.com/skeletonlabs/skeleton/pull/2443#issuecomment-1915202337

[kmalloy24]

@vincjo official Skeleton guide is up https://www.skeleton.dev/docs/ssd! It includes a starter project similar to the previous example project. I'd suggest linking to this instead when you get the chance. I'm going to depreciate the old repo on my account so that there is one source of truth out there.

[vincjo]

Well done! Thank you, I updated the links 👍