[heuristic-table-plugin]table-row/collum styling

xbot13 commented 3 years ago

Oath

I swear that I have completed these tasks before submitting:

[x] I have read the README
[x] I have checked that the feature request has not been reported yet
[x] I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin

Decision table

[x] The change I am requesting is not concerning performance
[x] The change I am requesting is not concerning code style, compliance with official guidelines and recommendations, third-party deprecations, refactoring or development tooling

Feature

Summary:

2 Props for injecting styling for row and/or collum of the table. As tagsStyles: { tr: {}} has no effect on style.

Idea:

2 new Props for TableRenderer, wich receive viewStyleProps for styling the TableFlexRowContainer/TableFlexCollumContainer respectively. This is especially usefull for styles like shadows that have to apply to the container.

example prop:

styleTableFlexRowContainer = {{
marginBottom: 5,
elevation: 15,
shadowColor: "rgb(0,0,0)",
shadowOffset: { width: 0, height: 12 },
shadowOpacity: 0.12,
shadowRadius: 24,
}}

example output:

Table-Light

jsamr commented 3 years ago

@xbot13 Certainly an interesting feature, but not as easy as it might seem.

Styling rows

Because of rowspan attribute support, there might be virtual rows encompassing nested rows. In the example below, we have one root virtual row (in red) and 3 nested rows (in green).

rowspan

An other issue is width computation. Each column width is computed through inspecting the content. If one would add padding to rows, this should be taken into account during width computation, while also taking into account virtualization.

One solution could be to only style the top-level virtual row, and extract any box model style for width computation. We might also want to prevent usage of specific styles such as horizontal margins, (min,max)width and (min, max)height...

Styling columns

That looks pretty hard since "column containers" are nested in rows.

Workaround?

You might be able to reach the same visual effect by styling individual cells conditionally. See how to achieve this here..

I'm totally open to PRs regarding this feature, but I don't have the bandwidth right now to implement this!

xbot13 commented 3 years ago

First of all thanks for the quick response! I appreciate the library and your work.

Honestly I did not think about the rowspan at all. It really makes it a lot harder.

But I will definitely have a go at the workaround. And in case someone faces a similar problem, I will post the result here.

Can't wait for the stable release!

jsamr commented 3 years ago

@xbot13 Thank you so much for your feedback. Looking forwards to your findings!

jsamr commented 3 years ago

@xbot13 An alternative would be to export two components / split this lib in two, with a lot of the shared logic packed into a third lib (it's a monorepo, so easy to do). And one of these would not support cell spanning but allow line styling. But it's quite an endeavor and I'm not going to dive into it unless for a paid freelance gig! However, I'm still open to PRs.

native-html / plugins