Feat: new expandable table component #354

HarshMN2345 · 2025-08-15T12:14:04Z

What does this PR do?

Introduces a new ExpandableTable component

Test Plan

Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

Have you read the Contributing Guidelines on issues?

yes

changeset-bot · 2025-08-15T12:14:08Z

⚠️ No Changeset found

Latest commit: f4da718

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@appwrite.io/pink" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-icons" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/kitchensink" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/fonts" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-design" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

appwrite · 2025-08-15T12:14:08Z

Pink

Project ID: 688b850d003678e26eb4

Sites (1)

Site	Status	Logs	Preview	QR
pink `688b852d002905ceebe1`	Ready	View Logs	Preview URL

Note

Appwrite has a Discord community with over 16 000 members.

coolify-appwrite-org · 2025-08-15T12:14:09Z

The preview deployment is ready. 🟢

Open Preview | Open Build Logs

Last updated at: 2025-08-17 19:13:58 CET

github-actions · 2025-08-15T12:15:21Z

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

github-actions · 2025-08-15T12:17:02Z

🚀 Previews available on pkg.vc!

📦 `@appwrite.io/pink-svelte`

Install @appwrite.io/pink-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@f4da718

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte~feat-SER-205-new-expansion-table-component
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte!354

📦 `@appwrite.io/pink-icons-svelte`

Install @appwrite.io/pink-icons-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@f4da718

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte~feat-SER-205-new-expansion-table-component
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte!354

v2/pink-sb/src/lib/Accordion.svelte

v2/pink-sb/src/lib/ExpandableTable.svelte

github-actions · 2025-08-17T18:56:11Z

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

github-actions · 2025-08-17T18:56:23Z

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

github-actions · 2025-08-19T18:44:31Z

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte

v2/pink-sb/src/lib/expandable-table/types.ts

ItzNotABug · 2025-08-28T07:44:36Z

v2/pink-sb/src/lib/expandable-table/types.ts

+    columns: ExpandableTableColumn[];
+    gridTemplateColumns: string;
+    childGridTemplate: string;
+    alignment: (align?: 'left' | 'center' | 'right') => string;


why do we need a function at root level?
it returns the same value of the column's align, right?

yes, but we still need to map left-> flex-start and so on to maintain alignment,so both header and child cells use a single source.
otherwise need to add like this
justify-content: {col.align === 'right' ? 'flex-end' : col.align === 'center' ? 'center' : 'flex-start'}

ItzNotABug · 2025-08-28T07:48:21Z

v2/pink-sb/src/lib/expandable-table/types.ts

+    unregister: (id: string) => void;
+    columns: ExpandableTableColumn[];
+    gridTemplateColumns: string;
+    childGridTemplate: string;


Is this for summary slot layout? If so, why do we insist it to be a grid? Does Layout.Stack not suffice with justifyContent in the slot from the user's side?

Yes, this is for the summary slot. childGridTemplate makes summary rows stay aligned with the table columns and inherit the same styling and responsiveness. With Layout.Stack we’d have to recreate all that styling manually again

v2/pink-sb/src/stories/ExpandableTable.stories.svelte

coderabbitai · 2025-08-28T13:47:24Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat-SER-205-new-expansion-table-component

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-08-28T13:49:02Z

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

ItzNotABug · 2025-08-31T11:28:37Z

v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte

+    const rowId = getContext<string>('rowId');
+
+    $: columnIndex = root.columns.findIndex((c) => c.id === column);
+    $: justify = root.alignment(root.columns[columnIndex]?.align);


we don't need the root.alignment method. see - v2/pink-sb/src/lib/table/cell/Base.svelte

ItzNotABug · 2025-08-31T11:37:43Z

v2/pink-sb/src/lib/expandable-table/row/Row.svelte

+        pointer-events: none;
+    }
+
+    :global(.child-row) {


does this expect the end user to always have a div or other element have this class? 🤔

github-actions · 2025-09-01T13:09:53Z

Uh oh! @HarshMN2345, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

HarshMN2345 requested a review from ItzNotABug August 15, 2025 12:14

ItzNotABug requested a review from TorstenDittmann August 17, 2025 06:40

ItzNotABug requested changes Aug 17, 2025

View reviewed changes

v2/pink-sb/src/lib/Accordion.svelte Outdated Show resolved Hide resolved

v2/pink-sb/src/lib/ExpandableTable.svelte Outdated Show resolved Hide resolved

HarshMN2345 changed the title ~~Feat: new expansion table component and left chevron variant of accordian~~ Feat: new expansion table component Aug 17, 2025

HarshMN2345 requested a review from ItzNotABug August 18, 2025 08:43

HarshMN2345 changed the title ~~Feat: new expansion table component~~ Feat: new expandable table component Aug 19, 2025

ItzNotABug requested changes Aug 24, 2025

View reviewed changes

v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte Outdated Show resolved Hide resolved

v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte Outdated Show resolved Hide resolved

v2/pink-sb/src/lib/expandable-table/cell/Cell.svelte Outdated Show resolved Hide resolved

HarshMN2345 requested a review from ItzNotABug August 24, 2025 11:47

ItzNotABug requested changes Aug 28, 2025

View reviewed changes

HarshMN2345 self-assigned this Aug 28, 2025

HarshMN2345 changed the base branch from next to feat-spreadsheet August 28, 2025 13:47

ItzNotABug requested changes Aug 31, 2025

View reviewed changes

HarshMN2345 requested a review from ItzNotABug August 31, 2025 13:25

HarshMN2345 force-pushed the feat-SER-205-new-expansion-table-component branch from 7582698 to 7a84c31 Compare August 31, 2025 14:20

Base automatically changed from feat-spreadsheet to next September 1, 2025 13:09

ItzNotABug added 4 commits September 8, 2025 11:13

Merge branch 'next' into feat-SER-205-new-expansion-table-component

abc3783

Merge branch 'next' into feat-SER-205-new-expansion-table-component

a02594a

Merge branch 'next' into feat-SER-205-new-expansion-table-component

780505d

Merge branch 'next' into feat-SER-205-new-expansion-table-component

6719952

ItzNotABug added 18 commits September 8, 2025 13:16

Merge branch 'next' into feat-SER-205-new-expansion-table-component

062d3ec

Merge branch 'next' into feat-SER-205-new-expansion-table-component

fb8b1ed

Merge branch 'next' into feat-SER-205-new-expansion-table-component

c088e45

Merge branch 'next' into feat-SER-205-new-expansion-table-component

1489b16

Merge branch 'next' into feat-SER-205-new-expansion-table-component

d8326d0

Merge branch 'next' into feat-SER-205-new-expansion-table-component

e1c4a38

Merge branch 'next' into feat-SER-205-new-expansion-table-component

0fefd92

Merge branch 'next' into feat-SER-205-new-expansion-table-component

952b37e

fix: dual sided resizing.

fafc942

Merge pull request #364 from appwrite/attempt-resize-fixes

aca40bd

Merge branch 'next' into feat-SER-205-new-expansion-table-component

6fd5ef1

fix: dual-sided resizing and cache issue causing wrong resize.

65e03a4

lint.

4e4e31d

update: misc.

ba96092

Merge pull request #365 from appwrite/fix-width-resize-and-swap

28b9e27

Merge branch 'next' into feat-SER-205-new-expansion-table-component

263a9e2

update: misc.

2637bd0

Merge branch 'next' into feat-SER-205-new-expansion-table-component

737010f

ItzNotABug force-pushed the next branch from 2637bd0 to 2c4b5cf Compare September 15, 2025 10:33

ItzNotABug added 3 commits September 15, 2025 16:08

Merge branch 'next' into feat-SER-205-new-expansion-table-component

00be49b

Merge branch 'next' into feat-SER-205-new-expansion-table-component

5b11372

fix: changes from next.

f4da718

Feat: new expandable table component #354

Are you sure you want to change the base?

Feat: new expandable table component #354

Uh oh!

Conversation

HarshMN2345 commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Test Plan

Related PRs and Issues

Have you read the Contributing Guidelines on issues?

Uh oh!

changeset-bot bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

appwrite bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pink

Uh oh!

coolify-appwrite-org bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 15, 2025

Uh oh!

github-actions bot commented Aug 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Previews available on pkg.vc!

📦 @appwrite.io/pink-svelte

📦 @appwrite.io/pink-icons-svelte

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 17, 2025

Uh oh!

github-actions bot commented Aug 17, 2025

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ItzNotABug Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

HarshMN2345 Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ItzNotABug Aug 28, 2025

Choose a reason for hiding this comment

Uh oh!

HarshMN2345 Aug 29, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot commented Aug 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions bot commented Aug 28, 2025

Uh oh!

ItzNotABug Aug 31, 2025

Choose a reason for hiding this comment

Uh oh!

ItzNotABug Aug 31, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 1, 2025

Uh oh!

Uh oh!

HarshMN2345 commented Aug 15, 2025 •

edited

Loading

changeset-bot bot commented Aug 15, 2025 •

edited

Loading

appwrite bot commented Aug 15, 2025 •

edited

Loading

coolify-appwrite-org bot commented Aug 15, 2025 •

edited

Loading

github-actions bot commented Aug 15, 2025 •

edited

Loading

📦 `@appwrite.io/pink-svelte`

📦 `@appwrite.io/pink-icons-svelte`

HarshMN2345 Aug 29, 2025 •

edited

Loading

coderabbitai bot commented Aug 28, 2025 •

edited

Loading