Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for Table columns & headers #592

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

wustep
Copy link
Contributor

@wustep wustep commented Nov 25, 2024

Description

Right now, react-notion-x assumes that the first row is always the header, but in Notion you can customize either:

  • no header at all
  • 1st row is header
  • 1st column is header
  • 1st row and first column are headers

This adds support for these, removing the default first-row-as-header.

Notion Test Page ID

https://www.notion.so/wustep/Tables-1495cb08cf2c804f977af6108cbd4fc8

before

CleanShot 2024-11-25 at 15 37 53@2x

localhost w/ changes vs notion prod

CleanShot 2024-11-25 at 15 33 31@2x

Copy link

vercel bot commented Nov 25, 2024

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

Name Status Preview Updated (UTC)
react-notion-x ✅ Ready (Inspect) Visit Preview Nov 25, 2024 8:37pm
react-notion-x-minimal-demo ✅ Ready (Inspect) Visit Preview Nov 25, 2024 8:37pm

@@ -13,6 +13,8 @@
--fg-color-7: rgba(55, 53, 47, 0.5);
--fg-color-icon: var(--fg-color);

--divider: rgb(233, 233, 231);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This new divider var is introduced because..

  1. the color was previously wrong and too faint. this color is lifted directly from notion
  2. If you use a color with an alpha, this leads to stacking for both row + column color configs, or adjusting based on background color (e.g. in a callout)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant