Add `CSS` themes for `HtmlTable`

[zhiburt]

Currently we only provide a raw HTML <table>.

The idea is that we will able to supply custom CSS for tables. The CSS can match Styles.

https://github.com/zhiburt/tabled/tree/master/table_to_html

[leon3s]

Hey how would you like to implement this ?

I mean how the api should look like ?

Also i think it's better to add a class name instead of an ID or maybe have both ? We can target odd or even with a css class and even a specific number.

[zhiburt]

The idea

So we have this table,

    let mut table = Table::from_iter(&data);
    table.with(Rows::first().modify().with(Alignment::center()));

Which outputs

<table id="tabled-table" border="1">
    <tr id="tabled-table-0">
        <td id="tabled-table-0-0" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;" style="text-align: center;">
            <p> name </p>
        </td>
        <td id="tabled-table-0-1" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;" style="text-align: center;">
            <p> based_on </p>
        </td>
        <td id="tabled-table-0-2" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;" style="text-align: center;">
            <p> is_active </p>
        </td>
    </tr>
    <tr id="tabled-table-1">
        <td id="tabled-table-1-0" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> Debian </p>
        </td>
        <td id="tabled-table-1-1" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
        </td>
        <td id="tabled-table-1-2" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> true </p>
        </td>
    </tr>
    <tr id="tabled-table-2">
        <td id="tabled-table-2-0" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> Arch </p>
        </td>
        <td id="tabled-table-2-1" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
        </td>
        <td id="tabled-table-2-2" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> true </p>
        </td>
    </tr>
    <tr id="tabled-table-3">
        <td id="tabled-table-3-0" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> Manjaro </p>
        </td>
        <td id="tabled-table-3-1" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> Arch </p>
        </td>
        <td id="tabled-table-3-2" style="padding-top: 0rem; padding-bottom: 0rem; padding-left: 1rem; padding-right: 1rem;">
            <p> true </p>
        </td>
    </tr>
</table>

But if we set a table Style we will not see any differences.

    let mut table = Table::from_iter(&data);
    table.with(Style::modern());

The idea is to add a support for the Styles (it's basically a table theme). You can find all default themes here https://github.com/zhiburt/tabled#themes.

I believe it's possible to cover all the avaiable themes using CSS (though not an expert in it).

About the implementation we could put it right into an html. But I think we could provide a get_css() method which would output all CSS is nessary. (in such case we could move the style for padding etc in the CSS as well).

Thoughts

Allthough default themes is something we probably shall support.

I'd say it would be interested to create a list of new themes for tables. Very simple ones but still.

https://codepen.io/lukepeters/pen/JjoVWd https://codepen.io/florantara/pen/dROvdb

Summary

So what's need to be done.

1. Prepare some CSS to set a theme
2. Add a method to compose necessary CSS

---

Also i think it's better to add a class name instead of an ID or maybe have both ?

Yes we could add some classes for td, tr.

I was thinking for CSS purposes we can reach them via #tabled-table tr, #tabled-table tr td etc.

[zhiburt]

According to default themes;

Ideally it would need to create not pre built themes but 1 way to construct a custom theme using chars. So all customization would be also possible.

Maybe something like this could be used to set a char instead of border. https://css-tricks.com/how-to-add-text-in-borders-using-basic-html-elements/

[zhiburt]

Just want to add that;

Creating a few custom themes would be an easier thing to do. So maybe it's better to start there.

[leon3s]

Thanks for the deep details. I'll give it a try if you don't mind!