CSS Styling once again

[mapl]

I am looking for a proper way of styling all the components to my needs. This was an issue with Issue #29, but I am struggling to get this working.

It seems that there is ongoing debate in the svelte community how to pass CSS classes or whatsoever to child components. There are so many approaches with flaws etc.

I've found a very interesting and recent video - This Week in Svelte (2023 June 9) - Updates, Self-hosting SvelteKit, Passing styles to children - https://youtu.be/OG70PKD0hEU?t=2836.

My ultimate goal is to style the Datatable component from the outside by overwriting the built-in CSS attributes.

Of course, I could create my own Datatable components and regain full control over styling, but once you update the components and I would have to repeat the whole process. That would be cumbersome overall, I think.

Hoping for some support and suggestions :)

Thanks

[MattPurland]

From my point of view this library is detached from the frontend, and it's up to you to create the components to build your tables - it's an API. I understand the library includes component examples, but I was under the impression they're exactly that - examples.

Or am I wrong here?

[vincjo]

thank you @mapl for sharing resource

I'm pretty sure that it's easier and faster to create components from scratch.

imo it is way more beneficial in the long term: your css framework / icon lib will fit well, you'll be able to add features, transitions, a11y support... And you'll have less coupling to a third-party dependency.

No plan for changes inside showcase components, there is already enough with class props, responsive view, generic types... (each being dispensable, and not related to the DataHandler API)

On the other hand it may be possible to export a new sets of components from the lib, like "unstyled".

import { Datatable, Th, ThFilter } from '@vincjo/datatables/ui/unstyled'

If it can help, it is possible

[mapl]

I've got your points.

I thought I just can use import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables" and customize the styling with my own CSS styles.

After some research, I discovered the rabbit hole and saw endless discussions on this topic how to style child components.

I am wondering, how can I keep my code up to date with this library without rebuilding it from scratch in a convenient way?

[yayza]

I've got your points.

I thought I just can use import { DataHandler, Datatable, Th, ThFilter } from "@vincjo/datatables" and customize the styling with my own CSS styles.

After some research, I discovered the rabbit hole and saw endless discussions on this topic how to style child components.

I am wondering, how can I keep my code up to date with this library without rebuilding it from scratch in a convenient way?

The way I did it (using tailwind), which took very little time, was:

• copy all the components into my own folder
• remove <style> tag
• created a default style using tailwind classes
• check for $$props.class or use default

eg. Search.svelte

<script>
    export let handler;
    let value = "";

    const defaultStyle =
        "border border-gray-600 rounded outline-none p-4 h-6 bg-transparent w-44 transition-all duration-100 ease-in focus:border-gray-500 placeholder-gray-400";
</script>

<input
    placeholder="Search..."
    bind:value
    on:input={() => handler.search(value)}
    class={$$props.class ?? defaultStyle}
/>

and in my Table component I can use <Search {handler} /> or <Search {handler} class="[tailwind class list]"/>

Of course you can customize it even further, for eg. just pass a "color" prop to your default style and just use that so you don't have to rewrite the whole class list. You might not prefer this, but that's the beauty of this library. You can style your components in any way you prefer.

[vincjo]

yayza showed the most sustainable approach imo.

There seems to be no definitive answer about stylable components, we'll always face maintainability issues. Whether for lib authors or developers who use them.

@mapl, can you explain your specific need regarding the style you'd like to apply? This may help give you a more concrete answer, maybe with maintainable CSS example

[DougInAMug]

import { Datatable, Th, ThFilter } from '@vincjo/datatables/ui/unstyled'

I might be interested! Even having the default example components unstyled.

I'm new to Svelte and this toolkit. Until I found this issue, I wasn't sure if I was doing something wrong... I appreciate the direction you want to keep the project in, but I also think the example components you've made are quite nice, and I imagine they account for most use cases. Having an easier way to style them would be very convenient, and might avoid similar issues being in the future.