#895 - Improve table used on the /settings/api page

[rupin90]

Here is the behavior of the Table on different screen sizes. Finally was able to lay out the CSS. Somehow it wasn't as straight forward as I thought.
Leveraged NPM package - https://github.com/coston/react-super-responsive-table

Remaining Items:-

• - border and background CSS for the table rows
• - Any feedback

localhost_3000_settings_api.1.mp4

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
omnivore-demo	✅ Ready (Inspect)	Visit Preview	Jul 22, 2022 at 2:31PM (UTC)
omnivore-prod	✅ Ready (Inspect)	Visit Preview	Jul 22, 2022 at 2:31PM (UTC)

[jacksonh]

I think this is just starting out, right? I notice that when scaling the table down the headers don't collapse correctly:

https://www.loom.com/share/e796b6f5aae444ec9aae7b736e4d5d76

[rupin90]

Sorry, this is still in progress. I was just testing this out if this is a good one to work on.

@jacksonh - When you said that headers don't collapse, you mean - we don't want to show headers at all on small screens?
I thought we want to show headers 😓 .

[jacksonh]

@rupin90 oh sorry i mean they dont move with the table, we do want to show them

[jacksonh]

Hey @rupin90 I noticed two things:

1. It looks like we should import TableR instead of table. Type error: '"../../components/elements/Table"' has no exported member named 'Table'. Did you mean 'TableR'?

2. For some reason the z-index or something is higher with the table than the modals. When I open the modal all the headers of the table appear on top of the modal.

[rupin90]

Hey @rupin90 I noticed two things:

1. It looks like we should import TableR instead of table. Type error: '"../../components/elements/Table"' has no exported member named 'Table'. Did you mean 'TableR'?
2. For some reason the z-index or something is higher with the table than the modals. When I open the modal all the headers of the table appear on top of the modal.

Thank you, wil look into it tonight 🙏

[rupin90]

I have updated the name to TableNew, I can update to any other name if you have any suggestions. This is simply to avoid conflict with the library. It is working fine.

Z-index issue is fixed now. Modal didn't have any z-index so I just gave it to Modal since that would be always be the top view if open.

[rupin90]

Also I have tried different ways to customize the layout of the table - it has been very tricky so I have asked the community on how to customize the look and feel for the table - coston/react-super-responsive-table#382

The css prop/attribute does not work on these elements. :(.

I also tried the typical way adding a className but the output is like
<div class=[object object]>........ </div>

Not sure if this was faced before in our codebase.

CC: @jacksonh @satindar

[rupin90]

Hey @rupin90 this is really good.

I just pushed a commit to show how to style these imported elements, i also renamed the import just so we could use Table elsewhere.

with stitches we use this stytled function to make a component stylable. It also works on strings like styled('br', { .. a bunch of css. You can add styling in that styled call, or any component that you've made styled, then you can use the css attribute.

Aah nice, Thank you 🙏🏽 . Will do it just now.

[rupin90]

👏🏽 Cool!

[rupin90]

Thank you

[rupin90]

@jacksonh - Thank you, this is PR ready

[jacksonh]

Hey @rupin90 one thing I notice is in small there's a black outline we don't need:

[rupin90]

Hey @rupin90 one thing I notice is in small there's a black outline we don't need:

You mean the black border around the table? okay I can remove that.

[rupin90]

Hey @jacksonh - how is this?

[jacksonh]

This looks great, thanks. I'm going to merge it now.