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

[rishiraj38]

Current Behavior

Layer5 and its projects use the Sistent library to enable easy component reusability. One of the most critical and frequently used components is the ResponsiveDataTable.
Currently, this component lacks representation on our centralized components page. Maintaining consistent usage and example documentation is essential for aiding new contributors.

Technical Context

The ResponsiveDataTable is a high-level wrapper around @sistent/mui-datatables (a Layer5-maintained fork). This documentation should focus on how to use the Sistent wrapper while linking to the upstream library for advanced property references.

Desired Behavior

Add documentation for the Data Table component following the Sistent MDX structure. Create a new directory at src/collections/sistent/components/data-table/ with the following files:

1. index.mdx: Overview of the component and its purpose (managing complex datasets).
2. guidance.mdx: Best practices for usage, column labeling, and responsiveness.
3. code.mdx: Live code examples using <ThemeWrapper> and <CodeBlock>. Examples should include:
   • Basic Data Table (Sorting/Pagination).
   • Column Visibility Control.
   • Custom Cell Rendering (e.g., dates).

Reference Implementation

A contributor can find the source logic and current usage here:

• Component Source: src/custom/ResponsiveDataTable.tsx
• Underlying Library: layer5io/mui-datatables
• Usage Example: src/custom/UsersTable/UsersTable.tsx

Template Reference

You can follow the existing Button component documentation for structure and style.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 🎨 See Sistent Repository.
• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[rishiraj38]

@Rajesh-Nagarajan-11 ^^

[indevi]

I will take this up

[RajGajjar-01]

Let me work on this one

[SKMahesh15]

Hey. I would like to work on this issue

[lightyear256]

I’d like to work on this issue. Please assign it to me if it’s still open. Thanks!

[varsha-0007]

hey,
I'd like to work on this issue could you please assign it to me?

[raymondoyondi]

I'd like to work on this issue. Can you assign this to me please?

[snakefood3232]

I see the need to add the ResponsiveDataTable to the centralized components page for better documentation and consistency. I'd handle this by creating the index.mdx, guidance.mdx, and code.mdx files with examples like sorting, column visibility, and custom cell rendering within the next three days. I've built similar component documentation using React and MDX before, ensuring clear guidance for new contributors.