Make table visualization header fixed #5103

gaecoli · 2020-08-13T09:43:23Z

What type of PR is this? (check all applicable)

Feature

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

gaecoli · 2020-08-13T09:44:24Z

If you want to add this feature to query page, you just add this css to query page.

gabrieldutra

Thanks for your contribution @yankeeguyu 😁, I synced your branch with master so we can check it in our preview environment and moved the styling into a new className. I may make one more adjustment into the border before merging this.

gaecoli · 2020-08-15T03:05:48Z

Ok, thanks, but i found the table header is transparent, do you have some idea to change it?
Like this:

I know this is a hover style, but i change it, it didn't work. If you have free time, please reply me, thanks a lot!

gaecoli · 2020-08-15T03:16:55Z

And another question, this feature can be add in query page? I can't find query style. Thank you!

gaecoli · 2020-08-15T07:36:04Z

Ok, thanks, but i found the table header is transparent, do you have some idea to change it?
Like this:

I know this is a hover style, but i change it, it didn't work. If you have free time, please reply me, thanks a lot!

This solved by backgroud: #fafafa !important, it will override element.style.

gaecoli

Please add this.

gaecoli · 2020-08-15T10:10:09Z

viz-lib/src/visualizations/table/renderer.less

+          left: 0;
+          top: 0;
+          border-top: hidden;
+          background: #fafafa !important;


review this code, if didn't add !important, the table header will show this:

It will be hover override.

NP, we can keep the !important, I was actually gonna ask you the reason for both that and the z-index.

Haha...your NP means Chinese good? Thanks! At first i added z-index because of my wrong idea, now i want to correct this. I didn't test all feature, it's my fault.

Sorry, NP = No Problems.

Don't worry, I already removed the z-index. Considering this is something we wanted for quite a long time, I'll just try to refine the border myself tomorrow (it has a 1 px border that doesn't follow the sticky) and after some more tests it should be ready to go 🙂.

Sorry, NP = No Problems.
Don't worry, I already removed the z-index. Considering this is something we wanted for quite a long time, I'll just try to refine the border myself tomorrow (it has a 1 px border that doesn't follow the sticky) and after some more tests it should be ready to go 🙂.

Ok, if you perfect this feature, tell me, i want to add in my online redash. Thank you.

gabrieldutra · 2020-08-15T14:18:44Z

And another question, this feature can be add in query page? I can't find query style. Thank you!

It should be working in the query page too, as that styling is applied to both pages

gabrieldutra · 2020-08-15T14:20:55Z

But for the query page it seems to only work for the desktop version, which has a fixed area for the visualization as well as the Dashboard version

gabrieldutra · 2020-08-16T02:05:59Z

I install Redash's version is 8.0.0 by npm and python celery, this version has another way to add this style to query page?

We had a big restyling in the Query Pages after v9-beta, so it's probably the reason it behaves differently here.

gaecoli · 2020-08-16T03:56:36Z

I install Redash's version is 8.0.0 by npm and python celery, this version has another way to add this style to query page?

We had a big restyling in the Query Pages after v9-beta, so it's probably the reason it behaves differently here.

Ok, i knew it.

viz-lib/src/visualizations/table/renderer.less

gaecoli

viewed.

viz-lib/src/visualizations/table/renderer.less

Thanks, this change is good to me. Co-authored-by: Gabriel Dutra <nesk.frz@gmail.com>

gaecoli · 2020-08-17T04:23:23Z

Thanks @gabrieldutra , it's a very pleasant PR.

arikfr · 2020-08-17T06:56:35Z

@gabrieldutra will this be compatible with Ant v4?

arikfr

From a product perspective this looks good. Thank you, @yankeeguyu !

@gabrieldutra @kravets-levko up to you to decide when to merge based on code review.

gaecoli · 2020-08-17T06:59:30Z

From a product perspective this looks good. Thank you, @yankeeguyu !

@gabrieldutra @kravets-levko up to you to decide when to merge based on code review.

Thank you. My honor.

gaecoli · 2020-08-17T07:30:38Z

From a product perspective this looks good. Thank you, @yankeeguyu !

@gabrieldutra @kravets-levko up to you to decide when to merge based on code review.

At last, if this feature adds into query page, it will be perfect!

gabrieldutra · 2020-08-17T08:00:50Z

@arikfr for me this is good to go, I've already made all the updates I wanted 🙂. As for Antd v4, I've just tested, it works, I might need to tweak class names, but will sync after merge.

Another thing to be handled is the Search feature:

But I can do this one in a follow up PR, or in the Antd v4 one (I think it's easier as I moved the Search to above the header)

gabrieldutra · 2020-08-17T12:29:31Z

Merged, thank you very much @yankeeguyu 🎉.

Also, consider upgrading your Redash version, it seems you already have a couple of reasons to do that :)

gaecoli · 2020-08-17T15:03:47Z

Merged, thank you very much @yankeeguyu 🎉.

Also, consider upgrading your Redash version, it seems you already have a couple of reasons to do that :)

Ok, i will consider it.

gaecoli · 2020-09-03T04:29:29Z

@arikfr for me this is good to go, I've already made all the updates I wanted 🙂. As for Antd v4, I've just tested, it works, I might need to tweak class names, but will sync after merge.

Another thing to be handled is the Search feature:

But I can do this one in a follow up PR, or in the Antd v4 one (I think it's easier as I moved the Search to above the header)

Hi @gabrieldutra , you moved Seach to above header? If you did, i want to use your PR, thanks!

gabrieldutra · 2020-09-03T17:27:37Z

@yankeeguyu you can check f53ac0d, but adding a z-index to the table header should fix your problem too.

gaecoli · 2020-09-04T02:00:08Z

@yankeeguyu you can check f53ac0d, but adding a z-index to the table header should fix your problem too.

Thank you @gabrieldutra . I solved it.

* add lock table header * Move styling to a new class * Update renderer.less * Move class to table and fix top border * Update renderer.less * Update viz-lib/src/visualizations/table/renderer.less Thanks, this change is good to me. Co-authored-by: Gabriel Dutra <nesk.frz@gmail.com> Co-authored-by: Gabriel Dutra <nesk.frz@gmail.com>

add lock table header

72252b8

kravets-levko added Frontend Visualizations Visualizations: Table labels Aug 13, 2020

Merge branch 'master'

a568ffb

gabrieldutra self-requested a review August 14, 2020 15:21

Move styling to a new class

f66a961

gabrieldutra reviewed Aug 14, 2020

View reviewed changes

Update renderer.less

bca67f4

gaecoli commented Aug 15, 2020

View reviewed changes

Move class to table and fix top border

ab24c3c

gaecoli commented Aug 17, 2020

View reviewed changes

viz-lib/src/visualizations/table/renderer.less Outdated Show resolved Hide resolved

Update renderer.less

ade4424

gaecoli commented Aug 17, 2020

View reviewed changes

gabrieldutra reviewed Aug 17, 2020

View reviewed changes

viz-lib/src/visualizations/table/renderer.less Outdated Show resolved Hide resolved

Update viz-lib/src/visualizations/table/renderer.less

1c5864f

Thanks, this change is good to me. Co-authored-by: Gabriel Dutra <nesk.frz@gmail.com>

arikfr requested a review from kravets-levko August 17, 2020 06:48

arikfr approved these changes Aug 17, 2020

View reviewed changes

gabrieldutra approved these changes Aug 17, 2020

View reviewed changes

gabrieldutra changed the title ~~add lock table header in dashboard page~~ Make table visualization header fixed Aug 17, 2020

gabrieldutra merged commit 83c6a6b into getredash:master Aug 17, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make table visualization header fixed #5103

Make table visualization header fixed #5103

gaecoli commented Aug 13, 2020 •

edited by kravets-levko

gaecoli commented Aug 13, 2020

gabrieldutra left a comment

gaecoli commented Aug 15, 2020 •

edited

gaecoli commented Aug 15, 2020

gaecoli commented Aug 15, 2020

gaecoli left a comment

gaecoli Aug 15, 2020

gabrieldutra Aug 15, 2020 •

edited

gaecoli Aug 15, 2020

gabrieldutra Aug 16, 2020

gaecoli Aug 17, 2020

gabrieldutra commented Aug 15, 2020 •

edited

gabrieldutra commented Aug 15, 2020

gabrieldutra commented Aug 16, 2020 •

edited

gaecoli commented Aug 16, 2020 •

edited

gaecoli left a comment

gaecoli commented Aug 17, 2020

arikfr commented Aug 17, 2020

arikfr left a comment

gaecoli commented Aug 17, 2020

gaecoli commented Aug 17, 2020

gabrieldutra commented Aug 17, 2020

gabrieldutra commented Aug 17, 2020

gaecoli commented Aug 17, 2020

gaecoli commented Sep 3, 2020

gabrieldutra commented Sep 3, 2020

gaecoli commented Sep 4, 2020

Make table visualization header fixed #5103

Make table visualization header fixed #5103

Conversation

gaecoli commented Aug 13, 2020 • edited by kravets-levko

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

gaecoli commented Aug 13, 2020

gabrieldutra left a comment

Choose a reason for hiding this comment

gaecoli commented Aug 15, 2020 • edited

gaecoli commented Aug 15, 2020

gaecoli commented Aug 15, 2020

gaecoli left a comment

Choose a reason for hiding this comment

gaecoli Aug 15, 2020

Choose a reason for hiding this comment

gabrieldutra Aug 15, 2020 • edited

Choose a reason for hiding this comment

gaecoli Aug 15, 2020

Choose a reason for hiding this comment

gabrieldutra Aug 16, 2020

Choose a reason for hiding this comment

gaecoli Aug 17, 2020

Choose a reason for hiding this comment

gabrieldutra commented Aug 15, 2020 • edited

gabrieldutra commented Aug 15, 2020

gabrieldutra commented Aug 16, 2020 • edited

gaecoli commented Aug 16, 2020 • edited

gaecoli left a comment

Choose a reason for hiding this comment

gaecoli commented Aug 17, 2020

arikfr commented Aug 17, 2020

arikfr left a comment

Choose a reason for hiding this comment

gaecoli commented Aug 17, 2020

gaecoli commented Aug 17, 2020

gabrieldutra commented Aug 17, 2020

gabrieldutra commented Aug 17, 2020

gaecoli commented Aug 17, 2020

gaecoli commented Sep 3, 2020

gabrieldutra commented Sep 3, 2020

gaecoli commented Sep 4, 2020

gaecoli commented Aug 13, 2020 •

edited by kravets-levko

gaecoli commented Aug 15, 2020 •

edited

gabrieldutra Aug 15, 2020 •

edited

gabrieldutra commented Aug 15, 2020 •

edited

gabrieldutra commented Aug 16, 2020 •

edited

gaecoli commented Aug 16, 2020 •

edited