Skip to content

Fix(sistent): Added Table component documentation#7737

Merged
Rajesh-Nagarajan-11 merged 12 commits into
layer5io:masterfrom
kanishksingh23:fix/sistent-table-docs-v2
May 22, 2026
Merged

Fix(sistent): Added Table component documentation#7737
Rajesh-Nagarajan-11 merged 12 commits into
layer5io:masterfrom
kanishksingh23:fix/sistent-table-docs-v2

Conversation

@kanishksingh23
Copy link
Copy Markdown
Contributor

@kanishksingh23 kanishksingh23 commented May 16, 2026 •
edited
Loading

Description
Adds Table component documentation to the Sistent component library, including:

  • Basic Table demo
  • Sortable Table demo
  • Selectable Rows Table demo (with working checkbox selection)
  • Paginated Table demo

All demos use ResponsiveDataTable from @sistent/sistent.

This PR fixes #7607

Notes for Reviewers

  • Used useMemo for stable column/data references
  • Selectable rows wired up with rowsSelected and onRowSelectionChange
  • Added mounted state guard to fix SSR build failures
  • Generic names used in all demo data (Alice, Bob, Charlie)

This is a re-submission of PR #7692 which was closed due to git history issues
during conflict resolution. All reviewer feedback from the previous PR has been addressed.

Signed commits

  • Yes, I signed my commits.

@kanishksingh23
fix(sistent): add Table component documentation
3e70e46 
Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 16, 2026 •
edited
Loading

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-05-22 13:03 UTC

@kanishksingh23
fix(sistent): wire up selectable rows state in SelectableTableDemo
95f770c 
Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23 kanishksingh23 force-pushed the fix/sistent-table-docs-v2 branch from 7c757d5 to 95f770c Compare May 16, 2026 13:41
@kanishksingh23
Copy link
Copy Markdown
Contributor Author

kanishksingh23 commented May 17, 2026

@rishiraj38, @saurabhraghuvanshii, please have a look.

rishiraj38
rishiraj38 suggested changes May 17, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@rishiraj38 rishiraj38 left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Selectable table component is not working. Please take reference from:

UI reference:
https://playground.meshery.io/configuration/designs?view=table

Code reference:
https://github.com/meshery/meshery/blob/master/ui/components/designs/patterns/MesheryPatterns.tsx#L532

@Bhumikagarggg
Copy link
Copy Markdown
Contributor

Bhumikagarggg commented May 17, 2026

@kanishksingh23 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

@kanishksingh23
fix(sistent): remove controlled selection state, let ResponsiveDataTa…
857c6b9 
…ble handle checkboxes internally

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23 kanishksingh23 force-pushed the fix/sistent-table-docs-v2 branch from 7a88b6f to 857c6b9 Compare May 17, 2026 16:23
@kanishksingh23
Copy link
Copy Markdown
Contributor Author

kanishksingh23 commented May 17, 2026

Hey @rishiraj38, I have matched the implementation exactly to MesheryPatterns.tsx. But still, the checkboxes are not selectable. I think it's a Gatsby preview deployment issue.

@Rajesh-Nagarajan-11
Copy link
Copy Markdown
Member

Rajesh-Nagarajan-11 commented May 19, 2026

Waiting for preview....

@kanishksingh23
Copy link
Copy Markdown
Contributor Author

kanishksingh23 commented May 19, 2026

Screenshot 2026-05-19 at 10 54 19 PM Screenshot 2026-05-19 at 10 54 43 PM Screenshot 2026-05-19 at 10 51 59 PM Screenshot 2026-05-19 at 10 52 22 PM

rishiraj38
rishiraj38 reviewed May 20, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@rishiraj38 rishiraj38 left a comment

Choose a reason for hiding this comment

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

@kanishksingh23 I checked this locally as well, so it doesn’t seem to be a Gatsby deployment issue. Could you please take another look and fix it?

Screen.Recording.2026-05-20.at.9.07.42.PM.mov

@kanishksingh23
fix(sistent): use object format for table data to support enableNeste…
5b59aa7 
…dDataAccess

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23 kanishksingh23 force-pushed the fix/sistent-table-docs-v2 branch 2 times, most recently from 907bd5a to 5b59aa7 Compare May 20, 2026 17:49
@kanishksingh23
fix(sistent): remove mount guard from SelectableTableDemo, follow pop…
0769bba 
…per pattern

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23
Copy link
Copy Markdown
Contributor Author

kanishksingh23 commented May 20, 2026 •
edited
Loading

Hey @rishiraj38

I've been thoroughly debugging the checkbox selection issue. I found React hydration errors in the browser console. I also checked the compiled @sistent/sistent bundle and confirmed ResponsiveDataTable doesn't override selectableRows. I noticed that other interactive components, like Popper, use no mount guard at all. Should I follow the same pattern for ResponsiveDataTable? Also, ResponsiveDataTable is the only usage of this component in the entire Layer5 repo, so there's no existing pattern to reference. Could you share a minimal working example of SelectableTableDemo with selectableRows: "multiple" that works locally?

Also, I am currently in my end semester exams, so my responses might be a bit slow. I will get back to this as soon as I can.

@kanishksingh23
fix(sistent): fix SelectableTableDemo data format and add SSR mount g…
5ee34ca 
…uard

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23 kanishksingh23 force-pushed the fix/sistent-table-docs-v2 branch from 4b33b97 to 5ee34ca Compare May 20, 2026 19:20
@kanishksingh23
fix(sistent): add explicit row selection state for SelectableTableDemo
0809e89 
Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23
fix(sistent): use NoSsr to fix hydration errors in table demos
f9fcb9e 
Replace mounted state guard with NoSsr wrapper from @sistent/sistent
to prevent server-side rendering of ResponsiveDataTable. This fixes
React hydration errors layer5io#418 and layer5io#423 caused by MUIDataTable generating
different DOM on server vs client, which was preventing checkbox event
handlers from attaching in the SelectableTableDemo.

This follows the same pattern used in the Meshery UI codebase
(MesheryPatterns.tsx) where ResponsiveDataTable is wrapped with NoSsr.

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23
fix(sistent): use plain MUI Table+Checkbox for selectable rows demo
95040a5 
The @sistent/mui-datatables fork used by ResponsiveDataTable has a bug
where checkbox click handlers fire but don't process selection state
changes (confirmed via Event Listeners tab - handlers ARE attached but
selection doesn't toggle). This was investigated across 10+ attempts
including NoSsr, mounted guards, data format changes, and controlled
vs uncontrolled selection state - none worked.

Replace SelectableTableDemo with plain MUI Table, TableHead, TableBody,
TableRow, TableCell, and Checkbox components. This uses direct React
event handlers for selection, matching the guidance.mdx pattern of
placing a Checkbox in the first cell of each row.

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23
fix(sistent): fix select-all checkbox using onClick instead of onChange
deaea42 
The Sistent Checkbox wrapper doesn't reliably forward onChange events.
Switch to onClick and toggle based on current selection state instead
of event.target.checked for more robust behavior.

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23
fix(sistent): use onChange for select all checkbox without event depe…
2ae362f 
…ndency

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>
@kanishksingh23
Copy link
Copy Markdown
Contributor Author

kanishksingh23 commented May 21, 2026

After days of digging, it's finally working.

Screenshot 2026-05-21 at 5 04 05 PM

@kanishksingh23 kanishksingh23 requested a review from rishiraj38 May 21, 2026 11:37
@kanishksingh23
Copy link
Copy Markdown
Contributor Author

kanishksingh23 commented May 21, 2026

@rishiraj38 The checkboxes are now working! Here is a quick summary of the debugging journey and a few observations I made along the way that might be helpful.

Observation 1: ResponsiveDataTable Checkbox Interaction
When using ResponsiveDataTable with selectableRows: "multiple", the checkboxes render but don't process clicks in this Gatsby/MDX environment.
I verified in DevTools that the event handlers (click, change, etc.) are attached correctly.
I tried multiple approaches (, mounted guards, controlled state, etc.), but the internal state machine inside @sistent/mui-datatables didn't process the selections.

FIX: I replaced it with plain MUI Table + Checkbox components just for the Selectable Rows demo so the docs have a working example. Direct React onClick state management works perfectly here.

Observation 2: Checkbox Wrapper Event Handling
While building the plain MUI table workaround, I noticed that the @sistent/sistent Checkbox wrapper doesn't reliably forward the event.target.checked property during onChange events (which is normally how a "Select All" header checkbox is built).

FIX: I bypassed the event object entirely. The onChange handler now determines the next state purely based on our current React state (selected.length === data.length), which works flawlessly.

@saurabhraghuvanshii
Copy link
Copy Markdown
Member

saurabhraghuvanshii commented May 22, 2026

@rishiraj38 review please

rishiraj38
rishiraj38 approved these changes May 22, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@rishiraj38 rishiraj38 left a comment

Choose a reason for hiding this comment

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

Looks Good to me

@Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 merged commit f033c19 into layer5io:master May 22, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 Rajesh-Nagarajan-11 approved these changes

@saurabhraghuvanshii saurabhraghuvanshii Awaiting requested review from saurabhraghuvanshii

+1 more reviewer

@rishiraj38 rishiraj38 rishiraj38 approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Sistent] Add Table component to the Sistent components page

5 participants

@kanishksingh23 @Bhumikagarggg @Rajesh-Nagarajan-11 @saurabhraghuvanshii @rishiraj38