Fix(sistent): Added Table component documentation by kanishksingh23 · Pull Request #7692 · layer5io/layer5

kanishksingh23 · 2026-05-02T07:24:41Z

Description
Adds documentation for the Table component to the Sistent components page.

This PR fixes #7607

Changes

Added index.mdx — Overview, anatomy, variants, and accessibility guidance
Added guidance.mdx — Best practices and do's/don'ts for using the Table component
Added code.mdx — Code examples for Basic, Sortable, Selectable Rows, and Paginated tables

Notes for Reviewers
Documentation follows the same structure as the Button component.
Preview deployment will show the rendered pages at /projects/sistent/components/table.

Signed commits

Yes, I signed my commits.

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

github-actions · 2026-05-02T07:43:12Z

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7692/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

rishiraj38

Fix all these

rishiraj38 · 2026-05-02T08:06:40Z

Where is the code part ?

rishiraj38 · 2026-05-02T08:07:21Z

+- Hard-code hex colour values — always use Sistent theme tokens.
+- Rely on colour alone to convey row status; supplement with text or icons.
+
+## Row Density


Please fix this

rishiraj38 · 2026-05-02T08:07:39Z

+
+The **Table** component organizes information into rows and columns, making it easy for users to read, compare, and analyze data. Use a Table when displaying multiple records with consistent attributes such as services, users, or deployments, when users need to compare values across rows or columns, or when data needs sorting, filtering, or pagination for large data sets.
+
+## Anatomy


Fix here also

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 · 2026-05-02T08:49:59Z

@rishiraj38, I have addressed all the feedback.

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

rishiraj38 · 2026-05-02T16:18:08Z

You’ve added the code part but where’s the preview or example? Please check the other component’s code part and fix it.

@rishiraj38, I have addressed all the feedback.
Preview: https://layer5.io/pr-preview/pr-7692/projects/sistent/components/table/code

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

Bhumikagarggg · 2026-05-03T13:53:23Z

@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 🙂

rishiraj38

Could you provide a better example of paginated table code preview for your reference.

…data Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 · 2026-05-04T14:01:31Z

@rishiraj38, I have addressed your comment.

Rajesh-Nagarajan-11 · 2026-05-04T14:34:57Z

+---
+
+import { useState } from "react";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel, Paper, Checkbox, Toolbar, Typography } from "@sistent/sistent";


Instead of this please use ResponsiveDataTable which is available in sistent

Hi @Rajesh-Nagarajan-11, I have been looking into this, and while ResponsiveDataTable is in the compiled bundle for @sistent/sistent, it doesn't seem to be exported in the index.d.ts definitions. I also could not find any existing usage of it within the layer5 src directory to use as a reference. Could you point me to an example of where this is currently implemented?

@kanishksingh23 It’s extensively used in meshery.

Thank you @rishiraj38, I will look into it.

@Rajesh-Nagarajan-11, @rishiraj38, I have updated all four table demos to use ResponsiveDataTable from @sistent/sistent.

…@sistent/sistent Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

…fix SSR Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

…d check Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

…rder Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 · 2026-05-06T10:37:34Z

@saurabhraghuvanshii, please take a look.

kanishksingh23 · 2026-05-07T13:38:38Z

@Rajesh-Nagarajan-11 and @rishiraj38, gentle ping

rishiraj38

@kanishksingh23 Please don't use maintainer names use something generic and also selectable Rows table are not working

rishiraj38 · 2026-05-07T15:00:12Z

@Rajesh-Nagarajan-11 One confusion here we have used Responsive DataTables here then do we need still need this issue #7681

Rajesh-Nagarajan-11 · 2026-05-07T15:04:38Z

Yep we can close that issue @rishiraj38

…c ones Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 · 2026-05-07T15:45:00Z

@kanishksingh23 Please don't use maintainer names use something generic and also selectable Rows table are not working

@rishiraj38, I have addressed this.

fix(sistent): add Table component documentation

15bd901

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

rishiraj38 suggested changes May 2, 2026

View reviewed changes

fix(sistent): fix Table docs formatting and add ThemeWrapper CodeBlock

f8d86bd

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

fix(sistent): add missing imports to Table code.mdx

6ae4068

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 force-pushed the fix/sistent-table-docs branch from d8b8122 to 6ae4068 Compare May 2, 2026 09:32

fix(sistent): remove live JSX preview from code.mdx to fix build

a839e49

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 force-pushed the fix/sistent-table-docs branch from 9f9988f to a839e49 Compare May 2, 2026 13:33

rishiraj38 reviewed May 2, 2026

View reviewed changes

kanishksingh23 added 2 commits May 2, 2026 16:39

fix(sistent): add live preview demos to Table code.mdx

f37c07a

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

fix(sistent): remove TableFooter and TablePagination from live demo

d6a2ff2

Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

rishiraj38 requested review from Rajesh-Nagarajan-11 and saurabhraghuvanshii May 3, 2026 13:01

rishiraj38 suggested changes May 4, 2026

View reviewed changes

fix(sistent): improve paginated table with MUI pagination and richer …

30ff088

…data Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

Merge branch 'master' into fix/sistent-table-docs

6127af9

Rajesh-Nagarajan-11 reviewed May 4, 2026

View reviewed changes

fix(sistent): rewrite all table demos using ResponsiveDataTable from …

f9072a7

…@sistent/sistent Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 force-pushed the fix/sistent-table-docs branch from 8c74237 to f9072a7 Compare May 5, 2026 21:01

fix(sistent): use client-side only import for ResponsiveDataTable to …

da58a9a

…fix SSR Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 force-pushed the fix/sistent-table-docs branch from 1a7608f to da58a9a Compare May 6, 2026 07:02

kanishksingh23 added 2 commits May 6, 2026 07:41

fix(sistent): guard ResponsiveDataTable demos against SSR with mounte…

c30f63d

…d check Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

fix(sistent): move mounted check after all hooks to fix React hooks o…

b253725

…rder Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 requested review from Rajesh-Nagarajan-11 and rishiraj38 May 6, 2026 10:59

rishiraj38 mentioned this pull request May 7, 2026

feat(sistent): add Table component documentation #7610

Closed

rishiraj38 suggested changes May 7, 2026

View reviewed changes

rishiraj38 mentioned this pull request May 7, 2026

[Sistent] Add Data Table component to the Sistent components page #7681

Closed

fix(sistent): fix selectable rows state and replace names with generi…

c8859df

…c ones Signed-off-by: kanishksingh23 <kanishksingh763@gmail.com>

kanishksingh23 force-pushed the fix/sistent-table-docs branch from 7e738ae to c8859df Compare May 7, 2026 15:43

Merge branch 'master' into fix/sistent-table-docs

066def3


		The Table component organizes information into rows and columns, making it easy for users to read, compare, and analyze data. Use a Table when displaying multiple records with consistent attributes such as services, users, or deployments, when users need to compare values across rows or columns, or when data needs sorting, filtering, or pagination for large data sets.

		## Anatomy

Conversation

kanishksingh23 commented May 2, 2026

Changes

Uh oh!

github-actions Bot commented May 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rishiraj38 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kanishksingh23 commented May 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Bhumikagarggg commented May 3, 2026

Uh oh!

rishiraj38 left a comment

Choose a reason for hiding this comment

Uh oh!

kanishksingh23 commented May 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kanishksingh23 commented May 6, 2026

Uh oh!

kanishksingh23 commented May 7, 2026

Uh oh!

rishiraj38 left a comment

Choose a reason for hiding this comment

Uh oh!

rishiraj38 commented May 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Rajesh-Nagarajan-11 commented May 7, 2026

Uh oh!

kanishksingh23 commented May 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions Bot commented May 2, 2026 •

edited

Loading

rishiraj38 commented May 7, 2026 •

edited

Loading